diff --git a/.lighthouserc.json b/.lighthouserc.json
index 2c6d8109..0e1d7f3f 100644
--- a/.lighthouserc.json
+++ b/.lighthouserc.json
@@ -1,14 +1,13 @@
 {
-    "ci": {
-      "collect": {
-        "staticDistDir": "./public"
-      },
-      "assert": {
-        "assertions": {}
-      },
-      "upload": {
-        "target": "temporary-public-storage"
-      }
+  "ci": {
+    "collect": {
+      "staticDistDir": "./public"
+    },
+    "assert": {
+      "assertions": {}
+    },
+    "upload": {
+      "target": "temporary-public-storage"
     }
+  }
 }
-  
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..3d3b816c
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,44 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Testing
+coverage
+
+# Next.js
+.next/
+out/
+build
+dist
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Vercel
+.vercel
+
+# Typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# PWA
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map 
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..93940df9
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,28 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto",
+  "plugins": ["prettier-plugin-tailwindcss", "@ianvs/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^@/types/(.*)$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/hooks/(.*)$",
+    "^@/components/ui/(.*)$",
+    "^@/components/(.*)$",
+    "^@/styles/(.*)$",
+    "^@/app/(.*)$",
+    "",
+    "^[./]"
+  ],
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
+} 
\ No newline at end of file
diff --git a/components.json b/components.json
index 3a63489a..13feb79d 100644
--- a/components.json
+++ b/components.json
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index 81606c97..223d88f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -154,6 +154,7 @@
       "devDependencies": {
         "@dnd-kit/utilities": "^3.2.2",
         "@faker-js/faker": "^8.4.1",
+        "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
         "@next/bundle-analyzer": "^15.0.3",
         "@types/d3-shape": "^3.1.6",
         "@types/geojson": "^7946.0.15",
@@ -167,6 +168,8 @@
         "eslint": "^8",
         "eslint-config-next": "14.2.3",
         "postcss": "^8",
+        "prettier": "^3.5.3",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^3.4.4",
         "typescript": "^5"
       }
@@ -1259,6 +1262,28 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@ianvs/prettier-plugin-sort-imports": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@ianvs/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.4.1.tgz",
+      "integrity": "sha512-F0/Hrcfpy8WuxlQyAWJTEren/uxKhYonOGY4OyWmwRdeTvkh9mMSCxowZLjNkhwi/2ipqCgtXwwOk7tW0mWXkA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/generator": "^7.26.2",
+        "@babel/parser": "^7.26.2",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
+        "semver": "^7.5.2"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "2.7.x || 3.x",
+        "prettier": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@iconify/react": {
       "version": "5.1.0",
       "license": "MIT",
@@ -1643,6 +1668,126 @@
         "glob": "10.3.10"
       }
     },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
+      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
+      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
+      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
+      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
+      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
+      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
+      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
+      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@next/swc-win32-x64-msvc": {
       "version": "14.2.3",
       "cpu": [
@@ -13113,6 +13258,99 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-format": {
       "version": "26.6.2",
       "license": "MIT",
@@ -18480,126 +18718,6 @@
       "engines": {
         "node": ">=12.20"
       }
-    },
-    "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
-      "integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
-      "integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
-      "integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
-      "integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
-      "integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
-      "integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
-      "integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
-      "integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index aad5b1ed..fff7b700 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier --write \"**/*.{ts,tsx,md,js,jsx,json}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,md,js,jsx,json}\""
   },
   "dependencies": {
     "@ckeditor/ckeditor5-react": "^6.2.0",
@@ -155,6 +157,7 @@
   "devDependencies": {
     "@dnd-kit/utilities": "^3.2.2",
     "@faker-js/faker": "^8.4.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@next/bundle-analyzer": "^15.0.3",
     "@types/d3-shape": "^3.1.6",
     "@types/geojson": "^7946.0.15",
@@ -168,6 +171,8 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",
+    "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.4",
     "typescript": "^5"
   }
diff --git a/src/README.md b/src/README.md
index d9a04642..c48fcc68 100644
--- a/src/README.md
+++ b/src/README.md
@@ -43,30 +43,36 @@ src/
 ## Directory Purposes
 
 ### app/
+
 - Contains Next.js App Router pages and layouts
 - Organized by route groups and features
 - Each route can have its own loading, error, and layout components
 
 ### components/
+
 - `ui/`: Reusable UI components that are not specific to any feature
 - `features/`: Components that are specific to features/domains of the application
 
 ### lib/
+
 - Shared utilities and core functionality
 - No component logic, only pure functions and utilities
 - Organized by domain (api, auth, etc.)
 
 ### styles/
+
 - Global styles and theme configuration
 - CSS modules and styled components
 - Theme variables and configurations
 
 ### config/
+
 - Application-wide configuration
 - Environment variables
 - Site metadata
 
 ### i18n/
+
 - Internationalization configuration
 - Translation files
 - Language utilities
@@ -74,21 +80,25 @@ src/
 ## Best Practices
 
 1. **Component Organization**
+
    - Keep components small and focused
    - Use index.ts files for clean exports
    - Co-locate tests with components
 
 2. **Code Splitting**
+
    - Use dynamic imports for large components
    - Lazy load routes and features
    - Keep bundle sizes small
 
 3. **Type Safety**
+
    - Use TypeScript strictly
    - Define types in appropriate domains
    - Share types across related features
 
 4. **State Management**
+
    - Use React Context for global state
    - Keep state close to where it's used
    - Avoid prop drilling
@@ -96,4 +106,4 @@ src/
 5. **Testing**
    - Co-locate tests with implementation
    - Use meaningful test descriptions
-   - Test user interactions and edge cases 
\ No newline at end of file
+   - Test user interactions and edge cases
diff --git a/src/action/app-actions.ts b/src/action/app-actions.ts
index 0fb80fd0..6e8a7a9a 100644
--- a/src/action/app-actions.ts
+++ b/src/action/app-actions.ts
@@ -1,12 +1,12 @@
-'use server'
-import { redirect } from "next/navigation";
+"use server";
+
 import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
 import { postMessage } from "@/app/[locale]/(protected)/app/chat/utils";
 
-
-export const  postMessageAction = async (id: string, message: string,) => {
-    const response = await postMessage(id, message)
-    revalidatePath("/");
-     return response;
-   
-}
+export const postMessageAction = async (id: string, message: string) => {
+  const response = await postMessage(id, message);
+  revalidatePath("/");
+  return response;
+};
diff --git a/src/action/auth-action.ts b/src/action/auth-action.ts
index 03c93a23..5120c807 100644
--- a/src/action/auth-action.ts
+++ b/src/action/auth-action.ts
@@ -1,6 +1,8 @@
-'use server'
-import { redirect } from "next/navigation";
+"use server";
+
 import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
 export const loginUser = async (data: any) => {
   try {
     const response = undefined;
@@ -13,4 +15,4 @@ export const loginUser = async (data: any) => {
   } catch (error) {
     throw new Error(error as string);
   }
-};
\ No newline at end of file
+};
diff --git a/src/app/[locale]/(protected)/admin/add-experts/component/column.tsx b/src/app/[locale]/(protected)/admin/add-experts/component/column.tsx
index 41a1969a..89fbddfa 100644
--- a/src/app/[locale]/(protected)/admin/add-experts/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/add-experts/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
diff --git a/src/app/[locale]/(protected)/admin/add-experts/component/table.tsx b/src/app/[locale]/(protected)/admin/add-experts/component/table.tsx
index b785f6b9..a4708c35 100644
--- a/src/app/[locale]/(protected)/admin/add-experts/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/add-experts/component/table.tsx
@@ -1,31 +1,34 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { UserIcon } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { listDataExperts } from "@/lib/services/experts/experts";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -36,24 +39,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
-import { listDataExperts } from "@/lib/services/experts/experts";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 
 const dummyData = [
   {
@@ -80,11 +77,8 @@ const AddExpertTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -228,22 +222,11 @@ const AddExpertTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -257,10 +240,7 @@ const AddExpertTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -290,11 +270,7 @@ const AddExpertTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/add-experts/create/page.tsx b/src/app/[locale]/(protected)/admin/add-experts/create/page.tsx
index 939d6e33..1fad20cc 100644
--- a/src/app/[locale]/(protected)/admin/add-experts/create/page.tsx
+++ b/src/app/[locale]/(protected)/admin/add-experts/create/page.tsx
@@ -1,5 +1,22 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Eye, EyeOff } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { loading } from "@/config/swal";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListExperiences,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/lib/services/management-user/management-user";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -10,12 +27,6 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { useRouter } from "@/i18n/navigation";
 import {
   Select,
   SelectContent,
@@ -23,16 +34,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { useEffect, useState } from "react";
-import {
-  AdministrationLevelList,
-  getListCompetencies,
-  getListExperiences,
-  saveUserInternal,
-  saveUserRolePlacements,
-} from "@/lib/services/management-user/management-user";
-import { loading } from "@/config/swal";
-import { Eye, EyeOff } from "lucide-react";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   name: z.string({
@@ -84,9 +86,7 @@ export default function AddExpertForm() {
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordType = () => {
-    setPasswordType((prevType) =>
-      prevType === "password" ? "text" : "password"
-    );
+    setPasswordType((prevType) => (prevType === "password" ? "text" : "password"));
   };
 
   const roleSelection = [
@@ -209,15 +209,9 @@ export default function AddExpertForm() {
     });
   }
 
-  const handleSelectionChange = (
-    index: number,
-    type: "roleId" | "userLevelId",
-    value: string
-  ) => {
+  const handleSelectionChange = (index: number, type: "roleId" | "userLevelId", value: string) => {
     setPlacementRows((prevRows) =>
-      prevRows.map((row) =>
-        row.index === index ? { ...row, [type]: value } : row
-      )
+      prevRows.map((row) => (row.index === index ? { ...row, [type]: value } : row))
     );
   };
 
@@ -242,10 +236,7 @@ export default function AddExpertForm() {
       <SiteBreadcrumb />
 
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
           <p className="fonnt-semibold">Campaign</p>
           <FormField
             control={form.control}
@@ -406,11 +397,7 @@ export default function AddExpertForm() {
             <FormLabel>Posisi</FormLabel>
             {placementRows?.map((row: any) => (
               <div key={row.index} className="flex items-center gap-2 my-2">
-                <Select
-                  onValueChange={(e) =>
-                    handleSelectionChange(row.index, "roleId", e)
-                  }
-                >
+                <Select onValueChange={(e) => handleSelectionChange(row.index, "roleId", e)}>
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih Role" />
@@ -424,11 +411,7 @@ export default function AddExpertForm() {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select
-                  onValueChange={(e) =>
-                    handleSelectionChange(row.index, "userLevelId", e)
-                  }
-                >
+                <Select onValueChange={(e) => handleSelectionChange(row.index, "userLevelId", e)}>
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih User Level" />
diff --git a/src/app/[locale]/(protected)/admin/add-experts/page.tsx b/src/app/[locale]/(protected)/admin/add-experts/page.tsx
index ee867ef9..36c2001b 100644
--- a/src/app/[locale]/(protected)/admin/add-experts/page.tsx
+++ b/src/app/[locale]/(protected)/admin/add-experts/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import AddExpertTable from "./component/table";
 
 export default function AddExpert() {
diff --git a/src/app/[locale]/(protected)/admin/analysis/content-management/page.tsx b/src/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
index 12848a23..55356663 100644
--- a/src/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
+++ b/src/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
@@ -1,25 +1,23 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useState } from "react";
+import { addDays, format } from "date-fns";
+import Cookies from "js-cookie";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useEffect, useState } from "react";
-import { addDays, format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { DateRange } from "react-day-picker";
-import Cookies from "js-cookie";
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const users = [
   { id: 1, name: "POLRI" },
diff --git a/src/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx b/src/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
index f21356d5..db80a089 100644
--- a/src/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
+++ b/src/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
@@ -1,25 +1,23 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useState } from "react";
+import { addDays, format } from "date-fns";
+import Cookies from "js-cookie";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useEffect, useState } from "react";
-import { addDays, format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { DateRange } from "react-day-picker";
-import Cookies from "js-cookie";
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const users = [
   { id: 1, name: "POLRI" },
@@ -82,12 +80,7 @@ export default function EmergencyIssue() {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-3">
-        <Accordion
-          id="feedback-center"
-          type="single"
-          collapsible
-          className="w-full"
-        >
+        <Accordion id="feedback-center" type="single" collapsible className="w-full">
           <AccordionItem value="item-1" className="bg-white w-full">
             <AccordionTrigger className="bg-white">
               ANALISA BERKAITAN DENGAN AKUN PELAPOR{" "}
diff --git a/src/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx b/src/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
index 76d690f5..651bdc35 100644
--- a/src/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
+++ b/src/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
@@ -1,25 +1,23 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useState } from "react";
+import { addDays, format } from "date-fns";
+import Cookies from "js-cookie";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useEffect, useState } from "react";
-import { addDays, format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { DateRange } from "react-day-picker";
-import Cookies from "js-cookie";
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const users = [
   { id: 1, name: "POLRI" },
@@ -83,16 +81,9 @@ export default function FeedbackCenter() {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-3">
-        <Accordion
-          id="feedback-center"
-          type="single"
-          collapsible
-          className="w-full"
-        >
+        <Accordion id="feedback-center" type="single" collapsible className="w-full">
           <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
-              TICKET PADA FEEDBACK CENTER{" "}
-            </AccordionTrigger>
+            <AccordionTrigger className="bg-white">TICKET PADA FEEDBACK CENTER </AccordionTrigger>
             <AccordionContent>
               <div className="flex flex-col">
                 <div className="my-5">
diff --git a/src/app/[locale]/(protected)/admin/analysis/schedule/page.tsx b/src/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
index 0a59f5a1..09249769 100644
--- a/src/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
+++ b/src/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
@@ -1,25 +1,23 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useState } from "react";
+import { addDays, format } from "date-fns";
+import Cookies from "js-cookie";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useEffect, useState } from "react";
-import { addDays, format } from "date-fns";
-import { Calendar as CalendarIcon } from "lucide-react";
-import { DateRange } from "react-day-picker";
-import Cookies from "js-cookie";
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 export default function ContentManagement() {
   const [startDate, setStartDate] = useState<any>(new Date());
@@ -108,12 +106,7 @@ export default function ContentManagement() {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-3">
-        <Accordion
-          id="schedule-press-conference"
-          type="single"
-          collapsible
-          className="w-full"
-        >
+        <Accordion id="schedule-press-conference" type="single" collapsible className="w-full">
           <AccordionItem value="item-1" className="bg-white w-full">
             <AccordionTrigger className="bg-white">
               PUBLISH JADWAL PRESS CONFERENCE TERBANYAK
@@ -141,12 +134,7 @@ export default function ContentManagement() {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        <Accordion
-          id="content-press-conference"
-          type="single"
-          collapsible
-          className="w-full"
-        >
+        <Accordion id="content-press-conference" type="single" collapsible className="w-full">
           <AccordionItem value="item-1" className="bg-white w-full">
             <AccordionTrigger className="bg-white">
               JUMLAH PRODUKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
@@ -174,12 +162,7 @@ export default function ContentManagement() {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        <Accordion
-          id="interaction-press-conference"
-          type="single"
-          collapsible
-          className="w-full"
-        >
+        <Accordion id="interaction-press-conference" type="single" collapsible className="w-full">
           <AccordionItem value="item-1" className="bg-white w-full">
             <AccordionTrigger className="bg-white">
               TINGKAT INTERAKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
@@ -207,12 +190,7 @@ export default function ContentManagement() {
             </AccordionContent>
           </AccordionItem>
         </Accordion>
-        <Accordion
-          id="press-release"
-          type="single"
-          collapsible
-          className="w-full"
-        >
+        <Accordion id="press-release" type="single" collapsible className="w-full">
           <AccordionItem value="item-1" className="bg-white w-full">
             <AccordionTrigger className="bg-white">
               AKTIFITAS MEDIA BERKAITAN DENGAN PERS RILIS
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx
index 2fd55f2b..a9ae5780 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx
@@ -1,22 +1,21 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading } from "@/config/swal";
+import { deleteMediaBlastAccount } from "@/lib/services/broadcast/broadcast";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import Swal from "sweetalert2";
-
-import { Link, useRouter } from "@/i18n/navigation";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { deleteMediaBlastAccount } from "@/lib/services/broadcast/broadcast";
 import { useToast } from "@/components/ui/use-toast";
 
 const columns: ColumnDef<any>[] = [
@@ -29,30 +28,22 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "accountName",
     header: "Nama",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("accountName")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("accountName")}</span>,
   },
   {
     accessorKey: "accountType",
     header: "Tipe Akun",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("accountType")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("accountType")}</span>,
   },
   {
     accessorKey: "accountCategory",
     header: "Kategory",
-    cell: ({ row }) => (
-      <span className="uppercase">{row.getValue("accountCategory")}</span>
-    ),
+    cell: ({ row }) => <span className="uppercase">{row.getValue("accountCategory")}</span>,
   },
   {
     accessorKey: "emailAddress",
     header: "Email",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("emailAddress")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("emailAddress")}</span>,
   },
   {
     accessorKey: "whatsappNumber",
@@ -112,9 +103,7 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.id}`}
-              >
+              <Link href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.id}`}>
                 Edit
               </Link>
             </DropdownMenuItem>
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
index f9befda7..5d03e30a 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx
@@ -1,21 +1,29 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
+import { UserIcon } from "lucide-react";
 
+import { close, loading } from "@/config/swal";
+import { getMediaBlastAccountPage } from "@/lib/services/broadcast/broadcast";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Table,
   TableBody,
@@ -24,21 +32,9 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { UserIcon } from "lucide-react";
-
-import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./column";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { getMediaBlastAccountPage } from "@/lib/services/broadcast/broadcast";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
-import { Icon } from "@iconify/react/dist/iconify.js";
 
 const AccountListTable = () => {
   const router = useRouter();
@@ -46,11 +42,8 @@ const AccountListTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -95,10 +88,7 @@ const AccountListTable = () => {
   async function fetchData() {
     try {
       loading();
-      const res = await getMediaBlastAccountPage(
-        page - 1,
-        filtered ? filtered.join(",") : ""
-      );
+      const res = await getMediaBlastAccountPage(page - 1, filtered ? filtered.join(",") : "");
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -155,10 +145,7 @@ const AccountListTable = () => {
             <div className="flex flex-col gap-2 px-2">
               <div className="flex justify-between text-sm">
                 <p>Filter</p>
-                <a
-                  onClick={() => fetchData()}
-                  className="cursor-pointer text-primary"
-                >
+                <a onClick={() => fetchData()} className="cursor-pointer text-primary">
                   Simpan
                 </a>
               </div>
@@ -180,9 +167,7 @@ const AccountListTable = () => {
                   <Checkbox
                     id="accepted"
                     checked={filtered.includes("jurnalis")}
-                    onCheckedChange={(e) =>
-                      handleFilter("jurnalis", Boolean(e))
-                    }
+                    onCheckedChange={(e) => handleFilter("jurnalis", Boolean(e))}
                   />
                   <label
                     htmlFor="accepted"
@@ -230,10 +215,7 @@ const AccountListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -263,11 +245,7 @@ const AccountListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx
index 2dbe85ae..2f822ffd 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx
@@ -1,8 +1,21 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
+
+import { useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import { saveMediaBlastAccount, saveMediaBlastCampaign } from "@/lib/services/broadcast/broadcast";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Form,
   FormControl,
@@ -12,38 +25,18 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  saveMediaBlastAccount,
-  saveMediaBlastCampaign,
-} from "@/lib/services/broadcast/broadcast";
-import { error } from "@/config/swal";
-import { useRouter } from "@/i18n/navigation";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   name: z.string({
     required_error: "Required",
   }),
-  accountType: z
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
+  accountType: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
   accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
     required_error: "Required",
   }),
@@ -114,10 +107,7 @@ export default function CreateAccountForBroadcast() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
           <p className="fonnt-semibold">Account</p>
           <FormField
             control={form.control}
@@ -125,11 +115,7 @@ export default function CreateAccountForBroadcast() {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Nama</FormLabel>
-                <Input
-                  value={field.value}
-                  placeholder="Masukkan nama"
-                  onChange={field.onChange}
-                />
+                <Input value={field.value} placeholder="Masukkan nama" onChange={field.onChange} />
 
                 <FormMessage />
               </FormItem>
@@ -159,17 +145,11 @@ export default function CreateAccountForBroadcast() {
                               onCheckedChange={(checked) => {
                                 return checked
                                   ? field.onChange([...field.value, "wa"])
-                                  : field.onChange(
-                                      field.value?.filter(
-                                        (value) => value !== "wa"
-                                      )
-                                    );
+                                  : field.onChange(field.value?.filter((value) => value !== "wa"));
                               }}
                             />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Whatsapp
-                          </FormLabel>
+                          <FormLabel className="font-normal">Whatsapp</FormLabel>
                         </FormItem>
                       );
                     }}
@@ -191,9 +171,7 @@ export default function CreateAccountForBroadcast() {
                                 return checked
                                   ? field.onChange([...field.value, "email"])
                                   : field.onChange(
-                                      field.value?.filter(
-                                        (value) => value !== "email"
-                                      )
+                                      field.value?.filter((value) => value !== "email")
                                     );
                               }}
                             />
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx
index 2b6b8d3b..0bb3ae67 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx
@@ -1,8 +1,27 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
+
+import { useEffect } from "react";
+import { useParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import {
+  getMediaBlastAccount,
+  saveMediaBlastAccount,
+  saveMediaBlastCampaign,
+} from "@/lib/services/broadcast/broadcast";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Form,
   FormControl,
@@ -12,41 +31,18 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMediaBlastAccount,
-  saveMediaBlastAccount,
-  saveMediaBlastCampaign,
-} from "@/lib/services/broadcast/broadcast";
-import { error } from "@/config/swal";
-import { useRouter } from "@/i18n/navigation";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { useParams } from "next/navigation";
-import { useEffect } from "react";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   name: z.string({
     required_error: "Required",
   }),
-  accountType: z
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
+  accountType: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
   accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
     required_error: "Required",
   }),
@@ -134,10 +130,7 @@ export default function EditAccountForBroadcast() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
           <p className="fonnt-semibold">Account</p>
           <FormField
             control={form.control}
@@ -145,11 +138,7 @@ export default function EditAccountForBroadcast() {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Nama</FormLabel>
-                <Input
-                  value={field.value}
-                  placeholder="Masukkan nama"
-                  onChange={field.onChange}
-                />
+                <Input value={field.value} placeholder="Masukkan nama" onChange={field.onChange} />
 
                 <FormMessage />
               </FormItem>
@@ -178,17 +167,11 @@ export default function EditAccountForBroadcast() {
                               onCheckedChange={(checked) => {
                                 return checked
                                   ? field.onChange([...field.value, "wa"])
-                                  : field.onChange(
-                                      field.value?.filter(
-                                        (value) => value !== "wa"
-                                      )
-                                    );
+                                  : field.onChange(field.value?.filter((value) => value !== "wa"));
                               }}
                             />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Whatsapp
-                          </FormLabel>
+                          <FormLabel className="font-normal">Whatsapp</FormLabel>
                         </FormItem>
                       );
                     }}
@@ -210,9 +193,7 @@ export default function EditAccountForBroadcast() {
                                 return checked
                                   ? field.onChange([...field.value, "email"])
                                   : field.onChange(
-                                      field.value?.filter(
-                                        (value) => value !== "email"
-                                      )
+                                      field.value?.filter((value) => value !== "email")
                                     );
                               }}
                             />
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/page.tsx
index 1a4c0259..4213aad6 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import AccountListTable from "./component/table";
 
 export default function AdminCampaignList() {
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
index 0cca7573..805c0ca0 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx
@@ -1,18 +1,17 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-import { Link, useRouter } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -24,9 +23,7 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Judul",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("title")}</span>,
   },
   {
     accessorKey: "sendTime",
@@ -43,15 +40,15 @@ const columns: ColumnDef<any>[] = [
           row.getValue("status") == "done"
             ? "bg-blue-500"
             : row.getValue("status") == "waiting"
-            ? "bg-yellow-400"
-            : "bg-red-600"
+              ? "bg-yellow-400"
+              : "bg-red-600"
         }`}
       >
         {row.getValue("status") == "done"
           ? "Selesai"
           : row.getValue("status") == "waiting"
-          ? "Proses"
-          : "Gagal"}
+            ? "Proses"
+            : "Gagal"}
       </Badge>
     ),
   },
@@ -74,18 +71,10 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
-              >
-                Edit
-              </Link>
+              <Link href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}>Edit</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
               <a>Delete</a>
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
index 7d14a6fd..4c4bc35a 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,18 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { getMediaBlastCampaignPage, listDataMedia } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,39 +50,28 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  getMediaBlastCampaignPage,
-  listDataMedia,
-} from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
 import { NewCampaignIcon } from "@/components/icon";
 
+import columns from "./column";
+
 const CampaignListTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -170,10 +161,7 @@ const CampaignListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -203,11 +191,7 @@ const CampaignListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
index 07bb229b..39002bd9 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx
@@ -1,8 +1,20 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
+
+import { useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import { saveMediaBlastCampaign } from "@/lib/services/broadcast/broadcast";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -12,23 +24,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { getOnlyDate } from "@/lib/utils/globals";
-import { saveMediaBlastCampaign } from "@/lib/services/broadcast/broadcast";
-import { error } from "@/config/swal";
-import { useRouter } from "@/i18n/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -99,10 +97,7 @@ export default function CreateCampaign() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
           <p className="fonnt-semibold">Campaign</p>
           <FormField
             control={form.control}
@@ -110,11 +105,7 @@ export default function CreateCampaign() {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Judul</FormLabel>
-                <Input
-                  value={field.value}
-                  placeholder="Masukkan Judul"
-                  onChange={field.onChange}
-                />
+                <Input value={field.value} placeholder="Masukkan Judul" onChange={field.onChange} />
 
                 <FormMessage />
               </FormItem>
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
index 08029170..5a7c41af 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx
@@ -1,8 +1,25 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
+
+import { useEffect } from "react";
+import { useParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import {
+  getMediaBlastCampaignById,
+  saveMediaBlastCampaign,
+} from "@/lib/services/broadcast/broadcast";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -12,28 +29,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMediaBlastCampaignById,
-  saveMediaBlastCampaign,
-} from "@/lib/services/broadcast/broadcast";
-import { error } from "@/config/swal";
-import { useRouter } from "@/i18n/navigation";
-import { useParams } from "next/navigation";
-import { useEffect } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -128,10 +126,7 @@ export default function EditCampaign() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
           <p className="fonnt-semibold">Campaign</p>
           <FormField
             control={form.control}
@@ -139,11 +134,7 @@ export default function EditCampaign() {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Judul</FormLabel>
-                <Input
-                  value={field.value}
-                  placeholder="Masukkan Judul"
-                  onChange={field.onChange}
-                />
+                <Input value={field.value} placeholder="Masukkan Judul" onChange={field.onChange} />
 
                 <FormMessage />
               </FormItem>
diff --git a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/page.tsx
index 165fa9b0..11d8d52e 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/campaign-list/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/campaign-list/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import CampaignListTable from "./component/table";
 
 export default function AdminCampaignList() {
diff --git a/src/app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx
index 20241049..b4c778fe 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/email/[id]/page.tsx
@@ -1,5 +1,5 @@
-import ContentBlast from "@/components/features/form/broadcast/content-blast-form";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import ContentBlast from "@/components/features/form/broadcast/content-blast-form";
 
 export default function CreateEmailBlast() {
   return (
diff --git a/src/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx b/src/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
index e4a6c95a..a4a0fccf 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/email/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -57,9 +53,7 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "createdAt",
     header: "Tanggal Unggah",
-    cell: ({ row }) => (
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
-    ),
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
   },
 
   {
@@ -86,21 +80,13 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/email/${row.original.id}`}>
-                Email Blast
-              </Link>
+              <Link href={`/admin/broadcast/email/${row.original.id}`}>Email Blast</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
-                Whatsapp Blast
-              </Link>
+              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>Whatsapp Blast</Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx b/src/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
index c95186c7..3eb1e3d1 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/email/component/table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,18 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataMedia, listDataMediaBroadCast } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,26 +50,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  listDataMedia,
-  listDataMediaBroadCast,
-} from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
 
 const BroadcastEmailTable = () => {
   const router = useRouter();
@@ -78,11 +72,8 @@ const BroadcastEmailTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -228,22 +219,11 @@ const BroadcastEmailTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -257,10 +237,7 @@ const BroadcastEmailTable = () => {
               <div className="flex flex-col gap-2 px-2">
                 <div className="flex justify-between text-sm">
                   <p>Filter</p>
-                  <a
-                    onClick={() => fetchData()}
-                    className="cursor-pointer text-primary"
-                  >
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
                     Simpan
                   </a>
                 </div>
@@ -271,9 +248,7 @@ const BroadcastEmailTable = () => {
                       <Checkbox
                         id={category.id}
                         checked={categoryFilter.includes(category.id)}
-                        onCheckedChange={(e) =>
-                          handleChange("category", category.id, Boolean(e))
-                        }
+                        onCheckedChange={(e) => handleChange("category", category.id, Boolean(e))}
                       />
                       <label
                         htmlFor={category.id}
@@ -288,9 +263,7 @@ const BroadcastEmailTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(1)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 1, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 1, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -303,9 +276,7 @@ const BroadcastEmailTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(2)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 2, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 2, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -318,9 +289,7 @@ const BroadcastEmailTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 3, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -333,9 +302,7 @@ const BroadcastEmailTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 4, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -358,10 +325,7 @@ const BroadcastEmailTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -391,11 +355,7 @@ const BroadcastEmailTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/broadcast/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/page.tsx
index c71b8293..0b21a275 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/page.tsx
@@ -1,13 +1,15 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import BroadcastTable from "./email/component/table";
+
+import { useState } from "react";
+import { Link } from "@/i18n/navigation";
 import { PlusIcon } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import EscalationTable from "../../shared/communication/escalation/components/escalation-table";
 import InternalTable from "../../shared/communication/internal/components/internal-table";
-import { useState } from "react";
-import { Link } from "@/i18n/navigation";
-import { Button } from "@/components/ui/button";
+import BroadcastTable from "./email/component/table";
 import BroadcastEmailTable from "./email/component/table";
 import BroadcastWhatsAppTable from "./whatsapp/component/table";
 
@@ -22,11 +24,7 @@ export default function AdminBroadcast() {
             rounded="md"
             onClick={() => setTab("Email Blast")}
             className={` hover:text-white
-                ${
-                  tab === "Email Blast"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
+                ${tab === "Email Blast" ? "bg-black text-white " : "bg-white text-black "}`}
           >
             Email Blast
           </Button>
@@ -34,11 +32,7 @@ export default function AdminBroadcast() {
             rounded="md"
             onClick={() => setTab("WhatsApp Blast")}
             className={` hover:text-white
-                ${
-                  tab === "WhatsApp Blast"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
+                ${tab === "WhatsApp Blast" ? "bg-black text-white " : "bg-white text-black "}`}
           >
             WhatsApp Blast
           </Button>
diff --git a/src/app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx b/src/app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx
index b278b0fd..55f6e463 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx
@@ -1,5 +1,5 @@
-import ContentBlast from "@/components/features/form/broadcast/content-blast-form";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import ContentBlast from "@/components/features/form/broadcast/content-blast-form";
 
 export default function CreateWABlast() {
   return (
diff --git a/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx b/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
index e93d83c6..1a593ab2 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -52,9 +48,7 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "createdAt",
     header: "Tanggal Unggah",
-    cell: ({ row }) => (
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
-    ),
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
   },
 
   {
@@ -81,21 +75,13 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/email/${row.original.id}`}>
-                Email Blast
-              </Link>
+              <Link href={`/admin/broadcast/email/${row.original.id}`}>Email Blast</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
-                Whatsapp Blast
-              </Link>
+              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>Whatsapp Blast</Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/table.tsx b/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/table.tsx
index 01dd2c58..e6c7e469 100644
--- a/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/broadcast/whatsapp/component/table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,18 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataMedia, listDataMediaBroadCast } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,26 +50,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  listDataMedia,
-  listDataMediaBroadCast,
-} from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
 
 const BroadcastWhatsAppTable = () => {
   const router = useRouter();
@@ -78,11 +72,8 @@ const BroadcastWhatsAppTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -228,22 +219,11 @@ const BroadcastWhatsAppTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -257,10 +237,7 @@ const BroadcastWhatsAppTable = () => {
               <div className="flex flex-col gap-2 px-2">
                 <div className="flex justify-between text-sm">
                   <p>Filter</p>
-                  <a
-                    onClick={() => fetchData()}
-                    className="cursor-pointer text-primary"
-                  >
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
                     Simpan
                   </a>
                 </div>
@@ -271,9 +248,7 @@ const BroadcastWhatsAppTable = () => {
                       <Checkbox
                         id={category.id}
                         checked={categoryFilter.includes(category.id)}
-                        onCheckedChange={(e) =>
-                          handleChange("category", category.id, Boolean(e))
-                        }
+                        onCheckedChange={(e) => handleChange("category", category.id, Boolean(e))}
                       />
                       <label
                         htmlFor={category.id}
@@ -288,9 +263,7 @@ const BroadcastWhatsAppTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(1)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 1, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 1, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -303,9 +276,7 @@ const BroadcastWhatsAppTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(2)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 2, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 2, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -318,9 +289,7 @@ const BroadcastWhatsAppTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 3, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -333,9 +302,7 @@ const BroadcastWhatsAppTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 4, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -358,10 +325,7 @@ const BroadcastWhatsAppTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -391,11 +355,7 @@ const BroadcastWhatsAppTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx b/src/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx
index 5701f89c..eb244293 100644
--- a/src/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx
@@ -1,12 +1,18 @@
 "use client";
 
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { identity } from "@fullcalendar/core/internal";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { z } from "zod";
 
+import { close, error, loading } from "@/config/swal";
+import { getUserById, saveUserInternal } from "@/lib/services/management-user/management-user";
 import { Button } from "@/components/ui/button";
-
 import {
   Form,
   FormControl,
@@ -15,21 +21,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-
-import {
-  getUserById,
-  saveUserInternal,
-} from "@/lib/services/management-user/management-user";
-import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import { Textarea } from "@/components/ui/textarea";
-import { Link, useRouter } from "@/i18n/navigation";
-
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
-import { identity } from "@fullcalendar/core/internal";
 
 const FormSchema = z.object({
   fullname: z.string({
@@ -151,10 +145,7 @@ export default function EditUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 bg-white p-10 w-full"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
           <p className="text-xl">Data Pengelola Media Hub</p>
 
           <FormField
@@ -183,12 +174,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan username"
-                    {...field}
-                    className="w-1/2"
-                    readOnly
-                  />
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" readOnly />
                 </FormControl>
 
                 <FormMessage />
diff --git a/src/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx b/src/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx
index 40c6a1e0..7326d324 100644
--- a/src/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx
@@ -1,13 +1,29 @@
 "use client";
 
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { identity } from "@fullcalendar/core/internal";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { z } from "zod";
 
+import { close, error, loading } from "@/config/swal";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  getUserById,
+  saveUserInternal,
+} from "@/lib/services/management-user/management-user";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Command,
   CommandEmpty,
@@ -24,26 +40,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  AdministrationLevelList,
-  getListCompetencies,
-  getListEducation,
-  getListSchools,
-  getUserById,
-  saveUserInternal,
-} from "@/lib/services/management-user/management-user";
-import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Link, useRouter } from "@/i18n/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import dynamic from "next/dynamic";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
@@ -51,11 +50,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
-import { identity } from "@fullcalendar/core/internal";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Textarea } from "@/components/ui/textarea";
 
 const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
   ssr: false,
@@ -189,10 +185,7 @@ export default function EditUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 bg-white p-10 w-full"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
           <p className="text-xl">Data Pengelola Media Hub</p>
 
           <FormField
@@ -202,11 +195,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Nama Lengkap</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan nama lengkap"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input placeholder="Masukkan nama lengkap" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -220,11 +209,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan username"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -278,12 +263,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input
-                    type="email"
-                    placeholder="Masukkan email"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input type="email" placeholder="Masukkan email" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
diff --git a/src/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx b/src/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
index 82606f40..5f51c35c 100644
--- a/src/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
+++ b/src/app/[locale]/(protected)/admin/management-user/internal/create/page.tsx
@@ -1,13 +1,26 @@
 "use client";
 
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+import { Link, useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { z } from "zod";
 
+import { close, error, loading } from "@/config/swal";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  saveUserInternal,
+} from "@/lib/services/management-user/management-user";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Command,
   CommandEmpty,
@@ -24,25 +37,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  AdministrationLevelList,
-  getListCompetencies,
-  getListEducation,
-  getListSchools,
-  saveUserInternal,
-} from "@/lib/services/management-user/management-user";
-import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Link, useRouter } from "@/i18n/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import dynamic from "next/dynamic";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
@@ -50,9 +47,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Textarea } from "@/components/ui/textarea";
 
 const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
   ssr: false,
@@ -339,10 +335,7 @@ export default function CreateUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 bg-white p-10 w-full"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
           <p className="text-xl">Data Pengelola Media Hub</p>
           <FormField
             control={form.control}
@@ -362,8 +355,7 @@ export default function CreateUserForm() {
                         )}
                       >
                         {field.value
-                          ? roleList.find((role) => role.value === field.value)
-                              ?.label
+                          ? roleList.find((role) => role.value === field.value)?.label
                           : "Pilih level"}
                         <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                       </Button>
@@ -387,9 +379,7 @@ export default function CreateUserForm() {
                               <Check
                                 className={cn(
                                   "ml-auto",
-                                  role.value === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
+                                  role.value === field.value ? "opacity-100" : "opacity-0"
                                 )}
                               />
                             </CommandItem>
@@ -410,11 +400,7 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Nama Lengkap</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan nama lengkap"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input placeholder="Masukkan nama lengkap" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -428,11 +414,7 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan username"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -453,16 +435,11 @@ export default function CreateUserForm() {
                     className="flex flex-wrap gap-3 w-1/2"
                   >
                     {roles.map((role) => (
-                      <FormItem
-                        key={role.id}
-                        className="flex items-center space-x-3 space-y-0"
-                      >
+                      <FormItem key={role.id} className="flex items-center space-x-3 space-y-0">
                         <FormControl>
                           <RadioGroupItem value={role.id} />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          {role.name}
-                        </FormLabel>
+                        <FormLabel className="font-normal">{role.name}</FormLabel>
                       </FormItem>
                     ))}
                   </RadioGroup>
@@ -494,9 +471,7 @@ export default function CreateUserForm() {
                             >
                               <FormControl>
                                 <Checkbox
-                                  checked={field.value?.includes(
-                                    String(item.typeId)
-                                  )}
+                                  checked={field.value?.includes(String(item.typeId))}
                                   onCheckedChange={(checked) => {
                                     return checked
                                       ? field.onChange([
@@ -505,16 +480,13 @@ export default function CreateUserForm() {
                                         ])
                                       : field.onChange(
                                           (field.value || []).filter(
-                                            (value) =>
-                                              value !== String(item.typeId)
+                                            (value) => value !== String(item.typeId)
                                           )
                                         );
                                   }}
                                 />
                               </FormControl>
-                              <FormLabel className="font-normal">
-                                {item.name}
-                              </FormLabel>
+                              <FormLabel className="font-normal">{item.name}</FormLabel>
                             </FormItem>
                           );
                         }}
@@ -614,12 +586,7 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
                 <FormControl>
-                  <Input
-                    type="number"
-                    placeholder="Masukkan NRP"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input type="number" placeholder="Masukkan NRP" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -653,12 +620,7 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input
-                    type="email"
-                    placeholder="Masukkan email"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input type="email" placeholder="Masukkan email" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
diff --git a/src/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx b/src/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx
index 2f4c3b48..0ee5ce5c 100644
--- a/src/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx
@@ -1,13 +1,28 @@
 "use client";
 
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { z } from "zod";
 
+import { close, error, loading } from "@/config/swal";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  getUserById,
+  saveUserInternal,
+} from "@/lib/services/management-user/management-user";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Command,
   CommandEmpty,
@@ -24,26 +39,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  AdministrationLevelList,
-  getListCompetencies,
-  getListEducation,
-  getListSchools,
-  getUserById,
-  saveUserInternal,
-} from "@/lib/services/management-user/management-user";
-import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Link, useRouter } from "@/i18n/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import dynamic from "next/dynamic";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
@@ -51,10 +49,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Textarea } from "@/components/ui/textarea";
 
 const sns = [
   {
@@ -364,10 +360,7 @@ export default function DetailUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 bg-white p-10 w-full"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
           <p className="text-xl">Data Pengelola Media Hub</p>
           <FormField
             control={form.control}
@@ -387,8 +380,7 @@ export default function DetailUserForm() {
                         )}
                       >
                         {field.value
-                          ? roleList.find((role) => role.value === field.value)
-                              ?.label
+                          ? roleList.find((role) => role.value === field.value)?.label
                           : "Pilih level"}
                         <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                       </Button>
@@ -412,9 +404,7 @@ export default function DetailUserForm() {
                               <Check
                                 className={cn(
                                   "ml-auto",
-                                  role.value === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
+                                  role.value === field.value ? "opacity-100" : "opacity-0"
                                 )}
                               />
                             </CommandItem>
@@ -454,12 +444,7 @@ export default function DetailUserForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan username"
-                    {...field}
-                    readOnly
-                    className="w-1/2"
-                  />
+                  <Input placeholder="Masukkan username" {...field} readOnly className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -481,16 +466,11 @@ export default function DetailUserForm() {
                     disabled
                   >
                     {roles.map((role) => (
-                      <FormItem
-                        key={role.id}
-                        className="flex items-center space-x-3 space-y-0"
-                      >
+                      <FormItem key={role.id} className="flex items-center space-x-3 space-y-0">
                         <FormControl>
                           <RadioGroupItem value={role.id} />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          {role.name}
-                        </FormLabel>
+                        <FormLabel className="font-normal">{role.name}</FormLabel>
                       </FormItem>
                     ))}
                   </RadioGroup>
@@ -523,9 +503,7 @@ export default function DetailUserForm() {
                               <FormControl>
                                 <Checkbox
                                   disabled
-                                  checked={field.value?.includes(
-                                    String(item.typeId)
-                                  )}
+                                  checked={field.value?.includes(String(item.typeId))}
                                   onCheckedChange={(checked) => {
                                     return checked
                                       ? field.onChange([
@@ -534,16 +512,13 @@ export default function DetailUserForm() {
                                         ])
                                       : field.onChange(
                                           (field.value || []).filter(
-                                            (value) =>
-                                              value !== String(item.typeId)
+                                            (value) => value !== String(item.typeId)
                                           )
                                         );
                                   }}
                                 />
                               </FormControl>
-                              <FormLabel className="font-normal">
-                                {item.name}
-                              </FormLabel>
+                              <FormLabel className="font-normal">{item.name}</FormLabel>
                             </FormItem>
                           );
                         }}
@@ -565,11 +540,7 @@ export default function DetailUserForm() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Pendidikan Terakhir</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      value={field.value}
-                      disabled
-                    >
+                    <Select onValueChange={field.onChange} value={field.value} disabled>
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue />
@@ -594,11 +565,7 @@ export default function DetailUserForm() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Universitas / Perguruan Tinggi</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      value={field.value}
-                      disabled
-                    >
+                    <Select onValueChange={field.onChange} value={field.value} disabled>
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue />
@@ -623,11 +590,7 @@ export default function DetailUserForm() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Kompetensi</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      value={field.value}
-                      disabled
-                    >
+                    <Select onValueChange={field.onChange} value={field.value} disabled>
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue />
diff --git a/src/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx b/src/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx
index 433e3dd7..bab160df 100644
--- a/src/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx
@@ -1,13 +1,28 @@
 "use client";
 
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 import { z } from "zod";
 
+import { close, error, loading } from "@/config/swal";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  getUserById,
+  saveUserInternal,
+} from "@/lib/services/management-user/management-user";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Command,
   CommandEmpty,
@@ -24,26 +39,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  AdministrationLevelList,
-  getListCompetencies,
-  getListEducation,
-  getListSchools,
-  getUserById,
-  saveUserInternal,
-} from "@/lib/services/management-user/management-user";
-import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { Link, useRouter } from "@/i18n/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import dynamic from "next/dynamic";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
@@ -51,10 +49,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Textarea } from "@/components/ui/textarea";
 
 const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
   ssr: false,
@@ -367,10 +363,7 @@ export default function EditUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 bg-white p-10 w-full"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
           <p className="text-xl">Data Pengelola Media Hub</p>
           <FormField
             control={form.control}
@@ -390,8 +383,7 @@ export default function EditUserForm() {
                         )}
                       >
                         {field.value
-                          ? roleList.find((role) => role.value === field.value)
-                              ?.label
+                          ? roleList.find((role) => role.value === field.value)?.label
                           : "Pilih level"}
                         <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                       </Button>
@@ -415,9 +407,7 @@ export default function EditUserForm() {
                               <Check
                                 className={cn(
                                   "ml-auto",
-                                  role.value === field.value
-                                    ? "opacity-100"
-                                    : "opacity-0"
+                                  role.value === field.value ? "opacity-100" : "opacity-0"
                                 )}
                               />
                             </CommandItem>
@@ -438,11 +428,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Nama Lengkap</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan nama lengkap"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input placeholder="Masukkan nama lengkap" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -456,11 +442,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input
-                    placeholder="Masukkan username"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -481,16 +463,11 @@ export default function EditUserForm() {
                     className="flex flex-wrap gap-3 w-1/2"
                   >
                     {roles.map((role) => (
-                      <FormItem
-                        key={role.id}
-                        className="flex items-center space-x-3 space-y-0"
-                      >
+                      <FormItem key={role.id} className="flex items-center space-x-3 space-y-0">
                         <FormControl>
                           <RadioGroupItem value={role.id} />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          {role.name}
-                        </FormLabel>
+                        <FormLabel className="font-normal">{role.name}</FormLabel>
                       </FormItem>
                     ))}
                   </RadioGroup>
@@ -522,9 +499,7 @@ export default function EditUserForm() {
                             >
                               <FormControl>
                                 <Checkbox
-                                  checked={field.value?.includes(
-                                    String(item.typeId)
-                                  )}
+                                  checked={field.value?.includes(String(item.typeId))}
                                   onCheckedChange={(checked) => {
                                     return checked
                                       ? field.onChange([
@@ -533,16 +508,13 @@ export default function EditUserForm() {
                                         ])
                                       : field.onChange(
                                           (field.value || []).filter(
-                                            (value) =>
-                                              value !== String(item.typeId)
+                                            (value) => value !== String(item.typeId)
                                           )
                                         );
                                   }}
                                 />
                               </FormControl>
-                              <FormLabel className="font-normal">
-                                {item.name}
-                              </FormLabel>
+                              <FormLabel className="font-normal">{item.name}</FormLabel>
                             </FormItem>
                           );
                         }}
@@ -642,12 +614,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
                 <FormControl>
-                  <Input
-                    type="number"
-                    placeholder="Masukkan NRP"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input type="number" placeholder="Masukkan NRP" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
@@ -681,12 +648,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input
-                    type="email"
-                    placeholder="Masukkan email"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <Input type="email" placeholder="Masukkan email" {...field} className="w-1/2" />
                 </FormControl>
 
                 <FormMessage />
diff --git a/src/app/[locale]/(protected)/admin/management-user/page.tsx b/src/app/[locale]/(protected)/admin/management-user/page.tsx
index 5720bbc4..02c5d270 100644
--- a/src/app/[locale]/(protected)/admin/management-user/page.tsx
+++ b/src/app/[locale]/(protected)/admin/management-user/page.tsx
@@ -1,14 +1,16 @@
 "use client";
+
+import { useEffect, useState } from "react";
+import { Link, useRouter } from "@/i18n/navigation";
+import Cookies from "js-cookie";
+import { PlusIcon } from "lucide-react";
+
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import UserExternalTable from "@/components/features/table/management-user/management-user-external-table";
 import UserInternalTable from "@/components/features/table/management-user/management-user-internal-table";
-import { Button } from "@/components/ui/button";
 import ManagementUserVisualization from "@/components/features/visualization/management-user-viz";
-import { Link, useRouter } from "@/i18n/navigation";
-import { PlusIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import Cookies from "js-cookie";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
 
 export default function ManagementUser() {
   const [isInternal, setIsInternal] = useState(true);
@@ -38,9 +40,7 @@ export default function ManagementUser() {
 
       <section className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5">
         <div className="flex justify-between py-3">
-          <p className="text-lg">
-            Data User {isInternal ? "Internal" : "Eksternal"}
-          </p>
+          <p className="text-lg">Data User {isInternal ? "Internal" : "Eksternal"}</p>
           {isInternal && (
             <Link href="/admin/management-user/internal/create">
               <Button color="primary" size="md">
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/component/column.tsx b/src/app/[locale]/(protected)/admin/media-tracking/component/column.tsx
index dd0f8140..3cb86235 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -43,8 +39,7 @@ const columns: ColumnDef<any>[] = [
     header: "Tanggal",
     cell: ({ row }) => (
       <span>
-        {row.original.startDate.split(" ")[0]} -{" "}
-        {row.original.endDate.split(" ")[0]}
+        {row.original.startDate.split(" ")[0]} - {row.original.endDate.split(" ")[0]}
       </span>
     ),
   },
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx b/src/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx
index 0b87a23d..32a89130 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/component/modal.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { close, error, loading, successCallback } from "@/config/swal";
+import {
+  listData5Data,
+  listDataAllNonPagination,
+  mediaTrackingSave,
+} from "@/lib/services/media-tracking/media-tracking";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -10,20 +20,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { toast } from "sonner";
-
 import { Input } from "@/components/ui/input";
-import { close, error, loading, successCallback } from "@/config/swal";
-import {
-  listData5Data,
-  listDataAllNonPagination,
-  mediaTrackingSave,
-} from "@/lib/services/media-tracking/media-tracking";
-import { useEffect, useState } from "react";
 
-export default function TrackingMediaModal(props: {
-  triggerFetch: () => void;
-}) {
+export default function TrackingMediaModal(props: { triggerFetch: () => void }) {
   const [content, setContent] = useState<any>([]);
   const [inputValue, setInputValue] = useState("");
   const [selectedId, setSelectedId] = useState(0);
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/component/table.tsx b/src/app/[locale]/(protected)/admin/media-tracking/component/table.tsx
index d401c0fc..99ac06dc 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/component/table.tsx
@@ -1,30 +1,24 @@
 "use client";
 
+import { group } from "console";
+import { link } from "fs";
+import { title } from "process";
 import * as React from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import router from "next/router";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -38,7 +32,22 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { listDataAll } from "@/lib/services/landing/landing";
+import { getMediaTracking } from "@/lib/services/media-tracking/media-tracking";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -48,33 +57,25 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { close, loading } from "@/config/swal";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { link } from "fs";
-import { listDataAll } from "@/lib/services/landing/landing";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import SearchAudioComponent from "@/components/features/form/media-tracking/search-audio-card";
+import SearchDocumentComponent from "@/components/features/form/media-tracking/search-document-card";
 import SearchImageComponent from "@/components/features/form/media-tracking/search-image-card";
 import SearchVideoComponent from "@/components/features/form/media-tracking/search-video-card";
-import SearchDocumentComponent from "@/components/features/form/media-tracking/search-document-card";
-import SearchAudioComponent from "@/components/features/form/media-tracking/search-audio-card";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 import TrackingMediaModal from "./modal";
-import { getMediaTracking } from "@/lib/services/media-tracking/media-tracking";
-import { group } from "console";
-import router from "next/router";
-import { title } from "process";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
 
 const NewsTable = () => {
   const router = useRouter();
@@ -84,13 +85,10 @@ const NewsTable = () => {
   const [categories, setCategories] = React.useState<any>();
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [showTable, setShowTable] = React.useState(false);
   const [onSearch, setOnSearch] = React.useState("");
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -177,9 +175,7 @@ const NewsTable = () => {
 
   React.useEffect(() => {
     if (categorie) {
-      setCategoryFilter(
-        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
-      );
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
       console.log(
         "Kategori",
         categorie,
@@ -260,9 +256,7 @@ const NewsTable = () => {
   return (
     <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border ">
       <div className="flex justify-between  items-center">
-        <p className="text-xl font-medium text-default-900">
-          Tracking Berita hari ini!
-        </p>
+        <p className="text-xl font-medium text-default-900">Tracking Berita hari ini!</p>
       </div>
 
       <div className="flex flex-col sm:flex-row lg:flex-row justify-between sm:items-center md:items-center lg:items-center px-1">
@@ -277,22 +271,11 @@ const NewsTable = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      1 - 10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      1 - 50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      1 - 100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      1 - 250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -316,9 +299,7 @@ const NewsTable = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -337,10 +318,7 @@ const NewsTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -366,11 +344,7 @@ const NewsTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       {/* <div className="flex justify-end mt-4">
         <Button
           color="primary"
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/detail/[id]/page.tsx b/src/app/[locale]/(protected)/admin/media-tracking/detail/[id]/page.tsx
index 461bfb73..9af0371b 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/detail/[id]/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import NewsTable from "../../component/table";
 import NewsDetailTable from "../component/table";
 
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx b/src/app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx
index 2f5c7363..4e537026 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -41,23 +37,17 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "source",
     header: "Media Online",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("source")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("source")}</span>,
   },
   {
     accessorKey: "title",
     header: "Judul Berita",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("title")}</span>,
   },
   {
     accessorKey: "link",
     header: "Link Berita",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("link")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("link")}</span>,
   },
 ];
 
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/detail/component/table.tsx b/src/app/[locale]/(protected)/admin/media-tracking/detail/component/table.tsx
index 447a51cc..69b679ea 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/detail/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/detail/component/table.tsx
@@ -1,30 +1,22 @@
 "use client";
 
+import { link } from "fs";
 import * as React from "react";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +29,27 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { getMediaTrackingResult } from "@/lib/services/media-tracking/media-tracking";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,34 +60,19 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
 import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { link } from "fs";
-import { getMediaTrackingResult } from "@/lib/services/media-tracking/media-tracking";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 
 const NewsDetailTable = () => {
   const router = useRouter();
@@ -88,13 +85,10 @@ const NewsDetailTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [showTable, setShowTable] = React.useState(false);
   const [link, setLink] = React.useState("");
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -219,10 +213,7 @@ const NewsDetailTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -248,11 +239,7 @@ const NewsDetailTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/column.tsx b/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/column.tsx
index e0537acf..6e7c5b9b 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx b/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx
index d192a792..43b0ef3d 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,18 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,23 +50,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 
 const MediaOnlineTable = () => {
   const router = useRouter();
@@ -75,11 +72,8 @@ const MediaOnlineTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -228,22 +222,11 @@ const MediaOnlineTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -257,10 +240,7 @@ const MediaOnlineTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -290,11 +270,7 @@ const MediaOnlineTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx b/src/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx
index 8ca3e88f..643ea188 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
+import FormMediaOnline from "@/components/features/form/media-tracking/media-tracking-form";
 import FormAskExpert from "@/components/features/form/shared/ask-expert-form";
 import FormDoItYourself from "@/components/features/form/shared/do-it-yourself-form";
-import FormMediaOnline from "@/components/features/form/media-tracking/media-tracking-form";
+import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
 
 const MediaOnlineCreatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/media-online/page.tsx b/src/app/[locale]/(protected)/admin/media-tracking/media-online/page.tsx
index fda27bb6..70c361fa 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/media-online/page.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/media-online/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import MediaOnlineTable from "./component/table";
 
 export default function AdminMediaOnline() {
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/page.tsx b/src/app/[locale]/(protected)/admin/media-tracking/page.tsx
index 2935d376..eb190d3f 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/page.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import NewsTable from "./component/table";
 
 export default function AdminNews() {
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx
index 66c4d0d7..a7a28eaf 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -66,9 +62,7 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link
-              href={`/admin/media-tracking/tb-news/detail/${row.original.id}`}
-            >
+            <Link href={`/admin/media-tracking/tb-news/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx
index d968d835..dea53d60 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
+import { link } from "fs";
 import * as React from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,21 +28,13 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { listEnableCategory } from "@/lib/services/content/content";
+
 import { close, loading } from "@/config/swal";
-import { Label } from "@/components/ui/label";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { listDataAll } from "@/lib/services/landing/landing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -60,12 +43,30 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { link } from "fs";
-import { listDataAll } from "@/lib/services/landing/landing";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import SearchAudioComponent from "@/components/features/form/media-tracking/search-audio-card";
+import SearchDocumentComponent from "@/components/features/form/media-tracking/search-document-card";
 import SearchImageComponent from "@/components/features/form/media-tracking/search-image-card";
 import SearchVideoComponent from "@/components/features/form/media-tracking/search-video-card";
-import SearchDocumentComponent from "@/components/features/form/media-tracking/search-document-card";
-import SearchAudioComponent from "@/components/features/form/media-tracking/search-audio-card";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 
 const NewsTable = () => {
   const router = useRouter();
@@ -76,13 +77,10 @@ const NewsTable = () => {
   const [categories, setCategories] = React.useState<any>();
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [showTable, setShowTable] = React.useState(false);
   const [onSearch, setOnSearch] = React.useState("");
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -148,9 +146,7 @@ const NewsTable = () => {
 
   React.useEffect(() => {
     if (categorie) {
-      setCategoryFilter(
-        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
-      );
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
       console.log(
         "Kategori",
         categorie,
@@ -182,9 +178,7 @@ const NewsTable = () => {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -226,9 +220,7 @@ const NewsTable = () => {
   return (
     <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border ">
       <div className="flex justify-between  items-center">
-        <p className="text-xl font-medium text-default-900">
-          Tracking Berita hari ini!
-        </p>
+        <p className="text-xl font-medium text-default-900">Tracking Berita hari ini!</p>
       </div>
       <Dialog>
         <DialogTrigger asChild>
@@ -280,10 +272,7 @@ const NewsTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -309,11 +298,7 @@ const NewsTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       <div className="flex justify-end mt-4">
         <Button
           color="primary"
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx
index 461bfb73..9af0371b 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import NewsTable from "../../component/table";
 import NewsDetailTable from "../component/table";
 
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx
index d468083e..914f9a25 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,7 +21,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx
index c684cbd0..a32901f1 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx
@@ -1,30 +1,22 @@
 "use client";
 
+import { link } from "fs";
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +29,26 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,33 +59,19 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
 import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { link } from "fs";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 
 const NewsDetailTable = () => {
   const router = useRouter();
@@ -85,13 +82,10 @@ const NewsDetailTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [showTable, setShowTable] = React.useState(false);
   const [link, setLink] = React.useState("");
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -222,10 +216,7 @@ const NewsDetailTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -251,11 +242,7 @@ const NewsDetailTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/page.tsx b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/page.tsx
index 2935d376..eb190d3f 100644
--- a/src/app/[locale]/(protected)/admin/media-tracking/tb-news/page.tsx
+++ b/src/app/[locale]/(protected)/admin/media-tracking/tb-news/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import NewsTable from "./component/table";
 
 export default function AdminNews() {
diff --git a/src/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx b/src/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx
index cfb4884e..20271e62 100644
--- a/src/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx
@@ -1,28 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,9 +21,15 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
-import StatusToogle from "./status-toogle";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
 import StaticToogle from "./static-toogle";
+import StatusToogle from "./status-toogle";
 
 const columns: ColumnDef<any>[] = [
   // {
@@ -54,26 +51,19 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "createdAt",
     header: "Tanggal Unggah",
-    cell: ({ row }) => (
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
-    ),
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
   },
   {
     accessorKey: "isStaticBanner",
     header: "Static Banner",
     cell: ({ row }) => (
-      <StaticToogle
-        id={row.original.id}
-        initChecked={row.original.isStaticBanner}
-      />
+      <StaticToogle id={row.original.id} initChecked={row.original.isStaticBanner} />
     ),
   },
   {
     accessorKey: "statusName",
     header: "Status Banner",
-    cell: ({ row }) => (
-      <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
-    ),
+    cell: ({ row }) => <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />,
   },
 
   {
@@ -94,11 +84,7 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/app/[locale]/(protected)/admin/settings/banner/component/banner-table.tsx b/src/app/[locale]/(protected)/admin/settings/banner/component/banner-table.tsx
index c06e65b7..92499c45 100644
--- a/src/app/[locale]/(protected)/admin/settings/banner/component/banner-table.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/banner/component/banner-table.tsx
@@ -1,19 +1,24 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
+
+import { close, loading } from "@/config/swal";
+import { listBanner, listStaticBanner } from "@/lib/services/settings/settings";
 import {
   Table,
   TableBody,
@@ -23,12 +28,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import { useSearchParams } from "next/navigation";
-
-import { close, loading } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
 import columns from "./banner-column";
-import { listBanner, listStaticBanner } from "@/lib/services/settings/settings";
 
 const BannerListTable = () => {
   const router = useRouter();
@@ -36,11 +36,8 @@ const BannerListTable = () => {
   const [showData, setShowData] = React.useState("10");
 
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -113,10 +110,7 @@ const BannerListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
diff --git a/src/app/[locale]/(protected)/admin/settings/banner/component/column.tsx b/src/app/[locale]/(protected)/admin/settings/banner/component/column.tsx
index 3684e091..bc1f4e46 100644
--- a/src/app/[locale]/(protected)/admin/settings/banner/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/banner/component/column.tsx
@@ -1,28 +1,21 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  formatDateToIndonesian,
-  getOnlyDate,
-  htmlToString,
-} from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { error } from "@/config/swal";
+import { setBanner } from "@/lib/services/settings/settings";
+import { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -30,9 +23,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
-import { setBanner } from "@/lib/services/settings/settings";
-import { error } from "@/config/swal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { useToast } from "@/components/ui/use-toast";
 
 const columns: ColumnDef<any>[] = [
@@ -55,9 +51,7 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "createdAt",
     header: "Tanggal Unggah",
-    cell: ({ row }) => (
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
-    ),
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
   },
 
   {
@@ -92,16 +86,10 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <a onClick={() => handleBanner(row.original.id)}>
-                Jadikan Banner
-              </a>
+              <a onClick={() => handleBanner(row.original.id)}>Jadikan Banner</a>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/app/[locale]/(protected)/admin/settings/banner/component/static-toogle.tsx b/src/app/[locale]/(protected)/admin/settings/banner/component/static-toogle.tsx
index 6ba2025a..ac7dc8e3 100644
--- a/src/app/[locale]/(protected)/admin/settings/banner/component/static-toogle.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/banner/component/static-toogle.tsx
@@ -1,12 +1,10 @@
+import { useRouter } from "@/i18n/navigation";
+
+import { setStaticBanner } from "@/lib/services/settings/settings";
 import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/components/ui/use-toast";
-import { useRouter } from "@/i18n/navigation";
-import { setStaticBanner } from "@/lib/services/settings/settings";
 
-export default function StaticToogle(props: {
-  id: number;
-  initChecked: boolean;
-}) {
+export default function StaticToogle(props: { id: number; initChecked: boolean }) {
   const { id, initChecked } = props;
   const { toast } = useToast();
   const router = useRouter();
diff --git a/src/app/[locale]/(protected)/admin/settings/banner/component/status-toogle.tsx b/src/app/[locale]/(protected)/admin/settings/banner/component/status-toogle.tsx
index 40378d69..c1f242d8 100644
--- a/src/app/[locale]/(protected)/admin/settings/banner/component/status-toogle.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/banner/component/status-toogle.tsx
@@ -1,12 +1,10 @@
+import { useRouter } from "@/i18n/navigation";
+
+import { setBanner } from "@/lib/services/settings/settings";
 import { Switch } from "@/components/ui/switch";
 import { useToast } from "@/components/ui/use-toast";
-import { useRouter } from "@/i18n/navigation";
-import { setBanner } from "@/lib/services/settings/settings";
 
-export default function StatusToogle(props: {
-  id: number;
-  initChecked: boolean;
-}) {
+export default function StatusToogle(props: { id: number; initChecked: boolean }) {
   const { id, initChecked } = props;
   const { toast } = useToast();
   const router = useRouter();
@@ -28,10 +26,6 @@ export default function StatusToogle(props: {
     router.push("/admin/settings/banner?dataChange=true");
   };
   return (
-    <Switch
-      id="status-toogle"
-      checked={initChecked}
-      onCheckedChange={() => disableBanner()}
-    />
+    <Switch id="status-toogle" checked={initChecked} onCheckedChange={() => disableBanner()} />
   );
 }
diff --git a/src/app/[locale]/(protected)/admin/settings/banner/component/table.tsx b/src/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
index a1b5b120..5366b1cd 100644
--- a/src/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/banner/component/table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,18 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,23 +50,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 
 const ContentListTable = () => {
   const router = useRouter();
@@ -74,11 +71,8 @@ const ContentListTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -218,22 +212,11 @@ const ContentListTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -247,10 +230,7 @@ const ContentListTable = () => {
               <div className="flex flex-col gap-2 px-2">
                 <div className="flex justify-between text-sm">
                   <p>Filter</p>
-                  <a
-                    onClick={() => fetchData()}
-                    className="cursor-pointer text-primary"
-                  >
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
                     Simpan
                   </a>
                 </div>
@@ -261,9 +241,7 @@ const ContentListTable = () => {
                       <Checkbox
                         id={category.id}
                         checked={categoryFilter.includes(category.id)}
-                        onCheckedChange={(e) =>
-                          handleChange("category", category.id, Boolean(e))
-                        }
+                        onCheckedChange={(e) => handleChange("category", category.id, Boolean(e))}
                       />
                       <label
                         htmlFor={category.id}
@@ -278,9 +256,7 @@ const ContentListTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(1)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 1, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 1, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -293,9 +269,7 @@ const ContentListTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(2)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 2, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 2, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -308,9 +282,7 @@ const ContentListTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 3, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -323,9 +295,7 @@ const ContentListTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 4, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -348,10 +318,7 @@ const ContentListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -381,11 +348,7 @@ const ContentListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/settings/banner/page.tsx b/src/app/[locale]/(protected)/admin/settings/banner/page.tsx
index 66af63a5..31dfb359 100644
--- a/src/app/[locale]/(protected)/admin/settings/banner/page.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/banner/page.tsx
@@ -1,10 +1,12 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import ContentListTable from "./component/table";
+
 import { useState } from "react";
 
-import BannerListTable from "./component/banner-table";
 import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BannerListTable from "./component/banner-table";
+import ContentListTable from "./component/table";
 
 export default function AdminBanner() {
   const [selectedTab, setSelectedTab] = useState("content");
@@ -21,11 +23,7 @@ export default function AdminBanner() {
               rounded="md"
               onClick={() => setSelectedTab("content")}
               className={` hover:text-white
-                ${
-                  selectedTab === "content"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
+                ${selectedTab === "content" ? "bg-black text-white " : "bg-white text-black "}`}
             >
               Kontent
             </Button>
@@ -33,11 +31,7 @@ export default function AdminBanner() {
               rounded="md"
               onClick={() => setSelectedTab("banner")}
               className={` hover:text-white
-                ${
-                  selectedTab === "banner"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
+                ${selectedTab === "banner" ? "bg-black text-white " : "bg-white text-black "}`}
             >
               Banner
             </Button>
diff --git a/src/app/[locale]/(protected)/admin/settings/category/component/column.tsx b/src/app/[locale]/(protected)/admin/settings/category/component/column.tsx
index dea8347a..45e2abf5 100644
--- a/src/app/[locale]/(protected)/admin/settings/category/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/category/component/column.tsx
@@ -1,34 +1,25 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { error } from "@/config/swal";
+import { deleteCategory } from "@/lib/services/settings/settings";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-import { Link, useRouter } from "@/i18n/navigation";
-import StatusToogle from "./status";
-import { error } from "@/config/swal";
-import { deleteCategory } from "@/lib/services/settings/settings";
+import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useToast } from "@/components/ui/use-toast";
+
 import EditCategoryModal from "./edit";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
+import StatusToogle from "./status";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -40,23 +31,17 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "name",
     header: "Nama Kategori",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("name")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("name")}</span>,
   },
   {
     accessorKey: "mediaTypesString",
     header: "Tipe Konten",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("mediaTypesString")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("mediaTypesString")}</span>,
   },
   {
     accessorKey: "publishedLocation",
     header: "Wilayah",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("publishedLocation")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("publishedLocation")}</span>,
   },
   {
     accessorKey: "status",
@@ -106,10 +91,7 @@ const columns: ColumnDef<any>[] = [
                 isDetail={true}
                 thumbnailLink={row.original.thumbnailLink}
               />
-              <EditCategoryModal
-                id={row.original.id}
-                thumbnailLink={row.original.thumbnailLink}
-              />
+              <EditCategoryModal id={row.original.id} thumbnailLink={row.original.thumbnailLink} />
               <a
                 onClick={() => categoryDelete(row.original.id)}
                 className="hover:underline cursor-pointer hover:text-destructive"
diff --git a/src/app/[locale]/(protected)/admin/settings/category/component/create.tsx b/src/app/[locale]/(protected)/admin/settings/category/component/create.tsx
index ce06c407..cc4bc82e 100644
--- a/src/app/[locale]/(protected)/admin/settings/category/component/create.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/category/component/create.tsx
@@ -1,6 +1,24 @@
 "use client";
 
+import { stringify } from "querystring";
+import { Fragment, useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Cookies from "js-cookie";
+import { CloudUpload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { useForm } from "react-hook-form";
+import { Upload } from "tus-js-client";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getUserRoles, postCategory } from "@/lib/services/settings/settings";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -9,9 +27,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -21,25 +36,12 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import { getUserRoles, postCategory } from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
-import { UnitMapping } from "./unit-mapping";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { Upload } from "tus-js-client";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import Cookies from "js-cookie";
-import { useTranslations } from "next-intl";
+
+import { UnitMapping } from "./unit-mapping";
 
 const FormSchema = z.object({
   title: z.string({
@@ -48,16 +50,12 @@ const FormSchema = z.object({
   description: z.string({
     required_error: "Required",
   }),
-  contentType: z
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
-  selectedUser: z
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
+  contentType: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+  selectedUser: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
   publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
     message: "Required",
   }),
@@ -115,9 +113,7 @@ export default function CreateCategoryModal() {
   const [isOpen, setIsOpen] = useState(false);
   const [satkerData, setSatkerData] = useState<string[]>([]);
   const [unitData, setUnitData] = useState<string[]>([]);
-  const [userList, setUserList] = useState<
-    { id: string; name: string; isInternal: boolean }[]
-  >([]);
+  const [userList, setUserList] = useState<{ id: string; name: string; isInternal: boolean }[]>([]);
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
@@ -125,17 +121,13 @@ export default function CreateCategoryModal() {
   });
 
   const contentType = form.watch("contentType");
-  const isAllContentChecked = listContent.every((item) =>
-    contentType?.includes(item.id)
-  );
+  const isAllContentChecked = listContent.every((item) => contentType?.includes(item.id));
 
   const users = form.watch("selectedUser");
   const isAllUserChecked = userList.every((item) => users?.includes(item.id));
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
-  );
+  const isAllTargetChecked = publishToList.every((item) => target?.includes(item.id));
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
@@ -199,10 +191,10 @@ export default function CreateCategoryModal() {
       unitData?.length > 0 && satkerData?.length > 0
         ? unit + "," + satker
         : unitData?.length > 0
-        ? unit
-        : satkerData?.length > 0
-        ? satker
-        : "";
+          ? unit
+          : satkerData?.length > 0
+            ? satker
+            : "";
 
     formMedia.append("name", data.title);
     formMedia.append("description", data.description);
@@ -211,10 +203,7 @@ export default function CreateCategoryModal() {
     formMedia.append("file", files[0]);
     formMedia.append("publishedLocation", data.publishTo.sort().join(","));
     formMedia.append("publishedLocationLevel", join);
-    formMedia.append(
-      "isInt",
-      data.publishTo.includes("internasional") ? "true" : "false"
-    );
+    formMedia.append("isInt", data.publishTo.includes("internasional") ? "true" : "false");
 
     const response = await postCategory(formMedia);
     close();
@@ -243,18 +232,12 @@ export default function CreateCategoryModal() {
           {t("add-category")}
         </Button>
       </DialogTrigger>
-      <DialogContent
-        size="md"
-        className="sm:h-[300px] md:h-[300px] lg:h-[500px] overflow-y-auto"
-      >
+      <DialogContent size="md" className="sm:h-[300px] md:h-[300px] lg:h-[500px] overflow-y-auto">
         <DialogHeader>
           <DialogTitle> {t("add-category")}</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="contentType"
@@ -289,31 +272,21 @@ export default function CreateCategoryModal() {
                         name="contentType"
                         render={({ field }) => {
                           return (
-                            <FormItem
-                              key={item.id}
-                              className="flex flex-row items-start"
-                            >
+                            <FormItem key={item.id} className="flex flex-row items-start">
                               <div className="flex items-center gap-3">
                                 <FormControl>
                                   <Checkbox
                                     checked={field.value?.includes(item.id)}
                                     onCheckedChange={(checked) => {
                                       return checked
-                                        ? field.onChange([
-                                            ...field.value,
-                                            item.id,
-                                          ])
+                                        ? field.onChange([...field.value, item.id])
                                         : field.onChange(
-                                            field.value?.filter(
-                                              (value) => value !== item.id
-                                            )
+                                            field.value?.filter((value) => value !== item.id)
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.name}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -360,31 +333,21 @@ export default function CreateCategoryModal() {
                         name="selectedUser"
                         render={({ field }) => {
                           return (
-                            <FormItem
-                              key={item.id}
-                              className="flex flex-row items-start "
-                            >
+                            <FormItem key={item.id} className="flex flex-row items-start ">
                               <div className="flex items-center gap-3">
                                 <FormControl>
                                   <Checkbox
                                     checked={field.value?.includes(item.id)}
                                     onCheckedChange={(checked) => {
                                       return checked
-                                        ? field.onChange([
-                                            ...field.value,
-                                            item.id,
-                                          ])
+                                        ? field.onChange([...field.value, item.id])
                                         : field.onChange(
-                                            field.value?.filter(
-                                              (value) => value !== item.id
-                                            )
+                                            field.value?.filter((value) => value !== item.id)
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.name}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -432,31 +395,21 @@ export default function CreateCategoryModal() {
                             name="publishTo"
                             render={({ field }) => {
                               return (
-                                <FormItem
-                                  key={item.id}
-                                  className="flex flex-row items-start "
-                                >
+                                <FormItem key={item.id} className="flex flex-row items-start ">
                                   <div className="flex items-center gap-3">
                                     <FormControl>
                                       <Checkbox
                                         checked={field.value?.includes(item.id)}
                                         onCheckedChange={(checked) => {
                                           return checked
-                                            ? field.onChange([
-                                                ...field.value,
-                                                item.id,
-                                              ])
+                                            ? field.onChange([...field.value, item.id])
                                             : field.onChange(
-                                                field.value?.filter(
-                                                  (value) => value !== item.id
-                                                )
+                                                field.value?.filter((value) => value !== item.id)
                                               );
                                         }}
                                       />
                                     </FormControl>
-                                    <FormLabel className="font-normal">
-                                      {item.name}{" "}
-                                    </FormLabel>
+                                    <FormLabel className="font-normal">{item.name} </FormLabel>
                                   </div>
                                 </FormItem>
                               );
@@ -540,8 +493,8 @@ export default function CreateCategoryModal() {
                             Tarik file disini atau klik untuk upload.
                           </h4>
                           <div className=" text-xs text-muted-foreground">
-                            ( Upload file dengan format .jpg, .jpeg, atau .png.
-                            Ukuran maksimal 100mb.)
+                            ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal
+                            100mb.)
                           </div>
                         </div>
                       </div>
@@ -555,10 +508,7 @@ export default function CreateCategoryModal() {
                         className="w-[30%]"
                         alt="thumbnail"
                       />
-                      <a
-                        onClick={() => handleRemoveFile(files[0])}
-                        className="cursor-pointer"
-                      >
+                      <a onClick={() => handleRemoveFile(files[0])} className="cursor-pointer">
                         <Icon icon="fa-solid:times" color="red" />
                       </a>
                     </div>
@@ -583,12 +533,7 @@ export default function CreateCategoryModal() {
               )}
             />
             <DialogFooter>
-              <Button
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
+              <Button type="submit" color="primary" size="md" className="text-xs">
                 Tambah Kategori
               </Button>
             </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/category/component/edit.tsx b/src/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
index b6841306..6f021fbc 100644
--- a/src/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/category/component/edit.tsx
@@ -1,6 +1,20 @@
 "use client";
 
+import { Fragment, useEffect, useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Cookies from "js-cookie";
+import { CloudUpload } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getCategoryDetail, getUserRoles, postCategory } from "@/lib/services/settings/settings";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -9,9 +23,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -21,25 +32,12 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  getCategoryDetail,
-  getUserRoles,
-  postCategory,
-} from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
-import { UnitMapping } from "./unit-mapping";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
-import Cookies from "js-cookie";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { UnitMapping } from "./unit-mapping";
 
 const FormSchema = z.object({
   title: z.string({
@@ -48,16 +46,12 @@ const FormSchema = z.object({
   description: z.string({
     required_error: "Required",
   }),
-  contentType: z
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
-  selectedUser: z
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
+  contentType: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+  selectedUser: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
   publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
     message: "Required",
   }),
@@ -122,9 +116,7 @@ export default function EditCategoryModal(props: {
   const router = useRouter();
   const [satkerData, setSatkerData] = useState<string[]>([]);
   const [unitData, setUnitData] = useState<string[]>([]);
-  const [userList, setUserList] = useState<
-    { id: string; name: string; isInternal: boolean }[]
-  >([]);
+  const [userList, setUserList] = useState<{ id: string; name: string; isInternal: boolean }[]>([]);
 
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
@@ -147,10 +139,7 @@ export default function EditCategoryModal(props: {
       form.setValue("title", String(data?.name));
       form.setValue("description", String(data?.description));
       form.setValue("contentType", data?.mediaTypes?.split(","));
-      form.setValue(
-        "selectedUser",
-        removeAndReturn(data?.publishedFor, [2, 3, 4])
-      );
+      form.setValue("selectedUser", removeAndReturn(data?.publishedFor, [2, 3, 4]));
       form.setValue("publishTo", data?.publishedLocation?.split(","));
       form.setValue("file", thumbnailLink);
 
@@ -183,17 +172,13 @@ export default function EditCategoryModal(props: {
   }
 
   const contentType = form.watch("contentType");
-  const isAllContentChecked = listContent.every((item) =>
-    contentType?.includes(item.id)
-  );
+  const isAllContentChecked = listContent.every((item) => contentType?.includes(item.id));
 
   const users = form.watch("selectedUser");
   const isAllUserChecked = userList.every((item) => users?.includes(item.id));
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
-  );
+  const isAllTargetChecked = publishToList.every((item) => target?.includes(item.id));
 
   useEffect(() => {
     getRoles();
@@ -223,10 +208,10 @@ export default function EditCategoryModal(props: {
       unitData?.length > 0 && satkerData?.length > 0
         ? unit + "," + satker
         : unitData?.length > 0
-        ? unit
-        : satkerData?.length > 0
-        ? satker
-        : "";
+          ? unit
+          : satkerData?.length > 0
+            ? satker
+            : "";
 
     formMedia.append("id", data.id);
     formMedia.append("name", data.title);
@@ -262,10 +247,7 @@ export default function EditCategoryModal(props: {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger>
-        <a
-          onClick={() => setIsOpen(true)}
-          className="hover:underline cursor-pointer"
-        >
+        <a onClick={() => setIsOpen(true)} className="hover:underline cursor-pointer">
           {isDetail ? "Detail" : "Edit"}
         </a>
       </DialogTrigger>
@@ -274,10 +256,7 @@ export default function EditCategoryModal(props: {
           <DialogTitle>Edit Kategori</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="contentType"
@@ -313,10 +292,7 @@ export default function EditCategoryModal(props: {
                         name="contentType"
                         render={({ field }) => {
                           return (
-                            <FormItem
-                              key={item.id}
-                              className="flex flex-row items-start"
-                            >
+                            <FormItem key={item.id} className="flex flex-row items-start">
                               <div className="flex items-center gap-3">
                                 <FormControl>
                                   <Checkbox
@@ -324,21 +300,14 @@ export default function EditCategoryModal(props: {
                                     checked={field.value?.includes(item.id)}
                                     onCheckedChange={(checked) => {
                                       return checked
-                                        ? field.onChange([
-                                            ...field.value,
-                                            item.id,
-                                          ])
+                                        ? field.onChange([...field.value, item.id])
                                         : field.onChange(
-                                            field.value?.filter(
-                                              (value) => value !== item.id
-                                            )
+                                            field.value?.filter((value) => value !== item.id)
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.name}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -385,10 +354,7 @@ export default function EditCategoryModal(props: {
                         name="selectedUser"
                         render={({ field }) => {
                           return (
-                            <FormItem
-                              key={item.id}
-                              className="flex flex-row items-start "
-                            >
+                            <FormItem key={item.id} className="flex flex-row items-start ">
                               <div className="flex items-center gap-3">
                                 <FormControl>
                                   <Checkbox
@@ -396,21 +362,14 @@ export default function EditCategoryModal(props: {
                                     checked={field.value?.includes(item.id)}
                                     onCheckedChange={(checked) => {
                                       return checked
-                                        ? field.onChange([
-                                            ...field.value,
-                                            item.id,
-                                          ])
+                                        ? field.onChange([...field.value, item.id])
                                         : field.onChange(
-                                            field.value?.filter(
-                                              (value) => value !== item.id
-                                            )
+                                            field.value?.filter((value) => value !== item.id)
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.name}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -460,10 +419,7 @@ export default function EditCategoryModal(props: {
                             name="publishTo"
                             render={({ field }) => {
                               return (
-                                <FormItem
-                                  key={item.id}
-                                  className="flex flex-row items-start "
-                                >
+                                <FormItem key={item.id} className="flex flex-row items-start ">
                                   <div className="flex items-center gap-3">
                                     <FormControl>
                                       <Checkbox
@@ -471,21 +427,14 @@ export default function EditCategoryModal(props: {
                                         checked={field.value?.includes(item.id)}
                                         onCheckedChange={(checked) => {
                                           return checked
-                                            ? field.onChange([
-                                                ...field.value,
-                                                item.id,
-                                              ])
+                                            ? field.onChange([...field.value, item.id])
                                             : field.onChange(
-                                                field.value?.filter(
-                                                  (value) => value !== item.id
-                                                )
+                                                field.value?.filter((value) => value !== item.id)
                                               );
                                         }}
                                       />
                                     </FormControl>
-                                    <FormLabel className="font-normal">
-                                      {item.name}{" "}
-                                    </FormLabel>
+                                    <FormLabel className="font-normal">{item.name} </FormLabel>
                                   </div>
                                 </FormItem>
                               );
@@ -576,8 +525,8 @@ export default function EditCategoryModal(props: {
                               Tarik file disini atau klik untuk upload.
                             </h4>
                             <div className=" text-xs text-muted-foreground">
-                              ( Upload file dengan format .jpg, .jpeg, atau
-                              .png. Ukuran maksimal 100mb.)
+                              ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal
+                              100mb.)
                             </div>
                           </div>
                         </div>
@@ -585,15 +534,8 @@ export default function EditCategoryModal(props: {
                     )}
                     {field.value !== "" && (
                       <div className="flex flex-row gap-2">
-                        <img
-                          src={field.value}
-                          className="w-[30%]"
-                          alt="thumbnail"
-                        />
-                        <a
-                          onClick={() => form.setValue("file", "")}
-                          className="cursor-pointer"
-                        >
+                        <img src={field.value} className="w-[30%]" alt="thumbnail" />
+                        <a onClick={() => form.setValue("file", "")} className="cursor-pointer">
                           <Icon icon="fa-solid:times" color="red" />
                         </a>
                       </div>
@@ -606,10 +548,7 @@ export default function EditCategoryModal(props: {
                           className="w-[30%]"
                           alt="thumbnail"
                         />
-                        <a
-                          onClick={() => handleRemoveFile(files[0])}
-                          className="cursor-pointer"
-                        >
+                        <a onClick={() => handleRemoveFile(files[0])} className="cursor-pointer">
                           <Icon icon="fa-solid:times" color="red" />
                         </a>
                       </div>
@@ -642,12 +581,7 @@ export default function EditCategoryModal(props: {
             />
             {!isDetail && (
               <DialogFooter>
-                <Button
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
+                <Button type="submit" color="primary" size="md" className="text-xs">
                   Edit Kategori
                 </Button>
               </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/category/component/status.tsx b/src/app/[locale]/(protected)/admin/settings/category/component/status.tsx
index 64ef54d4..a6c8d54f 100644
--- a/src/app/[locale]/(protected)/admin/settings/category/component/status.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/category/component/status.tsx
@@ -1,13 +1,12 @@
 "use client";
-import { Switch } from "@/components/ui/switch";
-import { error } from "@/config/swal";
-import { useRouter } from "@/i18n/navigation";
-import { publishUnpublishCategory } from "@/lib/services/settings/settings";
 
-export default function StatusToogle(props: {
-  id: number;
-  initValue: boolean;
-}) {
+import { useRouter } from "@/i18n/navigation";
+
+import { error } from "@/config/swal";
+import { publishUnpublishCategory } from "@/lib/services/settings/settings";
+import { Switch } from "@/components/ui/switch";
+
+export default function StatusToogle(props: { id: number; initValue: boolean }) {
   const { id, initValue } = props;
   const router = useRouter();
   const publishCategory = async (id: number, status: string) => {
diff --git a/src/app/[locale]/(protected)/admin/settings/category/component/table.tsx b/src/app/[locale]/(protected)/admin/settings/category/component/table.tsx
index 3bcf5d70..827ddb7b 100644
--- a/src/app/[locale]/(protected)/admin/settings/category/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/category/component/table.tsx
@@ -1,40 +1,28 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
+import { useTranslations } from "next-intl";
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { NewCampaignIcon } from "@/components/icon";
+import { listEnableCategory } from "@/lib/services/content/content";
 import { getCategories } from "@/lib/services/settings/settings";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -43,13 +31,20 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import CreateCategoryModal from "./create";
-import { useTranslations } from "next-intl";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+import { NewCampaignIcon } from "@/components/icon";
+
+import columns from "./column";
+import CreateCategoryModal from "./create";
 
 const AdminCategoryTable = () => {
   const router = useRouter();
@@ -63,11 +58,8 @@ const AdminCategoryTable = () => {
   const [region, setRegion] = React.useState<any>();
   const [regionFilter, setRegionFilter] = React.useState<string[]>([]);
   const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -127,18 +119,11 @@ const AdminCategoryTable = () => {
     try {
       loading();
 
-      const regionQuery = regionFilter.length
-        ? `&publishedLocation=${regionFilter.join(",")}`
-        : "";
+      const regionQuery = regionFilter.length ? `&publishedLocation=${regionFilter.join(",")}` : "";
 
-      const statusQuery = statusFilter.length
-        ? `&isPublish=${statusFilter.join(",")}`
-        : "";
+      const statusQuery = statusFilter.length ? `&isPublish=${statusFilter.join(",")}` : "";
 
-      const response = await getCategories(
-        page - 1,
-        `${regionQuery}${statusQuery}`
-      );
+      const response = await getCategories(page - 1, `${regionQuery}${statusQuery}`);
 
       const data = response?.data?.data;
       const contentData = data?.content;
@@ -166,9 +151,7 @@ const AdminCategoryTable = () => {
           setRegionFilter([]);
         }
       } else {
-        let updated = checked
-          ? [...regionFilter, id]
-          : regionFilter.filter((val) => val !== id);
+        let updated = checked ? [...regionFilter, id] : regionFilter.filter((val) => val !== id);
 
         // Jika semua sudah tercentang, maka otomatis centang "semua"
         const allIds = ["mabes", "polda", "satker", "internasional"];
@@ -202,10 +185,7 @@ const AdminCategoryTable = () => {
             <div className="flex flex-col gap-2 px-2">
               <div className="flex justify-between text-sm">
                 <p>Filter</p>
-                <a
-                  onClick={() => fetchData()}
-                  className="cursor-pointer text-primary"
-                >
+                <a onClick={() => fetchData()} className="cursor-pointer text-primary">
                   Simpan
                 </a>
               </div>
@@ -217,14 +197,12 @@ const AdminCategoryTable = () => {
                       id={region.id}
                       checked={
                         region.id === "semua"
-                          ? ["mabes", "polda", "satker", "internasional"].every(
-                              (val) => regionFilter.includes(val)
+                          ? ["mabes", "polda", "satker", "internasional"].every((val) =>
+                              regionFilter.includes(val)
                             )
                           : regionFilter.includes(region.id)
                       }
-                      onCheckedChange={(e) =>
-                        handleChange("region", region.id, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("region", region.id, Boolean(e))}
                     />
                     <label
                       htmlFor={region.id}
@@ -239,14 +217,9 @@ const AdminCategoryTable = () => {
                   <Checkbox
                     id="aktif"
                     checked={statusFilter.includes("true")}
-                    onCheckedChange={(e) =>
-                      handleChange("status", "true", Boolean(e))
-                    }
+                    onCheckedChange={(e) => handleChange("status", "true", Boolean(e))}
                   />
-                  <label
-                    htmlFor="aktif"
-                    className="text-xs font-medium leading-none"
-                  >
+                  <label htmlFor="aktif" className="text-xs font-medium leading-none">
                     Aktif
                   </label>
                 </div>
@@ -254,14 +227,9 @@ const AdminCategoryTable = () => {
                   <Checkbox
                     id="nonaktif"
                     checked={statusFilter.includes("false")}
-                    onCheckedChange={(e) =>
-                      handleChange("status", "false", Boolean(e))
-                    }
+                    onCheckedChange={(e) => handleChange("status", "false", Boolean(e))}
                   />
-                  <label
-                    htmlFor="nonaktif"
-                    className="text-xs font-medium leading-none"
-                  >
+                  <label htmlFor="nonaktif" className="text-xs font-medium leading-none">
                     Non Aktif
                   </label>
                 </div>
@@ -278,10 +246,7 @@ const AdminCategoryTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -311,11 +276,7 @@ const AdminCategoryTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx b/src/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx
index 10b1d7bb..f1a90b13 100644
--- a/src/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx
@@ -1,5 +1,21 @@
 "use client";
+
+import { useEffect, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { getUserLevelForAssignments } from "@/lib/services/task";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -9,22 +25,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { useEffect, useState } from "react";
-import { getUserLevelForAssignments } from "@/lib/services/task";
 
 const FormSchema = z.object({
   items: z.array(z.string()).refine((value) => value.some((item) => item), {
@@ -46,9 +48,7 @@ export function UnitMapping(props: {
 }) {
   const { unit, sendDataToParent, isDetail } = props;
   const [unitList, setUnitList] = useState<UnitType[]>([]);
-  const [satkerList, setSatkerList] = useState<{ id: number; name: string }[]>(
-    []
-  );
+  const [satkerList, setSatkerList] = useState<{ id: number; name: string }[]>([]);
   const [isOpen, setIsOpen] = useState(false);
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
@@ -68,12 +68,8 @@ export function UnitMapping(props: {
 
   const unitType = form.watch("items");
 
-  const isAllUnitChecked = unitList.every((item) =>
-    unitType?.includes(String(item.id))
-  );
-  const isAllSatkerChecked = satkerList.every((item) =>
-    unitType?.includes(String(item.id))
-  );
+  const isAllUnitChecked = unitList.every((item) => unitType?.includes(String(item.id)));
+  const isAllSatkerChecked = satkerList.every((item) => unitType?.includes(String(item.id)));
 
   const setupUnit = (data: UnitType[]) => {
     const temp = data.filter((a) => a.name.includes("POLDA"));
@@ -89,10 +85,7 @@ export function UnitMapping(props: {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <a
-          onClick={() => setIsOpen(true)}
-          className="text-primary cursor-pointer text-xs mr-3"
-        >
+        <a onClick={() => setIsOpen(true)} className="text-primary cursor-pointer text-xs mr-3">
           Pilih {unit}
         </a>
       </DialogTrigger>
@@ -127,9 +120,7 @@ export function UnitMapping(props: {
                 control={form.control}
                 name="items"
                 render={() => (
-                  <FormItem
-                    className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}
-                  >
+                  <FormItem className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}>
                     {unitList?.map((item: any) => (
                       <FormField
                         key={item.id}
@@ -144,19 +135,12 @@ export function UnitMapping(props: {
                               <FormControl>
                                 <Checkbox
                                   disabled={isDetail}
-                                  checked={field.value?.includes(
-                                    String(item.id)
-                                  )}
+                                  checked={field.value?.includes(String(item.id))}
                                   onCheckedChange={(checked) => {
                                     return checked
-                                      ? field.onChange([
-                                          ...field.value,
-                                          String(item.id),
-                                        ])
+                                      ? field.onChange([...field.value, String(item.id)])
                                       : field.onChange(
-                                          field.value?.filter(
-                                            (value) => value !== String(item.id)
-                                          )
+                                          field.value?.filter((value) => value !== String(item.id))
                                         );
                                   }}
                                 />
@@ -200,9 +184,7 @@ export function UnitMapping(props: {
                 control={form.control}
                 name="items"
                 render={() => (
-                  <FormItem
-                    className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}
-                  >
+                  <FormItem className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}>
                     {satkerList?.map((item: any) => (
                       <FormField
                         key={item.id}
@@ -217,19 +199,12 @@ export function UnitMapping(props: {
                               <FormControl>
                                 <Checkbox
                                   disabled={isDetail}
-                                  checked={field.value?.includes(
-                                    String(item.id)
-                                  )}
+                                  checked={field.value?.includes(String(item.id))}
                                   onCheckedChange={(checked) => {
                                     return checked
-                                      ? field.onChange([
-                                          ...field.value,
-                                          String(item.id),
-                                        ])
+                                      ? field.onChange([...field.value, String(item.id)])
                                       : field.onChange(
-                                          field.value?.filter(
-                                            (value) => value !== String(item.id)
-                                          )
+                                          field.value?.filter((value) => value !== String(item.id))
                                         );
                                   }}
                                 />
diff --git a/src/app/[locale]/(protected)/admin/settings/category/page.tsx b/src/app/[locale]/(protected)/admin/settings/category/page.tsx
index 9b994f7e..d4b5e044 100644
--- a/src/app/[locale]/(protected)/admin/settings/category/page.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/category/page.tsx
@@ -1,5 +1,7 @@
 "use client";
+
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import AdminCategoryTable from "./component/table";
 
 export default function AdminCategory() {
diff --git a/src/app/[locale]/(protected)/admin/settings/faq/component/column.tsx b/src/app/[locale]/(protected)/admin/settings/faq/component/column.tsx
index 4b73769e..4440f720 100644
--- a/src/app/[locale]/(protected)/admin/settings/faq/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/faq/component/column.tsx
@@ -1,34 +1,25 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { error } from "@/config/swal";
+import { deleteCategory, deleteDataFAQ } from "@/lib/services/settings/settings";
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-import { Link, useRouter } from "@/i18n/navigation";
-import { error } from "@/config/swal";
-import { deleteCategory, deleteDataFAQ } from "@/lib/services/settings/settings";
-import { useToast } from "@/components/ui/use-toast";
+import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 // import EditCategoryModal from "./edit";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-import { htmlToString } from "@/lib/utils/globals";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useToast } from "@/components/ui/use-toast";
+
 import EditFAQModal from "./edit";
 
 const columns: ColumnDef<any>[] = [
@@ -42,19 +33,13 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "question",
     header: "Pertanyaan",
     cell: ({ row }) => (
-      <span className="normal-case">
-        {htmlToString(row.getValue("question"))}
-      </span>
+      <span className="normal-case">{htmlToString(row.getValue("question"))}</span>
     ),
   },
   {
     accessorKey: "answer",
     header: "Answer",
-    cell: ({ row }) => (
-      <span className="normal-case">
-        {htmlToString(row.getValue("answer"))}
-      </span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{htmlToString(row.getValue("answer"))}</span>,
   },
 
   {
diff --git a/src/app/[locale]/(protected)/admin/settings/faq/component/create.tsx b/src/app/[locale]/(protected)/admin/settings/faq/component/create.tsx
index 8c7821aa..129aefb5 100644
--- a/src/app/[locale]/(protected)/admin/settings/faq/component/create.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/faq/component/create.tsx
@@ -1,6 +1,22 @@
 "use client";
 
+import { stringify } from "querystring";
+import { Fragment, useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { CloudUpload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { useForm } from "react-hook-form";
+import { Upload } from "tus-js-client";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getUserRoles, postCategory, postDataFAQ } from "@/lib/services/settings/settings";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -9,9 +25,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -21,26 +34,10 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  getUserRoles,
-  postCategory,
-  postDataFAQ,
-} from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { Upload } from "tus-js-client";
-import { useTranslations } from "next-intl";
 
 const FormSchema = z.object({
   answer: z.string({
@@ -91,9 +88,7 @@ export default function CreateFAQModal() {
   });
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
-  );
+  const isAllTargetChecked = publishToList.every((item) => target?.includes(item.id));
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     const request = {
@@ -129,10 +124,7 @@ export default function CreateFAQModal() {
           <DialogTitle>{t("add")} FAQ</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="publishTo"
@@ -155,9 +147,7 @@ export default function CreateFAQModal() {
                         <FormControl>
                           <RadioGroupItem value="international" />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          Internasional
-                        </FormLabel>
+                        <FormLabel className="font-normal">Internasional</FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -283,12 +273,7 @@ export default function CreateFAQModal() {
               )}
             />
             <DialogFooter>
-              <Button
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
+              <Button type="submit" color="primary" size="md" className="text-xs">
                 Tambah FAQ
               </Button>
             </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/faq/component/edit.tsx b/src/app/[locale]/(protected)/admin/settings/faq/component/edit.tsx
index 2b252df0..26e6812e 100644
--- a/src/app/[locale]/(protected)/admin/settings/faq/component/edit.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/faq/component/edit.tsx
@@ -1,6 +1,28 @@
 "use client";
 
+import { stringify } from "querystring";
+import { Fragment, useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { id } from "date-fns/locale";
+import { CloudUpload } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { useForm } from "react-hook-form";
+import { Upload } from "tus-js-client";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import {
+  detailDataFAQ,
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+} from "@/lib/services/settings/settings";
+import { htmlToString } from "@/lib/utils/globals";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -9,9 +31,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -21,28 +40,10 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  detailDataFAQ,
-  getUserRoles,
-  postCategory,
-  postDataFAQ,
-} from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { Upload } from "tus-js-client";
-import { id } from "date-fns/locale";
-import { htmlToString } from "@/lib/utils/globals";
 
 const FormSchema = z.object({
   answer: z.string({
@@ -99,10 +100,7 @@ export default function EditFAQModal(props: { id: string; isDetail: boolean }) {
     const data = res?.data?.data;
     form.setValue("question", htmlToString(data.question));
     form.setValue("answer", htmlToString(data.answer));
-    form.setValue(
-      "publishTo",
-      data.isInternational ? "international" : "wilayah"
-    );
+    form.setValue("publishTo", data.isInternational ? "international" : "wilayah");
   };
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
@@ -131,19 +129,14 @@ export default function EditFAQModal(props: { id: string; isDetail: boolean }) {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <a className="hover:underline cursor-pointer">
-          {isDetail ? "Detail" : "Edit"}
-        </a>
+        <a className="hover:underline cursor-pointer">{isDetail ? "Detail" : "Edit"}</a>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
           <DialogTitle>{isDetail ? "Detail" : "Edit"} FAQ</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="publishTo"
@@ -166,9 +159,7 @@ export default function EditFAQModal(props: { id: string; isDetail: boolean }) {
                         <FormControl>
                           <RadioGroupItem value="international" />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          Internasional
-                        </FormLabel>
+                        <FormLabel className="font-normal">Internasional</FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -307,12 +298,7 @@ export default function EditFAQModal(props: { id: string; isDetail: boolean }) {
             />
             {!isDetail && (
               <DialogFooter>
-                <Button
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
+                <Button type="submit" color="primary" size="md" className="text-xs">
                   Edit FAQ
                 </Button>
               </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/faq/component/table.tsx b/src/app/[locale]/(protected)/admin/settings/faq/component/table.tsx
index f1a04b77..f9f226ea 100644
--- a/src/app/[locale]/(protected)/admin/settings/faq/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/faq/component/table.tsx
@@ -1,40 +1,27 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { NewCampaignIcon } from "@/components/icon";
+import { listEnableCategory } from "@/lib/services/content/content";
 import { getCategories, getListFAQ } from "@/lib/services/settings/settings";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -43,6 +30,18 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+import { NewCampaignIcon } from "@/components/icon";
+
+import columns from "./column";
 import CreateFAQModal from "./create";
 
 const AdminFAQTable = () => {
@@ -53,11 +52,8 @@ const AdminFAQTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -139,10 +135,7 @@ const AdminFAQTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
diff --git a/src/app/[locale]/(protected)/admin/settings/faq/page.tsx b/src/app/[locale]/(protected)/admin/settings/faq/page.tsx
index 0e01b498..d4a7d91d 100644
--- a/src/app/[locale]/(protected)/admin/settings/faq/page.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/faq/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import AdminFAQTable from "./component/table";
 
 export default function FAQSetting() {
diff --git a/src/app/[locale]/(protected)/admin/settings/feedback/component/column.tsx b/src/app/[locale]/(protected)/admin/settings/feedback/component/column.tsx
index 2e6ad797..11fe3046 100644
--- a/src/app/[locale]/(protected)/admin/settings/feedback/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/feedback/component/column.tsx
@@ -1,34 +1,25 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { error } from "@/config/swal";
+import { deleteCategory, deleteDataFAQ } from "@/lib/services/settings/settings";
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-import { Link, useRouter } from "@/i18n/navigation";
-import { error } from "@/config/swal";
-import { deleteCategory, deleteDataFAQ } from "@/lib/services/settings/settings";
-import { useToast } from "@/components/ui/use-toast";
+import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 // import EditCategoryModal from "./edit";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-import { htmlToString } from "@/lib/utils/globals";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useToast } from "@/components/ui/use-toast";
+
 import EditFAQModal from "./edit";
 import EditFeedbackModal from "./edit";
 
@@ -43,9 +34,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "question",
     header: "Poin Penilaian",
     cell: ({ row }) => (
-      <span className="normal-case">
-        {htmlToString(row.getValue("question"))}
-      </span>
+      <span className="normal-case">{htmlToString(row.getValue("question"))}</span>
     ),
   },
   {
@@ -92,17 +81,9 @@ const columns: ColumnDef<any>[] = [
               </Button>
             </MenubarTrigger>
             <MenubarContent className="flex flex-col gap-2 justify-center items-start p-4">
-              <EditFeedbackModal
-                id={row.original.id}
-                isDetail={true}
-                data={row.original}
-              />
+              <EditFeedbackModal id={row.original.id} isDetail={true} data={row.original} />
 
-              <EditFeedbackModal
-                id={row.original.id}
-                isDetail={false}
-                data={row.original}
-              />
+              <EditFeedbackModal id={row.original.id} isDetail={false} data={row.original} />
 
               <a
                 onClick={() => faqDelete(row.original.id)}
diff --git a/src/app/[locale]/(protected)/admin/settings/feedback/component/create.tsx b/src/app/[locale]/(protected)/admin/settings/feedback/component/create.tsx
index c755f052..4d89201e 100644
--- a/src/app/[locale]/(protected)/admin/settings/feedback/component/create.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/feedback/component/create.tsx
@@ -1,6 +1,27 @@
 "use client";
 
+import { stringify } from "querystring";
+import { Fragment, useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { CloudUpload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { useForm } from "react-hook-form";
+import { Upload } from "tus-js-client";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import {
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+  postDataFeedback,
+} from "@/lib/services/settings/settings";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -9,9 +30,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -21,27 +39,10 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  getUserRoles,
-  postCategory,
-  postDataFAQ,
-  postDataFeedback,
-} from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { Upload } from "tus-js-client";
-import { useTranslations } from "next-intl";
 
 const FormSchema = z.object({
   question: z.string({
@@ -119,10 +120,7 @@ export default function CreateFAQModal() {
           <DialogTitle>{t("add")} Feedback</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="publishTo"
@@ -145,9 +143,7 @@ export default function CreateFAQModal() {
                         <FormControl>
                           <RadioGroupItem value="international" />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          Internasional
-                        </FormLabel>
+                        <FormLabel className="font-normal">Internasional</FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -259,12 +255,7 @@ export default function CreateFAQModal() {
               )}
             />
             <DialogFooter>
-              <Button
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
+              <Button type="submit" color="primary" size="md" className="text-xs">
                 Tambah Feeback
               </Button>
             </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/feedback/component/edit.tsx b/src/app/[locale]/(protected)/admin/settings/feedback/component/edit.tsx
index 5830f195..c7fbb9ca 100644
--- a/src/app/[locale]/(protected)/admin/settings/feedback/component/edit.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/feedback/component/edit.tsx
@@ -1,6 +1,30 @@
 "use client";
 
+import { stringify } from "querystring";
+import { Fragment, useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { id } from "date-fns/locale";
+import { CloudUpload } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { useForm } from "react-hook-form";
+import { Upload } from "tus-js-client";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import {
+  detailDataFAQ,
+  detailDataFeedback,
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+  postDataFeedback,
+} from "@/lib/services/settings/settings";
+import { htmlToString } from "@/lib/utils/globals";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -9,9 +33,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -21,30 +42,10 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  detailDataFAQ,
-  detailDataFeedback,
-  getUserRoles,
-  postCategory,
-  postDataFAQ,
-  postDataFeedback,
-} from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { Upload } from "tus-js-client";
-import { id } from "date-fns/locale";
-import { htmlToString } from "@/lib/utils/globals";
 
 const FormSchema = z.object({
   question: z.string({
@@ -104,10 +105,7 @@ export default function EditFeedbackModal(props: {
 
   const initState = async () => {
     form.setValue("question", htmlToString(data.question));
-    form.setValue(
-      "publishTo",
-      data.isInternational ? "international" : "wilayah"
-    );
+    form.setValue("publishTo", data.isInternational ? "international" : "wilayah");
   };
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
@@ -135,19 +133,14 @@ export default function EditFeedbackModal(props: {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <a className="hover:underline cursor-pointer">
-          {isDetail ? "Detail" : "Edit"}
-        </a>
+        <a className="hover:underline cursor-pointer">{isDetail ? "Detail" : "Edit"}</a>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
           <DialogTitle>{isDetail ? "Detail" : "Edit"} Feedback</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="publishTo"
@@ -170,9 +163,7 @@ export default function EditFeedbackModal(props: {
                         <FormControl>
                           <RadioGroupItem value="international" />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          Internasional
-                        </FormLabel>
+                        <FormLabel className="font-normal">Internasional</FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -293,12 +284,7 @@ export default function EditFeedbackModal(props: {
 
             {!isDetail && (
               <DialogFooter>
-                <Button
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
+                <Button type="submit" color="primary" size="md" className="text-xs">
                   Edit Feedback
                 </Button>
               </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/feedback/component/table.tsx b/src/app/[locale]/(protected)/admin/settings/feedback/component/table.tsx
index 040eecd7..878ab73b 100644
--- a/src/app/[locale]/(protected)/admin/settings/feedback/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/feedback/component/table.tsx
@@ -1,21 +1,28 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
+import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { getCategories, getListFAQ, getListFeedback } from "@/lib/services/settings/settings";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -24,24 +31,11 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-
-import { useSearchParams } from "next/navigation";
 import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
 import { NewCampaignIcon } from "@/components/icon";
-import {
-  getCategories,
-  getListFAQ,
-  getListFeedback,
-} from "@/lib/services/settings/settings";
 
+import columns from "./column";
 import CreateFAQModal from "./create";
-import { useTranslations } from "next-intl";
 
 const AdminFeedbackTable = () => {
   const router = useRouter();
@@ -52,11 +46,8 @@ const AdminFeedbackTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -138,10 +129,7 @@ const AdminFeedbackTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
diff --git a/src/app/[locale]/(protected)/admin/settings/feedback/page.tsx b/src/app/[locale]/(protected)/admin/settings/feedback/page.tsx
index db0325d9..923f216f 100644
--- a/src/app/[locale]/(protected)/admin/settings/feedback/page.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/feedback/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import AdminFeedbackTable from "./component/table";
 
 export default function FAQSetting() {
diff --git a/src/app/[locale]/(protected)/admin/settings/privacy/page.tsx b/src/app/[locale]/(protected)/admin/settings/privacy/page.tsx
index 3bdbae5d..93f3e4b8 100644
--- a/src/app/[locale]/(protected)/admin/settings/privacy/page.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/privacy/page.tsx
@@ -1,8 +1,15 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
+
+import { useEffect, useRef } from "react";
+import dynamic from "next/dynamic";
 import { zodResolver } from "@hookform/resolvers/zod";
+import JoditEditor from "jodit-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getPrivacy, savePrivacy } from "@/lib/services/settings/settings";
+import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -12,14 +19,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { close, error, loading } from "@/config/swal";
 import { Input } from "@/components/ui/input";
-import JoditEditor from "jodit-react";
-import { useEffect, useRef } from "react";
-import { getPrivacy, savePrivacy } from "@/lib/services/settings/settings";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import { useToast } from "@/components/ui/use-toast";
-import { Button } from "@/components/ui/button";
-import dynamic from "next/dynamic";
 
 const CustomEditor = dynamic(
   () => {
@@ -76,21 +78,14 @@ export default function AdminPrivacyPolicy() {
     <>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
           <FormField
             control={form.control}
             name="title"
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Judul</FormLabel>
-                <Input
-                  value={field.value}
-                  placeholder="Masukkan Judul"
-                  onChange={field.onChange}
-                />
+                <Input value={field.value} placeholder="Masukkan Judul" onChange={field.onChange} />
 
                 <FormMessage />
               </FormItem>
@@ -114,10 +109,7 @@ export default function AdminPrivacyPolicy() {
                     onChange={field.onChange}
                     
                   /> */}
-                  <CustomEditor
-                    onChange={field.onChange}
-                    initialData={field.value}
-                  />
+                  <CustomEditor onChange={field.onChange} initialData={field.value} />
                 </FormControl>
 
                 <FormMessage />
diff --git a/src/app/[locale]/(protected)/admin/settings/tag/component/column.tsx b/src/app/[locale]/(protected)/admin/settings/tag/component/column.tsx
index 1d85fabe..50fe5efd 100644
--- a/src/app/[locale]/(protected)/admin/settings/tag/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/tag/component/column.tsx
@@ -1,34 +1,25 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { error } from "@/config/swal";
+import { deleteCategory, deleteDataFAQ } from "@/lib/services/settings/settings";
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-import { Link, useRouter } from "@/i18n/navigation";
-import { error } from "@/config/swal";
-import { deleteCategory, deleteDataFAQ } from "@/lib/services/settings/settings";
-import { useToast } from "@/components/ui/use-toast";
+import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 // import EditCategoryModal from "./edit";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-import { htmlToString } from "@/lib/utils/globals";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useToast } from "@/components/ui/use-toast";
+
 import EditFAQModal from "./edit";
 import EditFeedbackModal from "./edit";
 import EditTagModal from "./edit";
@@ -43,16 +34,12 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "tagName",
     header: "Nama Tag",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("tagName")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("tagName")}</span>,
   },
   {
     accessorKey: "categoryName",
     header: "Kategori",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("categoryName")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("categoryName")}</span>,
   },
   {
     accessorKey: "contentCount",
@@ -98,17 +85,9 @@ const columns: ColumnDef<any>[] = [
               </Button>
             </MenubarTrigger>
             <MenubarContent className="flex flex-col gap-2 justify-center items-start p-4">
-              <EditTagModal
-                id={row.original.id}
-                isDetail={true}
-                data={row.original}
-              />
+              <EditTagModal id={row.original.id} isDetail={true} data={row.original} />
 
-              <EditTagModal
-                id={row.original.id}
-                isDetail={false}
-                data={row.original}
-              />
+              <EditTagModal id={row.original.id} isDetail={false} data={row.original} />
 
               <a
                 onClick={() => tagDelete(row.original.id)}
diff --git a/src/app/[locale]/(protected)/admin/settings/tag/component/create.tsx b/src/app/[locale]/(protected)/admin/settings/tag/component/create.tsx
index 159a6726..034f2d97 100644
--- a/src/app/[locale]/(protected)/admin/settings/tag/component/create.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/tag/component/create.tsx
@@ -1,38 +1,16 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-
 import { Fragment, useEffect, useState } from "react";
-
-import { useToast } from "@/components/ui/use-toast";
-import { getCategories, getCategoriesAll } from "@/lib/services/settings/settings";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Check, ChevronsUpDown } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { getCategories, getCategoriesAll } from "@/lib/services/settings/settings";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -41,8 +19,25 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { cn } from "@/lib/utils/utils"
-import { useTranslations } from "next-intl";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useToast } from "@/components/ui/use-toast";
 
 const FormSchema = z.object({
   name: z.string({
@@ -57,9 +52,9 @@ export default function CreateTagModal() {
   const router = useRouter();
   const { toast } = useToast();
   const t = useTranslations("Menu");
-  const [categoryList, setCategoryList] = useState<
-    { id: number; label: string; value: string }[]
-  >([]);
+  const [categoryList, setCategoryList] = useState<{ id: number; label: string; value: string }[]>(
+    []
+  );
   const [isOpen, setIsOpen] = useState(false);
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -117,10 +112,7 @@ export default function CreateTagModal() {
           <DialogTitle> {t("add-tags")}</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="category"
@@ -139,9 +131,7 @@ export default function CreateTagModal() {
                           )}
                         >
                           {field.value
-                            ? categoryList.find(
-                                (categ) => categ.value === field.value
-                              )?.label
+                            ? categoryList.find((categ) => categ.value === field.value)?.label
                             : "Pilih level"}
                           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                         </Button>
@@ -165,9 +155,7 @@ export default function CreateTagModal() {
                                 <Check
                                   className={cn(
                                     "ml-auto",
-                                    role.value === field.value
-                                      ? "opacity-100"
-                                      : "opacity-0"
+                                    role.value === field.value ? "opacity-100" : "opacity-0"
                                   )}
                                 />
                               </CommandItem>
@@ -196,12 +184,7 @@ export default function CreateTagModal() {
               )}
             />
             <DialogFooter>
-              <Button
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
+              <Button type="submit" color="primary" size="md" className="text-xs">
                 Tambah Tag
               </Button>
             </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/tag/component/edit.tsx b/src/app/[locale]/(protected)/admin/settings/tag/component/edit.tsx
index 719247d2..c5b031ec 100644
--- a/src/app/[locale]/(protected)/admin/settings/tag/component/edit.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/tag/component/edit.tsx
@@ -1,29 +1,14 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
+import { stringify } from "querystring";
+import { Fragment, useEffect, useState } from "react";
 import { useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
 import {
   detailDataFAQ,
   detailDataFeedback,
@@ -33,17 +18,9 @@ import {
   postDataFAQ,
   postDataFeedback,
 } from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
-
-import { close, error, loading } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Command,
   CommandEmpty,
@@ -52,7 +29,26 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { cn } from "@/lib/utils/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useToast } from "@/components/ui/use-toast";
 
 const FormSchema = z.object({
   name: z.string({
@@ -99,9 +95,9 @@ export default function EditTagModal(props: {
   const { id, isDetail, data } = props;
   const router = useRouter();
   const { toast } = useToast();
-  const [categoryList, setCategoryList] = useState<
-    { id: number; label: string; value: string }[]
-  >([]);
+  const [categoryList, setCategoryList] = useState<{ id: number; label: string; value: string }[]>(
+    []
+  );
   const [isOpen, setIsOpen] = useState(false);
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -160,19 +156,14 @@ export default function EditTagModal(props: {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <a className="hover:underline cursor-pointer">
-          {isDetail ? "Detail" : "Edit"}
-        </a>
+        <a className="hover:underline cursor-pointer">{isDetail ? "Detail" : "Edit"}</a>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
           <DialogTitle>{isDetail ? "Detail" : "Edit"} Tag</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="category"
@@ -191,9 +182,7 @@ export default function EditTagModal(props: {
                           )}
                         >
                           {field.value
-                            ? categoryList.find(
-                                (categ) => categ.value === field.value
-                              )?.label
+                            ? categoryList.find((categ) => categ.value === field.value)?.label
                             : "Pilih level"}
                           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                         </Button>
@@ -217,9 +206,7 @@ export default function EditTagModal(props: {
                                 <Check
                                   className={cn(
                                     "ml-auto",
-                                    role.value === field.value
-                                      ? "opacity-100"
-                                      : "opacity-0"
+                                    role.value === field.value ? "opacity-100" : "opacity-0"
                                   )}
                                 />
                               </CommandItem>
@@ -255,12 +242,7 @@ export default function EditTagModal(props: {
 
             {!isDetail && (
               <DialogFooter>
-                <Button
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
+                <Button type="submit" color="primary" size="md" className="text-xs">
                   Edit Tag
                 </Button>
               </DialogFooter>
diff --git a/src/app/[locale]/(protected)/admin/settings/tag/component/table.tsx b/src/app/[locale]/(protected)/admin/settings/tag/component/table.tsx
index 5b64523c..b76fc67d 100644
--- a/src/app/[locale]/(protected)/admin/settings/tag/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/tag/component/table.tsx
@@ -1,21 +1,33 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
+import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+import { listEnableCategory } from "@/lib/services/content/content";
+import {
+  getCategories,
+  getListFAQ,
+  getListFeedback,
+  getTags,
+} from "@/lib/services/settings/settings";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Table,
   TableBody,
@@ -24,25 +36,11 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-
-import { useSearchParams } from "next/navigation";
 import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
 import { NewCampaignIcon } from "@/components/icon";
-import {
-  getCategories,
-  getListFAQ,
-  getListFeedback,
-  getTags,
-} from "@/lib/services/settings/settings";
 
+import columns from "./column";
 import CreateFAQModal from "./create";
-import { useTranslations } from "next-intl";
 
 const AdminTagTable = () => {
   const router = useRouter();
@@ -53,11 +51,8 @@ const AdminTagTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -138,10 +133,7 @@ const AdminTagTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
diff --git a/src/app/[locale]/(protected)/admin/settings/tag/page.tsx b/src/app/[locale]/(protected)/admin/settings/tag/page.tsx
index f0ec0aa8..dfbdb9f2 100644
--- a/src/app/[locale]/(protected)/admin/settings/tag/page.tsx
+++ b/src/app/[locale]/(protected)/admin/settings/tag/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import AdminTagTable from "./component/table";
 
 export default function TagCategory() {
diff --git a/src/app/[locale]/(protected)/admin/survey/component/column.tsx b/src/app/[locale]/(protected)/admin/survey/component/column.tsx
index 21acf72b..6b2dfe39 100644
--- a/src/app/[locale]/(protected)/admin/survey/component/column.tsx
+++ b/src/app/[locale]/(protected)/admin/survey/component/column.tsx
@@ -1,21 +1,20 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { date } from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-import { Link, useRouter } from "@/i18n/navigation";
-import { format } from "date-fns";
 import header from "@/components/partials/header";
-import { date } from "zod";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -27,10 +26,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdAt",
     header: "Tanggal",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -42,46 +38,34 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "createdByCategory",
     header: "Jenis Akun",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("createdByCategory")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("createdByCategory")}</span>,
   },
   {
     accessorKey: "createdByUsername",
     header: "UserName",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("createdByUsername")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("createdByUsername")}</span>,
   },
   {
     accessorKey: "accessFrequency",
     header: "Akses Mediahub",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("accessFrequency")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("accessFrequency")}</span>,
   },
   {
     accessorKey: "uiExperienceDesign",
     header: "Tampilan Desain Web",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("uiExperienceDesign")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("uiExperienceDesign")}</span>,
   },
   {
     accessorKey: "uiExperienceNavigation",
     header: "Kemudahan Navigasi",
     cell: ({ row }) => (
-      <span className="normal-case">
-        {row.getValue("uiExperienceNavigation")}
-      </span>
+      <span className="normal-case">{row.getValue("uiExperienceNavigation")}</span>
     ),
   },
   {
     accessorKey: "uiExperienceSpeed",
     header: "Kecepatan Akses",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("uiExperienceSpeed")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("uiExperienceSpeed")}</span>,
   },
   {
     id: "actions",
diff --git a/src/app/[locale]/(protected)/admin/survey/component/table.tsx b/src/app/[locale]/(protected)/admin/survey/component/table.tsx
index 63149aae..412f1ac9 100644
--- a/src/app/[locale]/(protected)/admin/survey/component/table.tsx
+++ b/src/app/[locale]/(protected)/admin/survey/component/table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,49 +28,6 @@ import {
   TrendingUp,
   UserIcon,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  getMediaBlastCampaignPage,
-  listDataMedia,
-} from "@/lib/services/broadcast/broadcast";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
-import { NewCampaignIcon } from "@/components/icon";
-import search from "../../../app/chat/components/search";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
 import {
   Bar,
   BarChart,
@@ -90,7 +38,53 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
+
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { getMediaBlastCampaignPage, listDataMedia } from "@/lib/services/broadcast/broadcast";
+import { listEnableCategory } from "@/lib/services/content/content";
 import { getSurveyData } from "@/lib/services/survey/survey";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+import { NewCampaignIcon } from "@/components/icon";
+
+import search from "../../../app/chat/components/search";
+import columns from "./column";
 
 const data = [
   {
@@ -110,13 +104,11 @@ const data = [
     total: 70,
   },
   {
-    question:
-      "Seberapa Akurat dan Terpercaya\nInformasi pada Website MediaHub Polri",
+    question: "Seberapa Akurat dan Terpercaya\nInformasi pada Website MediaHub Polri",
     total: 60,
   },
   {
-    question:
-      "Seberapa Lengkap Informasi dan Berita\npada Website MediaHub Polri",
+    question: "Seberapa Lengkap Informasi dan Berita\npada Website MediaHub Polri",
     total: 55,
   },
   {
@@ -134,11 +126,8 @@ const SurveyListTable = () => {
   const [showData, setShowData] = React.useState("polri");
   const [startDate, setStartDate] = React.useState("");
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -251,9 +240,7 @@ const SurveyListTable = () => {
         </div>
       </div>
       <div className="p-3">
-        <h2 className="text-center font-semibold mb-4">
-          Survei Kepuasan Pengguna MediaHub Polri
-        </h2>
+        <h2 className="text-center font-semibold mb-4">Survei Kepuasan Pengguna MediaHub Polri</h2>
         <ResponsiveContainer width="100%" height={500}>
           <BarChart
             layout="vertical"
@@ -302,10 +289,7 @@ const SurveyListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -335,11 +319,7 @@ const SurveyListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/admin/survey/detail/[id]/page.tsx b/src/app/[locale]/(protected)/admin/survey/detail/[id]/page.tsx
index e6b5dad6..3d6b4084 100644
--- a/src/app/[locale]/(protected)/admin/survey/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/admin/survey/detail/[id]/page.tsx
@@ -1,7 +1,7 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import FormBlogDetail from "@/components/features/form/blog/blog--detail-form";
-import FormSurvey from "@/components/features/landing-page/survey";
 import FormSurveyDetail from "@/components/features/form/survey/survey-detail";
+import FormSurvey from "@/components/features/landing-page/survey";
 
 const SurveyDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/admin/survey/page.tsx b/src/app/[locale]/(protected)/admin/survey/page.tsx
index 10727f1d..3f89eb69 100644
--- a/src/app/[locale]/(protected)/admin/survey/page.tsx
+++ b/src/app/[locale]/(protected)/admin/survey/page.tsx
@@ -1,8 +1,11 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import { useState } from "react";
 import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import SurveyListTable from "./component/table";
 
 export default function AdminSurvey() {
diff --git a/src/app/[locale]/(protected)/app/calendar/calender-view.tsx b/src/app/[locale]/(protected)/app/calendar/calender-view.tsx
index 2f707e0f..69220033 100644
--- a/src/app/[locale]/(protected)/app/calendar/calender-view.tsx
+++ b/src/app/[locale]/(protected)/app/calendar/calender-view.tsx
@@ -1,29 +1,30 @@
 "use client";
-import React, { useState, useEffect } from "react";
-import FullCalendar from "@fullcalendar/react"; // must go before plugins
+
+import React, { useEffect, useState } from "react";
+import { EventContentArg } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
+import FullCalendar from "@fullcalendar/react"; // must go before plugins
+
+import timeGridPlugin from "@fullcalendar/timegrid";
+import { Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+
 import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import ExternalDraggingevent from "./dragging-events";
 import { Calendar } from "@/components/ui/calendar";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Plus } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
-import { CalendarEvent, CalendarCategory } from "./data"
-import {
-  EventContentArg,
-} from '@fullcalendar/core'
+import { Label } from "@/components/ui/label";
+
+import { CalendarCategory, CalendarEvent } from "./data";
+import ExternalDraggingevent from "./dragging-events";
 import EventModal from "./event-modal";
-import { useTranslations } from "next-intl";
+
 const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
 interface CalendarViewProps {
   events: CalendarEvent[];
   categories: CalendarCategory[];
-
-
 }
 
 const CalendarView = ({ events, categories }: CalendarViewProps) => {
@@ -31,7 +32,7 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
   const [selectedEventDate, setSelectedEventDate] = useState<Date | null>(null);
   const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
   const [draggableInitialized, setDraggableInitialized] = useState<boolean>(false);
-const t = useTranslations("CalendarApp")
+  const t = useTranslations("CalendarApp");
   // event canvas state
   const [sheetOpen, setSheetOpen] = useState<boolean>(false);
   const [date, setDate] = React.useState<Date>(new Date());
@@ -103,16 +104,14 @@ const t = useTranslations("CalendarApp")
     if (selectedCategory && selectedCategory.includes(category)) {
       setSelectedCategory(selectedCategory.filter((c) => c !== category));
     } else {
-      setSelectedCategory([...selectedCategory || [], category]);
+      setSelectedCategory([...(selectedCategory || []), category]);
     }
   };
 
   const handleClassName = (arg: EventContentArg) => {
-
     if (arg.event.extendedProps.calendar === "holiday") {
       return "destructive";
-    }
-    else if (arg.event.extendedProps.calendar === "business") {
+    } else if (arg.event.extendedProps.calendar === "business") {
       return "primary";
     } else if (arg.event.extendedProps.calendar === "personal") {
       return "success";
@@ -122,11 +121,9 @@ const t = useTranslations("CalendarApp")
       return "info";
     } else if (arg.event.extendedProps.calendar === "meeting") {
       return "warning";
-    }
-    else {
+    } else {
       return "primary";
     }
-
   };
 
   const filteredEvents = events?.filter((event) =>
@@ -139,10 +136,7 @@ const t = useTranslations("CalendarApp")
         <Card className="col-span-12 lg:col-span-4 2xl:col-span-3  pb-5">
           <CardContent className="p-0">
             <CardHeader className="border-none mb-2 pt-5">
-              <Button
-                onClick={handleDateClick}
-                className="dark:bg-background dark:text-foreground"
-              >
+              <Button onClick={handleDateClick} className="dark:bg-background dark:text-foreground">
                 <Plus className="w-4 h-4   me-1" />
                 {t("addEvent")}
               </Button>
@@ -159,15 +153,13 @@ const t = useTranslations("CalendarApp")
             </div>
 
             <div id="external-events" className=" space-y-1.5 mt-6 px-4">
-              <p className="text-sm font-medium text-default-700 mb-3">
-               {t("shortDesc")}
-              </p>
+              <p className="text-sm font-medium text-default-700 mb-3">{t("shortDesc")}</p>
               {dragEvents.map((event) => (
                 <ExternalDraggingevent key={event.id} event={event} />
               ))}
             </div>
             <div className="py-4 text-default-800  font-semibold text-xs uppercase mt-4 mb-2 px-4">
-            {t("filter")}
+              {t("filter")}
             </div>
             <ul className="space-y-3 px-4">
               <li className=" flex gap-3">
@@ -201,12 +193,7 @@ const t = useTranslations("CalendarApp")
         <Card className="col-span-12 lg:col-span-8 2xl:col-span-9  pt-5">
           <CardContent className="dashcode-app-calendar">
             <FullCalendar
-              plugins={[
-                dayGridPlugin,
-                timeGridPlugin,
-                interactionPlugin,
-                listPlugin,
-              ]}
+              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
               headerToolbar={{
                 left: "prev,next today",
                 center: "title",
diff --git a/src/app/[locale]/(protected)/app/calendar/data.ts b/src/app/[locale]/(protected)/app/calendar/data.ts
index 8f4716c9..0c393b09 100644
--- a/src/app/[locale]/(protected)/app/calendar/data.ts
+++ b/src/app/[locale]/(protected)/app/calendar/data.ts
@@ -10,7 +10,7 @@ const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1
 const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
 export const calendarEvents = [
   {
-    id: faker.string.uuid() ,
+    id: faker.string.uuid(),
     title: "All Day Event",
     start: date,
     end: nextDay,
@@ -77,7 +77,7 @@ export const calendarEvents = [
   },
 ];
 
-export const calendarCategories  = [
+export const calendarCategories = [
   {
     label: "Business",
     value: "business",
@@ -113,7 +113,7 @@ export const calendarCategories  = [
     value: "etc",
     activeClass: "ring-info-500 bg-info-500",
     className: " group-hover:border-cyan-500",
-  }
+  },
 ];
 
 export const categories = [
@@ -147,9 +147,9 @@ export const categories = [
     label: "Etc",
     value: "etc",
     className: "data-[state=checked]:bg-info data-[state=checked]:ring-info",
-  }
+  },
 ];
 
-export type CalendarEvent = (typeof  calendarEvents)[number]
-export type CalendarCategory = (typeof  calendarCategories)[number]
-export type Category = (typeof  categories)[number]
\ No newline at end of file
+export type CalendarEvent = (typeof calendarEvents)[number];
+export type CalendarCategory = (typeof calendarCategories)[number];
+export type Category = (typeof categories)[number];
diff --git a/src/app/[locale]/(protected)/app/calendar/dragging-events.tsx b/src/app/[locale]/(protected)/app/calendar/dragging-events.tsx
index a3ca6fd9..cab70e4a 100644
--- a/src/app/[locale]/(protected)/app/calendar/dragging-events.tsx
+++ b/src/app/[locale]/(protected)/app/calendar/dragging-events.tsx
@@ -1,4 +1,5 @@
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
+
 const ExternalDraggingevent = ({ event }: any) => {
   const { title, id, tag } = event;
 
@@ -6,7 +7,8 @@ const ExternalDraggingevent = ({ event }: any) => {
     <div
       title={title}
       data-id={id}
-      className="fc-event  px-4 py-1.5 bg-default-100 dark:bg-default-300  rounded text-sm flex  items-center gap-2 shadow-sm  cursor-move" >
+      className="fc-event  px-4 py-1.5 bg-default-100 dark:bg-default-300  rounded text-sm flex  items-center gap-2 shadow-sm  cursor-move"
+    >
       <span
         className={cn("h-2 w-2 rounded-full block", {
           "bg-primary": tag === "business",
diff --git a/src/app/[locale]/(protected)/app/calendar/event-modal.tsx b/src/app/[locale]/(protected)/app/calendar/event-modal.tsx
index ef471cc4..0528c356 100644
--- a/src/app/[locale]/(protected)/app/calendar/event-modal.tsx
+++ b/src/app/[locale]/(protected)/app/calendar/event-modal.tsx
@@ -1,16 +1,19 @@
 "use client";
-import React, { useState, useEffect } from "react";
+
+import React, { useEffect, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon, Loader2 } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useForm, Controller } from "react-hook-form";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -18,18 +21,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Calendar } from "@/components/ui/calendar";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Loader2, CalendarIcon } from "lucide-react";
 import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+
 import { CalendarCategory } from "./data";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 
 const schema = z.object({
   title: z.string().min(3, { message: "Required" }),
@@ -51,9 +45,7 @@ const EventModal = ({
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [endDate, setEndDate] = useState<Date>(new Date());
   const [isPending, startTransition] = React.useTransition();
-  const [calendarProps, setCalendarProps] = React.useState<any>(
-    categories[0].value
-  );
+  const [calendarProps, setCalendarProps] = React.useState<any>(categories[0].value);
   // delete modal state
   const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
   const [eventIdToDelete, setEventIdToDelete] = useState<string | null>(null);
@@ -160,11 +152,7 @@ const EventModal = ({
                           !startDate && "text-muted-foreground"
                         )}
                       >
-                        {startDate ? (
-                          format(startDate, "PP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
+                        {startDate ? format(startDate, "PP") : <span>Pick a date</span>}
                         <CalendarIcon className="h-4 w-4" />
                       </Button>
                     </PopoverTrigger>
@@ -196,11 +184,7 @@ const EventModal = ({
                           !endDate && "text-muted-foreground"
                         )}
                       >
-                        {endDate ? (
-                          format(endDate, "PP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
+                        {endDate ? format(endDate, "PP") : <span>Pick a date</span>}
                         <CalendarIcon className="h-4 w-4" />
                       </Button>
                     </PopoverTrigger>
@@ -236,10 +220,7 @@ const EventModal = ({
                         </SelectTrigger>
                         <SelectContent>
                           {categories.map((category: CalendarCategory) => (
-                            <SelectItem
-                              value={category.value}
-                              key={category.value}
-                            >
+                            <SelectItem value={category.value} key={category.value}>
                               {category.label}
                             </SelectItem>
                           ))}
diff --git a/src/app/[locale]/(protected)/app/calendar/page.tsx b/src/app/[locale]/(protected)/app/calendar/page.tsx
index 266a6f7b..43b82284 100644
--- a/src/app/[locale]/(protected)/app/calendar/page.tsx
+++ b/src/app/[locale]/(protected)/app/calendar/page.tsx
@@ -1,8 +1,6 @@
-import { getEvents, getCategories } from "./utils";
-import { Category } from "./data"
 import CalendarView from "./calender-view";
-
-
+import { Category } from "./data";
+import { getCategories, getEvents } from "./utils";
 
 const CalenderPage = async () => {
   const events = await getEvents();
diff --git a/src/app/[locale]/(protected)/app/calendar/utils.ts b/src/app/[locale]/(protected)/app/calendar/utils.ts
index e4862dd2..427a2fd9 100644
--- a/src/app/[locale]/(protected)/app/calendar/utils.ts
+++ b/src/app/[locale]/(protected)/app/calendar/utils.ts
@@ -2,10 +2,10 @@ import { calendarEvents, categories } from "./data";
 
 // get events
 export const getEvents = async () => {
-    return calendarEvents;
+  return calendarEvents;
 };
 
 // get categories
 export const getCategories = async () => {
-    return categories;
-}
\ No newline at end of file
+  return categories;
+};
diff --git a/src/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx b/src/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx
index 55b7bb02..71069179 100644
--- a/src/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx
+++ b/src/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx
@@ -1,123 +1,124 @@
 "use client";
+
+import { useChatConfig } from "@/lib/hooks/use-chat";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
 import { Icon } from "@/components/ui/icon";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Contact, ProfileUser } from "@/app/api/chat/data";
-import { useChatConfig } from "@/lib/hooks/use-chat";
 
 const ChatHeader = ({ contact }: { contact: any }) => {
-    let active = true;
-    const isLg = useMediaQuery("(max-width: 1024px)");
+  let active = true;
+  const isLg = useMediaQuery("(max-width: 1024px)");
 
-    const [chatConfig, setChatConfig] = useChatConfig()
+  const [chatConfig, setChatConfig] = useChatConfig();
 
-    return (
-        <div className="flex  items-center">
-            <div className="flex-1 flex gap-3 items-center">
-                {isLg && (
-                    <Button size="icon" variant='ghost' color="secondary" onClick={() => setChatConfig({
-                        ...chatConfig,
-                        isOpen: true
-                    })}>
-                        <Icon icon="heroicons-outline:menu-alt-1" className="w-5 h-5" />
-                    </Button>
-                )}
-                <div className="relative inline-block">
-                    <Avatar className="border-none shadow-none bg-transparent hover:bg-transparent">
-                        <AvatarImage src={contact?.avatar?.src} alt="" />
-                        <AvatarFallback>{contact?.fullName?.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                    <Badge
-                        className=" h-2 w-2  p-0 ring-1 ring-border ring-offset-[1px]  absolute top-2 -end-0.5"
-                        color={active ? "success" : "secondary"}
-                    ></Badge>
-                </div>
-                <div className="hidden lg:block">
-                    <div className="text-default-800 text-sm font-medium mb-0.5 ">
-                        <span className="relative">{contact?.fullName}</span>
-                    </div>
-                    <div className="text-default-600 text-xs font-normal">
-                        {active ? "Active Now" : "Offline"}
-                    </div>
-                </div>
-            </div>
-            <div className="flex-none flex gap-2">
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button
-                                type="button"
-                                size="icon"
-                                className="rounded-full bg-default-100 text-default-900 hover:bg-default-100 hover:ring-0 hover:ring-transparent"
-                            >
-                                <Icon icon="heroicons-outline:phone" className="text-xl" />
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom" align="end">
-                            <p>Start a voice call</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-                <TooltipProvider>
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button
-                                type="button"
-                                size="icon"
-                                className="rounded-full bg-default-100 text-default-900 hover:bg-default-100 hover:ring-0 hover:ring-transparent"
-                            >
-                                <Icon icon="heroicons-outline:video-camera" className="text-xl" />
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent side="bottom" align="end">
-                            <p>Start a video call</p>
-                        </TooltipContent>
-                    </Tooltip>
-                </TooltipProvider>
-                {!isLg && (
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    onClick={() => setChatConfig({ ...chatConfig, showInfo: !chatConfig.showInfo })}
-                                    type="button"
-                                    size="icon"
-                                    className={cn(
-                                        "rounded-full bg-default-100 text-primary hover:bg-default-100 hover:ring-0 hover:ring-transparent",
-                                        {
-                                            "text-default-900": !chatConfig.showInfo,
-                                        }
-                                    )}
-
-                                >
-                                    <span className="text-xl ">
-                                        {chatConfig.showInfo ? (
-                                            <Icon icon="heroicons-outline:dots-vertical" className="text-xl" />
-
-                                        ) : (
-                                            <Icon icon="heroicons-outline:dots-horizontal" className="text-xl" />
-                                        )}
-                                    </span>
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent side="bottom" align="end">
-                                <p>Conversation information</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                )}
-            </div>
+  return (
+    <div className="flex  items-center">
+      <div className="flex-1 flex gap-3 items-center">
+        {isLg && (
+          <Button
+            size="icon"
+            variant="ghost"
+            color="secondary"
+            onClick={() =>
+              setChatConfig({
+                ...chatConfig,
+                isOpen: true,
+              })
+            }
+          >
+            <Icon icon="heroicons-outline:menu-alt-1" className="w-5 h-5" />
+          </Button>
+        )}
+        <div className="relative inline-block">
+          <Avatar className="border-none shadow-none bg-transparent hover:bg-transparent">
+            <AvatarImage src={contact?.avatar?.src} alt="" />
+            <AvatarFallback>{contact?.fullName?.slice(0, 2)}</AvatarFallback>
+          </Avatar>
+          <Badge
+            className=" h-2 w-2  p-0 ring-1 ring-border ring-offset-[1px]  absolute top-2 -end-0.5"
+            color={active ? "success" : "secondary"}
+          ></Badge>
         </div>
-    );
+        <div className="hidden lg:block">
+          <div className="text-default-800 text-sm font-medium mb-0.5 ">
+            <span className="relative">{contact?.fullName}</span>
+          </div>
+          <div className="text-default-600 text-xs font-normal">
+            {active ? "Active Now" : "Offline"}
+          </div>
+        </div>
+      </div>
+      <div className="flex-none flex gap-2">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                size="icon"
+                className="rounded-full bg-default-100 text-default-900 hover:bg-default-100 hover:ring-0 hover:ring-transparent"
+              >
+                <Icon icon="heroicons-outline:phone" className="text-xl" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" align="end">
+              <p>Start a voice call</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                type="button"
+                size="icon"
+                className="rounded-full bg-default-100 text-default-900 hover:bg-default-100 hover:ring-0 hover:ring-transparent"
+              >
+                <Icon icon="heroicons-outline:video-camera" className="text-xl" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom" align="end">
+              <p>Start a video call</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+        {!isLg && (
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={() => setChatConfig({ ...chatConfig, showInfo: !chatConfig.showInfo })}
+                  type="button"
+                  size="icon"
+                  className={cn(
+                    "rounded-full bg-default-100 text-primary hover:bg-default-100 hover:ring-0 hover:ring-transparent",
+                    {
+                      "text-default-900": !chatConfig.showInfo,
+                    }
+                  )}
+                >
+                  <span className="text-xl ">
+                    {chatConfig.showInfo ? (
+                      <Icon icon="heroicons-outline:dots-vertical" className="text-xl" />
+                    ) : (
+                      <Icon icon="heroicons-outline:dots-horizontal" className="text-xl" />
+                    )}
+                  </span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" align="end">
+                <p>Conversation information</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        )}
+      </div>
+    </div>
+  );
 };
 
 export default ChatHeader;
diff --git a/src/app/[locale]/(protected)/app/chat/[id]/components/info-wrapper.tsx b/src/app/[locale]/(protected)/app/chat/[id]/components/info-wrapper.tsx
index 2925c2e4..59bdf169 100644
--- a/src/app/[locale]/(protected)/app/chat/[id]/components/info-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/chat/[id]/components/info-wrapper.tsx
@@ -1,20 +1,21 @@
-'use client'
+"use client";
 
-import React from 'react'
+import React from "react";
+
+import { useChatConfig } from "@/lib/hooks/use-chat";
 import { Card, CardContent } from "@/components/ui/card";
-import { useChatConfig } from '@/lib/hooks/use-chat';
-import { ScrollArea } from '@/components/ui/scroll-area';
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 const InfoWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [chatConfig] = useChatConfig();
-    if (!chatConfig.showInfo) return null
-    return (
-        <Card className='w-[285px]'>
-            <ScrollArea className='h-full'>
-                <CardContent className='p-0'> {children}</CardContent>
-            </ScrollArea>
-        </Card>
-    )
-}
+  const [chatConfig] = useChatConfig();
+  if (!chatConfig.showInfo) return null;
+  return (
+    <Card className="w-[285px]">
+      <ScrollArea className="h-full">
+        <CardContent className="p-0"> {children}</CardContent>
+      </ScrollArea>
+    </Card>
+  );
+};
 
-export default InfoWrapper
\ No newline at end of file
+export default InfoWrapper;
diff --git a/src/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx b/src/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx
index b506f0e3..1a08cb99 100644
--- a/src/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx
+++ b/src/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx
@@ -1,143 +1,138 @@
 "use client";
-import React, { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Icon } from "@/components/ui/icon";
-import { Annoyed, SendHorizontal } from "lucide-react";
 
+import React, { useState } from "react";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import {
-    Tooltip,
-    TooltipArrow,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Label } from "@/components/ui/label";
-
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover";
-import { postMessageAction } from "/action/app-actions";
+import { Annoyed, SendHorizontal } from "lucide-react";
 import { useTheme } from "next-themes";
 
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+import { postMessageAction } from "/action/app-actions";
+
 const MessageFooter = () => {
-    const { theme: mode } = useTheme();
-    const [message, setMessage] = useState("");
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setMessage(e.target.value);
-        e.target.style.height = "auto"; // Reset the height to auto to adjust
-        e.target.style.height = `${e.target.scrollHeight - 15}px`;
+  const { theme: mode } = useTheme();
+  const [message, setMessage] = useState("");
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setMessage(e.target.value);
+    e.target.style.height = "auto"; // Reset the height to auto to adjust
+    e.target.style.height = `${e.target.scrollHeight - 15}px`;
+  };
+
+  const handleSelectEmoji = (emoji: any) => {
+    setMessage(message + emoji.native);
+  };
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!message) return;
+    const data: any = {
+      message,
     };
 
-    const handleSelectEmoji = (emoji: any) => {
-        setMessage(message + emoji.native);
-    };
+    await postMessageAction("55fe838e-9a09-4caf-a591-559803309ef1", "sfsfsf");
+    setMessage("");
+  };
+  return (
+    <>
+      <div className="w-full flex items-end gap-1 lg:gap-4 lg:px-4 relative px-2 ">
+        <div className="flex-none flex gap-1 absolute md:static top-0 left-1.5 z-10 ">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900"
+                >
+                  <Icon icon="heroicons-outline:link" className="w-5 h-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Add link</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
 
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        if (!message) return;
-        const data: any = {
-            message,
-        };
-
-        await postMessageAction("55fe838e-9a09-4caf-a591-559803309ef1", "sfsfsf");
-        setMessage("");
-
-
-    };
-    return (
-        <>
-
-
-            <div
-                className="w-full flex items-end gap-1 lg:gap-4 lg:px-4 relative px-2 "
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                size="icon"
+                className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900"
+              >
+                <Annoyed className="w-6 h-6 text-default" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent
+              side="top"
+              align="start"
+              className="w-fit p-0 shadow-none border-none bottom-0 rtl:left-5 ltr:-left-[110px]"
             >
-                <div className="flex-none flex gap-1 absolute md:static top-0 left-1.5 z-10 ">
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900">
-                                    <Icon icon="heroicons-outline:link" className="w-5 h-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Add link</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
+              <Picker
+                data={data}
+                onEmojiSelect={handleSelectEmoji}
+                theme={mode === "dark" ? "dark" : "light"}
+              />
+            </PopoverContent>
+          </Popover>
+        </div>
+        <div className="flex-1">
+          <form onSubmit={handleSubmit}>
+            <div className="flex  gap-1 relative">
+              <textarea
+                value={message}
+                onChange={handleChange}
+                placeholder="Type your message..."
+                className="bg-background focus:outline-none  rounded-xl break-words ps-8  md:ps-3 px-3 flex-1 h-10 pt-2 p-1 pr-8 no-scrollbar "
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSubmit(e as any);
+                  }
+                }}
+                style={{
+                  minHeight: "40px",
+                  maxHeight: "120px",
+                  overflowY: "auto",
+                  resize: "none",
+                }}
+              />
 
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <Button
-                                size="icon"
-                                className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900">
-                                <Annoyed className="w-6 h-6 text-default" />
-                            </Button>
-                        </PopoverTrigger>
-                        <PopoverContent side="top" align="start" className="w-fit p-0 shadow-none border-none bottom-0 rtl:left-5 ltr:-left-[110px]">
-                            <Picker
-                                data={data}
-                                onEmojiSelect={handleSelectEmoji}
-                                theme={mode === "dark" ? "dark" : "light"}
-                            />
-                        </PopoverContent>
-                    </Popover>
-
-                </div>
-                <div className="flex-1">
-                    <form onSubmit={handleSubmit}>
-                        <div className="flex  gap-1 relative">
-                            <textarea
-                                value={message}
-                                onChange={handleChange}
-                                placeholder="Type your message..."
-                                className="bg-background focus:outline-none  rounded-xl break-words ps-8  md:ps-3 px-3 flex-1 h-10 pt-2 p-1 pr-8 no-scrollbar "
-                                onKeyDown={(e) => {
-                                    if (e.key === "Enter" && !e.shiftKey) {
-                                        e.preventDefault();
-                                        handleSubmit(e as any);
-                                    }
-                                }}
-                                style={{
-                                    minHeight: "40px",
-                                    maxHeight: "120px",
-                                    overflowY: "auto",
-                                    resize: "none",
-                                }}
-                            />
-
-                            <TooltipProvider>
-                                <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <Button
-                                            size="icon"
-                                            type="submit"
-                                            className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900"
-                                        >
-                                            <Icon
-                                                icon="heroicons-outline:paper-airplane"
-                                                className="transform rotate-[60deg] w-5 h-5"
-                                            />
-                                        </Button>
-                                    </TooltipTrigger>
-                                    <TooltipContent align="end">
-                                        <p>Send Message</p>
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-
-                        </div>
-                    </form>
-                </div>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="icon"
+                      type="submit"
+                      className="rounded-full hover:ring-0 hover:ring-transparent bg-default-100 hover:bg-default-100 hover:text-default-900 text-default-900"
+                    >
+                      <Icon
+                        icon="heroicons-outline:paper-airplane"
+                        className="transform rotate-[60deg] w-5 h-5"
+                      />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent align="end">
+                    <p>Send Message</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
             </div>
-        </>
-    );
+          </form>
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default MessageFooter;
diff --git a/src/app/[locale]/(protected)/app/chat/[id]/page.tsx b/src/app/[locale]/(protected)/app/chat/[id]/page.tsx
index 8b166a26..08b9fb4f 100644
--- a/src/app/[locale]/(protected)/app/chat/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/app/chat/[id]/page.tsx
@@ -1,241 +1,224 @@
+import Image from "next/image";
+import { redirect } from "@/i18n/navigation";
+import { MoreHorizontal } from "lucide-react";
 
-import { getChatsByContactId, getProfileUser } from '../utils'
-import { Icon } from "@/components/ui/icon";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Card, CardContent, CardHeader, CardFooter } from "@/components/ui/card";
-import Image from 'next/image';
-import { redirect } from '@/i18n/navigation';
-import MessageFooter from './components/message-footer';
-import ChatHeader from './components/chat-header';
-import InfoWrapper from './components/info-wrapper';
-import { MoreHorizontal } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Icon } from "@/components/ui/icon";
+
+import { getChatsByContactId, getProfileUser } from "../utils";
+import ChatHeader from "./components/chat-header";
+import InfoWrapper from "./components/info-wrapper";
+import MessageFooter from "./components/message-footer";
 
 const socials = [
-    {
-        name: "facebook",
-        icon: "bi:facebook",
-        link: "#",
-    },
-    {
-        name: "twitter",
-        link: "#",
-        icon: "bi:twitter",
-    },
-    {
-        name: "instagram",
-        link: "#",
-        icon: "bi:instagram",
-    },
+  {
+    name: "facebook",
+    icon: "bi:facebook",
+    link: "#",
+  },
+  {
+    name: "twitter",
+    link: "#",
+    icon: "bi:twitter",
+  },
+  {
+    name: "instagram",
+    link: "#",
+    icon: "bi:instagram",
+  },
 ];
 
-const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) => {
- 
-    const { chat, contact } = await getChatsByContactId(id)
-    const profile = await getProfileUser()
+const ChatPageSingle = async ({ params: { id } }: { params: { id: string } }) => {
+  const { chat, contact } = await getChatsByContactId(id);
+  const profile = await getProfileUser();
 
-    if (!contact) {
-        redirect('/app/chat')
-    }
+  if (!contact) {
+    redirect("/app/chat");
+  }
 
-    return (
-        <>
-            <Card className="h-full flex flex-col flex-1 ">
-                <CardHeader className="flex-none mb-0 border-b border-default-200 py-5">
-                    <ChatHeader contact={contact} />
-                </CardHeader>
-                <CardContent className="  relative flex-1 overflow-y-auto no-scrollbar">
-                    {chat && chat?.chat?.length > 0 ? (
-                        chat?.chat?.map(({ senderId, message, }, index) => (
-                            <div className="block  " key={index}>
-                                {senderId === "e2c1a571-5f7e-4f56-9020-13f98b0eaba2" ? (
-                                    <>
-                                        <div className="flex gap-2 items-start justify-end group w-full mb-4">
-                                            <div className="flex flex-col  gap-1">
-                                                <div className="flex items-center gap-1">
-                                                    <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible ">
-                                                        <DropdownMenu>
-                                                            <DropdownMenuTrigger asChild>
-                                                                <span className="w-7 h-7 rounded-full bg-default-200 flex items-center justify-center">
-                                                                    <MoreHorizontal />
-                                                                </span>
-                                                            </DropdownMenuTrigger>
-                                                            <DropdownMenuContent
-                                                                className="w-fit"
-                                                                align="end"
-                                                                side="top"
-                                                            >
-                                                                <DropdownMenuItem>Remove</DropdownMenuItem>
-                                                                <DropdownMenuItem>Forward</DropdownMenuItem>
-                                                            </DropdownMenuContent>
-                                                        </DropdownMenu>
-                                                    </div>
-                                                    <div className="whitespace-pre-wrap break-all">
-                                                        <div className="bg-default-100 text-default-900 text-sm  p-3 font-normal rounded-md ">
-                                                            {message}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div className="font-normal text-xs text-default-400 dark:text-default-600 text-start mt-1"> 2:40 pm  </div>
-                                            </div>
-                                            <div className="flex-none self-end -translate-y-5">
-                                                <div className="h-8 w-8 rounded-full ">
-                                                    <Image
-                                                        src={profile?.avatar}
-                                                        alt=""
-                                                        className="block w-full h-full object-cover rounded-full"
-                                                    />
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </>
-                                ) : (
-                                    <div className="flex gap-2 items-start group mb-4">
-                                        <div className="flex-none self-end -translate-y-5">
-                                            <div className="h-8 w-8 rounded-full">
-                                                <Image
-                                                    src={contact?.avatar || `/images/users/user-5.jpg`}
-                                                    alt=""
-                                                    className="block w-full h-full object-cover rounded-full"
-                                                />
-                                            </div>
-
-                                        </div>
-                                        <div className="flex-1 flex flex-col gap-2">
-                                            <div className="flex flex-col   gap-1">
-                                                <div className="flex items-center gap-1">
-                                                    <div className="whitespace-pre-wrap break-all relative z-[1]">
-                                                        <div className="bg-default-100 text-default-900 text-sm  p-3 font-normal rounded-md ">
-                                                            {message}
-                                                        </div>
-                                                    </div>
-                                                    <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible ">
-                                                        <DropdownMenu>
-                                                            <DropdownMenuTrigger asChild>
-                                                                <span className="w-7 h-7 rounded-full bg-default-200 flex items-center justify-center">
-                                                                    <MoreHorizontal />
-                                                                </span>
-                                                            </DropdownMenuTrigger>
-                                                            <DropdownMenuContent
-                                                                className="w-fit"
-                                                                align="end"
-                                                                side="top"
-                                                            >
-                                                                <DropdownMenuItem>Remove</DropdownMenuItem>
-                                                                <DropdownMenuItem>Forward</DropdownMenuItem>
-                                                            </DropdownMenuContent>
-                                                        </DropdownMenu>
-                                                    </div>
-                                                </div>
-                                                <div className="font-normal text-xs text-default-400 dark:text-default-600 text-start mt-1"> 2:40 pm  </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-                        ))
-                    ) : (
-                        <div className="text-center   absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-                            <Icon icon="typcn:messages" className="h-20 w-20 text-default-300 mx-auto" />
-                            <div className="mt-4 text-lg font-medium text-default-500">No messages </div>
-                            <div className="mt-1 text-sm font-medium text-default-400">{`don't worry, just take a deep breath & say "Hello"`}</div>
-                        </div>
-                    )}
-
-                </CardContent>
-                <CardFooter className="flex-none flex-col px-0 py-4 border-t border-border">
-                    <MessageFooter />
-                </CardFooter>
-            </Card>
-
-            <InfoWrapper>
-                <h4 className="text-xl text-default-900 font-medium mb-8 px-6 mt-6">
-                   About
-                </h4>
-
-                <div className='flex flex-col items-center px-6'>
-                    <Avatar className="h-24 w-24 border-none shadow-none bg-transparent hover:bg-transparent">
-                        <AvatarImage src={contact?.avatar?.src || `/images/users/user-5.jpg`} alt="" />
-                        <AvatarFallback>{contact?.fullName?.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                    <div className="text-center mt-4 ">
-                        <h5 className="text-base text-default-600  font-medium mb-1">
-                            {contact?.fullName}
-                        </h5>
-                        <h6 className="text-xs text-default-600  font-normal">
-                            {contact?.role}
-                        </h6>
-                    </div>
-                </div>
-
-                <ul className="mt-5 px-6 space-y-4 border-b border-default-200  pb-5 ">
-                    <li className="flex justify-between text-sm text-default-600 ">
-                        <div className="flex gap-2 items-start ">
-                            <Icon
-                                icon="heroicons-outline:location-marker"
-                                className="text-base"
-                            />
-                            <span>Location</span>
-                        </div>
-                        <div className="font-medium">Bangladesh</div>
-                    </li>
-                    <li className="flex justify-between text-sm text-default-600 ">
-                        <div className="flex gap-2 items-start">
-                            <Icon icon="heroicons-outline:user" className="text-base" />
-                            <span>Members since</span>
-                        </div>
-                        <div className="font-medium">Oct 2021</div>
-                    </li>
-                    <li className="flex justify-between text-sm text-default-600 ">
-                        <div className="flex gap-2 items-start ">
-                            <Icon icon="heroicons-outline:translate" className="text-base" />
-                            <span>Language</span>
-                        </div>
-                        <div className="font-medium">English</div>
-                    </li>
-                </ul>
-                <ul className="mt-5 px-6 space-y-4 border-b border-default-200  pb-5 ">
-                    {socials?.map((slink, sindex) => (
-                        <li
-                            key={sindex}
-                            className="text-sm text-default-600"
-                        >
-                            <button className="flex gap-2">
-                                <Icon icon={slink.icon} className="text-base" />
-                                <span className="capitalize font-normal text-default-600">
-                                    {slink.name}
+  return (
+    <>
+      <Card className="h-full flex flex-col flex-1 ">
+        <CardHeader className="flex-none mb-0 border-b border-default-200 py-5">
+          <ChatHeader contact={contact} />
+        </CardHeader>
+        <CardContent className="  relative flex-1 overflow-y-auto no-scrollbar">
+          {chat && chat?.chat?.length > 0 ? (
+            chat?.chat?.map(({ senderId, message }, index) => (
+              <div className="block  " key={index}>
+                {senderId === "e2c1a571-5f7e-4f56-9020-13f98b0eaba2" ? (
+                  <>
+                    <div className="flex gap-2 items-start justify-end group w-full mb-4">
+                      <div className="flex flex-col  gap-1">
+                        <div className="flex items-center gap-1">
+                          <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible ">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <span className="w-7 h-7 rounded-full bg-default-200 flex items-center justify-center">
+                                  <MoreHorizontal />
                                 </span>
-                            </button>
-                        </li>
-                    ))}
-                </ul>
-                <h4 className="py-4 text-sm px-6 text-default-500  font-medium">
-                    Shared documents
-                </h4>
-                <div className="grid grid-cols-3 gap-2 px-6">
-                    {
-                        ["/images/chat/sd1.png", "/images/chat/sd2.png", "/images/chat/sd3.png", "/images/chat/sd4.png", "/images/chat/sd5.png", "/images/chat/sd6.png"].map((image, index) => (
-                            <Image
-                                key={`image-${index}`}
-                                src={image}
-                                alt=""
-                                width={200}
-                                height={100}
-                                className='w-full h-12 object-cover rounded-md'
-                            />
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent className="w-fit" align="end" side="top">
+                                <DropdownMenuItem>Remove</DropdownMenuItem>
+                                <DropdownMenuItem>Forward</DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                          <div className="whitespace-pre-wrap break-all">
+                            <div className="bg-default-100 text-default-900 text-sm  p-3 font-normal rounded-md ">
+                              {message}
+                            </div>
+                          </div>
+                        </div>
+                        <div className="font-normal text-xs text-default-400 dark:text-default-600 text-start mt-1">
+                          {" "}
+                          2:40 pm{" "}
+                        </div>
+                      </div>
+                      <div className="flex-none self-end -translate-y-5">
+                        <div className="h-8 w-8 rounded-full ">
+                          <Image
+                            src={profile?.avatar}
+                            alt=""
+                            className="block w-full h-full object-cover rounded-full"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                ) : (
+                  <div className="flex gap-2 items-start group mb-4">
+                    <div className="flex-none self-end -translate-y-5">
+                      <div className="h-8 w-8 rounded-full">
+                        <Image
+                          src={contact?.avatar || `/images/users/user-5.jpg`}
+                          alt=""
+                          className="block w-full h-full object-cover rounded-full"
+                        />
+                      </div>
+                    </div>
+                    <div className="flex-1 flex flex-col gap-2">
+                      <div className="flex flex-col   gap-1">
+                        <div className="flex items-center gap-1">
+                          <div className="whitespace-pre-wrap break-all relative z-[1]">
+                            <div className="bg-default-100 text-default-900 text-sm  p-3 font-normal rounded-md ">
+                              {message}
+                            </div>
+                          </div>
+                          <div className="opacity-0 invisible group-hover:opacity-100 group-hover:visible ">
+                            <DropdownMenu>
+                              <DropdownMenuTrigger asChild>
+                                <span className="w-7 h-7 rounded-full bg-default-200 flex items-center justify-center">
+                                  <MoreHorizontal />
+                                </span>
+                              </DropdownMenuTrigger>
+                              <DropdownMenuContent className="w-fit" align="end" side="top">
+                                <DropdownMenuItem>Remove</DropdownMenuItem>
+                                <DropdownMenuItem>Forward</DropdownMenuItem>
+                              </DropdownMenuContent>
+                            </DropdownMenu>
+                          </div>
+                        </div>
+                        <div className="font-normal text-xs text-default-400 dark:text-default-600 text-start mt-1">
+                          {" "}
+                          2:40 pm{" "}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="text-center   absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+              <Icon icon="typcn:messages" className="h-20 w-20 text-default-300 mx-auto" />
+              <div className="mt-4 text-lg font-medium text-default-500">No messages </div>
+              <div className="mt-1 text-sm font-medium text-default-400">{`don't worry, just take a deep breath & say "Hello"`}</div>
+            </div>
+          )}
+        </CardContent>
+        <CardFooter className="flex-none flex-col px-0 py-4 border-t border-border">
+          <MessageFooter />
+        </CardFooter>
+      </Card>
 
-                        ))
-                    }
-                </div>
-            </InfoWrapper>
-        </>
-    )
+      <InfoWrapper>
+        <h4 className="text-xl text-default-900 font-medium mb-8 px-6 mt-6">About</h4>
 
-}
+        <div className="flex flex-col items-center px-6">
+          <Avatar className="h-24 w-24 border-none shadow-none bg-transparent hover:bg-transparent">
+            <AvatarImage src={contact?.avatar?.src || `/images/users/user-5.jpg`} alt="" />
+            <AvatarFallback>{contact?.fullName?.slice(0, 2)}</AvatarFallback>
+          </Avatar>
+          <div className="text-center mt-4 ">
+            <h5 className="text-base text-default-600  font-medium mb-1">{contact?.fullName}</h5>
+            <h6 className="text-xs text-default-600  font-normal">{contact?.role}</h6>
+          </div>
+        </div>
 
-export default ChatPageSingle
\ No newline at end of file
+        <ul className="mt-5 px-6 space-y-4 border-b border-default-200  pb-5 ">
+          <li className="flex justify-between text-sm text-default-600 ">
+            <div className="flex gap-2 items-start ">
+              <Icon icon="heroicons-outline:location-marker" className="text-base" />
+              <span>Location</span>
+            </div>
+            <div className="font-medium">Bangladesh</div>
+          </li>
+          <li className="flex justify-between text-sm text-default-600 ">
+            <div className="flex gap-2 items-start">
+              <Icon icon="heroicons-outline:user" className="text-base" />
+              <span>Members since</span>
+            </div>
+            <div className="font-medium">Oct 2021</div>
+          </li>
+          <li className="flex justify-between text-sm text-default-600 ">
+            <div className="flex gap-2 items-start ">
+              <Icon icon="heroicons-outline:translate" className="text-base" />
+              <span>Language</span>
+            </div>
+            <div className="font-medium">English</div>
+          </li>
+        </ul>
+        <ul className="mt-5 px-6 space-y-4 border-b border-default-200  pb-5 ">
+          {socials?.map((slink, sindex) => (
+            <li key={sindex} className="text-sm text-default-600">
+              <button className="flex gap-2">
+                <Icon icon={slink.icon} className="text-base" />
+                <span className="capitalize font-normal text-default-600">{slink.name}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+        <h4 className="py-4 text-sm px-6 text-default-500  font-medium">Shared documents</h4>
+        <div className="grid grid-cols-3 gap-2 px-6">
+          {[
+            "/images/chat/sd1.png",
+            "/images/chat/sd2.png",
+            "/images/chat/sd3.png",
+            "/images/chat/sd4.png",
+            "/images/chat/sd5.png",
+            "/images/chat/sd6.png",
+          ].map((image, index) => (
+            <Image
+              key={`image-${index}`}
+              src={image}
+              alt=""
+              width={200}
+              height={100}
+              className="w-full h-12 object-cover rounded-md"
+            />
+          ))}
+        </div>
+      </InfoWrapper>
+    </>
+  );
+};
+
+export default ChatPageSingle;
diff --git a/src/app/[locale]/(protected)/app/chat/chat-wrapper.tsx b/src/app/[locale]/(protected)/app/chat/chat-wrapper.tsx
index 36059b1a..9acb7d48 100644
--- a/src/app/[locale]/(protected)/app/chat/chat-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/chat/chat-wrapper.tsx
@@ -1,26 +1,27 @@
-'use client'
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import React from 'react'
-import { useChatConfig } from '@/lib/hooks/use-chat';
+"use client";
+
+import React from "react";
+
+import { useChatConfig } from "@/lib/hooks/use-chat";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
 
 const ChatWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [chatConfig, setChatConfig] = useChatConfig();
-    const { isOpen } = chatConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    return (
-        <div className=' app-height flex gap-5 relative'>
-            {!isTablet && isOpen && (
-                <div
-                    onClick={() => setChatConfig({ ...chatConfig, isOpen: false })}
-                    className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
+  const [chatConfig, setChatConfig] = useChatConfig();
+  const { isOpen } = chatConfig;
+  const isTablet = useMediaQuery("(min-width: 1024px)");
+  return (
+    <div className=" app-height flex gap-5 relative">
+      {!isTablet && isOpen && (
+        <div
+          onClick={() => setChatConfig({ ...chatConfig, isOpen: false })}
+          className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
          backdrop-blur-sm absolute w-full flex-1 inset-0 z-20 rounded-md"
+        ></div>
+      )}
 
-                ></div>
-            )}
+      {children}
+    </div>
+  );
+};
 
-            {children}
-        </div>
-    )
-}
-
-export default ChatWrapper
\ No newline at end of file
+export default ChatWrapper;
diff --git a/src/app/[locale]/(protected)/app/chat/components/blank-chat.tsx b/src/app/[locale]/(protected)/app/chat/components/blank-chat.tsx
index 3d28065a..ed2a2946 100644
--- a/src/app/[locale]/(protected)/app/chat/components/blank-chat.tsx
+++ b/src/app/[locale]/(protected)/app/chat/components/blank-chat.tsx
@@ -1,34 +1,33 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import { useMediaQuery } from "@/lib/hooks/use-media-query";
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import { useChatConfig } from "@/lib/hooks/use-chat";
+
 import { useTranslations } from "next-intl";
+
+import { useChatConfig } from "@/lib/hooks/use-chat";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+
 const Blank = () => {
-    const isLg = useMediaQuery("(max-width: 1024px)");
-    const [chatConfig, setChatConfig] = useChatConfig()
-    const t = useTranslations("ChatApp");
-    return (
-        <Card className="flex-1 h-full">
-            <CardContent className="h-full flex justify-center items-center">
-                <div className="text-center flex flex-col items-center">
-                    <Icon icon="uiw:message" className="text-7xl text-default-300" />
-                    <div className="mt-4 text-lg font-medium text-default-500">
-                        {t("blankMessageTitle")}
-                    </div>
-                    <p className="mt-1 text-sm font-medium text-default-400">
-                        {t("blankMessageDesc")}
-                    </p>
-                    {isLg && (
-                        <Button className="mt-2" onClick={() => setChatConfig({ ...chatConfig, isOpen: true })}>
-                            Start Conversation
-                        </Button>
-                    )}
-                </div>
-            </CardContent>
-        </Card>
-    );
+  const isLg = useMediaQuery("(max-width: 1024px)");
+  const [chatConfig, setChatConfig] = useChatConfig();
+  const t = useTranslations("ChatApp");
+  return (
+    <Card className="flex-1 h-full">
+      <CardContent className="h-full flex justify-center items-center">
+        <div className="text-center flex flex-col items-center">
+          <Icon icon="uiw:message" className="text-7xl text-default-300" />
+          <div className="mt-4 text-lg font-medium text-default-500">{t("blankMessageTitle")}</div>
+          <p className="mt-1 text-sm font-medium text-default-400">{t("blankMessageDesc")}</p>
+          {isLg && (
+            <Button className="mt-2" onClick={() => setChatConfig({ ...chatConfig, isOpen: true })}>
+              Start Conversation
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
 };
 
 export default Blank;
diff --git a/src/app/[locale]/(protected)/app/chat/components/contact-list.tsx b/src/app/[locale]/(protected)/app/chat/components/contact-list.tsx
index 14d951e1..bb07457a 100644
--- a/src/app/[locale]/(protected)/app/chat/components/contact-list.tsx
+++ b/src/app/[locale]/(protected)/app/chat/components/contact-list.tsx
@@ -1,85 +1,71 @@
+"use client";
 
-'use client'
+import { Link, usePathname } from "@/i18n/navigation";
+
+import { useChatConfig } from "@/lib/hooks/use-chat";
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils/utils"
 import { Icon } from "@/components/ui/icon";
-import { type Contact as ContactType, type Chat as ChatType } from "../utils";
-import { Link, usePathname } from "@/i18n/navigation";
-import { useChatConfig } from "@/lib/hooks/use-chat";
 
+import { type Chat as ChatType, type Contact as ContactType } from "../utils";
 
-const ContactList = ({ contact }: {
-    contact: ContactType,
+const ContactList = ({ contact }: { contact: ContactType }) => {
+  const { avatar, id, fullName, status, about, unreadmessage, date } = contact;
 
-}) => {
-    const { avatar, id, fullName, status, about, unreadmessage, date } =
-        contact;
-
-    const pathname = usePathname();
-    const [chatConfig, setChatConfig] = useChatConfig()
-    return (
-        <Link
-            onClick={() => setChatConfig({
-                ...chatConfig,
-                isOpen: false
-            })}
-            href={`/app/chat/${id}`} className={cn(
-                " gap-4 py-2 lg:py-2.5 px-3 border-l-2 border-transparent   hover:bg-default-100 cursor-pointer flex ",
-                {
-                    "lg:bg-default-100 ": `/app/chat/${id}` === pathname
-                }
-            )} >
-
-
-            <div className="flex-1 flex items-center  gap-3 ">
-                <div className="relative inline-block ">
-                    <Avatar className="border-none bg-transparent hover:bg-transparent">
-                        <AvatarImage src={avatar.src} />
-                        <AvatarFallback className="uppercase">
-                            {fullName.slice(0, 2)}
-                        </AvatarFallback>
-                    </Avatar>
-                    <Badge
-                        className=" h-2 w-2  p-0 ring-1 ring-border ring-offset-[1px]   items-center justify-center absolute top-2 -end-[3px]"
-                        color={status === "online" ? "success" : "secondary"}
-                    ></Badge>
-                </div>
-                <div className="block">
-                    <div className="truncate max-w-[120px]">
-                        <span className="text-sm text-default-900 font-medium">
-                            {" "}
-                            {fullName}
-                        </span>
-                    </div>
-                    <div className="truncate  max-w-[120px]">
-                        <span className=" text-xs  text-default-700 ">
-                            {about}
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div className="flex-none  flex-col items-end  gap-2 hidden lg:flex">
-                <span className="text-xs text-default-600 text-end uppercase">
-                    {date}
-                </span>
-                <span
-                    className={cn(
-                        "h-[14px] w-[14px] flex items-center justify-center bg-default-400 rounded-full text-default-foreground text-[10px] font-medium",
-                        {
-                            "bg-[#FFC155]": unreadmessage > 0,
-                        }
-                    )}
-                >
-                    {unreadmessage === 0 ? (
-                        <Icon icon="uil:check" className="text-sm" />
-                    ) : (
-                        unreadmessage
-                    )}
-                </span>
-            </div>
-        </Link>
-    );
+  const pathname = usePathname();
+  const [chatConfig, setChatConfig] = useChatConfig();
+  return (
+    <Link
+      onClick={() =>
+        setChatConfig({
+          ...chatConfig,
+          isOpen: false,
+        })
+      }
+      href={`/app/chat/${id}`}
+      className={cn(
+        " gap-4 py-2 lg:py-2.5 px-3 border-l-2 border-transparent   hover:bg-default-100 cursor-pointer flex ",
+        {
+          "lg:bg-default-100 ": `/app/chat/${id}` === pathname,
+        }
+      )}
+    >
+      <div className="flex-1 flex items-center  gap-3 ">
+        <div className="relative inline-block ">
+          <Avatar className="border-none bg-transparent hover:bg-transparent">
+            <AvatarImage src={avatar.src} />
+            <AvatarFallback className="uppercase">{fullName.slice(0, 2)}</AvatarFallback>
+          </Avatar>
+          <Badge
+            className=" h-2 w-2  p-0 ring-1 ring-border ring-offset-[1px]   items-center justify-center absolute top-2 -end-[3px]"
+            color={status === "online" ? "success" : "secondary"}
+          ></Badge>
+        </div>
+        <div className="block">
+          <div className="truncate max-w-[120px]">
+            <span className="text-sm text-default-900 font-medium"> {fullName}</span>
+          </div>
+          <div className="truncate  max-w-[120px]">
+            <span className=" text-xs  text-default-700 ">{about}</span>
+          </div>
+        </div>
+      </div>
+      <div className="flex-none  flex-col items-end  gap-2 hidden lg:flex">
+        <span className="text-xs text-default-600 text-end uppercase">{date}</span>
+        <span
+          className={cn(
+            "h-[14px] w-[14px] flex items-center justify-center bg-default-400 rounded-full text-default-foreground text-[10px] font-medium",
+            {
+              "bg-[#FFC155]": unreadmessage > 0,
+            }
+          )}
+        >
+          {unreadmessage === 0 ? <Icon icon="uil:check" className="text-sm" /> : unreadmessage}
+        </span>
+      </div>
+    </Link>
+  );
 };
 
 export default ContactList;
diff --git a/src/app/[locale]/(protected)/app/chat/components/my-profile.tsx b/src/app/[locale]/(protected)/app/chat/components/my-profile.tsx
index 10766ca4..85cd144f 100644
--- a/src/app/[locale]/(protected)/app/chat/components/my-profile.tsx
+++ b/src/app/[locale]/(protected)/app/chat/components/my-profile.tsx
@@ -1,116 +1,124 @@
-'use client'
+"use client";
 
-import { Icon } from "@/components/ui/icon"
-import { Button } from "@/components/ui/button"
 import { useChatConfig } from "@/lib/hooks/use-chat";
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Textarea } from "@/components/ui/textarea";
 
 const MyProfile = () => {
-    const [chatConfig, setChatConfig] = useChatConfig();
-    let status = "active";
-    return (
-        <div>
-            <div className="flex justify-between gap-1">
-                <div className="flex gap-3">
-                    <div className="flex-none">
-                        <Avatar>
-                            <AvatarImage src="/images/users/user-1.jpg" />
-                            <AvatarFallback>SC</AvatarFallback>
-                        </Avatar>
-                    </div>
-                    <div className="flex-1 text-start">
-                        <div className="text-default-800  text-sm font-medium mb-1">
-                            Jane Cooper
-                            <span className="bg-success inline-block h-2.5 w-2.5 rounded-full ms-3"></span>
-                        </div>
-                        <div className=" text-default-500  text-xs font-normal">
-                            Available
-                        </div>
-                    </div>
-                </div>
-                <Button
-                    size="icon"
-                    className="w-8 h-8"
-                    color="secondary"
-                    rounded="full"
-                    onClick={() => setChatConfig({ ...chatConfig, showProfile: true })}
-                >
-                    <Icon icon="heroicons-outline:dots-horizontal" className="w-4 h-4" />
-                </Button>
-            </div>
-
-            <div className={cn('absolute bg-card rounded-md   h-full start-0 top-0 bottom-0  w-full z-50', {
-                'hidden -start-full': !chatConfig.showProfile
-            })}>
-                <ScrollArea className="h-full">
-                    <div className="p-6">
-                        <div className="flex justify-end">
-                            <Button size="icon" color="secondary" className="w-8 h-8" rounded="full" onClick={() => setChatConfig({ ...chatConfig, showProfile: false })}>
-                                <Icon icon="heroicons-outline:x" className="w-4 h-4" />
-                            </Button>
-                        </div>
-                        <div className="flex flex-col items-center gap-3">
-                            <div className="relative">
-                                <Avatar className="h-16 w-16 border border-default-200 p-1 bg-transparent hover:bg-transparent ">
-                                    <AvatarImage src="/images/users/user-1.jpg" className="rounded-full" />
-                                    <AvatarFallback>SC</AvatarFallback>
-                                </Avatar>
-                                <span
-                                    className={cn("absolute top-3 -end-[3px] h-3 w-3 rounded-full bg-success  border border-primary-foreground",
-                                        {
-                                            "bg-success": status === "active",
-                                            "bg-warning": status === "away",
-                                            "bg-destructive": status === "busy",
-                                            "bg-secondary": status === "offline",
-                                        }
-                                    )}
-                                ></span>
-                            </div>
-                            <div className="text-center">
-                                <div className="text-default-800  text-sm font-medium mb-0.5">
-                                    Jane Cooper
-                                </div>
-                                <div className=" text-default-500  text-xs font-normal">
-                                    Admin
-                                </div>
-                            </div>
-                        </div>
-                        <div className="my-8">
-                            <Label htmlFor="bio" className="mb-2 block text-default-900"> About </Label>
-                            <Textarea id="bio" placeholder="About your self" />
-                        </div>
-                        <div>
-                            <Label htmlFor="status" className="block mb-3 text-default-700">Status</Label>
-                            <RadioGroup defaultValue="comfortable">
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="default" id="active" color="success" />
-                                    <Label htmlFor="active">Active</Label>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="busy" id="busy" color="destructive" />
-                                    <Label htmlFor="busy">Do Not Disturb</Label>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="away" id="away" color="warning" />
-                                    <Label htmlFor="away">Away</Label>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <RadioGroupItem value="offline" id="offline" color="warning" />
-                                    <Label htmlFor="offline">Offline</Label>
-                                </div>
-                            </RadioGroup>
-                        </div>
-                        <Button className="mt-7">Logout</Button>
-                    </div>
-                </ScrollArea>
+  const [chatConfig, setChatConfig] = useChatConfig();
+  let status = "active";
+  return (
+    <div>
+      <div className="flex justify-between gap-1">
+        <div className="flex gap-3">
+          <div className="flex-none">
+            <Avatar>
+              <AvatarImage src="/images/users/user-1.jpg" />
+              <AvatarFallback>SC</AvatarFallback>
+            </Avatar>
+          </div>
+          <div className="flex-1 text-start">
+            <div className="text-default-800  text-sm font-medium mb-1">
+              Jane Cooper
+              <span className="bg-success inline-block h-2.5 w-2.5 rounded-full ms-3"></span>
             </div>
+            <div className=" text-default-500  text-xs font-normal">Available</div>
+          </div>
         </div>
-    );
+        <Button
+          size="icon"
+          className="w-8 h-8"
+          color="secondary"
+          rounded="full"
+          onClick={() => setChatConfig({ ...chatConfig, showProfile: true })}
+        >
+          <Icon icon="heroicons-outline:dots-horizontal" className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <div
+        className={cn("absolute bg-card rounded-md   h-full start-0 top-0 bottom-0  w-full z-50", {
+          "hidden -start-full": !chatConfig.showProfile,
+        })}
+      >
+        <ScrollArea className="h-full">
+          <div className="p-6">
+            <div className="flex justify-end">
+              <Button
+                size="icon"
+                color="secondary"
+                className="w-8 h-8"
+                rounded="full"
+                onClick={() => setChatConfig({ ...chatConfig, showProfile: false })}
+              >
+                <Icon icon="heroicons-outline:x" className="w-4 h-4" />
+              </Button>
+            </div>
+            <div className="flex flex-col items-center gap-3">
+              <div className="relative">
+                <Avatar className="h-16 w-16 border border-default-200 p-1 bg-transparent hover:bg-transparent ">
+                  <AvatarImage src="/images/users/user-1.jpg" className="rounded-full" />
+                  <AvatarFallback>SC</AvatarFallback>
+                </Avatar>
+                <span
+                  className={cn(
+                    "absolute top-3 -end-[3px] h-3 w-3 rounded-full bg-success  border border-primary-foreground",
+                    {
+                      "bg-success": status === "active",
+                      "bg-warning": status === "away",
+                      "bg-destructive": status === "busy",
+                      "bg-secondary": status === "offline",
+                    }
+                  )}
+                ></span>
+              </div>
+              <div className="text-center">
+                <div className="text-default-800  text-sm font-medium mb-0.5">Jane Cooper</div>
+                <div className=" text-default-500  text-xs font-normal">Admin</div>
+              </div>
+            </div>
+            <div className="my-8">
+              <Label htmlFor="bio" className="mb-2 block text-default-900">
+                {" "}
+                About{" "}
+              </Label>
+              <Textarea id="bio" placeholder="About your self" />
+            </div>
+            <div>
+              <Label htmlFor="status" className="block mb-3 text-default-700">
+                Status
+              </Label>
+              <RadioGroup defaultValue="comfortable">
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="default" id="active" color="success" />
+                  <Label htmlFor="active">Active</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="busy" id="busy" color="destructive" />
+                  <Label htmlFor="busy">Do Not Disturb</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="away" id="away" color="warning" />
+                  <Label htmlFor="away">Away</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <RadioGroupItem value="offline" id="offline" color="warning" />
+                  <Label htmlFor="offline">Offline</Label>
+                </div>
+              </RadioGroup>
+            </div>
+            <Button className="mt-7">Logout</Button>
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
 };
 
 export default MyProfile;
diff --git a/src/app/[locale]/(protected)/app/chat/components/search.tsx b/src/app/[locale]/(protected)/app/chat/components/search.tsx
index 015c6510..d8d49fc0 100644
--- a/src/app/[locale]/(protected)/app/chat/components/search.tsx
+++ b/src/app/[locale]/(protected)/app/chat/components/search.tsx
@@ -1,13 +1,19 @@
-import { Input } from '@/components/ui/input';
-import React from 'react';
-import {Search as SearchIcon} from "lucide-react"
+import React from "react";
+import { Search as SearchIcon } from "lucide-react";
+
+import { Input } from "@/components/ui/input";
+
 const Search = () => {
   return (
-    <div className='relative'>
-      <SearchIcon className='absolute top-1/2 -translate-y-1/2 start-6 w-4 h-4 text-default-600' />
-      <Input placeholder='Search...'  className='dark:bg-transparent rounded-none border-l-0 border-r-0 dark:border-default-300 focus:border-default-200 ps-12 text-lg font-normal' size="lg"/>
+    <div className="relative">
+      <SearchIcon className="absolute top-1/2 -translate-y-1/2 start-6 w-4 h-4 text-default-600" />
+      <Input
+        placeholder="Search..."
+        className="dark:bg-transparent rounded-none border-l-0 border-r-0 dark:border-default-300 focus:border-default-200 ps-12 text-lg font-normal"
+        size="lg"
+      />
     </div>
   );
 };
 
-export default Search;
\ No newline at end of file
+export default Search;
diff --git a/src/app/[locale]/(protected)/app/chat/layout copy.tsx b/src/app/[locale]/(protected)/app/chat/layout copy.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/app/chat/layout copy.tsx	
+++ b/src/app/[locale]/(protected)/app/chat/layout copy.tsx	
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/app/chat/layout.tsx b/src/app/[locale]/(protected)/app/chat/layout.tsx
index ebb69f01..f9e26ced 100644
--- a/src/app/[locale]/(protected)/app/chat/layout.tsx
+++ b/src/app/[locale]/(protected)/app/chat/layout.tsx
@@ -1,53 +1,37 @@
-
-import {
-    Card,
-    CardContent,
-    CardHeader,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { ScrollArea } from "@/components/ui/scroll-area";
+
+import ChatWrapper from "./chat-wrapper";
 import ContactList from "./components/contact-list";
-import { getContacts } from './utils';
-import MyProfile from './components/my-profile';
-import Search from './components/search';
-import ChatSidebarWrapper from './sidebar-wrapper';
-import ChatWrapper from './chat-wrapper';
-
-
+import MyProfile from "./components/my-profile";
+import Search from "./components/search";
+import ChatSidebarWrapper from "./sidebar-wrapper";
+import { getContacts } from "./utils";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  
-    const contacts = await getContacts()
-    return (
-        <ChatWrapper>
-            <ChatSidebarWrapper>
-                <Card className="h-full pb-0 ">
-                    <CardHeader className="border-none pb-3">
-                        <MyProfile />
-                    </CardHeader>
-                    <CardContent className="pt-0 px-0 h-full ">
-                        <ScrollArea className="lg:h-[calc(100%-62px)]  h-[calc(100%-80px)] ">
-                            <div className='sticky top-0 z-10 bg-card'>
-                                <Search />
-                            </div>
-                            {
-                                contacts?.map((contact) => {
-                                    return (
-                                        <ContactList
-                                            key={contact.id}
-                                            contact={contact}
-                                        />
-                                    )
-                                })
-                            }
-                        </ScrollArea>
-                    </CardContent>
-                </Card>
-            </ChatSidebarWrapper>
-            <div className='flex-1 h-full flex gap-5'>
-                {children}
-            </div>
-        </ChatWrapper>
-    )
-}
+  const contacts = await getContacts();
+  return (
+    <ChatWrapper>
+      <ChatSidebarWrapper>
+        <Card className="h-full pb-0 ">
+          <CardHeader className="border-none pb-3">
+            <MyProfile />
+          </CardHeader>
+          <CardContent className="pt-0 px-0 h-full ">
+            <ScrollArea className="lg:h-[calc(100%-62px)]  h-[calc(100%-80px)] ">
+              <div className="sticky top-0 z-10 bg-card">
+                <Search />
+              </div>
+              {contacts?.map((contact) => {
+                return <ContactList key={contact.id} contact={contact} />;
+              })}
+            </ScrollArea>
+          </CardContent>
+        </Card>
+      </ChatSidebarWrapper>
+      <div className="flex-1 h-full flex gap-5">{children}</div>
+    </ChatWrapper>
+  );
+};
 
-export default layout
\ No newline at end of file
+export default layout;
diff --git a/src/app/[locale]/(protected)/app/chat/page.tsx b/src/app/[locale]/(protected)/app/chat/page.tsx
index ad8133d6..02cb0565 100644
--- a/src/app/[locale]/(protected)/app/chat/page.tsx
+++ b/src/app/[locale]/(protected)/app/chat/page.tsx
@@ -1,9 +1,7 @@
-import Blank from "./components/blank-chat"
-const ChatPage = async () => {
-    
-    return (
-        <Blank />
-    )
-}
+import Blank from "./components/blank-chat";
 
-export default ChatPage
\ No newline at end of file
+const ChatPage = async () => {
+  return <Blank />;
+};
+
+export default ChatPage;
diff --git a/src/app/[locale]/(protected)/app/chat/sidebar-wrapper.tsx b/src/app/[locale]/(protected)/app/chat/sidebar-wrapper.tsx
index 874160e8..7c4a0ed9 100644
--- a/src/app/[locale]/(protected)/app/chat/sidebar-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/chat/sidebar-wrapper.tsx
@@ -1,24 +1,27 @@
-'use client'
-import { useMediaQuery } from '@/lib/hooks/use-media-query'
-import { cn } from '@/lib/utils'
-import React from 'react'
-import { useChatConfig } from '@/lib/hooks/use-chat'
-const ChatSidebarWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [chatConfig] = useChatConfig()
-    const { isOpen } = chatConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    if (!isTablet) {
-        return (
-            <div className={cn('absolute h-full  start-0  w-[240px] z-50 ', {
-                '-start-full': !isOpen
-            })}>
-                {children}
-            </div>
-        )
-    }
-    return (
-        <div className='relative w-[320px] h-full '>{children}</div>
-    )
-}
+"use client";
 
-export default ChatSidebarWrapper
\ No newline at end of file
+import React from "react";
+
+import { useChatConfig } from "@/lib/hooks/use-chat";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { cn } from "@/lib/utils/utils";
+
+const ChatSidebarWrapper = ({ children }: { children: React.ReactNode }) => {
+  const [chatConfig] = useChatConfig();
+  const { isOpen } = chatConfig;
+  const isTablet = useMediaQuery("(min-width: 1024px)");
+  if (!isTablet) {
+    return (
+      <div
+        className={cn("absolute h-full  start-0  w-[240px] z-50 ", {
+          "-start-full": !isOpen,
+        })}
+      >
+        {children}
+      </div>
+    );
+  }
+  return <div className="relative w-[320px] h-full ">{children}</div>;
+};
+
+export default ChatSidebarWrapper;
diff --git a/src/app/[locale]/(protected)/app/chat/utils.ts b/src/app/[locale]/(protected)/app/chat/utils.ts
index 726773eb..73da3275 100644
--- a/src/app/[locale]/(protected)/app/chat/utils.ts
+++ b/src/app/[locale]/(protected)/app/chat/utils.ts
@@ -1,33 +1,31 @@
-import { chats, contacts, profileUser } from '@/app/api/chat/data'
-import { baseURL } from '@/config'
+import { baseURL } from "@/config";
 
+import { chats, contacts, profileUser } from "@/app/api/chat/data";
 
 export const getContacts = async () => {
-  return contacts
-}
+  return contacts;
+};
 
 // get chats by contact id
 export const getChatsByContactId = async (contactId: string) => {
-  
-   const chat = chats.find(chat => chat.id === contactId)
- const contact =   contacts.find(contact => contact.id === contactId)
-    return {
-        chat,
-        contact
-    }
-}
-// get contact by id 
+  const chat = chats.find((chat) => chat.id === contactId);
+  const contact = contacts.find((contact) => contact.id === contactId);
+  return {
+    chat,
+    contact,
+  };
+};
+// get contact by id
 export const getContactById = async (contactId: string) => {
-  return contacts.find(contact => contact.id === contactId)
-}
-
+  return contacts.find((contact) => contact.id === contactId);
+};
 
 // get profile user
 export const getProfileUser = async () => {
-  return profileUser
-}
-export type Chat = typeof chats[number];
-export type Contact = typeof contacts[number];
+  return profileUser;
+};
+export type Chat = (typeof chats)[number];
+export type Contact = (typeof contacts)[number];
 export type ProfileUser = typeof profileUser;
 
 // post message
@@ -43,4 +41,4 @@ export const postMessage = async (id: string, data: any) => {
     throw new Error(`Error creating task`);
   }
   return res.json();
-}
\ No newline at end of file
+};
diff --git a/src/app/[locale]/(protected)/app/email/[id]/components/go-back.tsx b/src/app/[locale]/(protected)/app/email/[id]/components/go-back.tsx
index 3dd27462..684d16bc 100644
--- a/src/app/[locale]/(protected)/app/email/[id]/components/go-back.tsx
+++ b/src/app/[locale]/(protected)/app/email/[id]/components/go-back.tsx
@@ -1,21 +1,21 @@
-'use client'
-import {
-    MoveLeft,
+"use client";
+
+import { useRouter } from "@/i18n/navigation";
+import { MoveLeft } from "lucide-react";
 
-} from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { useRouter } from '@/i18n/navigation';
-const GoBack = () => {
-    const router = useRouter()
-    return (
-        <Button
-            onClick={router.back}
-            size="icon"
-            className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-        >
-            <MoveLeft className=" h-5 w-5" />
-        </Button>
-    )
-}
 
-export default GoBack
\ No newline at end of file
+const GoBack = () => {
+  const router = useRouter();
+  return (
+    <Button
+      onClick={router.back}
+      size="icon"
+      className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
+    >
+      <MoveLeft className=" h-5 w-5" />
+    </Button>
+  );
+};
+
+export default GoBack;
diff --git a/src/app/[locale]/(protected)/app/email/[id]/page.tsx b/src/app/[locale]/(protected)/app/email/[id]/page.tsx
index e69506e4..39e4c6c2 100644
--- a/src/app/[locale]/(protected)/app/email/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/app/email/[id]/page.tsx
@@ -1,186 +1,181 @@
-import { Link } from '@/i18n/navigation';
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+import { Box, Ellipsis, LogOutIcon, Printer, Star } from "lucide-react";
+
+import { Alert } from "@/components/ui/alert";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Card, CardHeader, CardContent } from "@/components/ui/card";
-import {
-    Box,
-    Ellipsis,
-    LogOutIcon,
-    Printer,
-    Star,
-} from "lucide-react";
-import Image from "next/image";
-import { getMailById } from "../utils";
-import { Alert } from "@/components/ui/alert";
-import GoBack from "./components/go-back"
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Icon } from "@/components/ui/icon";
-const MailDetails = async ({ params: { id } }: { params: { id: string }; }) => {
-    const mail = await getMailById(id)
-    if (!mail) {
-        return <Alert color="destructive"> Mail not found</Alert>
-    }
-    return (
-        <Card className=" h-full overflow-auto">
-            <CardHeader className="flex flex-row items-center justify-between p-4 border-b border-solid">
-                <GoBack />
-                <div className="flex gap-3">
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <LogOutIcon className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Forward</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Star className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Favourite</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Box className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Archive</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Printer className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Print</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
-                    <TooltipProvider>
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button
-                                    size="icon"
-                                    className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
-                                >
-                                    <Ellipsis className=" h-5 w-5" />
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                                <p>Actions</p>
-                            </TooltipContent>
-                        </Tooltip>
-                    </TooltipProvider>
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-                </div>
-            </CardHeader>
-            <CardContent >
-                <p className="text-lg font-semibold text-default-800 mt-6">
-                    Pay bills & win up to 600$ Cashback!
-                </p>
-                <div className="flex items-center mt-4 gap-4">
-                    <Avatar className=" h-8 w-8">
-                        <AvatarImage
-                            src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
-                            alt="Avatar image"
-                        />
-                        <AvatarFallback>JD</AvatarFallback>
-                    </Avatar>
-                    <p className="text-sm text-default-700 font-semibold">John Doe</p>
-                </div>
-                <div className="my-4 border-b border-solid  border-default-200 pb-6 space-y-4 text-default-600 text-base">
-                    <p>Hi Jane Cooper,</p>
-                    <p>
-                        Jornalists call this critical, introductory section the Lede, and
-                        when bridge properly executed, it is that carries your reader from
-                        an headine try at attention-grabbing to the body of your blog post,
-                        if you want to get it right on of these 10 clever ways to omen your
-                        next blog
-                    </p>
-                    <p>
-                        posr with a bang With resrpect, i must disagree with Mr.Zinsser. We
-                        all know the most part of important part of any article is the
-                        title.Without a compelleing title, your reader will not even get to
-                        the first sentence.After the title, however, the first few sentences
-                        of your article are certainly the most important part.
-                    </p>
-                    <div>
-                        <p>Best regards,</p>
-                        <p>Esther Howard</p>
-                    </div>
-                </div>
-                <div className="py-5 flex gap-5 flex-wrap items-center border-b border-solid border-default-200">
-                    <div className="flex flex-col items-center">
-                        <Image
-                            className="w-[150px] h-[95px]"
-                            width={500}
-                            height={300}
-                            src="/images/all-img/inbox-1.png"
-                            alt="mail"
-                        />
-                        <Link className="text-primary mt-1" href="/">Download</Link>
-                    </div>
-                    <div className="flex flex-col items-center">
-                        <Image
-                            className="w-[150px] h-[95px]"
-                            width={500}
-                            height={300}
-                            src="/images/all-img/inbox-2.png"
-                            alt="mail"
-                        />
-                        <Link className="text-primary mt-1" href="/">Download</Link>
-                    </div>
-                    <div className="flex flex-col items-center">
-                        <Image
-                            className="w-[150px] h-[95px]"
-                            width={500}
-                            height={300}
-                            src="/images/all-img/inbox-3.png"
-                            alt="mail"
-                        />
-                        <Link className="text-primary mt-1" href="/">Download</Link>
-                    </div>
-                </div>
-                <Button color="secondary" variant="soft" size="md" className="mt-4">
-                    <Icon icon="heroicons:chat-bubble-left-right" className="h-5 w-5 me-3" /> Reply
+import { getMailById } from "../utils";
+import GoBack from "./components/go-back";
+
+const MailDetails = async ({ params: { id } }: { params: { id: string } }) => {
+  const mail = await getMailById(id);
+  if (!mail) {
+    return <Alert color="destructive"> Mail not found</Alert>;
+  }
+  return (
+    <Card className=" h-full overflow-auto">
+      <CardHeader className="flex flex-row items-center justify-between p-4 border-b border-solid">
+        <GoBack />
+        <div className="flex gap-3">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
+                >
+                  <LogOutIcon className=" h-5 w-5" />
                 </Button>
-            </CardContent>
-        </Card>
-    );
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Forward</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
+                >
+                  <Star className=" h-5 w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Favourite</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
+                >
+                  <Box className=" h-5 w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Archive</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
+                >
+                  <Printer className=" h-5 w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Print</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="icon"
+                  className="rounded-full bg-default-100 hover:text-default-50 hover:outline-0 hover:outline-offset-0  hover:border-0 hover:ring-0 text-default-600 hover:ring-offset-0 p-4"
+                >
+                  <Ellipsis className=" h-5 w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Actions</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <p className="text-lg font-semibold text-default-800 mt-6">
+          Pay bills & win up to 600$ Cashback!
+        </p>
+        <div className="flex items-center mt-4 gap-4">
+          <Avatar className=" h-8 w-8">
+            <AvatarImage
+              src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+              alt="Avatar image"
+            />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+          <p className="text-sm text-default-700 font-semibold">John Doe</p>
+        </div>
+        <div className="my-4 border-b border-solid  border-default-200 pb-6 space-y-4 text-default-600 text-base">
+          <p>Hi Jane Cooper,</p>
+          <p>
+            Jornalists call this critical, introductory section the Lede, and when bridge properly
+            executed, it is that carries your reader from an headine try at attention-grabbing to
+            the body of your blog post, if you want to get it right on of these 10 clever ways to
+            omen your next blog
+          </p>
+          <p>
+            posr with a bang With resrpect, i must disagree with Mr.Zinsser. We all know the most
+            part of important part of any article is the title.Without a compelleing title, your
+            reader will not even get to the first sentence.After the title, however, the first few
+            sentences of your article are certainly the most important part.
+          </p>
+          <div>
+            <p>Best regards,</p>
+            <p>Esther Howard</p>
+          </div>
+        </div>
+        <div className="py-5 flex gap-5 flex-wrap items-center border-b border-solid border-default-200">
+          <div className="flex flex-col items-center">
+            <Image
+              className="w-[150px] h-[95px]"
+              width={500}
+              height={300}
+              src="/images/all-img/inbox-1.png"
+              alt="mail"
+            />
+            <Link className="text-primary mt-1" href="/">
+              Download
+            </Link>
+          </div>
+          <div className="flex flex-col items-center">
+            <Image
+              className="w-[150px] h-[95px]"
+              width={500}
+              height={300}
+              src="/images/all-img/inbox-2.png"
+              alt="mail"
+            />
+            <Link className="text-primary mt-1" href="/">
+              Download
+            </Link>
+          </div>
+          <div className="flex flex-col items-center">
+            <Image
+              className="w-[150px] h-[95px]"
+              width={500}
+              height={300}
+              src="/images/all-img/inbox-3.png"
+              alt="mail"
+            />
+            <Link className="text-primary mt-1" href="/">
+              Download
+            </Link>
+          </div>
+        </div>
+        <Button color="secondary" variant="soft" size="md" className="mt-4">
+          <Icon icon="heroicons:chat-bubble-left-right" className="h-5 w-5 me-3" /> Reply
+        </Button>
+      </CardContent>
+    </Card>
+  );
 };
 
 export default MailDetails;
diff --git a/src/app/[locale]/(protected)/app/email/compose.tsx b/src/app/[locale]/(protected)/app/email/compose.tsx
index a9bad2dd..442159e0 100644
--- a/src/app/[locale]/(protected)/app/email/compose.tsx
+++ b/src/app/[locale]/(protected)/app/email/compose.tsx
@@ -1,21 +1,17 @@
-'use client'
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import Select, { MultiValue } from 'react-select'
-import { Plus } from "lucide-react";
-import Image from "next/image";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { Textarea } from "@/components/ui/textarea";
+"use client";
 
+import { useState } from "react";
+import Image from "next/image";
+import { Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import Select, { MultiValue } from "react-select";
+
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 
 interface Option {
   value: string;
@@ -27,7 +23,7 @@ type Inputs = {
   subject: string;
   description: string;
   mailTo: MultiValue<Option>;
-}
+};
 
 const mailToOptions: Option[] = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -36,22 +32,16 @@ const mailToOptions: Option[] = [
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
 
-
 const Compose = () => {
   const t = useTranslations("EmailApp");
   const [open, setOpen] = useState<boolean>(false);
-  const [value, setValue] = useState<string>('Hello World');
+  const [value, setValue] = useState<string>("Hello World");
 
-  const {
-    register,
-    handleSubmit,
-    control
-  } = useForm<Inputs>();
+  const { register, handleSubmit, control } = useForm<Inputs>();
   const onSubmit: SubmitHandler<Inputs> = (data) => {
-    setOpen(false)
+    setOpen(false);
   };
 
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <Button
@@ -79,17 +69,25 @@ const Compose = () => {
               render={({ field }) => (
                 <Select
                   className="react-select"
-                   classNamePrefix="select"
+                  classNamePrefix="select"
                   {...field}
                   options={mailToOptions}
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm  font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <div className="flex items-center">
+                        <Image
+                          width={40}
+                          height={40}
+                          src={option.image as string}
+                          alt={option.label}
+                          className="w-8 h-8 rounded-full me-2"
+                        />
+                        <span className="text-sm  font-medium">{option.label}</span>
+                      </div>
+                    ) as unknown as string
+                  }
                   placeholder="Select..."
                 />
               )}
@@ -97,18 +95,13 @@ const Compose = () => {
           </div>
           <div className="space-y-1">
             <Label htmlFor="subject">Subject</Label>
-            <Input
-              id="subject"
-              placeholder="Type Subject..."
-              {...register("subject")}
-            />
+            <Input id="subject" placeholder="Type Subject..." {...register("subject")} />
           </div>
           <div className="space-y-1">
             <Label htmlFor="description">Description</Label>
-           <Textarea placeholder="Hello world" id="description" {...register("description")}/>
+            <Textarea placeholder="Hello world" id="description" {...register("description")} />
           </div>
 
-
           <div className="flex justify-end">
             <Button>Submit</Button>
           </div>
diff --git a/src/app/[locale]/(protected)/app/email/data.ts b/src/app/[locale]/(protected)/app/email/data.ts
index aefe4ba9..872bcd3e 100644
--- a/src/app/[locale]/(protected)/app/email/data.ts
+++ b/src/app/[locale]/(protected)/app/email/data.ts
@@ -1,4 +1,3 @@
-
 export const mails = [
   {
     id: "fe3aa1aa-c89d-4539-8301-8bf18bd80e87",
@@ -31,8 +30,7 @@ export const mails = [
         value: "rakibul",
       },
     ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
+    title: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
     isDone: false,
     name: "Ester Howard",
     isfav: true,
@@ -54,8 +52,7 @@ export const mails = [
         value: "rakibul",
       },
     ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
+    title: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
     isDone: true,
     isfav: true,
     time: "12.00 pm",
@@ -205,9 +202,9 @@ export const mails = [
       {
         value: "update",
         label: "update",
-      }
-    ]
-  }
+      },
+    ],
+  },
 ];
 
 export type Mail = (typeof mails)[number];
diff --git a/src/app/[locale]/(protected)/app/email/layout copy.tsx b/src/app/[locale]/(protected)/app/email/layout copy.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/app/email/layout copy.tsx	
+++ b/src/app/[locale]/(protected)/app/email/layout copy.tsx	
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/app/email/layout.tsx b/src/app/[locale]/(protected)/app/email/layout.tsx
index 04f11dfa..79342c6b 100644
--- a/src/app/[locale]/(protected)/app/email/layout.tsx
+++ b/src/app/[locale]/(protected)/app/email/layout.tsx
@@ -1,92 +1,94 @@
 import { Metadata } from "next";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import Nav from "@/components/nav";
+
+import Compose from "./compose";
 import MailWrapper from "./mail-wrapper";
 import MailSidebarWrapper from "./sidebar-wrapper";
-import { Card, CardContent } from "@/components/ui/card";
-import Compose from "./compose";
-import Nav from "@/components/nav";
-import { ScrollArea } from "@/components/ui/scroll-area";
+
 export const metadata: Metadata = {
   title: "Mail",
   description: "Mail Application",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
-
-  return <MailWrapper>
-    <div className="flex gap-5  h-full ">
-      <MailSidebarWrapper>
-        <Card className=" h-full   ">
-          <CardContent className=" h-full space-y-2 pt-6 px-0">
-            <div className="px-5">
-              <Compose />
-            </div>
-            <ScrollArea className="h-[calc(100%-30px)]">
-              <Nav
-                links={[
-                  {
-                    title: "Inbox",
-                    icon: "uil:image-v",
-                    active: true,
-                  },
-                  {
-                    title: "Starred",
-                    icon: "heroicons:star",
-                    active: false,
-                  },
-                  {
-                    title: "Sent",
-                    icon: "heroicons:paper-airplane",
-                    active: false,
-                  },
-                  {
-                    title: "Drafts",
-                    icon: "heroicons:pencil-square",
-                    active: false,
-                  },
-                  {
-                    title: "Spam",
-                    icon: "heroicons:information-circle",
-                    active: false,
-                  },
-                  {
-                    title: "Trash",
-                    icon: "heroicons:trash",
-                    active: false,
-                  },
-                ]}
-              />
-              <div className="space-y-2 mt-3">
-                <p className="text-sm font-medium text-default-900 px-5">TAGS</p>
+  return (
+    <MailWrapper>
+      <div className="flex gap-5  h-full ">
+        <MailSidebarWrapper>
+          <Card className=" h-full   ">
+            <CardContent className=" h-full space-y-2 pt-6 px-0">
+              <div className="px-5">
+                <Compose />
+              </div>
+              <ScrollArea className="h-[calc(100%-30px)]">
                 <Nav
-                  dotStyle
                   links={[
                     {
-                      title: "personal",
+                      title: "Inbox",
+                      icon: "uil:image-v",
                       active: true,
                     },
                     {
-                      title: "social",
+                      title: "Starred",
+                      icon: "heroicons:star",
                       active: false,
                     },
                     {
-                      title: "promotions",
+                      title: "Sent",
+                      icon: "heroicons:paper-airplane",
                       active: false,
                     },
                     {
-                      title: "business",
+                      title: "Drafts",
+                      icon: "heroicons:pencil-square",
+                      active: false,
+                    },
+                    {
+                      title: "Spam",
+                      icon: "heroicons:information-circle",
+                      active: false,
+                    },
+                    {
+                      title: "Trash",
+                      icon: "heroicons:trash",
                       active: false,
                     },
                   ]}
                 />
-              </div>
-            </ScrollArea>
-          </CardContent>
-        </Card>
-      </MailSidebarWrapper>
-      <div className="flex-1 w-full h-full">
-        {children}
+                <div className="space-y-2 mt-3">
+                  <p className="text-sm font-medium text-default-900 px-5">TAGS</p>
+                  <Nav
+                    dotStyle
+                    links={[
+                      {
+                        title: "personal",
+                        active: true,
+                      },
+                      {
+                        title: "social",
+                        active: false,
+                      },
+                      {
+                        title: "promotions",
+                        active: false,
+                      },
+                      {
+                        title: "business",
+                        active: false,
+                      },
+                    ]}
+                  />
+                </div>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </MailSidebarWrapper>
+        <div className="flex-1 w-full h-full">{children}</div>
       </div>
-    </div>
-  </MailWrapper>;
+    </MailWrapper>
+  );
 };
 
 export default Layout;
diff --git a/src/app/[locale]/(protected)/app/email/mail-header.tsx b/src/app/[locale]/(protected)/app/email/mail-header.tsx
index 20ef554f..1936ad2e 100644
--- a/src/app/[locale]/(protected)/app/email/mail-header.tsx
+++ b/src/app/[locale]/(protected)/app/email/mail-header.tsx
@@ -1,14 +1,16 @@
-import { Input } from "@/components/ui/input";
 import { MoreVertical, Search } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+
 import ToggleMailSidebar from "./toggle-mail-sidebar";
 
 const MailHeader = () => {
@@ -43,19 +45,13 @@ const MailHeader = () => {
               <MoreVertical className="w-5 h-5 text-default hover:text-default-foreground" />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align="end"
-            className="p-0 rounded-md overflow-hidden"
-          >
+          <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
             {actions.map((action, index) => (
               <DropdownMenuItem
                 key={`action-${index}`}
                 className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
               >
-                <Icon
-                  icon={action.icon}
-                  className="group-hover:text-primary-foreground w-4 h-4"
-                />
+                <Icon icon={action.icon} className="group-hover:text-primary-foreground w-4 h-4" />
                 <span className="text-default-700 group-hover:text-primary-foreground">
                   {action.name}
                 </span>
diff --git a/src/app/[locale]/(protected)/app/email/mail-wrapper.tsx b/src/app/[locale]/(protected)/app/email/mail-wrapper.tsx
index 92290d85..6e4f7c94 100644
--- a/src/app/[locale]/(protected)/app/email/mail-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/email/mail-wrapper.tsx
@@ -1,26 +1,27 @@
-'use client'
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import { useMailConfig } from '@/lib/hooks/use-mail'
-import React from 'react'
+"use client";
+
+import React from "react";
+
+import { useMailConfig } from "@/lib/hooks/use-mail";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
 
 const MailWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [mailConfig, setMailConfig] = useMailConfig();
-    const { isOpen } = mailConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    return (
-        <div className=' relative app-height'>
-            {!isTablet && isOpen && (
-                <div
-                    onClick={() => setMailConfig({ ...mailConfig, isOpen: false })}
-                    className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
+  const [mailConfig, setMailConfig] = useMailConfig();
+  const { isOpen } = mailConfig;
+  const isTablet = useMediaQuery("(min-width: 1024px)");
+  return (
+    <div className=" relative app-height">
+      {!isTablet && isOpen && (
+        <div
+          onClick={() => setMailConfig({ ...mailConfig, isOpen: false })}
+          className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
          backdrop-blur-sm absolute w-full flex-1 inset-0 z-20 rounded-md"
+        ></div>
+      )}
 
-                ></div>
-            )}
+      {children}
+    </div>
+  );
+};
 
-            {children}
-        </div>
-    )
-}
-
-export default MailWrapper
\ No newline at end of file
+export default MailWrapper;
diff --git a/src/app/[locale]/(protected)/app/email/mail.tsx b/src/app/[locale]/(protected)/app/email/mail.tsx
index 0e2ffbc9..e5afc1ba 100644
--- a/src/app/[locale]/(protected)/app/email/mail.tsx
+++ b/src/app/[locale]/(protected)/app/email/mail.tsx
@@ -1,29 +1,27 @@
 "use client";
+
+import { ReactNode, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { AvatarFallback } from "@radix-ui/react-avatar";
+import { Trash2 } from "lucide-react";
+
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@/components/ui/icon";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { AvatarFallback } from "@radix-ui/react-avatar";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {ReactNode,useState} from "react";
-import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
 import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
-import { Link } from "@/i18n/navigation"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
 const MailItem = ({ mail }: { mail: any }) => {
   const { image, title, isfav, time, name, id } = mail;
-  const [open, setOpen] = useState<boolean>(false)
+  const [open, setOpen] = useState<boolean>(false);
   return (
     <>
-      <DeleteConfirmationDialog
-        open={open}
-        onClose={() => setOpen(false)}
-      />
-      <Link href={`/app/email/${id}`} className=" group block border-b border-default-200 dark:border-default-300 last:border-none" >
+      <DeleteConfirmationDialog open={open} onClose={() => setOpen(false)} />
+      <Link
+        href={`/app/email/${id}`}
+        className=" group block border-b border-default-200 dark:border-default-300 last:border-none"
+      >
         <div className="flex items-center gap-4  group-hover:bg-default-50  last:border-none px-6 py-4 translate-y-0">
           <div>
             <Checkbox className="mt-0.5 dark:bg-default-300" />
@@ -35,10 +33,7 @@ const MailItem = ({ mail }: { mail: any }) => {
                 className="text-xl  cursor-pointer text-[#FFCE30]"
               />
             ) : (
-              <Icon
-                icon="heroicons:star"
-                className="text-xl cursor-pointer text-default-400"
-              />
+              <Icon icon="heroicons:star" className="text-xl cursor-pointer text-default-400" />
             )}
           </div>
           <div className="-space-x-1.5 rtl:space-x-reverse">
@@ -77,7 +72,7 @@ const MailItem = ({ mail }: { mail: any }) => {
               <Button
                 className="bg-transparent  ring-transparent hover:bg-transparent hover:ring-0 hover:ring-offset-0 hover:ring-transparent w-28 border-transparent"
                 size="icon"
-                onClick={(event) => { 
+                onClick={(event) => {
                   setOpen(true);
                   event.preventDefault();
                 }}
diff --git a/src/app/[locale]/(protected)/app/email/page.tsx b/src/app/[locale]/(protected)/app/email/page.tsx
index 8ea8eed7..47a85f1f 100644
--- a/src/app/[locale]/(protected)/app/email/page.tsx
+++ b/src/app/[locale]/(protected)/app/email/page.tsx
@@ -1,22 +1,24 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
 import MailItem from "./mail";
 import MailHeader from "./mail-header";
 import { getMail } from "./utils";
+
 const EmailApp = async () => {
-  const mails = await getMail()
+  const mails = await getMail();
   return (
-      <Card className="h-full rounded-md">
-        <CardHeader className="border-b border-default-200 sticky top-0 z-10 bg-card py-4">
-          <MailHeader />
-        </CardHeader>
-        <CardContent className="p-0 h-full">
-          <div className="h-[calc(100%-80px)] overflow-y-auto no-scrollbar">
-            {mails.map((mail, index) => (
-              <MailItem key={`mail-${index}`} mail={mail} />
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+    <Card className="h-full rounded-md">
+      <CardHeader className="border-b border-default-200 sticky top-0 z-10 bg-card py-4">
+        <MailHeader />
+      </CardHeader>
+      <CardContent className="p-0 h-full">
+        <div className="h-[calc(100%-80px)] overflow-y-auto no-scrollbar">
+          {mails.map((mail, index) => (
+            <MailItem key={`mail-${index}`} mail={mail} />
+          ))}
+        </div>
+      </CardContent>
+    </Card>
   );
 };
 
diff --git a/src/app/[locale]/(protected)/app/email/sidebar-wrapper.tsx b/src/app/[locale]/(protected)/app/email/sidebar-wrapper.tsx
index e2d345ba..3cca2050 100644
--- a/src/app/[locale]/(protected)/app/email/sidebar-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/email/sidebar-wrapper.tsx
@@ -1,24 +1,27 @@
-'use client'
-import { useMediaQuery } from '@/lib/hooks/use-media-query'
-import { useMailConfig } from '@/lib/hooks/use-mail'
-import { cn } from '@/lib/utils'
-import React from 'react'
+"use client";
+
+import React from "react";
+
+import { useMailConfig } from "@/lib/hooks/use-mail";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { cn } from "@/lib/utils/utils";
+
 const MailSidebarWrapper = ({ children }: { children: React.ReactNode }) => {
-  const [mailConfig] = useMailConfig()
-  const { isOpen } = mailConfig
+  const [mailConfig] = useMailConfig();
+  const { isOpen } = mailConfig;
   const isTablet = useMediaQuery("(min-width: 1024px)");
   if (!isTablet) {
     return (
-      <div className={cn('absolute h-full  start-0  w-[240px] z-50 ', {
-        '-start-full': !isOpen
-      })}>
+      <div
+        className={cn("absolute h-full  start-0  w-[240px] z-50 ", {
+          "-start-full": !isOpen,
+        })}
+      >
         {children}
       </div>
-    )
+    );
   }
-  return (
-    <div className='flex-none  md:w-[270px] w-[200px]  '>{children}</div>
-  )
-}
+  return <div className="flex-none  md:w-[270px] w-[200px]  ">{children}</div>;
+};
 
-export default MailSidebarWrapper
\ No newline at end of file
+export default MailSidebarWrapper;
diff --git a/src/app/[locale]/(protected)/app/email/toggle-mail-sidebar.tsx b/src/app/[locale]/(protected)/app/email/toggle-mail-sidebar.tsx
index fa6cdd32..99a02f21 100644
--- a/src/app/[locale]/(protected)/app/email/toggle-mail-sidebar.tsx
+++ b/src/app/[locale]/(protected)/app/email/toggle-mail-sidebar.tsx
@@ -1,9 +1,11 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import { useMediaQuery } from "@/lib/hooks/use-media-query";
-import { useMailConfig } from "@/lib/hooks/use-mail";
-import { Menu } from "lucide-react";
+
 import React from "react";
+import { Menu } from "lucide-react";
+
+import { useMailConfig } from "@/lib/hooks/use-mail";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
 
 const ToggleMailSidebar = () => {
   const isTablet = useMediaQuery("(min-width: 1024px)");
@@ -14,9 +16,7 @@ const ToggleMailSidebar = () => {
     <Button
       size="icon"
       color="secondary"
-      onClick={() =>
-        setMailConfig({ ...mailConfig, isOpen: !mailConfig.isOpen })
-      }
+      onClick={() => setMailConfig({ ...mailConfig, isOpen: !mailConfig.isOpen })}
     >
       <Menu className=" h-5 w-5" />
     </Button>
diff --git a/src/app/[locale]/(protected)/app/email/utils.ts b/src/app/[locale]/(protected)/app/email/utils.ts
index e392ea30..76422e36 100644
--- a/src/app/[locale]/(protected)/app/email/utils.ts
+++ b/src/app/[locale]/(protected)/app/email/utils.ts
@@ -1,14 +1,13 @@
-import { mails, Mail} from "./data"
+import { Mail, mails } from "./data";
 
-// get mail 
+// get mail
 
 export const getMail = async () => {
-    return mails
-}
+  return mails;
+};
 
-
-// get mail by id 
+// get mail by id
 
 export const getMailById = async (mailId: string) => {
-    return mails.find(mail => mail.id === mailId)
-}
\ No newline at end of file
+  return mails.find((mail) => mail.id === mailId);
+};
diff --git a/src/app/[locale]/(protected)/app/kanban/add-board.tsx b/src/app/[locale]/(protected)/app/kanban/add-board.tsx
index 17668366..a3f01434 100644
--- a/src/app/[locale]/(protected)/app/kanban/add-board.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/add-board.tsx
@@ -1,4 +1,7 @@
-import { Button } from "@/components/ui/button"
+import { Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -6,14 +9,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Plus } from "lucide-react";
-import { useTranslations } from "next-intl";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 const AddBoard = () => {
-  const t = useTranslations("KanbanApp")
+  const t = useTranslations("KanbanApp");
   return (
     <Dialog>
       <DialogTrigger asChild>
@@ -33,7 +34,12 @@ const AddBoard = () => {
           </div>
           <div className="space-y-1">
             <Label htmlFor="board-color">Board Color</Label>
-            <Input id="board-color" type="color" placeholder="Board Name" className="p-0 border-0 shadow-none" />
+            <Input
+              id="board-color"
+              type="color"
+              placeholder="Board Name"
+              className="p-0 border-0 shadow-none"
+            />
           </div>
         </form>
         <DialogFooter>
@@ -44,4 +50,4 @@ const AddBoard = () => {
   );
 };
 
-export default AddBoard;
\ No newline at end of file
+export default AddBoard;
diff --git a/src/app/[locale]/(protected)/app/kanban/column.tsx b/src/app/[locale]/(protected)/app/kanban/column.tsx
index 119f9033..bb23962f 100644
--- a/src/app/[locale]/(protected)/app/kanban/column.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/column.tsx
@@ -1,125 +1,130 @@
-'use client'
-import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
-import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
-import { CSS } from "@dnd-kit/utilities";
+"use client";
+
 import { useMemo, useState } from "react";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Plus, Trash2 } from "lucide-react";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
+import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 import { Column, Task } from "./data";
-import TaskCard from "./task";
-import { Plus, Trash2 } from "lucide-react";
 import EmptyTask from "./empty";
+import TaskCard from "./task";
 
-import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+function ColumnContainer({
+  column,
+  tasks,
+  handleOpenTask,
+}: {
+  column: Column;
+  tasks: Task[];
+  handleOpenTask: () => void;
+}) {
+  const [editMode, setEditMode] = useState<boolean>(false);
 
-function ColumnContainer({ column, tasks, handleOpenTask }: { column: Column; tasks: Task[], handleOpenTask: () => void }) {
-    const [editMode, setEditMode] = useState<boolean>(false);
+  const [deleteColumn, setDeleteColumn] = useState<boolean>(false);
+  const tasksIds = useMemo(() => {
+    return tasks.map((task) => task.id);
+  }, [tasks]);
 
-    const [deleteColumn, setDeleteColumn] = useState<boolean>(false);
-    const tasksIds = useMemo(() => {
-        return tasks.map((task) => task.id);
-    }, [tasks]);
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+    id: column.id,
+    data: {
+      type: "Column",
+      column,
+    },
+    disabled: editMode,
+  });
 
-    const {
-        setNodeRef,
-        attributes,
-        listeners,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({
-        id: column.id,
-        data: {
-            type: "Column",
-            column,
-        },
-        disabled: editMode,
-    });
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
 
-    const style = {
-        transition,
-        transform: CSS.Transform.toString(transform),
-    };
+  return (
+    <>
+      <DeleteConfirmationDialog open={deleteColumn} onClose={() => setDeleteColumn(false)} />
 
-    return (
-        <>
-            <DeleteConfirmationDialog
-                open={deleteColumn}
-                onClose={() => setDeleteColumn(false)}
-            />
-
-            <Card
-                ref={setNodeRef}
-                style={style}
-                className={cn("flex-1 w-[280px] bg-default-200 shadow-none app-height flex flex-col relative", {
-                    "opacity-20": isDragging,
-                })}
-            >
-                <CardHeader className="flex-none bg-card relative rounded-t-md py-4" {...attributes} {...listeners}>
-                    <div className={cn("absolute -start-[1px] top-1/2 -translate-y-1/2 h-[60%] w-0.5 bg-primary",
-                        {
-                            "bg-warning": (column.title).toLocaleLowerCase() === "work in progress",
-                            "bg-success": (column.title).toLocaleLowerCase() === "done",
-                        }
-                    )}></div>
-                    <div className="flex items-center gap-2" >
-                        <div className="flex-1 text-lg capitalize text-default-900 font-medium">{column.title}</div>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        size="icon"
-                                        className="w-6 h-6 bg-transparent  hover:bg-transparent border border-default-200 text-default-600 hover:ring-0 hover:ring-transparent"
-                                        onClick={() => setDeleteColumn(true)}
-                                    >
-                                        <Trash2 className="w-4 h-4" />
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent className="bg-destructive">
-                                    <p>Delete</p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                        <TooltipProvider>
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <Button
-                                        size="icon"
-                                        className="w-6 h-6 bg-transparent ring-offset-transparent hover:bg-transparent border border-default-200 text-default-600 hover:ring-0 hover:ring-transparent"
-                                        onClick={handleOpenTask}
-                                    >
-                                        <Plus className="w-4 h-4" />
-                                    </Button>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    <p>Add Project</p>
-                                </TooltipContent>
-                            </Tooltip>
-                        </TooltipProvider>
-                    </div>
-                </CardHeader>
-                <CardContent className="flex-1 pt-6 px-3.5 h-full overflow-y-auto no-scrollbar">
-                    {/* Column task container */}
-                    <div className=" space-y-6">
-                        {tasks?.length === 0 && <EmptyTask />}
-                        <SortableContext items={tasksIds}>
-                            {tasks.map((task) => (
-                                <TaskCard task={task} key={task.id} />
-                            ))}
-                        </SortableContext>
-                    </div>
-                </CardContent>
-
-            </Card>
-        </>
-    );
+      <Card
+        ref={setNodeRef}
+        style={style}
+        className={cn(
+          "flex-1 w-[280px] bg-default-200 shadow-none app-height flex flex-col relative",
+          {
+            "opacity-20": isDragging,
+          }
+        )}
+      >
+        <CardHeader
+          className="flex-none bg-card relative rounded-t-md py-4"
+          {...attributes}
+          {...listeners}
+        >
+          <div
+            className={cn(
+              "absolute -start-[1px] top-1/2 -translate-y-1/2 h-[60%] w-0.5 bg-primary",
+              {
+                "bg-warning": column.title.toLocaleLowerCase() === "work in progress",
+                "bg-success": column.title.toLocaleLowerCase() === "done",
+              }
+            )}
+          ></div>
+          <div className="flex items-center gap-2">
+            <div className="flex-1 text-lg capitalize text-default-900 font-medium">
+              {column.title}
+            </div>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="icon"
+                    className="w-6 h-6 bg-transparent  hover:bg-transparent border border-default-200 text-default-600 hover:ring-0 hover:ring-transparent"
+                    onClick={() => setDeleteColumn(true)}
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="bg-destructive">
+                  <p>Delete</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="icon"
+                    className="w-6 h-6 bg-transparent ring-offset-transparent hover:bg-transparent border border-default-200 text-default-600 hover:ring-0 hover:ring-transparent"
+                    onClick={handleOpenTask}
+                  >
+                    <Plus className="w-4 h-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Add Project</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 pt-6 px-3.5 h-full overflow-y-auto no-scrollbar">
+          {/* Column task container */}
+          <div className=" space-y-6">
+            {tasks?.length === 0 && <EmptyTask />}
+            <SortableContext items={tasksIds}>
+              {tasks.map((task) => (
+                <TaskCard task={task} key={task.id} />
+              ))}
+            </SortableContext>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
 }
 
 export default ColumnContainer;
diff --git a/src/app/[locale]/(protected)/app/kanban/create-task.tsx b/src/app/[locale]/(protected)/app/kanban/create-task.tsx
index eaf844ea..ef9851d7 100644
--- a/src/app/[locale]/(protected)/app/kanban/create-task.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/create-task.tsx
@@ -1,22 +1,20 @@
 "use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import Select, { MultiValue } from "react-select";
+
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
+
 interface CreateTaskProps {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -33,7 +31,7 @@ type Inputs = {
   assignee: MultiValue<Option>;
   startDate: Date;
   endDate: Date;
-}
+};
 const options: Option[] = [
   {
     value: "team",
@@ -54,7 +52,7 @@ const options: Option[] = [
   {
     value: "update",
     label: "update",
-  }
+  },
 ];
 const assigneeOptions: Option[] = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -63,7 +61,6 @@ const assigneeOptions: Option[] = [
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
 
-
 const CreateTask = ({ open, setOpen }: CreateTaskProps) => {
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [endDate, setEndtDate] = useState<Date>(new Date());
@@ -72,16 +69,16 @@ const CreateTask = ({ open, setOpen }: CreateTaskProps) => {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<Inputs>()
+  } = useForm<Inputs>();
   const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
+    console.log(data);
+    setOpen(false);
+  };
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create  Task</DialogTitle>
+          <DialogTitle>Create Task</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div className="space-y-1">
@@ -92,7 +89,9 @@ const CreateTask = ({ open, setOpen }: CreateTaskProps) => {
               {...register("title", { required: "Title is required." })}
               color={errors.title ? "destructive" : "default"}
             />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
+            {errors.title && (
+              <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>
+            )}
           </div>
           <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
             <div className="space-y-1">
@@ -174,12 +173,20 @@ const CreateTask = ({ open, setOpen }: CreateTaskProps) => {
                   options={assigneeOptions}
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <div className="flex items-center">
+                        <Image
+                          width={40}
+                          height={40}
+                          src={option.image as string}
+                          alt={option.label}
+                          className="w-8 h-8 rounded-full me-2"
+                        />
+                        <span className="text-sm text-default-600 font-medium">{option.label}</span>
+                      </div>
+                    ) as unknown as string
+                  }
                   placeholder="Select assignee"
                 />
               )}
@@ -200,7 +207,13 @@ const CreateTask = ({ open, setOpen }: CreateTaskProps) => {
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
                   placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <span className="text-sm text-default-600 font-medium capitalize">
+                        {option.label}
+                      </span>
+                    ) as unknown as string
+                  }
                 />
               )}
             />
@@ -219,7 +232,6 @@ const CreateTask = ({ open, setOpen }: CreateTaskProps) => {
             <Button type="submit">Add</Button>
           </div>
         </form>
-
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/[locale]/(protected)/app/kanban/data.ts b/src/app/[locale]/(protected)/app/kanban/data.ts
index e1b15513..cd7923d3 100644
--- a/src/app/[locale]/(protected)/app/kanban/data.ts
+++ b/src/app/[locale]/(protected)/app/kanban/data.ts
@@ -37,9 +37,9 @@ export const defaultTasks = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
   {
     id: faker.string.uuid(),
@@ -62,9 +62,9 @@ export const defaultTasks = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
   {
     id: faker.string.uuid(),
@@ -87,9 +87,9 @@ export const defaultTasks = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
   {
     id: faker.string.uuid(),
@@ -112,9 +112,9 @@ export const defaultTasks = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
 
   {
@@ -138,14 +138,12 @@ export const defaultTasks = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
-
-
 ];
 
 export type Column = (typeof defaultCols)[number];
 
-export type Task = (typeof defaultTasks)[number]
\ No newline at end of file
+export type Task = (typeof defaultTasks)[number];
diff --git a/src/app/[locale]/(protected)/app/kanban/edit-task.tsx b/src/app/[locale]/(protected)/app/kanban/edit-task.tsx
index 06e7b302..8a0a46c5 100644
--- a/src/app/[locale]/(protected)/app/kanban/edit-task.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/edit-task.tsx
@@ -1,22 +1,20 @@
 "use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import Select, { MultiValue } from "react-select";
+
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
+
 interface EditTaskProps {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -33,7 +31,7 @@ type Inputs = {
   assignee: MultiValue<Option>;
   startDate: Date;
   endDate: Date;
-}
+};
 const options: Option[] = [
   {
     value: "team",
@@ -54,7 +52,7 @@ const options: Option[] = [
   {
     value: "update",
     label: "update",
-  }
+  },
 ];
 const assigneeOptions: Option[] = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -63,7 +61,6 @@ const assigneeOptions: Option[] = [
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
 
-
 const EditTask = ({ open, setOpen }: EditTaskProps) => {
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [endDate, setEndtDate] = useState<Date>(new Date());
@@ -72,16 +69,16 @@ const EditTask = ({ open, setOpen }: EditTaskProps) => {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<Inputs>()
+  } = useForm<Inputs>();
   const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
+    console.log(data);
+    setOpen(false);
+  };
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create  Task</DialogTitle>
+          <DialogTitle>Create Task</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div className="space-y-1">
@@ -93,7 +90,9 @@ const EditTask = ({ open, setOpen }: EditTaskProps) => {
               {...register("title", { required: "Title is required." })}
               color={errors.title ? "destructive" : "default"}
             />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
+            {errors.title && (
+              <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>
+            )}
           </div>
           <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
             <div className="space-y-1">
@@ -166,19 +165,29 @@ const EditTask = ({ open, setOpen }: EditTaskProps) => {
             <Controller
               name="assignee"
               control={control}
-              defaultValue={[{ value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" }]}
+              defaultValue={[
+                { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
+              ]}
               render={({ field }) => (
                 <Select
                   {...field}
                   options={assigneeOptions}
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <div className="flex items-center">
+                        <Image
+                          width={40}
+                          height={40}
+                          src={option.image as string}
+                          alt={option.label}
+                          className="w-8 h-8 rounded-full me-2"
+                        />
+                        <span className="text-sm text-default-600 font-medium">{option.label}</span>
+                      </div>
+                    ) as unknown as string
+                  }
                   placeholder="Select assignee"
                 />
               )}
@@ -197,7 +206,13 @@ const EditTask = ({ open, setOpen }: EditTaskProps) => {
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
                   placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <span className="text-sm text-default-600 font-medium capitalize">
+                        {option.label}
+                      </span>
+                    ) as unknown as string
+                  }
                 />
               )}
             />
@@ -217,7 +232,6 @@ const EditTask = ({ open, setOpen }: EditTaskProps) => {
             <Button type="submit">Add</Button>
           </div>
         </form>
-
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/[locale]/(protected)/app/kanban/empty.tsx b/src/app/[locale]/(protected)/app/kanban/empty.tsx
index b344af60..3cee4b14 100644
--- a/src/app/[locale]/(protected)/app/kanban/empty.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/empty.tsx
@@ -1,14 +1,12 @@
-
-import { Rabbit } from 'lucide-react';
-
+import { Rabbit } from "lucide-react";
 
 const EmptyTask = () => {
   return (
     <div className=" absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
       <Rabbit className=" h-[200px]  w-[200px] text-default-400 " strokeWidth={1} />
-      <div className=' text-sm text-default-500 text-center'>No tasks</div>
+      <div className=" text-sm text-default-500 text-center">No tasks</div>
     </div>
   );
 };
 
-export default EmptyTask;
\ No newline at end of file
+export default EmptyTask;
diff --git a/src/app/[locale]/(protected)/app/kanban/kanban-app.tsx b/src/app/[locale]/(protected)/app/kanban/kanban-app.tsx
index 218a3c98..aea283af 100644
--- a/src/app/[locale]/(protected)/app/kanban/kanban-app.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/kanban-app.tsx
@@ -1,153 +1,159 @@
-'use client'
-import React, { useState, useMemo } from 'react'
-import { type Column, type Task } from './data';
+"use client";
+
+import React, { useMemo, useState } from "react";
 import {
-    DndContext,
-    DragEndEvent,
-    DragOverEvent,
-    DragOverlay,
-    DragStartEvent,
-    PointerSensor,
-    useSensor,
-    useSensors,
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  DragOverlay,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
 } from "@dnd-kit/core";
-import { SortableContext, arrayMove } from "@dnd-kit/sortable";
-import ColumnContainer from "./column"
-import TaskCard from './task';
+import { arrayMove, SortableContext } from "@dnd-kit/sortable";
+import { useTranslations } from "next-intl";
+
 // import { createPortal } from "react-dom";
-import AddBoard from './add-board';
+import AddBoard from "./add-board";
+import ColumnContainer from "./column";
 import CreateTask from "./create-task";
-import { useTranslations } from 'next-intl';
-const KanBanApp = ({ defaultCols, defaultTasks }: { defaultCols: Column[], defaultTasks: Task[] }) => {
-    const t = useTranslations("KanbanApp");
-    const [columns, setColumns] = useState<Column[]>(defaultCols);
-    const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
+import { type Column, type Task } from "./data";
+import TaskCard from "./task";
 
-    const [tasks, setTasks] = useState<Task[]>(defaultTasks);
+const KanBanApp = ({
+  defaultCols,
+  defaultTasks,
+}: {
+  defaultCols: Column[];
+  defaultTasks: Task[];
+}) => {
+  const t = useTranslations("KanbanApp");
+  const [columns, setColumns] = useState<Column[]>(defaultCols);
+  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
 
-    const [activeColumn, setActiveColumn] = useState<Column | null>(null);
+  const [tasks, setTasks] = useState<Task[]>(defaultTasks);
 
-    const [activeTask, setActiveTask] = useState<Task | null>(null);
+  const [activeColumn, setActiveColumn] = useState<Column | null>(null);
 
-    // create task state 
-    const [open, setOpen] = useState<boolean>(false);
-    const sensors = useSensors(
-        useSensor(PointerSensor, {
-            activationConstraint: {
-                distance: 10,
-            },
-        })
-    );
-    function onDragStart(event: DragStartEvent) {
-        if (event.active.data.current?.type === "Column") {
-            setActiveColumn(event.active.data.current.column);
-            return;
-        }
+  const [activeTask, setActiveTask] = useState<Task | null>(null);
 
-        if (event.active.data.current?.type === "Task") {
-            setActiveTask(event.active.data.current.task);
-            return;
-        }
+  // create task state
+  const [open, setOpen] = useState<boolean>(false);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 10,
+      },
+    })
+  );
+  function onDragStart(event: DragStartEvent) {
+    if (event.active.data.current?.type === "Column") {
+      setActiveColumn(event.active.data.current.column);
+      return;
     }
-    function onDragEnd(event: DragEndEvent) {
-        setActiveColumn(null);
-        setActiveTask(null);
 
-        const { active, over } = event;
-        if (!over) return;
-
-        const activeId = active.id;
-        const overId = over.id;
-
-        if (activeId === overId) return;
-
-        const isActiveAColumn = active.data.current?.type === "Column";
-        if (!isActiveAColumn) return;
-
-        console.log("DRAG END");
-
-        setColumns((columns) => {
-            const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
-
-            const overColumnIndex = columns.findIndex((col) => col.id === overId);
-
-            return arrayMove(columns, activeColumnIndex, overColumnIndex);
-        });
+    if (event.active.data.current?.type === "Task") {
+      setActiveTask(event.active.data.current.task);
+      return;
     }
-    function onDragOver(event: DragOverEvent) {
-        const { active, over } = event;
-        if (!over) return;
+  }
+  function onDragEnd(event: DragEndEvent) {
+    setActiveColumn(null);
+    setActiveTask(null);
 
-        const activeId = active.id;
-        const overId = over.id;
+    const { active, over } = event;
+    if (!over) return;
 
-        if (activeId === overId) return;
+    const activeId = active.id;
+    const overId = over.id;
 
-        const isActiveATask = active.data.current?.type === "Task";
-        const isOverATask = over.data.current?.type === "Task";
+    if (activeId === overId) return;
 
-        if (!isActiveATask) return;
+    const isActiveAColumn = active.data.current?.type === "Column";
+    if (!isActiveAColumn) return;
 
+    console.log("DRAG END");
 
-        if (isActiveATask && isOverATask) {
-            setTasks((tasks) => {
-                const activeIndex = tasks.findIndex((t) => t.id === activeId);
-                const overIndex = tasks.findIndex((t) => t.id === overId);
+    setColumns((columns) => {
+      const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
 
-                if (tasks[activeIndex].columnId != tasks[overIndex].columnId) {
+      const overColumnIndex = columns.findIndex((col) => col.id === overId);
 
-                    tasks[activeIndex].columnId = tasks[overIndex].columnId;
-                    return arrayMove(tasks, activeIndex, overIndex - 1);
-                }
+      return arrayMove(columns, activeColumnIndex, overColumnIndex);
+    });
+  }
+  function onDragOver(event: DragOverEvent) {
+    const { active, over } = event;
+    if (!over) return;
 
-                return arrayMove(tasks, activeIndex, overIndex);
-            });
+    const activeId = active.id;
+    const overId = over.id;
+
+    if (activeId === overId) return;
+
+    const isActiveATask = active.data.current?.type === "Task";
+    const isOverATask = over.data.current?.type === "Task";
+
+    if (!isActiveATask) return;
+
+    if (isActiveATask && isOverATask) {
+      setTasks((tasks) => {
+        const activeIndex = tasks.findIndex((t) => t.id === activeId);
+        const overIndex = tasks.findIndex((t) => t.id === overId);
+
+        if (tasks[activeIndex].columnId != tasks[overIndex].columnId) {
+          tasks[activeIndex].columnId = tasks[overIndex].columnId;
+          return arrayMove(tasks, activeIndex, overIndex - 1);
         }
 
-        const isOverAColumn = over.data.current?.type === "Column";
-
-
-        if (isActiveATask && isOverAColumn) {
-            setTasks((tasks) => {
-                const activeIndex = tasks.findIndex((t) => t.id === activeId);
-                tasks[activeIndex].columnId = overId.toString();
-                return arrayMove(tasks, activeIndex, activeIndex);
-            });
-        }
+        return arrayMove(tasks, activeIndex, overIndex);
+      });
     }
-    return (
-        <>
-            <div className="">
-                <div className="flex gap-2 mb-5">
-                    <div className="flex-1 font-medium lg:text-2xl text-xl capitalize text-default-900">
-                        {t("title")}
-                    </div>
-                    <div className="flex-none">
-                        <AddBoard />
-                    </div>
-                </div>
-                <DndContext
-                    sensors={sensors}
-                    onDragStart={onDragStart}
-                    onDragEnd={onDragEnd}
-                    onDragOver={onDragOver}
-                >
-                    <div className="flex  gap-4 overflow-x-auto no-scrollbar">
-                        <div className="flex gap-4">
-                            <SortableContext items={columnsId}>
-                                {columns.map((col) => (
-                                    <ColumnContainer
-                                        key={col.id}
-                                        column={col}
-                                        tasks={tasks.filter((task) => task.columnId === col.id)}
-                                        handleOpenTask={() => setOpen(true)}
-                                    />
-                                ))}
-                            </SortableContext>
-                        </div>
-                    </div>
 
-                    {/* {createPortal(
+    const isOverAColumn = over.data.current?.type === "Column";
+
+    if (isActiveATask && isOverAColumn) {
+      setTasks((tasks) => {
+        const activeIndex = tasks.findIndex((t) => t.id === activeId);
+        tasks[activeIndex].columnId = overId.toString();
+        return arrayMove(tasks, activeIndex, activeIndex);
+      });
+    }
+  }
+  return (
+    <>
+      <div className="">
+        <div className="flex gap-2 mb-5">
+          <div className="flex-1 font-medium lg:text-2xl text-xl capitalize text-default-900">
+            {t("title")}
+          </div>
+          <div className="flex-none">
+            <AddBoard />
+          </div>
+        </div>
+        <DndContext
+          sensors={sensors}
+          onDragStart={onDragStart}
+          onDragEnd={onDragEnd}
+          onDragOver={onDragOver}
+        >
+          <div className="flex  gap-4 overflow-x-auto no-scrollbar">
+            <div className="flex gap-4">
+              <SortableContext items={columnsId}>
+                {columns.map((col) => (
+                  <ColumnContainer
+                    key={col.id}
+                    column={col}
+                    tasks={tasks.filter((task) => task.columnId === col.id)}
+                    handleOpenTask={() => setOpen(true)}
+                  />
+                ))}
+              </SortableContext>
+            </div>
+          </div>
+
+          {/* {createPortal(
                         <DragOverlay>
                             {activeColumn && (
                                 <ColumnContainer
@@ -160,15 +166,11 @@ const KanBanApp = ({ defaultCols, defaultTasks }: { defaultCols: Column[], defau
                         </DragOverlay>,
                         document.body
                     )} */}
-                </DndContext>
-            </div>
-            <CreateTask
-                open={open}
-                setOpen={setOpen}
-            />
-        </>
-    )
+        </DndContext>
+      </div>
+      <CreateTask open={open} setOpen={setOpen} />
+    </>
+  );
+};
 
-}
-
-export default KanBanApp
\ No newline at end of file
+export default KanBanApp;
diff --git a/src/app/[locale]/(protected)/app/kanban/layout.tsx b/src/app/[locale]/(protected)/app/kanban/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/app/kanban/layout.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/app/kanban/page.tsx b/src/app/[locale]/(protected)/app/kanban/page.tsx
index c056dc88..41a68a07 100644
--- a/src/app/[locale]/(protected)/app/kanban/page.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/page.tsx
@@ -1,14 +1,10 @@
-import React from 'react'
-import KanBanApp from './kanban-app'
-import { defaultCols, defaultTasks } from './data'
+import React from "react";
+
+import { defaultCols, defaultTasks } from "./data";
+import KanBanApp from "./kanban-app";
 
 const KanBanPage = () => {
-    return (
-        <KanBanApp
-            defaultCols={defaultCols}
-            defaultTasks={defaultTasks}
-        />
-    )
-}
+  return <KanBanApp defaultCols={defaultCols} defaultTasks={defaultTasks} />;
+};
 
-export default KanBanPage
\ No newline at end of file
+export default KanBanPage;
diff --git a/src/app/[locale]/(protected)/app/kanban/task.tsx b/src/app/[locale]/(protected)/app/kanban/task.tsx
index 3d87e7b3..6ae2a53e 100644
--- a/src/app/[locale]/(protected)/app/kanban/task.tsx
+++ b/src/app/[locale]/(protected)/app/kanban/task.tsx
@@ -1,147 +1,137 @@
-"use client"
-import { cn } from "@/lib/utils/utils"
+"use client";
+
+import { useState } from "react";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Task } from "./data";
+import { MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button";
-import {  MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 import { Progress } from "@/components/ui/progress";
 import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
-import { useState } from "react";
+
+import { Task } from "./data";
 import EditTask from "./edit-task";
-import { Icon } from "@/components/ui/icon";
 
 function TaskCard({ task }: { task: Task }) {
-    const { projectLogo, title, desc, startDate, endDate, progress, assignee, remainingDays } = task;
-    const [open, setOpen] = useState<boolean>(false);
-    const [editTaskOpen, setEditTaskOpen] = useState<boolean>(false);
-    const {
-        setNodeRef,
-        attributes,
-        listeners,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({
-        id: task.id,
-        data: {
-            type: "Task",
-            task,
-        },
-    });
+  const { projectLogo, title, desc, startDate, endDate, progress, assignee, remainingDays } = task;
+  const [open, setOpen] = useState<boolean>(false);
+  const [editTaskOpen, setEditTaskOpen] = useState<boolean>(false);
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+    id: task.id,
+    data: {
+      type: "Task",
+      task,
+    },
+  });
 
-    const style = {
-        transition,
-        transform: CSS.Transform.toString(transform),
-    };
+  const style = {
+    transition,
+    transform: CSS.Transform.toString(transform),
+  };
 
-    return (
-        <>
-            <DeleteConfirmationDialog
-                open={open}
-                onClose={() => setOpen(false)}
-            />
-            <EditTask
-                open={editTaskOpen}
-                setOpen={setEditTaskOpen}
-            />
-            <Card
-                className={cn("", {
-                    "opacity-10 bg-primary/50 ": isDragging,
-                })}
-                ref={setNodeRef}
-                style={style}
-                {...attributes}
-                {...listeners}
-            >
-                <CardHeader className="flex-row gap-1 p-2.5 items-center space-y-0">
-                    <Avatar className="flex-none h-8 w-8 rounded bg-default-200 text-default hover:bg-default-200">
-                        <AvatarImage src={projectLogo} />
-                        <AvatarFallback className="uppercase">  {title.charAt(0) + title.charAt(1)}</AvatarFallback>
-                    </Avatar>
-                    <h3 className="flex-1 text-default-800 text-lg font-medium max-w-[160px] truncate text-center capitalize ">{title}</h3>
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button
-                                size="icon"
-                                className="flex-none ring-offset-transparent bg-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
-                            >
-                                <MoreVertical className="h-4 w-4 text-default-900" />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="p-0 overflow-hidden" align="end" >
-                            <DropdownMenuItem
-                                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-                                onClick={() => setEditTaskOpen(true)}
-                            >
-                                <SquarePen className="w-3.5 h-3.5 me-1" />
-                                Edit
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                                className="py-2 bg-destructive/30 text-destructive focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
-                                onClick={() => setOpen(true)}
-                            >
-                                <Trash2 className="w-3.5 h-3.5  me-1" />
-                                Delete
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </CardHeader>
-                <CardContent className="p-2.5 pt-1">
-                    <div className="text-default-600 text-sm">{desc}</div>
-                    <div className="flex gap-4 mt-6">
-                        <div>
-                            <div className="text-xs text-default-400 mb-1">Start Date</div>
-                            <div className="text-xs text-default-600  font-medium">{startDate}</div>
-                        </div>
-                        <div>
-                            <div className="text-xs text-default-400 mb-1">End Date</div>
-                            <div className="text-xs text-default-600  font-medium">{endDate}</div>
-                        </div>
-                    </div>
-                    <div className="mt-1">
-                        <div className="text-end text-xs text-default-600 mb-1.5 font-medium">{progress}%</div>
-                        <Progress value={progress} color="primary" size="sm" />
-                    </div>
-                    <div className="flex mt-5">
-                        <div className="flex-1">
-                            <div className="text-default-400  text-sm font-normal mb-3">Assigned to</div>
-                            <div className="flex items-center -space-x-1">
-                                {
-                                    assignee?.map((user, index) => (
-                                        <Avatar
-                                            key={`user-${index}`}
-                                            className="h-6 w-6"
-                                        >
-                                            <AvatarImage src={user.image} />
-                                            <AvatarFallback> {user.name.charAt(0) + user.name.charAt(1)}</AvatarFallback>
-                                        </Avatar>
-                                    ))
-                                }
-                                <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
-                                    +2
-                                </div>
-                            </div>
-                        </div>
-                        <div className="flex-none">
-                            <div className="flex items-center gap-1 bg-destructive/10 text-destructive rounded-full px-2 py-0.5 text-sm mt-1">
-                                <Icon icon="heroicons-outline:clock" />
-                                {remainingDays} days left
-                            </div>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-        </>
-    );
+  return (
+    <>
+      <DeleteConfirmationDialog open={open} onClose={() => setOpen(false)} />
+      <EditTask open={editTaskOpen} setOpen={setEditTaskOpen} />
+      <Card
+        className={cn("", {
+          "opacity-10 bg-primary/50 ": isDragging,
+        })}
+        ref={setNodeRef}
+        style={style}
+        {...attributes}
+        {...listeners}
+      >
+        <CardHeader className="flex-row gap-1 p-2.5 items-center space-y-0">
+          <Avatar className="flex-none h-8 w-8 rounded bg-default-200 text-default hover:bg-default-200">
+            <AvatarImage src={projectLogo} />
+            <AvatarFallback className="uppercase">
+              {" "}
+              {title.charAt(0) + title.charAt(1)}
+            </AvatarFallback>
+          </Avatar>
+          <h3 className="flex-1 text-default-800 text-lg font-medium max-w-[160px] truncate text-center capitalize ">
+            {title}
+          </h3>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="icon"
+                className="flex-none ring-offset-transparent bg-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
+              >
+                <MoreVertical className="h-4 w-4 text-default-900" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="p-0 overflow-hidden" align="end">
+              <DropdownMenuItem
+                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
+                onClick={() => setEditTaskOpen(true)}
+              >
+                <SquarePen className="w-3.5 h-3.5 me-1" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="py-2 bg-destructive/30 text-destructive focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
+                onClick={() => setOpen(true)}
+              >
+                <Trash2 className="w-3.5 h-3.5  me-1" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </CardHeader>
+        <CardContent className="p-2.5 pt-1">
+          <div className="text-default-600 text-sm">{desc}</div>
+          <div className="flex gap-4 mt-6">
+            <div>
+              <div className="text-xs text-default-400 mb-1">Start Date</div>
+              <div className="text-xs text-default-600  font-medium">{startDate}</div>
+            </div>
+            <div>
+              <div className="text-xs text-default-400 mb-1">End Date</div>
+              <div className="text-xs text-default-600  font-medium">{endDate}</div>
+            </div>
+          </div>
+          <div className="mt-1">
+            <div className="text-end text-xs text-default-600 mb-1.5 font-medium">{progress}%</div>
+            <Progress value={progress} color="primary" size="sm" />
+          </div>
+          <div className="flex mt-5">
+            <div className="flex-1">
+              <div className="text-default-400  text-sm font-normal mb-3">Assigned to</div>
+              <div className="flex items-center -space-x-1">
+                {assignee?.map((user, index) => (
+                  <Avatar key={`user-${index}`} className="h-6 w-6">
+                    <AvatarImage src={user.image} />
+                    <AvatarFallback> {user.name.charAt(0) + user.name.charAt(1)}</AvatarFallback>
+                  </Avatar>
+                ))}
+                <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
+                  +2
+                </div>
+              </div>
+            </div>
+            <div className="flex-none">
+              <div className="flex items-center gap-1 bg-destructive/10 text-destructive rounded-full px-2 py-0.5 text-sm mt-1">
+                <Icon icon="heroicons-outline:clock" />
+                {remainingDays} days left
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
 }
 
 export default TaskCard;
diff --git a/src/app/[locale]/(protected)/app/layout.tsx b/src/app/[locale]/(protected)/app/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/app/layout.tsx
+++ b/src/app/[locale]/(protected)/app/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/app/projects/[id]/data.ts b/src/app/[locale]/(protected)/app/projects/[id]/data.ts
index 4cd2f599..595e2360 100644
--- a/src/app/[locale]/(protected)/app/projects/[id]/data.ts
+++ b/src/app/[locale]/(protected)/app/projects/[id]/data.ts
@@ -1,4 +1,3 @@
-
 export const meets = [
   {
     img: "/images/svg/sk.svg",
@@ -26,8 +25,6 @@ export const meets = [
   },
 ];
 
-
-
 export const tasks = [
   {
     id: 1,
@@ -58,7 +55,8 @@ export const tasks = [
     id: 6,
     image: "/images/users/user-6.jpg",
     title: "Amet minim mollit non deserunt ullam.",
-  }]
+  },
+];
 
 export const messagesData = [
   {
@@ -67,14 +65,14 @@ export const messagesData = [
     active: true,
     hasnotifaction: true,
     notification_count: 1,
-    image: "/images/users/user-1.jpg"
+    image: "/images/users/user-1.jpg",
   },
   {
     title: "Savannah Nguyen",
     desc: "Hi! How are you doing?.....",
     active: false,
     hasnotifaction: false,
-    image: "/images/users/user-2.jpg"
+    image: "/images/users/user-2.jpg",
   },
   {
     title: "Ralph Edwards",
@@ -82,26 +80,24 @@ export const messagesData = [
     active: false,
     hasnotifaction: true,
     notification_count: 8,
-    image: "/images/users/user-3.jpg"
+    image: "/images/users/user-3.jpg",
   },
   {
     title: "Cody Fisher",
     desc: "Hi! How are you doing?.....",
     active: true,
     hasnotifaction: false,
-    image: "/images/users/user-4.jpg"
+    image: "/images/users/user-4.jpg",
   },
   {
     title: "Savannah Nguyen",
     desc: "Hi! How are you doing?.....",
     active: false,
     hasnotifaction: false,
-    image: "/images/users/user-4.jpg"
-  }
+    image: "/images/users/user-4.jpg",
+  },
 ];
 
-
-
 export const activityList = [
   {
     title: "Project start date",
@@ -138,9 +134,6 @@ export const activityList = [
   },
 ];
 
-
-
-
 export const files = [
   {
     img: "/images/icon/file-1.svg",
@@ -166,10 +159,9 @@ export const files = [
     img: "/images/icon/scr-1.svg",
     title: "Screenshot.jpg",
     date: "06 June 2021 / 155MB",
-  }
+  },
 ];
 
-
 export const teamData = [
   {
     customer: {
@@ -213,8 +205,8 @@ export const teamData = [
     status: "complete",
     time: "42.5 hours",
     chart: null,
-    action: null
-  }
+    action: null,
+  },
 ];
 
-export type TeamDataProps = (typeof teamData)[]
\ No newline at end of file
+export type TeamDataProps = (typeof teamData)[];
diff --git a/src/app/[locale]/(protected)/app/projects/[id]/page.tsx b/src/app/[locale]/(protected)/app/projects/[id]/page.tsx
index 3677bccb..b99368b9 100644
--- a/src/app/[locale]/(protected)/app/projects/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/app/projects/[id]/page.tsx
@@ -1,335 +1,297 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { BarChart } from "lucide-react";
-import { Icon } from "@/components/ui/icon";
-import ProgressBlock from "@/components/features/blocks/progress-block";
-import { Link } from '@/i18n/navigation';
-
-import { meets, tasks, messagesData, activityList, teamData, files } from "./data"
 import Image from "next/image";
-import DashboardDropdown from "@/components/ui/structures/dashboard-dropdown";
+import { Link } from "@/i18n/navigation";
+import { BarChart } from "lucide-react";
 
-import TaskItem from "@/components/features/project/task-item";
-import MessageListItem from "@/components/features/project/message-list-item";
-import ActivityItem from "@/components/features/project/activity";
-import TeamTable from "@/components/features/project/team-table";
-import NotesCalendar from "@/components/features/project/notes-calendar";
-import { getProjectById } from "../data";
 import { Alert } from "@/components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+import DashboardDropdown from "@/components/ui/structures/dashboard-dropdown";
+import ProgressBlock from "@/components/features/blocks/progress-block";
+import ActivityItem from "@/components/features/project/activity";
+import MessageListItem from "@/components/features/project/message-list-item";
+import NotesCalendar from "@/components/features/project/notes-calendar";
+import TaskItem from "@/components/features/project/task-item";
+import TeamTable from "@/components/features/project/team-table";
 
-const SinglePage = async ({ params: { id } }: { params: { id: string }; }) => {
-    const project = await getProjectById(id)
-    if (!project) return <Alert color="destructive"> project id is not valid</Alert>
-    return (
-        <div className="space-y-5">
-            <div className="grid grid-cols-12 gap-5">
+import { getProjectById } from "../data";
+import { activityList, files, meets, messagesData, tasks, teamData } from "./data";
 
-                <Card className="col-span-12 xl:col-span-3">
-                    <CardContent className="p-6">
-                        <div className="grid grid-cols-2 gap-4">
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-info/20 shadow-none border-none">
-                                    <CardContent className=" p-4  text-center">
-                                        <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
-                                            <BarChart className=" h-6 w-6 text-info" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5"> Total Task</div>
-                                        <div className="text-2xl text-default-900  font-medium">  64</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-warning/20 shadow-none border-none">
-                                    <CardContent className=" p-4  text-center">
-                                        <div
-                                            className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-                                        >
-                                            <Icon className="w-6 h-6 text-warning" icon="heroicons:chart-pie" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5">Completed</div>
-                                        <div className="text-2xl text-default-900  font-medium">45</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-primary/20 shadow-none border-none">
-                                    <CardContent className=" p-4  text-center">
-                                        <div
-                                            className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-                                        >
-                                            <Icon className="w-6 h-6 text-primary" icon="heroicons:clock" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5">Hours</div>
-                                        <div className="text-2xl text-default-900  font-medium">190</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="lg:col-span-1 col-span-2">
-                                <Card className="bg-success/20 shadow-none border-none">
-                                    <CardContent className="p-4 text-center">
-                                        <div
-                                            className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-                                        >
-                                            <Icon className="w-6 h-6 text-success" icon="heroicons:calculator" />
-                                        </div>
-                                        <div className="block text-sm text-default-600 font-medium  mb-1.5">Spendings</div>
-                                        <div className="text-2xl text-default-900  font-medium">$3,564</div>
-                                    </CardContent>
-                                </Card>
-                            </div>
-                            <div className="col-span-2">
-                                <ProgressBlock
-                                    title="Progress"
-                                    height={183}
-                                    className="border-none shadow-none"
-                                    chartType="pie"
-                                />
-                            </div>
-                        </div>
-                    </CardContent>
+const SinglePage = async ({ params: { id } }: { params: { id: string } }) => {
+  const project = await getProjectById(id);
+  if (!project) return <Alert color="destructive"> project id is not valid</Alert>;
+  return (
+    <div className="space-y-5">
+      <div className="grid grid-cols-12 gap-5">
+        <Card className="col-span-12 xl:col-span-3">
+          <CardContent className="p-6">
+            <div className="grid grid-cols-2 gap-4">
+              <div className="lg:col-span-1 col-span-2">
+                <Card className="bg-info/20 shadow-none border-none">
+                  <CardContent className=" p-4  text-center">
+                    <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
+                      <BarChart className=" h-6 w-6 text-info" />
+                    </div>
+                    <div className="block text-sm text-default-600 font-medium  mb-1.5">
+                      {" "}
+                      Total Task
+                    </div>
+                    <div className="text-2xl text-default-900  font-medium"> 64</div>
+                  </CardContent>
                 </Card>
-
-                <Card className="col-span-12 xl:col-span-5">
-                    <CardHeader>
-                        <CardTitle>About Project</CardTitle>
-                    </CardHeader>
-                    <CardContent className="p-6">
-
-                        <div className="text-base font-medium text-default-800  mb-3">
-                            Background information
-                        </div>
-                        <p className="text-sm text-default-600">
-                            The Optimistic Website Company - Amet minim mollit non deserunt
-                            ullamco est sit aliqua dolor do amet sint. Velit officia consequat
-                            duis enim velit mollit. Exercita -tion veniam consequat sunt
-                            nostrud amet.
-                        </p>
-                        <br />
-                        <p className="text-sm text-default-600">
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company - Amet minim mollit non
-                            deserunt ullamco est sit aliqua dolor do amet sint. Velit officia
-                            consequat duis enim velit mollit. Exercita -tion veniam consequat
-                            sunt nostrud amet.
-                        </p>
-                        <p className="text-sm text-default-600 mt-4">
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company.
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company. <br /> <br />
-                            Amet minim mollit non deserunt ullamco est sit aliqua dolor do
-                            amet sint.The Optimistic Website Company.
-                        </p>
-                        <div className="flex flex-wrap mt-8">
-                            <div className="xl:mr-8 mr-4 mb-3 space-y-1">
-                                <div className="font-semibold text-default-500 ">
-                                    Existing website
-                                </div>
-                                <div className="flex items-center gap-2 text-xs font-normal text-primary">
-                                    <Icon icon="heroicons:link" />
-                                    <Link href="#">www.example.com</Link>
-                                </div>
-                            </div>
-                            <div className="xl:me-8 me-4 mb-3 space-y-1">
-                                <div className="font-semibold text-default-500">
-                                    Project brief
-                                </div>
-                                <div className="flex items-center gap-2 text-xs font-normal text-primary-600 ">
-                                    <Icon icon="heroicons:link" />
-                                    <Link href="#">www.example.com</Link>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="bg-default-100  rounded px-4 pt-4 pb-1 flex flex-wrap justify-between mt-6">
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600">
-                                    Project owner
-                                </div>
-                                <div className="text-xs text-default-600">
-                                    John Doe
-                                </div>
-                            </div>
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600">
-                                    Budget
-                                </div>
-                                <div className="text-xs text-default-600 ">
-                                    $75,800
-                                </div>
-                            </div>
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600">
-                                    Start date
-                                </div>
-                                <div className="text-xs text-default-600">
-                                    01/11/2021
-                                </div>
-                            </div>
-                            <div className="me-3 mb-3 space-y-2">
-                                <div className="text-xs font-medium text-default-600 ">
-                                    Deadline
-                                </div>
-                                <div className="text-xs text-warning">01/11/2021</div>
-                            </div>
-                        </div>
-                    </CardContent>
+              </div>
+              <div className="lg:col-span-1 col-span-2">
+                <Card className="bg-warning/20 shadow-none border-none">
+                  <CardContent className=" p-4  text-center">
+                    <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
+                      <Icon className="w-6 h-6 text-warning" icon="heroicons:chart-pie" />
+                    </div>
+                    <div className="block text-sm text-default-600 font-medium  mb-1.5">
+                      Completed
+                    </div>
+                    <div className="text-2xl text-default-900  font-medium">45</div>
+                  </CardContent>
                 </Card>
-
-                <Card className="col-span-12 xl:col-span-4">
-                    <CardHeader>
-                        <CardTitle>Notes</CardTitle>
-                    </CardHeader>
-                    <CardContent className="px-2">
-                        <NotesCalendar />
-                        <ul className="divide-y divide-default-100">
-                            {meets.map((item, i) => (
-                                <li key={i} className=" py-2.5 px-3">
-                                    <div className="flex gap-2">
-                                        <div className="flex-1 flex gap-2.5">
-                                            <div className="flex-none">
-                                                <div className="h-8 w-8">
-                                                    <Image
-                                                        src={item.img}
-                                                        alt=""
-                                                        className="w-full h-full "
-                                                        width={32}
-                                                        height={32}
-                                                    />
-                                                </div>
-                                            </div>
-                                            <div className="flex-1">
-                                                <div className="text-default-600 text-sm  mb-1 font-medium">
-                                                    {item.title}
-                                                </div>
-                                                <div className="flex gap-1 font-normal text-xs  text-default-500">
-                                                    <div className="text-base">
-                                                        <Icon icon="heroicons-outline:video-camera" />
-                                                    </div>
-                                                    {item.meet}
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div className="flex-none text-xs text-default-600">
-                                            {item.date}
-                                        </div>
-                                    </div>
-                                </li>
-                            ))}
-                        </ul>
-                    </CardContent>
+              </div>
+              <div className="lg:col-span-1 col-span-2">
+                <Card className="bg-primary/20 shadow-none border-none">
+                  <CardContent className=" p-4  text-center">
+                    <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
+                      <Icon className="w-6 h-6 text-primary" icon="heroicons:clock" />
+                    </div>
+                    <div className="block text-sm text-default-600 font-medium  mb-1.5">Hours</div>
+                    <div className="text-2xl text-default-900  font-medium">190</div>
+                  </CardContent>
                 </Card>
+              </div>
+              <div className="lg:col-span-1 col-span-2">
+                <Card className="bg-success/20 shadow-none border-none">
+                  <CardContent className="p-4 text-center">
+                    <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
+                      <Icon className="w-6 h-6 text-success" icon="heroicons:calculator" />
+                    </div>
+                    <div className="block text-sm text-default-600 font-medium  mb-1.5">
+                      Spendings
+                    </div>
+                    <div className="text-2xl text-default-900  font-medium">$3,564</div>
+                  </CardContent>
+                </Card>
+              </div>
+              <div className="col-span-2">
+                <ProgressBlock
+                  title="Progress"
+                  height={183}
+                  className="border-none shadow-none"
+                  chartType="pie"
+                />
+              </div>
             </div>
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
-                <Card>
-                    <CardHeader className="flex-row  items-center justify-between">
-                        <CardTitle>Task List</CardTitle>
-                        <DashboardDropdown />
-                    </CardHeader>
-                    <CardContent className="p-0">
-                        <ul className="divide-y divide-default-100">
-                            {
-                                tasks.map((task, index) => <TaskItem
-                                    key={index}
-                                    task={task} />)
-                            }
-                        </ul>
-                    </CardContent>
-                </Card>
-                <Card>
-                    <CardHeader className="flex-row items-center justify-between">
-                        <CardTitle>Messages</CardTitle>
-                        <DashboardDropdown />
-                    </CardHeader>
-                    <CardContent className="p-0">
-                        <ul className="divide-y divide-default-100">
-                            {
-                                messagesData.map((message, index) =>
-                                    <MessageListItem
-                                        message={message}
-                                        key={index} />)
-                            }
-                        </ul>
-                    </CardContent>
-                </Card>
+          </CardContent>
+        </Card>
 
-                <Card>
-                    <CardHeader className="flex-row items-center justify-between">
-                        <CardTitle>Activity</CardTitle>
-                        <DashboardDropdown />
-                    </CardHeader>
-                    <CardContent className="p-0">
-                        <ul className="relative before:absolute before:start-6 before:top-3.5 before:w-[1px] before:h-[80%] before:bg-default-200">
-                            {
-                                activityList.map((activity, index) =>
-                                    <ActivityItem
-                                        activity={activity}
-                                        key={index}
-                                    />)
-                            }
-                        </ul>
-                    </CardContent>
-                </Card>
+        <Card className="col-span-12 xl:col-span-5">
+          <CardHeader>
+            <CardTitle>About Project</CardTitle>
+          </CardHeader>
+          <CardContent className="p-6">
+            <div className="text-base font-medium text-default-800  mb-3">
+              Background information
             </div>
-            <div className="grid grid-cols-12 gap-5">
-                <div className="col-span-12 lg:col-span-8">
-                    <Card>
-                        <CardHeader className="flex-row items-center justify-between">
-                            <CardTitle>Team Members</CardTitle>
-                        </CardHeader>
-                        <CardContent className="p-0">
-                            <TeamTable data={teamData} />
-                        </CardContent>
-                    </Card>
+            <p className="text-sm text-default-600">
+              The Optimistic Website Company - Amet minim mollit non deserunt ullamco est sit aliqua
+              dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercita -tion
+              veniam consequat sunt nostrud amet.
+            </p>
+            <br />
+            <p className="text-sm text-default-600">
+              Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.The
+              Optimistic Website Company - Amet minim mollit non deserunt ullamco est sit aliqua
+              dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercita -tion
+              veniam consequat sunt nostrud amet.
+            </p>
+            <p className="text-sm text-default-600 mt-4">
+              Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.The
+              Optimistic Website Company. Amet minim mollit non deserunt ullamco est sit aliqua
+              dolor do amet sint.The Optimistic Website Company. <br /> <br />
+              Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.The
+              Optimistic Website Company.
+            </p>
+            <div className="flex flex-wrap mt-8">
+              <div className="xl:mr-8 mr-4 mb-3 space-y-1">
+                <div className="font-semibold text-default-500 ">Existing website</div>
+                <div className="flex items-center gap-2 text-xs font-normal text-primary">
+                  <Icon icon="heroicons:link" />
+                  <Link href="#">www.example.com</Link>
                 </div>
-                <div className="col-span-12 lg:col-span-4">
-                    <Card>
-                        <CardHeader className="flex-row items-center justify-between">
-                            <CardTitle>Files</CardTitle>
-                            <DashboardDropdown />
-                        </CardHeader>
-                        <CardContent>
-                            <ul className="divide-y divide-default-100">
-                                {files.map((item, i) => (
-                                    <li key={i} className="py-3">
-                                        <div className="flex items-center gap-2">
-                                            <div className="flex-1 flex gap-2">
-                                                <div className="flex-none">
-                                                    <div className="h-8 w-8">
-                                                        <Image
-                                                            src={item.img}
-                                                            alt=""
-                                                            width={32}
-                                                            height={32}
-                                                            className=" w-full h-full object-cover rounded-full border hover:border-white border-transparent"
-                                                        />
-                                                    </div>
-                                                </div>
-                                                <div className="flex-1">
-                                                    <div className="text-default-600 text-sm">
-                                                        {item.title}
-                                                    </div>
-                                                    <div className="font-normal text-xs text-default-500 mt-1">
-                                                        {item.date}
-                                                    </div>
-                                                </div>
-                                            </div>
-                                            <div className="flex-none">
-                                                <button
-                                                    type="button"
-                                                    className="text-xs text-slate-900 dark:text-white"
-                                                >
-                                                    Download
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </li>
-                                ))}
-                            </ul>
-                        </CardContent>
-                    </Card>
+              </div>
+              <div className="xl:me-8 me-4 mb-3 space-y-1">
+                <div className="font-semibold text-default-500">Project brief</div>
+                <div className="flex items-center gap-2 text-xs font-normal text-primary-600 ">
+                  <Icon icon="heroicons:link" />
+                  <Link href="#">www.example.com</Link>
                 </div>
+              </div>
             </div>
+            <div className="bg-default-100  rounded px-4 pt-4 pb-1 flex flex-wrap justify-between mt-6">
+              <div className="me-3 mb-3 space-y-2">
+                <div className="text-xs font-medium text-default-600">Project owner</div>
+                <div className="text-xs text-default-600">John Doe</div>
+              </div>
+              <div className="me-3 mb-3 space-y-2">
+                <div className="text-xs font-medium text-default-600">Budget</div>
+                <div className="text-xs text-default-600 ">$75,800</div>
+              </div>
+              <div className="me-3 mb-3 space-y-2">
+                <div className="text-xs font-medium text-default-600">Start date</div>
+                <div className="text-xs text-default-600">01/11/2021</div>
+              </div>
+              <div className="me-3 mb-3 space-y-2">
+                <div className="text-xs font-medium text-default-600 ">Deadline</div>
+                <div className="text-xs text-warning">01/11/2021</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-12 xl:col-span-4">
+          <CardHeader>
+            <CardTitle>Notes</CardTitle>
+          </CardHeader>
+          <CardContent className="px-2">
+            <NotesCalendar />
+            <ul className="divide-y divide-default-100">
+              {meets.map((item, i) => (
+                <li key={i} className=" py-2.5 px-3">
+                  <div className="flex gap-2">
+                    <div className="flex-1 flex gap-2.5">
+                      <div className="flex-none">
+                        <div className="h-8 w-8">
+                          <Image
+                            src={item.img}
+                            alt=""
+                            className="w-full h-full "
+                            width={32}
+                            height={32}
+                          />
+                        </div>
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-default-600 text-sm  mb-1 font-medium">
+                          {item.title}
+                        </div>
+                        <div className="flex gap-1 font-normal text-xs  text-default-500">
+                          <div className="text-base">
+                            <Icon icon="heroicons-outline:video-camera" />
+                          </div>
+                          {item.meet}
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex-none text-xs text-default-600">{item.date}</div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
+        <Card>
+          <CardHeader className="flex-row  items-center justify-between">
+            <CardTitle>Task List</CardTitle>
+            <DashboardDropdown />
+          </CardHeader>
+          <CardContent className="p-0">
+            <ul className="divide-y divide-default-100">
+              {tasks.map((task, index) => (
+                <TaskItem key={index} task={task} />
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex-row items-center justify-between">
+            <CardTitle>Messages</CardTitle>
+            <DashboardDropdown />
+          </CardHeader>
+          <CardContent className="p-0">
+            <ul className="divide-y divide-default-100">
+              {messagesData.map((message, index) => (
+                <MessageListItem message={message} key={index} />
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="flex-row items-center justify-between">
+            <CardTitle>Activity</CardTitle>
+            <DashboardDropdown />
+          </CardHeader>
+          <CardContent className="p-0">
+            <ul className="relative before:absolute before:start-6 before:top-3.5 before:w-[1px] before:h-[80%] before:bg-default-200">
+              {activityList.map((activity, index) => (
+                <ActivityItem activity={activity} key={index} />
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      </div>
+      <div className="grid grid-cols-12 gap-5">
+        <div className="col-span-12 lg:col-span-8">
+          <Card>
+            <CardHeader className="flex-row items-center justify-between">
+              <CardTitle>Team Members</CardTitle>
+            </CardHeader>
+            <CardContent className="p-0">
+              <TeamTable data={teamData} />
+            </CardContent>
+          </Card>
         </div>
-    )
-}
+        <div className="col-span-12 lg:col-span-4">
+          <Card>
+            <CardHeader className="flex-row items-center justify-between">
+              <CardTitle>Files</CardTitle>
+              <DashboardDropdown />
+            </CardHeader>
+            <CardContent>
+              <ul className="divide-y divide-default-100">
+                {files.map((item, i) => (
+                  <li key={i} className="py-3">
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1 flex gap-2">
+                        <div className="flex-none">
+                          <div className="h-8 w-8">
+                            <Image
+                              src={item.img}
+                              alt=""
+                              width={32}
+                              height={32}
+                              className=" w-full h-full object-cover rounded-full border hover:border-white border-transparent"
+                            />
+                          </div>
+                        </div>
+                        <div className="flex-1">
+                          <div className="text-default-600 text-sm">{item.title}</div>
+                          <div className="font-normal text-xs text-default-500 mt-1">
+                            {item.date}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex-none">
+                        <button type="button" className="text-xs text-slate-900 dark:text-white">
+                          Download
+                        </button>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default SinglePage
\ No newline at end of file
+export default SinglePage;
diff --git a/src/app/[locale]/(protected)/app/projects/create-project.tsx b/src/app/[locale]/(protected)/app/projects/create-project.tsx
index 716bbe54..8614187e 100644
--- a/src/app/[locale]/(protected)/app/projects/create-project.tsx
+++ b/src/app/[locale]/(protected)/app/projects/create-project.tsx
@@ -1,22 +1,20 @@
 "use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import Select, { MultiValue } from "react-select";
+
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
+
 interface CreateTaskProps {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -33,7 +31,7 @@ type Inputs = {
   assignee: MultiValue<Option>;
   startDate: Date;
   endDate: Date;
-}
+};
 const options: Option[] = [
   {
     value: "team",
@@ -54,7 +52,7 @@ const options: Option[] = [
   {
     value: "update",
     label: "update",
-  }
+  },
 ];
 const assigneeOptions: Option[] = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -63,7 +61,6 @@ const assigneeOptions: Option[] = [
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
 
-
 const CreateProject = ({ open, setOpen }: CreateTaskProps) => {
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [endDate, setEndtDate] = useState<Date>(new Date());
@@ -72,16 +69,16 @@ const CreateProject = ({ open, setOpen }: CreateTaskProps) => {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<Inputs>()
+  } = useForm<Inputs>();
   const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
+    console.log(data);
+    setOpen(false);
+  };
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create  Project</DialogTitle>
+          <DialogTitle>Create Project</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div className="space-y-1">
@@ -92,7 +89,9 @@ const CreateProject = ({ open, setOpen }: CreateTaskProps) => {
               {...register("title", { required: "Title is required." })}
               color={errors.title ? "destructive" : "default"}
             />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
+            {errors.title && (
+              <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>
+            )}
           </div>
           <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
             <div className="space-y-1">
@@ -172,12 +171,20 @@ const CreateProject = ({ open, setOpen }: CreateTaskProps) => {
                   options={assigneeOptions}
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <div className="flex items-center">
+                        <Image
+                          width={40}
+                          height={40}
+                          src={option.image as string}
+                          alt={option.label}
+                          className="w-8 h-8 rounded-full me-2"
+                        />
+                        <span className="text-sm text-default-600 font-medium">{option.label}</span>
+                      </div>
+                    ) as unknown as string
+                  }
                   placeholder="Select assignee"
                 />
               )}
@@ -196,7 +203,13 @@ const CreateProject = ({ open, setOpen }: CreateTaskProps) => {
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
                   placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <span className="text-sm text-default-600 font-medium capitalize">
+                        {option.label}
+                      </span>
+                    ) as unknown as string
+                  }
                 />
               )}
             />
@@ -215,7 +228,6 @@ const CreateProject = ({ open, setOpen }: CreateTaskProps) => {
             <Button type="submit">Add</Button>
           </div>
         </form>
-
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/[locale]/(protected)/app/projects/data.ts b/src/app/[locale]/(protected)/app/projects/data.ts
index ba3d82b4..2636bcfb 100644
--- a/src/app/[locale]/(protected)/app/projects/data.ts
+++ b/src/app/[locale]/(protected)/app/projects/data.ts
@@ -1,6 +1,5 @@
 import { faker } from "@faker-js/faker";
 
-
 export const defaultProjects = [
   {
     id: "c06d48bf-7f35-4789-b71e-d80fee5b430f",
@@ -22,9 +21,9 @@ export const defaultProjects = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
   {
     id: faker.string.uuid(),
@@ -46,9 +45,9 @@ export const defaultProjects = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
   {
     id: faker.string.uuid(),
@@ -70,9 +69,9 @@ export const defaultProjects = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
   {
     id: faker.string.uuid(),
@@ -94,9 +93,9 @@ export const defaultProjects = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
+    remainingDays: 3,
   },
 
   {
@@ -119,40 +118,39 @@ export const defaultProjects = [
       {
         image: "/images/avatar/av-3.svg",
         name: "Rakibul Islam",
-      }
+      },
     ],
-    remainingDays: 3
-  }
+    remainingDays: 3,
+  },
 ];
 
-
 export const getProjects = async () => {
-  return defaultProjects
-}
+  return defaultProjects;
+};
 
 export const getProjectById = async (id: string) => {
-  return defaultProjects.find(project => project.id === id)
-}
+  return defaultProjects.find((project) => project.id === id);
+};
 
 interface ProjectNav {
-  label: string
-  href: string
-  active: boolean
+  label: string;
+  href: string;
+  active: boolean;
 }
 
 export function getProjectNav(pathname: string): ProjectNav[] {
   return [
     {
-      label: 'grid view',
+      label: "grid view",
       href: "/app/projects/grid",
       active: pathname === "/app/projects/grid",
     },
     {
-      label: 'list view',
+      label: "list view",
       href: "/app/projects/list",
       active: pathname === "/app/projects/list",
-    }
-  ]
+    },
+  ];
 }
 
-export type Project = (typeof defaultProjects)[number]
\ No newline at end of file
+export type Project = (typeof defaultProjects)[number];
diff --git a/src/app/[locale]/(protected)/app/projects/edit-project.tsx b/src/app/[locale]/(protected)/app/projects/edit-project.tsx
index 56f997b7..044b8096 100644
--- a/src/app/[locale]/(protected)/app/projects/edit-project.tsx
+++ b/src/app/[locale]/(protected)/app/projects/edit-project.tsx
@@ -1,22 +1,20 @@
 "use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import Select, { MultiValue } from "react-select";
+
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Textarea } from "@/components/ui/textarea";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form"
-import Select, { MultiValue } from 'react-select'
+
 interface EditProjectProps {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -33,7 +31,7 @@ type Inputs = {
   assignee: MultiValue<Option>;
   startDate: Date;
   endDate: Date;
-}
+};
 const options: Option[] = [
   {
     value: "team",
@@ -54,7 +52,7 @@ const options: Option[] = [
   {
     value: "update",
     label: "update",
-  }
+  },
 ];
 const assigneeOptions: Option[] = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -63,7 +61,6 @@ const assigneeOptions: Option[] = [
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
 
-
 const EditProject = ({ open, setOpen }: EditProjectProps) => {
   const [startDate, setStartDate] = useState<Date>(new Date());
   const [endDate, setEndtDate] = useState<Date>(new Date());
@@ -72,16 +69,16 @@ const EditProject = ({ open, setOpen }: EditProjectProps) => {
     handleSubmit,
     control,
     formState: { errors },
-  } = useForm<Inputs>()
+  } = useForm<Inputs>();
   const onSubmit: SubmitHandler<Inputs> = (data) => {
-    console.log(data)
-    setOpen(false)
-  }
+    console.log(data);
+    setOpen(false);
+  };
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Create  Task</DialogTitle>
+          <DialogTitle>Create Task</DialogTitle>
         </DialogHeader>
         <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
           <div className="space-y-1">
@@ -93,7 +90,9 @@ const EditProject = ({ open, setOpen }: EditProjectProps) => {
               {...register("title", { required: "Title is required." })}
               color={errors.title ? "destructive" : "default"}
             />
-            {errors.title && <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>}
+            {errors.title && (
+              <p className="text-destructive  text-sm font-medium">{errors.title.message}</p>
+            )}
           </div>
           <div className="grid lg:grid-cols-2 grid-cols-1 gap-5">
             <div className="space-y-1">
@@ -166,19 +165,29 @@ const EditProject = ({ open, setOpen }: EditProjectProps) => {
             <Controller
               name="assignee"
               control={control}
-              defaultValue={[{ value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" }]}
+              defaultValue={[
+                { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
+              ]}
               render={({ field }) => (
                 <Select
                   {...field}
                   options={assigneeOptions}
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
-                  getOptionLabel={(option) => (
-                    <div className="flex items-center">
-                      <Image width={40} height={40} src={option.image as string} alt={option.label} className="w-8 h-8 rounded-full me-2" />
-                      <span className="text-sm text-default-600 font-medium">{option.label}</span>
-                    </div>
-                  ) as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <div className="flex items-center">
+                        <Image
+                          width={40}
+                          height={40}
+                          src={option.image as string}
+                          alt={option.label}
+                          className="w-8 h-8 rounded-full me-2"
+                        />
+                        <span className="text-sm text-default-600 font-medium">{option.label}</span>
+                      </div>
+                    ) as unknown as string
+                  }
                   placeholder="Select assignee"
                 />
               )}
@@ -197,7 +206,13 @@ const EditProject = ({ open, setOpen }: EditProjectProps) => {
                   isMulti
                   onChange={(selectedOption) => field.onChange(selectedOption)}
                   placeholder="Select tags"
-                  getOptionLabel={(option) => <span className="text-sm text-default-600 font-medium capitalize">{option.label}</span> as unknown as string}
+                  getOptionLabel={(option) =>
+                    (
+                      <span className="text-sm text-default-600 font-medium capitalize">
+                        {option.label}
+                      </span>
+                    ) as unknown as string
+                  }
                 />
               )}
             />
@@ -217,7 +232,6 @@ const EditProject = ({ open, setOpen }: EditProjectProps) => {
             <Button type="submit">Add</Button>
           </div>
         </form>
-
       </DialogContent>
     </Dialog>
   );
diff --git a/src/app/[locale]/(protected)/app/projects/grid/components/empty.tsx b/src/app/[locale]/(protected)/app/projects/grid/components/empty.tsx
index 668fff04..10fb0d19 100644
--- a/src/app/[locale]/(protected)/app/projects/grid/components/empty.tsx
+++ b/src/app/[locale]/(protected)/app/projects/grid/components/empty.tsx
@@ -1,14 +1,12 @@
-
-import { Rabbit } from 'lucide-react';
-
+import { Rabbit } from "lucide-react";
 
 const EmptyProject = () => {
   return (
     <div className="">
       <Rabbit className=" h-[200px]  w-[200px] text-default-400 " strokeWidth={1} />
-      <div className=' text-sm text-default-500 text-center'>No tasks</div>
+      <div className=" text-sm text-default-500 text-center">No tasks</div>
     </div>
   );
 };
 
-export default EmptyProject;
\ No newline at end of file
+export default EmptyProject;
diff --git a/src/app/[locale]/(protected)/app/projects/grid/components/project-action.tsx b/src/app/[locale]/(protected)/app/projects/grid/components/project-action.tsx
index 137d2ae4..2eaa0849 100644
--- a/src/app/[locale]/(protected)/app/projects/grid/components/project-action.tsx
+++ b/src/app/[locale]/(protected)/app/projects/grid/components/project-action.tsx
@@ -1,72 +1,66 @@
-'use client'
-import React, { useState } from 'react'
-import { Button } from "@/components/ui/button";
-import EditProject from "../../edit-project";
-import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+"use client";
+
+import React, { useState } from "react";
+import { Link } from "@/i18n/navigation";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { defaultProjects } from '../../data';
-import { Link } from '@/i18n/navigation'; const ProjectAction = () => {
-    const [editTaskOpen, setEditTaskOpen] = useState<boolean>(false);
-    const [deleteProject, setDeleteProject] = useState<boolean>(false)
-    return (
-        <>
-            <EditProject
-                open={editTaskOpen}
-                setOpen={setEditTaskOpen}
-            />
-            <DeleteConfirmationDialog
-                open={deleteProject}
-                onClose={() => setDeleteProject(false)}
-            />
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
 
+import { defaultProjects } from "../../data";
+import EditProject from "../../edit-project";
 
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button
-                        size="icon"
-                        className="flex-none bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
-                    >
-                        <MoreVertical className="h-4 w-4 text-default-700" />
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="p-0 overflow-hidden" align="end" >
-                    <DropdownMenuItem
+const ProjectAction = () => {
+  const [editTaskOpen, setEditTaskOpen] = useState<boolean>(false);
+  const [deleteProject, setDeleteProject] = useState<boolean>(false);
+  return (
+    <>
+      <EditProject open={editTaskOpen} setOpen={setEditTaskOpen} />
+      <DeleteConfirmationDialog open={deleteProject} onClose={() => setDeleteProject(false)} />
 
-                        className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            size="icon"
+            className="flex-none bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
+          >
+            <MoreVertical className="h-4 w-4 text-default-700" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="p-0 overflow-hidden" align="end">
+          <DropdownMenuItem className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer">
+            <Link
+              href={`/app/projects/${defaultProjects[0].id}`}
+              className=" flex  items-center w-full"
+            >
+              <Eye className="w-3.5 h-3.5 me-1" />
+              View
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => setEditTaskOpen(true)}
+            className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
+          >
+            <SquarePen className="w-3.5 h-3.5 me-1" />
+            Edit
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => setDeleteProject(true)}
+            className="py-2 bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
+          >
+            <Trash2 className="w-3.5 h-3.5  me-1" />
+            Delete
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};
 
-                    >
-                        <Link href={`/app/projects/${defaultProjects[0].id}`} className=' flex  items-center w-full'>
-                            <Eye className="w-3.5 h-3.5 me-1" />
-                            View
-                        </Link>
-
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        onClick={() => setEditTaskOpen(true)}
-                        className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-
-                    >
-                        <SquarePen className="w-3.5 h-3.5 me-1" />
-                        Edit
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                        onClick={() => setDeleteProject(true)}
-                        className="py-2 bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
-
-                    >
-                        <Trash2 className="w-3.5 h-3.5  me-1" />
-                        Delete
-                    </DropdownMenuItem>
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </>
-    )
-}
-
-export default ProjectAction
\ No newline at end of file
+export default ProjectAction;
diff --git a/src/app/[locale]/(protected)/app/projects/grid/page.tsx b/src/app/[locale]/(protected)/app/projects/grid/page.tsx
index eab10c22..ff39ef5f 100644
--- a/src/app/[locale]/(protected)/app/projects/grid/page.tsx
+++ b/src/app/[locale]/(protected)/app/projects/grid/page.tsx
@@ -1,77 +1,92 @@
-import React from 'react'
-import { getProjects } from '../data'
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import React from "react";
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Progress } from "@/components/ui/progress";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Icon } from "@/components/ui/icon";
-import EmptyProject from './components/empty';
-import ProjectAction from './components/project-action';
+import { Progress } from "@/components/ui/progress";
+
+import { getProjects } from "../data";
+import EmptyProject from "./components/empty";
+import ProjectAction from "./components/project-action";
+
 const ProjectGrid = async () => {
-    const projects = await getProjects()
-    if (projects.length === 0) return <EmptyProject />
-    return (
-        <div className='grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5'>
-            {projects?.map(({ projectLogo, title, desc, startDate, endDate, progress, assignee, remainingDays }, index) => (
-                <Card key={index}>
-                    <CardHeader className="flex-row gap-1  items-center space-y-0">
-                        <div className="flex-1 flex items-center gap-4">
-                            <Avatar className="flex-none h-10 w-10 rounded bg-default-200 text-default hover:bg-default-200">
-                                <AvatarImage src={projectLogo} />
-                                <AvatarFallback className="uppercase">  {title.charAt(0) + title.charAt(1)}</AvatarFallback>
-                            </Avatar>
-                            <h3 className="text-default-900 text-lg font-medium max-w-[210px] truncate text-center capitalize ">{title}</h3>
-                        </div>
-                        <ProjectAction />
-                    </CardHeader>
-                    <CardContent>
-                        <div className="text-default-600 text-sm">{desc}</div>
-                        <div className="flex gap-4 mt-6">
-                            <div>
-                                <div className="text-xs text-default-400 mb-1">Start Date</div>
-                                <div className="text-xs text-default-600  font-medium">{startDate}</div>
-                            </div>
-                            <div>
-                                <div className="text-xs text-default-400 mb-1">End Date</div>
-                                <div className="text-xs text-default-600  font-medium">{endDate}</div>
-                            </div>
-                        </div>
-                        <div className="mt-1">
-                            <div className="text-end text-xs text-default-600 mb-1.5 font-medium">{progress}%</div>
-                            <Progress value={progress} color="primary" size="sm" />
-                        </div>
-                        <div className="flex mt-5">
-                            <div className="flex-1">
-                                <div className="text-default-400  text-sm font-normal mb-3">Assigned to</div>
-                                <div className="flex items-center -space-x-1">
-                                    {
-                                        assignee?.map((user, index) => (
-                                            <Avatar
-                                                key={`user-${index}`}
-                                                className="h-6 w-6 shadow-none border-none bg-transparent hover:bg-transparent"
-                                            >
-                                                <AvatarImage src={user.image} />
-                                                <AvatarFallback> {user.name.charAt(0) + user.name.charAt(1)}</AvatarFallback>
-                                            </Avatar>
-                                        ))
-                                    }
-                                    <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
-                                        +2
-                                    </div>
-                                </div>
-                            </div>
-                            <div className="flex-none">
-                                <div className="flex items-center gap-1 bg-destructive/10 text-destructive rounded-full px-2 py-0.5 text-xs mt-1">
-                                    <Icon icon="heroicons-outline:clock" />
-                                    {remainingDays} days left
-                                </div>
-                            </div>
-                        </div>
-                    </CardContent>
-                </Card>
-            ))}
+  const projects = await getProjects();
+  if (projects.length === 0) return <EmptyProject />;
+  return (
+    <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5">
+      {projects?.map(
+        (
+          { projectLogo, title, desc, startDate, endDate, progress, assignee, remainingDays },
+          index
+        ) => (
+          <Card key={index}>
+            <CardHeader className="flex-row gap-1  items-center space-y-0">
+              <div className="flex-1 flex items-center gap-4">
+                <Avatar className="flex-none h-10 w-10 rounded bg-default-200 text-default hover:bg-default-200">
+                  <AvatarImage src={projectLogo} />
+                  <AvatarFallback className="uppercase">
+                    {" "}
+                    {title.charAt(0) + title.charAt(1)}
+                  </AvatarFallback>
+                </Avatar>
+                <h3 className="text-default-900 text-lg font-medium max-w-[210px] truncate text-center capitalize ">
+                  {title}
+                </h3>
+              </div>
+              <ProjectAction />
+            </CardHeader>
+            <CardContent>
+              <div className="text-default-600 text-sm">{desc}</div>
+              <div className="flex gap-4 mt-6">
+                <div>
+                  <div className="text-xs text-default-400 mb-1">Start Date</div>
+                  <div className="text-xs text-default-600  font-medium">{startDate}</div>
+                </div>
+                <div>
+                  <div className="text-xs text-default-400 mb-1">End Date</div>
+                  <div className="text-xs text-default-600  font-medium">{endDate}</div>
+                </div>
+              </div>
+              <div className="mt-1">
+                <div className="text-end text-xs text-default-600 mb-1.5 font-medium">
+                  {progress}%
+                </div>
+                <Progress value={progress} color="primary" size="sm" />
+              </div>
+              <div className="flex mt-5">
+                <div className="flex-1">
+                  <div className="text-default-400  text-sm font-normal mb-3">Assigned to</div>
+                  <div className="flex items-center -space-x-1">
+                    {assignee?.map((user, index) => (
+                      <Avatar
+                        key={`user-${index}`}
+                        className="h-6 w-6 shadow-none border-none bg-transparent hover:bg-transparent"
+                      >
+                        <AvatarImage src={user.image} />
+                        <AvatarFallback>
+                          {" "}
+                          {user.name.charAt(0) + user.name.charAt(1)}
+                        </AvatarFallback>
+                      </Avatar>
+                    ))}
+                    <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
+                      +2
+                    </div>
+                  </div>
+                </div>
+                <div className="flex-none">
+                  <div className="flex items-center gap-1 bg-destructive/10 text-destructive rounded-full px-2 py-0.5 text-xs mt-1">
+                    <Icon icon="heroicons-outline:clock" />
+                    {remainingDays} days left
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )
+      )}
+    </div>
+  );
+};
 
-        </div>
-    )
-}
-
-export default ProjectGrid
\ No newline at end of file
+export default ProjectGrid;
diff --git a/src/app/[locale]/(protected)/app/projects/layout.tsx b/src/app/[locale]/(protected)/app/projects/layout.tsx
index 57b9958c..ab249721 100644
--- a/src/app/[locale]/(protected)/app/projects/layout.tsx
+++ b/src/app/[locale]/(protected)/app/projects/layout.tsx
@@ -1,15 +1,13 @@
 import { Metadata } from "next";
+
 import ProjectWrapper from "./project-wrapper";
+
 export const metadata: Metadata = {
-  title: 'Projects',
-  description: 'Projects Page'
-}
+  title: "Projects",
+  description: "Projects Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <ProjectWrapper>
-      {children}
-    </ProjectWrapper>
-  );
+  return <ProjectWrapper>{children}</ProjectWrapper>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/app/projects/list/components/list-table.tsx b/src/app/[locale]/(protected)/app/projects/list/components/list-table.tsx
index bdc36e98..47014333 100644
--- a/src/app/[locale]/(protected)/app/projects/list/components/list-table.tsx
+++ b/src/app/[locale]/(protected)/app/projects/list/components/list-table.tsx
@@ -1,310 +1,290 @@
-"use client"
-import * as React from "react"
+"use client";
+
+import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import {
-    ColumnDef,
-    ColumnFiltersState,
-    SortingState,
-    VisibilityState,
-    flexRender,
-    getCoreRowModel,
-    getFilteredRowModel,
-    getPaginationRowModel,
-    getSortedRowModel,
-    useReactTable
-} from "@tanstack/react-table"
-import { defaultProjects, type Project } from "../../data";
-import { Button } from '@/components/ui/button';
-import { ChevronLeft, ChevronRight, Eye, MoreVertical, SquarePen, Trash2 } from 'lucide-react';
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
-} from "@/components/ui/table"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Progress } from "@/components/ui/progress";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Link } from '@/i18n/navigation';
-import EditProject from "../../edit-project";
-import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { Progress } from "@/components/ui/progress";
+import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { defaultProjects, type Project } from "../../data";
+import EditProject from "../../edit-project";
 
 const ListTable = ({ projects }: { projects: Project[] }) => {
-    const [sorting, setSorting] = React.useState<SortingState>([])
-    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-        []
-    )
-    const [columnVisibility, setColumnVisibility] =
-        React.useState<VisibilityState>({})
-    const [rowSelection, setRowSelection] = React.useState({})
-    const [editTaskOpen, setEditTaskOpen] = React.useState<boolean>(false);
-    const [deleteProject, setDeleteProject] = React.useState<boolean>(false)
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [editTaskOpen, setEditTaskOpen] = React.useState<boolean>(false);
+  const [deleteProject, setDeleteProject] = React.useState<boolean>(false);
 
-    const columns: ColumnDef<Project>[] = [
-        {
-            accessorKey: "title",
-            header: "Name",
-            cell: ({ row }) => {
-                return (
-                    <div className="flex items-center gap-3">
-                        <Avatar className="w-10 h-10 shadow-none border-none bg-transparent hover:bg-transparent">
-                            <AvatarImage src={row.original.projectLogo} />
-                            <AvatarFallback> DC</AvatarFallback>
-                        </Avatar>
-                        <div className="font-medium text-sm leading-4 whitespace-nowrap">
-                            {row.getValue("title")}
-                        </div>
-                    </div>
-                )
-            }
-        },
-        {
-            accessorKey: "startDate",
-            header: "Start Date",
-            cell: ({ row }) => {
-                return (
-                    <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
-                )
-            }
-        },
-        {
-            accessorKey: "endDate",
-            header: "End Date",
-            cell: ({ row }) => {
-                return (
-                    <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
-                )
-            }
-        },
-        {
-            accessorKey: "assignee",
-            header: "Assignee",
-            cell: ({ row }: { row: { getValue: (key: string) => { image: string }[] } }) => {
-                const assignees = row.getValue("assignee");
-                return (
-                    <div className="flex -space-x-1 rtl:space-x-reverse">
-                        <div className="flex -space-x-1 rtl:space-x-reverse">
-                            {assignees.map((item, index) => (
-                                <Avatar
-                                    key={`user-${index}`}
-                                    className="h-6 w-6 shadow-none border-none bg-transparent hover:bg-transparent"
-                                >
-                                    <AvatarImage src={item.image} />
-                                    <AvatarFallback>SC</AvatarFallback>
-                                </Avatar>
-                            ))}
-                        </div>
-                        <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
-                            +2
-                        </div>
-                    </div>
-                );
-            }
-        },
-        {
-            accessorKey: "progress",
-            header: "Status",
-            cell: ({ row }) => {
-                return (
-                    <div>
-                        <Progress value={row.getValue("progress")} color="primary" size="sm" />
-                        <div className=" text-xs text-default-500  font-medium mt-3 whitespace-nowrap">
-                            12/15 Task Completed
-                        </div>
-                    </div>
-                )
-            }
-        },
-        {
-            id: "actions",
-            accessorKey: "action",
-            header: "Action",
-            enableHiding: false,
-            cell: ({ row }) => {
-                return (
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <Button
-                                size="icon"
-                                className="flex-none ring-offset-transparent bg-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
-                            >
-                                <MoreVertical className="h-4 w-4 text-default-700" />
-                            </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent className="p-0 overflow-hidden" align="end" >
-                            <DropdownMenuItem
-                                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-                                asChild
-                            >
-                                <Link href={`/app/projects/${defaultProjects[0].id}`}>
-                                    <Eye className="w-3.5 h-3.5 me-1" />
-                                    View
-                                </Link>
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
-                                onClick={() => setEditTaskOpen(true)}
-                            >
-                                <SquarePen className="w-3.5 h-3.5 me-1" />
-                                Edit
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                                className="py-2  bg-destructive/10 text-destructive focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
-                                onClick={() => setDeleteProject(true)}
-                            >
-                                <Trash2 className="w-3.5 h-3.5  me-1" />
-                                Delete
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                )
-            }
-        }
-    ]
-    const table = useReactTable({
-        data: projects,
-        columns,
-        onSortingChange: setSorting,
-        onColumnFiltersChange: setColumnFilters,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onColumnVisibilityChange: setColumnVisibility,
-        onRowSelectionChange: setRowSelection,
-        state: {
-            sorting,
-            columnFilters,
-            columnVisibility,
-            rowSelection
-        }
-    })
+  const columns: ColumnDef<Project>[] = [
+    {
+      accessorKey: "title",
+      header: "Name",
+      cell: ({ row }) => {
+        return (
+          <div className="flex items-center gap-3">
+            <Avatar className="w-10 h-10 shadow-none border-none bg-transparent hover:bg-transparent">
+              <AvatarImage src={row.original.projectLogo} />
+              <AvatarFallback> DC</AvatarFallback>
+            </Avatar>
+            <div className="font-medium text-sm leading-4 whitespace-nowrap">
+              {row.getValue("title")}
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "startDate",
+      header: "Start Date",
+      cell: ({ row }) => {
+        return <span className="whitespace-nowrap">{row.getValue("startDate")}</span>;
+      },
+    },
+    {
+      accessorKey: "endDate",
+      header: "End Date",
+      cell: ({ row }) => {
+        return <span className="whitespace-nowrap">{row.getValue("endDate")}</span>;
+      },
+    },
+    {
+      accessorKey: "assignee",
+      header: "Assignee",
+      cell: ({ row }: { row: { getValue: (key: string) => { image: string }[] } }) => {
+        const assignees = row.getValue("assignee");
+        return (
+          <div className="flex -space-x-1 rtl:space-x-reverse">
+            <div className="flex -space-x-1 rtl:space-x-reverse">
+              {assignees.map((item, index) => (
+                <Avatar
+                  key={`user-${index}`}
+                  className="h-6 w-6 shadow-none border-none bg-transparent hover:bg-transparent"
+                >
+                  <AvatarImage src={item.image} />
+                  <AvatarFallback>SC</AvatarFallback>
+                </Avatar>
+              ))}
+            </div>
+            <div className="bg-card text-default-900  text-xs ring-2 ring-default-100  rounded-full h-6 w-6 flex flex-col justify-center items-center">
+              +2
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      accessorKey: "progress",
+      header: "Status",
+      cell: ({ row }) => {
+        return (
+          <div>
+            <Progress value={row.getValue("progress")} color="primary" size="sm" />
+            <div className=" text-xs text-default-500  font-medium mt-3 whitespace-nowrap">
+              12/15 Task Completed
+            </div>
+          </div>
+        );
+      },
+    },
+    {
+      id: "actions",
+      accessorKey: "action",
+      header: "Action",
+      enableHiding: false,
+      cell: ({ row }) => {
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="icon"
+                className="flex-none ring-offset-transparent bg-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent w-6"
+              >
+                <MoreVertical className="h-4 w-4 text-default-700" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="p-0 overflow-hidden" align="end">
+              <DropdownMenuItem
+                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
+                asChild
+              >
+                <Link href={`/app/projects/${defaultProjects[0].id}`}>
+                  <Eye className="w-3.5 h-3.5 me-1" />
+                  View
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="py-2 border-b border-default-200 text-default-600 focus:bg-default focus:text-default-foreground rounded-none cursor-pointer"
+                onClick={() => setEditTaskOpen(true)}
+              >
+                <SquarePen className="w-3.5 h-3.5 me-1" />
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className="py-2  bg-destructive/10 text-destructive focus:bg-destructive focus:text-destructive-foreground rounded-none cursor-pointer"
+                onClick={() => setDeleteProject(true)}
+              >
+                <Trash2 className="w-3.5 h-3.5  me-1" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+  const table = useReactTable({
+    data: projects,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
 
-    return (
-        <>
-            <EditProject
-                open={editTaskOpen}
-                setOpen={setEditTaskOpen}
-            />
-            <DeleteConfirmationDialog
-                open={deleteProject}
-                onClose={() => setDeleteProject(false)}
-            />
-            <Card>
-                <CardHeader>
-                    <CardTitle>Project List</CardTitle>
-                </CardHeader>
-                <CardContent className="p-0">
-                    <Table>
-                        <TableHeader className="px-3 bg-default-100">
-                            {table.getHeaderGroups().map((headerGroup) => (
-                                <TableRow key={headerGroup.id}>
-                                    {headerGroup.headers.map((header) => {
-                                        return (
-                                            <TableHead key={header.id}>
-                                                {header.isPlaceholder
-                                                    ? null
-                                                    : flexRender(
-                                                        header.column.columnDef.header,
-                                                        header.getContext()
-                                                    )}
-                                            </TableHead>
-                                        )
-                                    })}
-                                </TableRow>
-                            ))}
-                        </TableHeader>
-                        <TableBody>
-                            {table.getRowModel().rows?.length ? (
-                                table.getRowModel().rows.map((row) => (
-                                    <TableRow
-                                        key={row.id}
-                                        data-state={row.getIsSelected() && "selected"}
-                                        className="even:bg-default-100 px-6 h-20" >
-                                        {row.getVisibleCells().map((cell) => (
-                                            <TableCell key={cell.id}>
-                                                {flexRender(
-                                                    cell.column.columnDef.cell,
-                                                    cell.getContext()
-                                                )}
-                                            </TableCell>
-                                        ))}
-                                    </TableRow>
-                                ))
-                            ) : (
-                                <TableRow>
-                                    <TableCell
-                                        colSpan={columns.length}
-                                        className="h-24 text-center"
-                                    >
-                                        No results.
-                                    </TableCell>
-                                </TableRow>
-                            )}
-                        </TableBody>
-                    </Table>
-                    <div className="flex items-center justify-end py-4 px-10">
-
-                        <div className="flex-1 flex items-center gap-3">
-                            <div className=" flex gap-2 items-center">
-                                <div className="text-sm font-medium text-default-60">Go  </div>
-                                <Input
-                                    type="number"
-                                    className="w-16 px-2"
-                                    defaultValue={table.getState().pagination.pageIndex + 1}
-                                    onChange={(e) => {
-                                        const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
-                                        table.setPageIndex(pageNumber);
-                                    }}
-                                />
-                            </div>
-                            <div className="text-sm font-medium text-default-600">
-                                Page{" "}  {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
-                            </div>
-                        </div>
-                        <div className="flex items-center gap-2 flex-none">
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.previousPage()}
-                                disabled={!table.getCanPreviousPage()}
-                                className='w-8 h-8'
-                            >
-                                <ChevronLeft className='w-4 h-4' />
-                            </Button>
-                            {table.getPageOptions().map((page, pageIndex) => (
-                                <Button
-                                    key={`basic-data-table-${pageIndex}`}
-                                    onClick={() => table.setPageIndex(pageIndex)}
-                                    size="icon"
-                                    className={`w-8 h-8 ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
-                                >
-                                    {page + 1}
-                                </Button>
-
-                            ))}
-                            <Button
-                                variant="outline"
-                                size="icon"
-                                onClick={() => table.nextPage()}
-                                disabled={!table.getCanNextPage()}
-                                className='w-8 h-8'
-                            >
-                                <ChevronRight className='w-4 h-4' />
-                            </Button>
-                        </div>
-                    </div>
-                </CardContent>
-            </Card>
-        </>
-    )
-}
-export default ListTable;
\ No newline at end of file
+  return (
+    <>
+      <EditProject open={editTaskOpen} setOpen={setEditTaskOpen} />
+      <DeleteConfirmationDialog open={deleteProject} onClose={() => setDeleteProject(false)} />
+      <Card>
+        <CardHeader>
+          <CardTitle>Project List</CardTitle>
+        </CardHeader>
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader className="px-3 bg-default-100">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
+                    return (
+                      <TableHead key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(header.column.columnDef.header, header.getContext())}
+                      </TableHead>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                    className="even:bg-default-100 px-6 h-20"
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+          <div className="flex items-center justify-end py-4 px-10">
+            <div className="flex-1 flex items-center gap-3">
+              <div className=" flex gap-2 items-center">
+                <div className="text-sm font-medium text-default-60">Go </div>
+                <Input
+                  type="number"
+                  className="w-16 px-2"
+                  defaultValue={table.getState().pagination.pageIndex + 1}
+                  onChange={(e) => {
+                    const pageNumber = e.target.value ? Number(e.target.value) - 1 : 0;
+                    table.setPageIndex(pageNumber);
+                  }}
+                />
+              </div>
+              <div className="text-sm font-medium text-default-600">
+                Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+              </div>
+            </div>
+            <div className="flex items-center gap-2 flex-none">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+                className="w-8 h-8"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </Button>
+              {table.getPageOptions().map((page, pageIndex) => (
+                <Button
+                  key={`basic-data-table-${pageIndex}`}
+                  onClick={() => table.setPageIndex(pageIndex)}
+                  size="icon"
+                  className={`w-8 h-8 ${table.getState().pagination.pageIndex === pageIndex ? "bg-default" : "bg-default-300 text-default"}`}
+                >
+                  {page + 1}
+                </Button>
+              ))}
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+                className="w-8 h-8"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
+export default ListTable;
diff --git a/src/app/[locale]/(protected)/app/projects/list/page.tsx b/src/app/[locale]/(protected)/app/projects/list/page.tsx
index e9136af9..be419349 100644
--- a/src/app/[locale]/(protected)/app/projects/list/page.tsx
+++ b/src/app/[locale]/(protected)/app/projects/list/page.tsx
@@ -1,14 +1,15 @@
-import React from 'react'
-import ListTable from './components/list-table'
-import { getProjects } from '../data'
+import React from "react";
+
+import { getProjects } from "../data";
+import ListTable from "./components/list-table";
 
 const ProjectList = async () => {
-    const projects = await getProjects()
-    return (
-        <div>
-            <ListTable projects={projects} />
-        </div>
-    )
-}
+  const projects = await getProjects();
+  return (
+    <div>
+      <ListTable projects={projects} />
+    </div>
+  );
+};
 
-export default ProjectList
\ No newline at end of file
+export default ProjectList;
diff --git a/src/app/[locale]/(protected)/app/projects/loading.tsx b/src/app/[locale]/(protected)/app/projects/loading.tsx
index 2eb5295e..e452703f 100644
--- a/src/app/[locale]/(protected)/app/projects/loading.tsx
+++ b/src/app/[locale]/(protected)/app/projects/loading.tsx
@@ -1,9 +1,7 @@
-import React from 'react'
+import React from "react";
 
 const Loading = () => {
-    return (
-        <div>loading..</div>
-    )
-}
+  return <div>loading..</div>;
+};
 
-export default Loading
\ No newline at end of file
+export default Loading;
diff --git a/src/app/[locale]/(protected)/app/projects/page.tsx b/src/app/[locale]/(protected)/app/projects/page.tsx
index a0cf9d6e..b2746858 100644
--- a/src/app/[locale]/(protected)/app/projects/page.tsx
+++ b/src/app/[locale]/(protected)/app/projects/page.tsx
@@ -1,9 +1,8 @@
-
-import { redirect } from '@/i18n/navigation'
+import { redirect } from "@/i18n/navigation";
 
 const ProjectPage = () => {
-  redirect('/app/projects/grid')
-  return null
-}
+  redirect("/app/projects/grid");
+  return null;
+};
 
-export default ProjectPage
\ No newline at end of file
+export default ProjectPage;
diff --git a/src/app/[locale]/(protected)/app/projects/project-wrapper.tsx b/src/app/[locale]/(protected)/app/projects/project-wrapper.tsx
index 9cdd6040..265fc926 100644
--- a/src/app/[locale]/(protected)/app/projects/project-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/projects/project-wrapper.tsx
@@ -1,62 +1,60 @@
-"use client"
-import { Button } from "@/components/ui/button";
-import { Filter, List, Plus } from "lucide-react";
-import CreateProject from "./create-project";
+"use client";
+
 import { useState } from "react";
-import { cn } from "@/lib/utils/utils"
 import { Link, usePathname } from "@/i18n/navigation";
+import { Filter, List, Plus } from "lucide-react";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+
+import CreateProject from "./create-project";
 import { getProjectNav } from "./data";
 
 const ProjectWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [open, setOpen] = useState<boolean>(false);
-    const pathname = usePathname();
-    const menus = getProjectNav(pathname)
+  const [open, setOpen] = useState<boolean>(false);
+  const pathname = usePathname();
+  const menus = getProjectNav(pathname);
 
-    return (
-        <div>
-            <CreateProject
-                open={open}
-                setOpen={setOpen}
-            />
-            <div className="flex w-full flex-wrap items-center gap-4 mb-6">
-                <h4 className="flex-1 font-medium lg:text-2xl text-xl capitalize text-default-900">
-                    Project
-                </h4>
-                <div className="flex items-center gap-4 flex-wrap">
-                    {menus?.map(({ label, href, active }, index) => (
-                        <Button
-                            key={index}
-                            asChild
-                            className={cn("flex-none capitalize bg-card text-default-600 hover:bg-card hover:text-default-600  hover:ring-0 hover:ring-transparent", {
-                                "bg-default text-default-foreground hover:bg-default hover:text-default-foreground": active,
-                            })}
+  return (
+    <div>
+      <CreateProject open={open} setOpen={setOpen} />
+      <div className="flex w-full flex-wrap items-center gap-4 mb-6">
+        <h4 className="flex-1 font-medium lg:text-2xl text-xl capitalize text-default-900">
+          Project
+        </h4>
+        <div className="flex items-center gap-4 flex-wrap">
+          {menus?.map(({ label, href, active }, index) => (
+            <Button
+              key={index}
+              asChild
+              className={cn(
+                "flex-none capitalize bg-card text-default-600 hover:bg-card hover:text-default-600  hover:ring-0 hover:ring-transparent",
+                {
+                  "bg-default text-default-foreground hover:bg-default hover:text-default-foreground":
+                    active,
+                }
+              )}
+            >
+              <Link href={href}>
+                <List className="w-3.5 h-3.5 me-1" />
+                <span>{label}</span>
+              </Link>
+            </Button>
+          ))}
 
-                        >
-                            <Link href={href}>
-                                <List className="w-3.5 h-3.5 me-1" />
-                                <span>{label}</span>
-                            </Link>
-
-                        </Button>
-                    ))}
-
-
-                    <Button className="flex-none bg-card text-default-600 hover:ring-0 hover:ring-transparent hover:bg-default hover:text-default-foreground" >
-                        <Filter className="w-3.5 h-3.5 me-1" />
-                        <span>On Going</span>
-                    </Button>
-                    <Button
-                        className="flex-none"
-                        onClick={() => setOpen(true)}
-                    >
-                        <Plus className="w-4 h-4 me-1" />
-                        <span>Add Project</span>
-                    </Button>
-                </div>
-            </div>
-            {children}
+          <Button className="flex-none bg-card text-default-600 hover:ring-0 hover:ring-transparent hover:bg-default hover:text-default-foreground">
+            <Filter className="w-3.5 h-3.5 me-1" />
+            <span>On Going</span>
+          </Button>
+          <Button className="flex-none" onClick={() => setOpen(true)}>
+            <Plus className="w-4 h-4 me-1" />
+            <span>Add Project</span>
+          </Button>
         </div>
-    );
+      </div>
+      {children}
+    </div>
+  );
 };
 
-export default ProjectWrapper;
\ No newline at end of file
+export default ProjectWrapper;
diff --git a/src/app/[locale]/(protected)/app/todo/create-todo.tsx b/src/app/[locale]/(protected)/app/todo/create-todo.tsx
index def2f763..fd3c5d98 100644
--- a/src/app/[locale]/(protected)/app/todo/create-todo.tsx
+++ b/src/app/[locale]/(protected)/app/todo/create-todo.tsx
@@ -1,17 +1,24 @@
-"use client"
-import { Button } from "@/components/ui/button"
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
-import { CalendarIcon, Plus } from "lucide-react";
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -19,18 +26,18 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { toast } from "@/components/ui/use-toast"
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import Image from "next/image";
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { useState } from "react";
-import { useTranslations } from "next-intl";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/components/ui/use-toast";
 
 const assigneeOptions = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -39,7 +46,6 @@ const assigneeOptions = [
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
 
-
 const FormSchema = z.object({
   title: z.string().min(2, {
     message: "Title must be at least 2 characters.",
@@ -47,23 +53,23 @@ const FormSchema = z.object({
   assign: z.string().optional(),
   tag: z.string().optional(),
   dob: z.date().optional(),
-  description: z.string().optional()
-})
+  description: z.string().optional(),
+});
 
 const CreateTodo = () => {
-  const t = useTranslations("TodoApp")
+  const t = useTranslations("TodoApp");
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
       title: "",
     },
-  })
+  });
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
     toast({
       title: "Task created successfully.",
-    })
+    });
     setIsDialogOpen(false);
   }
 
@@ -107,22 +113,20 @@ const CreateTodo = () => {
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {
-                        assigneeOptions.map((user, index) =>
-                          <SelectItem
-                            key={`user-${index}`}
-                            value={user.value}>
-                            <div className="flex items-center gap-2">
-                              <Image
-                                src={user.image}
-                                alt={user.label}
-                                width={20}
-                                height={20}
-                                className="w-5 h-5 rounded-full" />
-                              <span className="text-sm text-default-900">{user.label}</span>
-                            </div>
-                          </SelectItem>)
-                      }
+                      {assigneeOptions.map((user, index) => (
+                        <SelectItem key={`user-${index}`} value={user.value}>
+                          <div className="flex items-center gap-2">
+                            <Image
+                              src={user.image}
+                              alt={user.label}
+                              width={20}
+                              height={20}
+                              className="w-5 h-5 rounded-full"
+                            />
+                            <span className="text-sm text-default-900">{user.label}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
                     </SelectContent>
                   </Select>
                   <FormMessage />
@@ -147,14 +151,12 @@ const CreateTodo = () => {
                             !field.value && "text-muted-foreground border-default-200 md:px-3"
                           )}
                         >
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                          <CalendarIcon className={cn("ms-auto h-4 w-4 text-default-300",
-                            { "text-default-900": field.value }
-                          )} />
+                          {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
+                          <CalendarIcon
+                            className={cn("ms-auto h-4 w-4 text-default-300", {
+                              "text-default-900": field.value,
+                            })}
+                          />
                         </Button>
                       </FormControl>
                     </PopoverTrigger>
@@ -163,9 +165,7 @@ const CreateTodo = () => {
                         mode="single"
                         selected={field.value}
                         onSelect={field.onChange}
-                        disabled={(date) =>
-                          date > new Date() || date < new Date("1900-01-01")
-                        }
+                        disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
                         initialFocus
                       />
                     </PopoverContent>
@@ -225,4 +225,4 @@ const CreateTodo = () => {
   );
 };
 
-export default CreateTodo;
\ No newline at end of file
+export default CreateTodo;
diff --git a/src/app/[locale]/(protected)/app/todo/data.ts b/src/app/[locale]/(protected)/app/todo/data.ts
index 763d39ec..492cd968 100644
--- a/src/app/[locale]/(protected)/app/todo/data.ts
+++ b/src/app/[locale]/(protected)/app/todo/data.ts
@@ -28,20 +28,19 @@ export const todos = [
       {
         value: "team",
         label: "team",
-      }
-    ]
+      },
+    ],
   },
   {
     id: faker.string.uuid(),
     image: [
       {
-        image:  "/images/avatar/avatar-2.png",
+        image: "/images/avatar/avatar-2.png",
         label: "Rakibul Islam",
         value: "rakibul",
-      }
+      },
     ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
+    title: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
     isDone: false,
     isfav: true,
     isTrash: false,
@@ -49,8 +48,8 @@ export const todos = [
       {
         value: "low",
         label: "low",
-      }
-    ]
+      },
+    ],
   },
   {
     id: faker.string.uuid(),
@@ -66,8 +65,7 @@ export const todos = [
         value: "rakibul",
       },
     ],
-    title:
-      "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
+    title: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.",
     isDone: true,
     isfav: true,
     isTrash: false,
@@ -79,14 +77,14 @@ export const todos = [
       {
         value: "low",
         label: "low",
-      }
-    ]
+      },
+    ],
   },
   {
-    id:faker.string.uuid(),
+    id: faker.string.uuid(),
     image: [
       {
-        image:  "/images/avatar/avatar-3.png",
+        image: "/images/avatar/avatar-3.png",
         label: "Mahedi Amin",
         value: "mahedi",
       },
@@ -99,7 +97,7 @@ export const todos = [
         image: "/images/avatar/avatar-4.png",
         label: "Rakibul Islam",
         value: "rakibul",
-      }
+      },
     ],
     title: "illo expedita consequatur quia in",
     isDone: false,
@@ -113,14 +111,14 @@ export const todos = [
       {
         value: "low",
         label: "low",
-      }
-    ]
+      },
+    ],
   },
   {
-    id:faker.string.uuid(),
+    id: faker.string.uuid(),
     image: [
       {
-        image:  "/images/avatar/avatar-5.png",
+        image: "/images/avatar/avatar-5.png",
         label: "Rakibul Islam",
         value: "rakibul",
       },
@@ -133,15 +131,9 @@ export const todos = [
       {
         value: "update",
         label: "update",
-      }
-    ]
-  }
-]
+      },
+    ],
+  },
+];
 
-
-
-
-
-
-
-export type Todo =  ( typeof todos)[number]
+export type Todo = (typeof todos)[number];
diff --git a/src/app/[locale]/(protected)/app/todo/edit-todo.tsx b/src/app/[locale]/(protected)/app/todo/edit-todo.tsx
index 86d9dd75..135984e5 100644
--- a/src/app/[locale]/(protected)/app/todo/edit-todo.tsx
+++ b/src/app/[locale]/(protected)/app/todo/edit-todo.tsx
@@ -1,15 +1,16 @@
-"use client"
-import { Button } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
+"use client";
+
+import Image from "next/image";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -17,16 +18,18 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { toast } from "@/components/ui/use-toast"
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import Image from "next/image";
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/components/ui/use-toast";
 
 const assigneeOptions = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
@@ -35,7 +38,6 @@ const assigneeOptions = [
   { value: "pritom", label: "Pritom Miha", image: "/images/avatar/av-4.svg" },
 ];
 
-
 const FormSchema = z.object({
   title: z.string().min(2, {
     message: "Title must be at least 2 characters.",
@@ -43,10 +45,16 @@ const FormSchema = z.object({
   assign: z.string().optional(),
   tag: z.string().optional(),
   dob: z.date().optional(),
-  description: z.string().optional()
-})
+  description: z.string().optional(),
+});
 
-const EditTodo = ({ open, setOpen }: { open: boolean; setOpen: React.Dispatch<React.SetStateAction<boolean>> }) => {
+const EditTodo = ({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
@@ -54,18 +62,18 @@ const EditTodo = ({ open, setOpen }: { open: boolean; setOpen: React.Dispatch<Re
       assign: "mahedi",
       tag: "high",
       dob: new Date(),
-      description: "This is description"
-    }
-  })
+      description: "This is description",
+    },
+  });
 
   function onSubmit(data: z.infer<typeof FormSchema>) {
     toast({
       title: "Task Update successfully.",
-    })
+    });
     setOpen(false);
   }
   return (
-    <Dialog open={open} onOpenChange={setOpen}      >
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle> Edit Task</DialogTitle>
@@ -98,22 +106,20 @@ const EditTodo = ({ open, setOpen }: { open: boolean; setOpen: React.Dispatch<Re
                       </SelectTrigger>
                     </FormControl>
                     <SelectContent>
-                      {
-                        assigneeOptions.map((user, index) =>
-                          <SelectItem
-                            key={`user-${index}`}
-                            value={user.value}>
-                            <div className="flex items-center gap-2">
-                              <Image
-                                src={user.image}
-                                alt={user.label}
-                                width={20}
-                                height={20}
-                                className="w-5 h-5 rounded-full" />
-                              <span className="text-sm text-default-900">{user.label}</span>
-                            </div>
-                          </SelectItem>)
-                      }
+                      {assigneeOptions.map((user, index) => (
+                        <SelectItem key={`user-${index}`} value={user.value}>
+                          <div className="flex items-center gap-2">
+                            <Image
+                              src={user.image}
+                              alt={user.label}
+                              width={20}
+                              height={20}
+                              className="w-5 h-5 rounded-full"
+                            />
+                            <span className="text-sm text-default-900">{user.label}</span>
+                          </div>
+                        </SelectItem>
+                      ))}
                     </SelectContent>
                   </Select>
                   <FormMessage />
@@ -138,14 +144,12 @@ const EditTodo = ({ open, setOpen }: { open: boolean; setOpen: React.Dispatch<Re
                             !field.value && "text-muted-foreground border-default-200 md:px-3"
                           )}
                         >
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                          <CalendarIcon className={cn("ms-auto h-4 w-4 text-default-300",
-                            { "text-default-900": field.value }
-                          )} />
+                          {field.value ? format(field.value, "PPP") : <span>Pick a date</span>}
+                          <CalendarIcon
+                            className={cn("ms-auto h-4 w-4 text-default-300", {
+                              "text-default-900": field.value,
+                            })}
+                          />
                         </Button>
                       </FormControl>
                     </PopoverTrigger>
@@ -154,9 +158,7 @@ const EditTodo = ({ open, setOpen }: { open: boolean; setOpen: React.Dispatch<Re
                         mode="single"
                         selected={field.value}
                         onSelect={field.onChange}
-                        disabled={(date) =>
-                          date > new Date() || date < new Date("1900-01-01")
-                        }
+                        disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
                         initialFocus
                       />
                     </PopoverContent>
@@ -215,4 +217,4 @@ const EditTodo = ({ open, setOpen }: { open: boolean; setOpen: React.Dispatch<Re
   );
 };
 
-export default EditTodo;
\ No newline at end of file
+export default EditTodo;
diff --git a/src/app/[locale]/(protected)/app/todo/layout.tsx b/src/app/[locale]/(protected)/app/todo/layout.tsx
index b8f2aa23..e42c2e50 100644
--- a/src/app/[locale]/(protected)/app/todo/layout.tsx
+++ b/src/app/[locale]/(protected)/app/todo/layout.tsx
@@ -1,16 +1,13 @@
 import { Metadata } from "next";
+
 import TodoWrapper from "./todo-wrapper";
 
 export const metadata: Metadata = {
   title: "Todo",
-  description: "Todo Application"
-}
+  description: "Todo Application",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <TodoWrapper>
-      {children}
-    </TodoWrapper>
-  );
+  return <TodoWrapper>{children}</TodoWrapper>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/app/todo/page.tsx b/src/app/[locale]/(protected)/app/todo/page.tsx
index cfae2230..67ca9160 100644
--- a/src/app/[locale]/(protected)/app/todo/page.tsx
+++ b/src/app/[locale]/(protected)/app/todo/page.tsx
@@ -1,75 +1,78 @@
+import { useTranslations } from "next-intl";
+
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import Nav from "@/components/nav";
+
 import CreateTodo from "./create-todo";
 import { todos } from "./data";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import TodoHeader from "./todo-header";
-import Todo from "./todo";
 import TodoSidebarWrapper from "./sidebar-wrapper";
-import Nav from "@/components/nav";
-import { useTranslations } from "next-intl";
+import Todo from "./todo";
+import TodoHeader from "./todo-header";
+
 const TodoPage = () => {
-const t = useTranslations("TodoApp");
+  const t = useTranslations("TodoApp");
   return (
     <div className="flex gap-5  h-full ">
-      <TodoSidebarWrapper >
+      <TodoSidebarWrapper>
         <Card className="h-full">
           <CardContent className="h-full p-0">
-            <ScrollArea className="h-[calc(100%-30px)]"  >
+            <ScrollArea className="h-[calc(100%-30px)]">
               <div className="mb-4 px-4 pt-5 m-1 sticky top-0">
                 <CreateTodo />
               </div>
-              <Nav links={[
-                {
-                  title: "My Task",
-                  icon: "uil:image-v",
-                  active: true,
-                },
-                {
-
-                  title: "Starred",
-                  icon: "heroicons:star",
-                  active: false,
-                },
-                {
-
-                  title: "Completed",
-                  icon: "heroicons:document-check",
-                  active: false,
-                },
-                {
-
-                  title: "Trash",
-                  icon: "heroicons:trash",
-                  active: false,
-                }
-              ]} />
+              <Nav
+                links={[
+                  {
+                    title: "My Task",
+                    icon: "uil:image-v",
+                    active: true,
+                  },
+                  {
+                    title: "Starred",
+                    icon: "heroicons:star",
+                    active: false,
+                  },
+                  {
+                    title: "Completed",
+                    icon: "heroicons:document-check",
+                    active: false,
+                  },
+                  {
+                    title: "Trash",
+                    icon: "heroicons:trash",
+                    active: false,
+                  },
+                ]}
+              />
               <div className="py-4 px-5 text-default-800  font-semibold text-xs uppercase">
                 {t("todos")}
               </div>
-              <Nav dotStyle links={[
-                {
-                  title: "Team",
-                  active: true,
-
-                },
-                {
-                  title: "low",
-                  active: false,
-                },
-                {
-                  title: "medium",
-                  active: false,
-                },
-                {
-                  title: "high",
-                  active: false,
-                },
-                {
-                  title: "update",
-                  active: false,
-                }
-
-              ]} />
+              <Nav
+                dotStyle
+                links={[
+                  {
+                    title: "Team",
+                    active: true,
+                  },
+                  {
+                    title: "low",
+                    active: false,
+                  },
+                  {
+                    title: "medium",
+                    active: false,
+                  },
+                  {
+                    title: "high",
+                    active: false,
+                  },
+                  {
+                    title: "update",
+                    active: false,
+                  },
+                ]}
+              />
             </ScrollArea>
           </CardContent>
         </Card>
@@ -81,13 +84,9 @@ const t = useTranslations("TodoApp");
           </CardHeader>
           <CardContent className="p-0 h-full">
             <div className="h-[calc(100%-60px)] overflow-y-auto no-scrollbar">
-              {
-                todos.map((todo, index) =>
-                  <Todo
-                    key={`todo-${index}`}
-                    todo={todo}
-                  />)
-              }
+              {todos.map((todo, index) => (
+                <Todo key={`todo-${index}`} todo={todo} />
+              ))}
             </div>
           </CardContent>
         </Card>
@@ -96,4 +95,4 @@ const t = useTranslations("TodoApp");
   );
 };
 
-export default TodoPage;
\ No newline at end of file
+export default TodoPage;
diff --git a/src/app/[locale]/(protected)/app/todo/sidebar-wrapper.tsx b/src/app/[locale]/(protected)/app/todo/sidebar-wrapper.tsx
index b9e030ee..13f3db67 100644
--- a/src/app/[locale]/(protected)/app/todo/sidebar-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/todo/sidebar-wrapper.tsx
@@ -1,24 +1,27 @@
-'use client'
-import { useMediaQuery } from '@/lib/hooks/use-media-query'
-import { useTodoConfig } from '@/lib/hooks/use-todo'
-import { cn } from '@/lib/utils'
-import React from 'react'
+"use client";
+
+import React from "react";
+
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useTodoConfig } from "@/lib/hooks/use-todo";
+import { cn } from "@/lib/utils/utils";
+
 const TodoSidebarWrapper = ({ children }: { children: React.ReactNode }) => {
-  const [todoConfig] = useTodoConfig()
-  const { isOpen } = todoConfig
+  const [todoConfig] = useTodoConfig();
+  const { isOpen } = todoConfig;
   const isTablet = useMediaQuery("(min-width: 1024px)");
   if (!isTablet) {
     return (
-      <div className={cn('absolute h-full  start-0  w-[240px] z-50 ', {
-        '-start-full': !isOpen
-      })}>
+      <div
+        className={cn("absolute h-full  start-0  w-[240px] z-50 ", {
+          "-start-full": !isOpen,
+        })}
+      >
         {children}
       </div>
-    )
+    );
   }
-  return (
-    <div className='flex-none  md:w-[270px] w-[200px]  '>{children}</div>
-  )
-}
+  return <div className="flex-none  md:w-[270px] w-[200px]  ">{children}</div>;
+};
 
-export default TodoSidebarWrapper
\ No newline at end of file
+export default TodoSidebarWrapper;
diff --git a/src/app/[locale]/(protected)/app/todo/todo-header.tsx b/src/app/[locale]/(protected)/app/todo/todo-header.tsx
index d524542a..4c79d48f 100644
--- a/src/app/[locale]/(protected)/app/todo/todo-header.tsx
+++ b/src/app/[locale]/(protected)/app/todo/todo-header.tsx
@@ -1,15 +1,16 @@
-import { Input } from "@/components/ui/input";
 import { MoreVertical, Search } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Button } from "@/components/ui/button";
+} from "@/components/ui/dropdown-menu";
 import { Icon } from "@/components/ui/icon";
-import ToggleTodoSidebar from "./toggle-todo-sidebar";
+import { Input } from "@/components/ui/input";
 
+import ToggleTodoSidebar from "./toggle-todo-sidebar";
 
 const TodoHeader = () => {
   const actions = [
@@ -24,17 +25,19 @@ const TodoHeader = () => {
     {
       name: "Sort Z-A ",
       icon: "heroicons-outline:sort-descending",
-    }
+    },
   ];
   return (
     <div className="flex gap-2">
       <div className="flex-1 flex items-center gap-1">
         <ToggleTodoSidebar />
         <Search className="w-4 h-4 text-default-400" />
-        <Input placeholder="Search Task" className="max-w-[180px] border-none font-medium dark:bg-transparent" />
+        <Input
+          placeholder="Search Task"
+          className="max-w-[180px] border-none font-medium dark:bg-transparent"
+        />
       </div>
       <div className="flex-none">
-
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button size="icon" className="w-8 h-8 rounded-full bg-default-100 group">
@@ -42,17 +45,17 @@ const TodoHeader = () => {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
-            {
-              actions.map((action, index) => (
-                <DropdownMenuItem
-                  key={`action-${index}`}
-                  className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
-                >
-                  <Icon icon={action.icon} className="group-hover:text-primary-foreground w-4 h-4" />
-                  <span className="text-default-700 group-hover:text-primary-foreground">{action.name}</span>
-                </DropdownMenuItem>
-              ))
-            }
+            {actions.map((action, index) => (
+              <DropdownMenuItem
+                key={`action-${index}`}
+                className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
+              >
+                <Icon icon={action.icon} className="group-hover:text-primary-foreground w-4 h-4" />
+                <span className="text-default-700 group-hover:text-primary-foreground">
+                  {action.name}
+                </span>
+              </DropdownMenuItem>
+            ))}
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
@@ -60,4 +63,4 @@ const TodoHeader = () => {
   );
 };
 
-export default TodoHeader;
\ No newline at end of file
+export default TodoHeader;
diff --git a/src/app/[locale]/(protected)/app/todo/todo-wrapper.tsx b/src/app/[locale]/(protected)/app/todo/todo-wrapper.tsx
index c6040b9a..f468162b 100644
--- a/src/app/[locale]/(protected)/app/todo/todo-wrapper.tsx
+++ b/src/app/[locale]/(protected)/app/todo/todo-wrapper.tsx
@@ -1,25 +1,25 @@
-'use client'
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import { useTodoConfig } from '@/lib/hooks/use-todo'
+"use client";
+
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useTodoConfig } from "@/lib/hooks/use-todo";
 
 const TodoWrapper = ({ children }: { children: React.ReactNode }) => {
-    const [todoConfig, setTodoConfig] = useTodoConfig();
-    const { isOpen } = todoConfig
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    return (
-        <div className='relative app-height'>
-            {!isTablet && isOpen && (
-                <div
-                    onClick={() => setTodoConfig({ ...todoConfig, isOpen: false })}
-                    className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
+  const [todoConfig, setTodoConfig] = useTodoConfig();
+  const { isOpen } = todoConfig;
+  const isTablet = useMediaQuery("(min-width: 1024px)");
+  return (
+    <div className="relative app-height">
+      {!isTablet && isOpen && (
+        <div
+          onClick={() => setTodoConfig({ ...todoConfig, isOpen: false })}
+          className="overlay bg-default-900 dark:bg-default-900 dark:bg-opacity-60 bg-opacity-60 backdrop-filter
          backdrop-blur-sm absolute w-full flex-1 inset-0 z-20 rounded-md"
+        ></div>
+      )}
 
-                ></div>
-            )}
+      {children}
+    </div>
+  );
+};
 
-            {children}
-        </div>
-    )
-}
-
-export default TodoWrapper
\ No newline at end of file
+export default TodoWrapper;
diff --git a/src/app/[locale]/(protected)/app/todo/todo.tsx b/src/app/[locale]/(protected)/app/todo/todo.tsx
index 0dc2b32f..6deda6b3 100644
--- a/src/app/[locale]/(protected)/app/todo/todo.tsx
+++ b/src/app/[locale]/(protected)/app/todo/todo.tsx
@@ -1,22 +1,20 @@
-"use client"
+"use client";
+
+import { useState } from "react";
+import { AvatarFallback } from "@radix-ui/react-avatar";
+import { SquarePen, Trash2 } from "lucide-react";
+
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@/components/ui/icon";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { AvatarFallback } from "@radix-ui/react-avatar";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils/utils"
-import EditTodo from "./edit-todo";
-import { Todo as TodoProps } from "./data";
-import { Button } from "@/components/ui/button";
-import { SquarePen, Trash2 } from "lucide-react";
-import { useState } from "react";
 import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+import { Todo as TodoProps } from "./data";
+import EditTodo from "./edit-todo";
 
 const Todo = ({ todo }: { todo: TodoProps }) => {
   const { image, title, isfav, category } = todo;
@@ -29,21 +27,15 @@ const Todo = ({ todo }: { todo: TodoProps }) => {
     high: "bg-primary/10 text-primary",
     medium: "bg-warning/10 text-warning",
     low: "bg-success/10 text-success",
-    update: "bg-info/10 text-info"
-  }
+    update: "bg-info/10 text-info",
+  };
   return (
     <>
-      <DeleteConfirmationDialog
-        open={confirmDelete}
-        onClose={() => setConfirmDelete(false)}
-      />
-      <EditTodo
-        open={openEdit}
-        setOpen={setOpenEdit}
-      />
+      <DeleteConfirmationDialog open={confirmDelete} onClose={() => setConfirmDelete(false)} />
+      <EditTodo open={openEdit} setOpen={setOpenEdit} />
       <div className="flex items-center gap-4 border-b border-defualt-200 dark:border-default-300 last:border-none px-6 py-4 transition-all duration-300 hover:-translate-y-1">
         <div>
-          <Checkbox className="mt-0.5 dark:bg-default-300"/>
+          <Checkbox className="mt-0.5 dark:bg-default-300" />
         </div>
         <div className="ms-1">
           {isfav ? (
@@ -52,38 +44,34 @@ const Todo = ({ todo }: { todo: TodoProps }) => {
               className="text-xl  cursor-pointer text-[#FFCE30]"
             />
           ) : (
-            <Icon
-              icon="heroicons:star"
-              className="text-xl cursor-pointer text-default-400"
-            />
+            <Icon icon="heroicons:star" className="text-xl cursor-pointer text-default-400" />
           )}
         </div>
         <p className="flex-1 overflow-hidden text-sm text-default-600 truncate">{title}</p>
 
         <div className="-space-x-1.5 rtl:space-x-reverse flex flex-nowrap">
-          {
-            image.map((item, index) =>
-              <TooltipProvider key={`avatar-${index}`} >
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Avatar className="h-7 w-7 border-none shadow-none">
-                      <AvatarImage src={item.image} />
-                      <AvatarFallback>SA</AvatarFallback>
-                    </Avatar>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{item.label}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            )
-          }
+          {image.map((item, index) => (
+            <TooltipProvider key={`avatar-${index}`}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Avatar className="h-7 w-7 border-none shadow-none">
+                    <AvatarImage src={item.image} />
+                    <AvatarFallback>SA</AvatarFallback>
+                  </Avatar>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{item.label}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          ))}
         </div>
         <div className="flex gap-1 items-center">
           {category.map((item, index) => (
             <Badge
               key={`category-${index}`}
-              className={cn("rounded-full px-3 py-1 font-medium", categoryClasses[item.value])}>
+              className={cn("rounded-full px-3 py-1 font-medium", categoryClasses[item.value])}
+            >
               {item.label}
             </Badge>
           ))}
@@ -107,4 +95,4 @@ const Todo = ({ todo }: { todo: TodoProps }) => {
   );
 };
 
-export default Todo;
\ No newline at end of file
+export default Todo;
diff --git a/src/app/[locale]/(protected)/app/todo/toggle-todo-sidebar.tsx b/src/app/[locale]/(protected)/app/todo/toggle-todo-sidebar.tsx
index 484e5116..2e0302f8 100644
--- a/src/app/[locale]/(protected)/app/todo/toggle-todo-sidebar.tsx
+++ b/src/app/[locale]/(protected)/app/todo/toggle-todo-sidebar.tsx
@@ -1,21 +1,26 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { useMediaQuery } from '@/lib/hooks/use-media-query'
-import { useTodoConfig } from '@/lib/hooks/use-todo'
-import { Menu } from 'lucide-react'
-import React from 'react'
+"use client";
+
+import React from "react";
+import { Menu } from "lucide-react";
+
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useTodoConfig } from "@/lib/hooks/use-todo";
+import { Button } from "@/components/ui/button";
 
 const ToggleTodoSidebar = () => {
-    const isTablet = useMediaQuery("(min-width: 1024px)");
-    const [todoConfig, setTodoConfig] = useTodoConfig()
-    if (isTablet) return null
+  const isTablet = useMediaQuery("(min-width: 1024px)");
+  const [todoConfig, setTodoConfig] = useTodoConfig();
+  if (isTablet) return null;
 
+  return (
+    <Button
+      size="icon"
+      color="secondary"
+      onClick={() => setTodoConfig({ ...todoConfig, isOpen: !todoConfig.isOpen })}
+    >
+      <Menu className=" h-5 w-5" />
+    </Button>
+  );
+};
 
-    return (
-        <Button size='icon' color='secondary' onClick={() => setTodoConfig({ ...todoConfig, isOpen: !todoConfig.isOpen })}>
-            <Menu className=' h-5 w-5' />
-        </Button>
-    )
-}
-
-export default ToggleTodoSidebar
\ No newline at end of file
+export default ToggleTodoSidebar;
diff --git a/src/app/[locale]/(protected)/blocks/basic-widget/layout.tsx b/src/app/[locale]/(protected)/blocks/basic-widget/layout.tsx
index 73d03819..85a4d040 100644
--- a/src/app/[locale]/(protected)/blocks/basic-widget/layout.tsx
+++ b/src/app/[locale]/(protected)/blocks/basic-widget/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Basic Widget',
-  description: 'Basic Widget'
-}
-const BasicWidget = ({children}: {children: React.ReactNode}) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  title: "Basic Widget",
+  description: "Basic Widget",
+};
+const BasicWidget = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
 };
 
-export default BasicWidget;
\ No newline at end of file
+export default BasicWidget;
diff --git a/src/app/[locale]/(protected)/blocks/basic-widget/page.tsx b/src/app/[locale]/(protected)/blocks/basic-widget/page.tsx
index 0767510c..6db442c5 100644
--- a/src/app/[locale]/(protected)/blocks/basic-widget/page.tsx
+++ b/src/app/[locale]/(protected)/blocks/basic-widget/page.tsx
@@ -1,19 +1,19 @@
-
-import { UpgradeBlock } from "@/components/features/blocks/upgrade-block";
-import { WelcomeBlock, BlockBadge } from "@/components/features/blocks/welcome-block";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Eye } from "lucide-react";
 import Image from "next/image";
+import { Eye } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { UpgradeBlock } from "@/components/features/blocks/upgrade-block";
+import { BlockBadge, WelcomeBlock } from "@/components/features/blocks/welcome-block";
 
 const WidgetPage = () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="space-y-5" >
+      <div className="space-y-5">
         <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5">
           {/* Block 1 */}
-          <WelcomeBlock >
+          <WelcomeBlock>
             <div className="max-w-[180px] relative z-10">
               <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
                 Upgrade your Dashcode
@@ -33,7 +33,7 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* Block 2 */}
-          <WelcomeBlock >
+          <WelcomeBlock>
             <div className="max-w-[180px] relative z-10">
               <div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
                 Upgrade your Dashcode
@@ -52,7 +52,7 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* Block 3 */}
-          <WelcomeBlock >
+          <WelcomeBlock>
             <div className="max-w-[180px] relative z-10">
               <div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
                 Upgrade your Dashcode
@@ -71,7 +71,7 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* Block 4 */}
-          <WelcomeBlock >
+          <WelcomeBlock>
             <div className="max-w-[180px] relative z-10">
               <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
                 <span className="block font-normal">Good evening,</span>
@@ -90,7 +90,7 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* Block 5 */}
-          <WelcomeBlock className="flex items-center" >
+          <WelcomeBlock className="flex items-center">
             <div className="flex-1 relative z-10">
               <div className="max-w-[180px]">
                 <div className="text-xl font-medium text-default-900 dark:text-default-100 mb-2">
@@ -120,7 +120,7 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* block 6 */}
-          <WelcomeBlock className="flex items-center" >
+          <WelcomeBlock className="flex items-center">
             <div className="flex-1 relative z-10">
               <div className="max-w-[180px]">
                 <div className="text-xl font-medium text-primary-foreground  mb-2">
@@ -151,7 +151,7 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* Block 7 */}
-          <WelcomeBlock className="bg-default" >
+          <WelcomeBlock className="bg-default">
             <div className="max-w-[180px] relative z-10">
               <h4 className="text-xl font-medium text-primary-foreground mb-2">
                 Upgrade your Dashcode
@@ -160,11 +160,12 @@ const WidgetPage = () => {
                 Pro plan for better results
               </p>
             </div>
-            <BlockBadge className="bg-destructive text-destructive-foreground dark:bg-default-100 dark:text-default-900">Now</BlockBadge>
-
+            <BlockBadge className="bg-destructive text-destructive-foreground dark:bg-default-100 dark:text-default-900">
+              Now
+            </BlockBadge>
           </WelcomeBlock>
           {/* Block 8 */}
-          <WelcomeBlock className="bg-primary" >
+          <WelcomeBlock className="bg-primary">
             <div className="max-w-[180px] relative z-10">
               <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
                 Upgrade your Dashcode
@@ -176,7 +177,7 @@ const WidgetPage = () => {
             <BlockBadge className="bg-success text-success-foreground">Now</BlockBadge>
           </WelcomeBlock>
           {/* Block 9 */}
-          <WelcomeBlock className="bg-gradient-to-r from-primary to-success" >
+          <WelcomeBlock className="bg-gradient-to-r from-primary to-success">
             <div className="max-w-[180px] relative z-10">
               <h4 className="text-xl font-medium text-primary-foreground dark:text-default-900 mb-2">
                 Upgrade your Dashcode
@@ -188,7 +189,7 @@ const WidgetPage = () => {
             <BlockBadge className="bg-warning text-warning-foreground">Now</BlockBadge>
           </WelcomeBlock>
           {/* Block 10 */}
-          <WelcomeBlock className="flex items-center py-7" >
+          <WelcomeBlock className="flex items-center py-7">
             <div className="flex-1 relative z-10">
               <div className="max-w-[180px]">
                 <h4 className="text-2xl font-medium text-primary-foreground dark:text-default-900 mb-2">
@@ -198,10 +199,7 @@ const WidgetPage = () => {
               </div>
             </div>
             <div className="flex-none relative z-10">
-              <Button
-                color="primary"
-                className="hover:ring-0 hover:ring-offset-0 "
-              >
+              <Button color="primary" className="hover:ring-0 hover:ring-offset-0 ">
                 <Eye className="w-4 h-4 text-primary-foreground me-2" />
                 View details
               </Button>
@@ -215,20 +213,19 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* Block 11 */}
-          <WelcomeBlock className="flex items-center py-7" >
+          <WelcomeBlock className="flex items-center py-7">
             <div className="flex-1 relative z-10">
               <div className="max-w-[180px]">
                 <h4 className="text-2xl font-medium mb-2">
-                  <span className="block text-sm text-default-800 dark:text-default-100">Current balance,</span>
+                  <span className="block text-sm text-default-800 dark:text-default-100">
+                    Current balance,
+                  </span>
                   <span className="block text-default-900 dark:text-default-100">$34,564</span>
                 </h4>
               </div>
             </div>
             <div className="flex-none relative z-10">
-              <Button
-                color="primary"
-                className="hover:ring-0 hover:ring-offset-0 "
-              >
+              <Button color="primary" className="hover:ring-0 hover:ring-offset-0 ">
                 <Eye className="w-4 h-4 text-primary-foreground me-2" />
                 View details
               </Button>
@@ -243,20 +240,19 @@ const WidgetPage = () => {
             />
           </WelcomeBlock>
           {/* Block 12 */}
-          <WelcomeBlock className="flex items-center py-7" >
+          <WelcomeBlock className="flex items-center py-7">
             <div className="flex-1 relative z-10">
               <div className="max-w-[180px]">
                 <h4 className="text-2xl font-medium  mb-2">
-                  <span className="block text-sm text-default-800 dark:text-default-100">Current balance,</span>
+                  <span className="block text-sm text-default-800 dark:text-default-100">
+                    Current balance,
+                  </span>
                   <span className="block text-default-900 dark:text-default-100">$34,564</span>
                 </h4>
               </div>
             </div>
             <div className="flex-none relative z-10">
-              <Button
-                color="primary"
-                className="hover:ring-0 hover:ring-offset-0 "
-              >
+              <Button color="primary" className="hover:ring-0 hover:ring-offset-0 ">
                 <Eye className="w-4 h-4 text-primary-foreground me-2" />
                 View details
               </Button>
@@ -275,7 +271,9 @@ const WidgetPage = () => {
         <div className="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
           <UpgradeBlock className="bg-default dark:bg-default-50">
             <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
+              <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                Unlimited Access
+              </div>
               <div className="text-xs font-normal text-default-foreground dark:text-default-800">
                 Upgrade your system to business plan
               </div>
@@ -310,7 +308,9 @@ const WidgetPage = () => {
           </UpgradeBlock>
           <UpgradeBlock className="bg-primary">
             <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
+              <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                Unlimited Access
+              </div>
               <div className="text-xs font-normal text-default-foreground dark:text-default-800">
                 Upgrade your system to business plan
               </div>
@@ -345,7 +345,9 @@ const WidgetPage = () => {
           </UpgradeBlock>
           <UpgradeBlock className="bg-success">
             <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
+              <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                Unlimited Access
+              </div>
               <div className="text-xs font-normal text-default-foreground dark:text-default-800">
                 Upgrade your system to business plan
               </div>
@@ -380,7 +382,9 @@ const WidgetPage = () => {
           </UpgradeBlock>
           <UpgradeBlock className="bg-info">
             <div className="max-w-[168px] relative z-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
+              <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                Unlimited Access
+              </div>
               <div className="text-xs font-normal text-default-foreground dark:text-default-800">
                 Upgrade your system to business plan
               </div>
@@ -413,13 +417,11 @@ const WidgetPage = () => {
               />
             </div>
           </UpgradeBlock>
-
         </div>
         {/* gift block */}
 
         <div className="grid xl:grid-cols-6 lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-5">
-          <UpgradeBlock
-            className="bg-default dark:bg-default-200 mt-14">
+          <UpgradeBlock className="bg-default dark:bg-default-200 mt-14">
             <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
               <Image
                 src="/images/svg/gift.svg"
@@ -430,51 +432,57 @@ const WidgetPage = () => {
               />
             </div>
             <div className="max-w-[160px] mx-auto mt-10">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
+              <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                Unlimited Access
+              </div>
               <div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
                 Upgrade your system to business plan
               </div>
             </div>
             <div className="mt-6">
-              <Button fullWidth size="md"
-                className="bg-primary-foreground dark:bg-white hover:ring-0  hover:ring-offset-0  ring-offset-transparent dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
+              <Button
+                fullWidth
+                size="md"
+                className="bg-primary-foreground dark:bg-white hover:ring-0  hover:ring-offset-0  ring-offset-transparent dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default"
+              >
                 Upgrade
               </Button>
             </div>
           </UpgradeBlock>
-          {
-            ["primary", "success", "info", "destructive", "warning"].map((item, index) => (
-              <UpgradeBlock
-                key={index}
-                className={`bg-${item} mt-14`}>
-                <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-                  <Image
-                    src="/images/svg/gift.svg"
-                    alt="image"
-                    height={72}
-                    width={72}
-                    className="h-16 w-16"
-                  />
+          {["primary", "success", "info", "destructive", "warning"].map((item, index) => (
+            <UpgradeBlock key={index} className={`bg-${item} mt-14`}>
+              <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
+                <Image
+                  src="/images/svg/gift.svg"
+                  alt="image"
+                  height={72}
+                  width={72}
+                  className="h-16 w-16"
+                />
+              </div>
+              <div className="max-w-[160px] mx-auto mt-10">
+                <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                  Unlimited Access
                 </div>
-                <div className="max-w-[160px] mx-auto mt-10">
-                  <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-                  <div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
-                    Upgrade your system to business plan
-                  </div>
+                <div className="text-xs font-normal text-default-foreground dark:text-default-900 mt-1">
+                  Upgrade your system to business plan
                 </div>
-                <div className="mt-6">
-                  <Button fullWidth size="md" className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
-                    Upgrade
-                  </Button>
-                </div>
-              </UpgradeBlock>
-            ))
-          }
+              </div>
+              <div className="mt-6">
+                <Button
+                  fullWidth
+                  size="md"
+                  className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default"
+                >
+                  Upgrade
+                </Button>
+              </div>
+            </UpgradeBlock>
+          ))}
         </div>
         {/* rabbit block */}
         <div className="grid grid-cols-6 gap-5">
-          <UpgradeBlock
-            className="bg-default dark:bg-default-200 mt-14">
+          <UpgradeBlock className="bg-default dark:bg-default-200 mt-14">
             <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
               <Image
                 src="/images/svg/rabit.svg"
@@ -485,48 +493,57 @@ const WidgetPage = () => {
               />
             </div>
             <div className="max-w-[160px] mx-auto mt-14">
-              <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
+              <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                Unlimited Access
+              </div>
               <div className="text-xs font-normal text-default-foreground mt-1 dark:text-default-900">
                 Upgrade your system to business plan
               </div>
             </div>
             <div className="mt-6">
-              <Button fullWidth size="md" className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
+              <Button
+                fullWidth
+                size="md"
+                className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default"
+              >
                 Upgrade
               </Button>
             </div>
           </UpgradeBlock>
-          {
-            ["primary", "success", "info", "destructive", "warning"].map((item, index) => (
-              <UpgradeBlock key={index} className={`bg-${item} mt-14`}>
-                <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
-                  <Image
-                    src="/images/svg/rabit.svg"
-                    alt="image"
-                    height={100}
-                    width={100}
-                    className="h-24 w-24"
-                  />
+          {["primary", "success", "info", "destructive", "warning"].map((item, index) => (
+            <UpgradeBlock key={index} className={`bg-${item} mt-14`}>
+              <div className="absolute start-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
+                <Image
+                  src="/images/svg/rabit.svg"
+                  alt="image"
+                  height={100}
+                  width={100}
+                  className="h-24 w-24"
+                />
+              </div>
+              <div className="max-w-[160px] mx-auto mt-14">
+                <div className="text-base font-medium text-default-foreground dark:text-default-900">
+                  Unlimited Access
                 </div>
-                <div className="max-w-[160px] mx-auto mt-14">
-                  <div className="text-base font-medium text-default-foreground dark:text-default-900">Unlimited Access</div>
-                  <div className="text-xs font-normal text-default-foreground  dark:text-default-900 mt-1">
-                    Upgrade your system to business plan
-                  </div>
+                <div className="text-xs font-normal text-default-foreground  dark:text-default-900 mt-1">
+                  Upgrade your system to business plan
                 </div>
-                <div className="mt-6">
-                  <Button fullWidth size="md" className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default">
-                    Upgrade
-                  </Button>
-                </div>
-              </UpgradeBlock>
-            ))
-          }
+              </div>
+              <div className="mt-6">
+                <Button
+                  fullWidth
+                  size="md"
+                  className="bg-primary-foreground hover:ring-0  hover:ring-offset-0 ring-offset-transparent dark:bg-white dark:text-default-100 hover:bg-primary-foreground hover:text-default hover:opacity-90 text-default"
+                >
+                  Upgrade
+                </Button>
+              </div>
+            </UpgradeBlock>
+          ))}
         </div>
-
       </div>
     </div>
   );
 };
 
-export default WidgetPage;
\ No newline at end of file
+export default WidgetPage;
diff --git a/src/app/[locale]/(protected)/blocks/layout.tsx b/src/app/[locale]/(protected)/blocks/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/blocks/layout.tsx
+++ b/src/app/[locale]/(protected)/blocks/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/blocks/statistic-widget/layout.tsx b/src/app/[locale]/(protected)/blocks/statistic-widget/layout.tsx
index 10abf4d7..0dd03f14 100644
--- a/src/app/[locale]/(protected)/blocks/statistic-widget/layout.tsx
+++ b/src/app/[locale]/(protected)/blocks/statistic-widget/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Statistic Widget',
-  description: 'Statistic Widget Description'
-}
-const StatisticWidget = ({children}: {children: React.ReactNode}) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  title: "Statistic Widget",
+  description: "Statistic Widget Description",
+};
+const StatisticWidget = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
 };
 
-export default StatisticWidget;
\ No newline at end of file
+export default StatisticWidget;
diff --git a/src/app/[locale]/(protected)/blocks/statistic-widget/page.tsx b/src/app/[locale]/(protected)/blocks/statistic-widget/page.tsx
index f5bb8f5d..cb54dde5 100644
--- a/src/app/[locale]/(protected)/blocks/statistic-widget/page.tsx
+++ b/src/app/[locale]/(protected)/blocks/statistic-widget/page.tsx
@@ -1,15 +1,15 @@
 import Image from "next/image";
+import { BarChart, Box, ShoppingCart, TrendingDown, TrendingUp } from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Card, CardContent } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import EarningBlock from "@/components/features/blocks/earning-block";
 import OrdersBlock from "@/components/features/blocks/orders-block";
 import ProgressBlock from "@/components/features/blocks/progress-block";
 import { StatisticsBlock } from "@/components/features/blocks/statistics-block";
 import { StatusBlock } from "@/components/features/blocks/status-block";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Icon } from "@/components/ui/icon";
-import { Box, TrendingDown, TrendingUp, ShoppingCart } from "lucide-react";
-import { Card, CardContent } from "@/components/ui/card";
-import { BarChart } from "lucide-react";
-import EarningBlock from "@/components/features/blocks/earning-block";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const StatisticPage = () => {
   return (
@@ -41,11 +41,7 @@ const StatisticPage = () => {
           />
         </div>
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-          <StatisticsBlock
-            title="Total Revenue"
-            total="3,564"
-            className="bg-info/10"
-          />
+          <StatisticsBlock title="Total Revenue" total="3,564" className="bg-info/10" />
           <StatisticsBlock
             title="Products sold"
             total="564"
@@ -128,9 +124,7 @@ const StatisticPage = () => {
                 </div>
                 <div className="flex-1 text-sm">
                   <span className="block mb-0.2">25.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
+                  <span className="block mb-1 text-default-600">From last week</span>
                 </div>
               </div>
             </CardContent>
@@ -154,9 +148,7 @@ const StatisticPage = () => {
                 </div>
                 <div className="flex-1 text-sm">
                   <span className="block mb-0.2">8.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
+                  <span className="block mb-1 text-default-600">From last week</span>
                 </div>
               </div>
             </CardContent>
@@ -180,9 +172,7 @@ const StatisticPage = () => {
                 </div>
                 <div className="flex-1 text-sm">
                   <span className="block mb-0.2 text-destructive">1.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
+                  <span className="block mb-1 text-default-600">From last week</span>
                 </div>
               </div>
             </CardContent>
@@ -206,9 +196,7 @@ const StatisticPage = () => {
                 </div>
                 <div className="flex-1 text-sm">
                   <span className="block mb-0.2 text-primary">1.67% </span>
-                  <span className="block mb-1 text-default-600">
-                    From last week
-                  </span>
+                  <span className="block mb-1 text-default-600">From last week</span>
                 </div>
               </div>
             </CardContent>
@@ -221,14 +209,12 @@ const StatisticPage = () => {
                 <BarChart className=" h-6 w-6 text-info" />
               </div>
               <div className="block text-sm text-default-600 font-medium  mb-1.5"> Total Task</div>
-              <div className="text-2xl text-default-900  font-medium">  64</div>
+              <div className="text-2xl text-default-900  font-medium"> 64</div>
             </CardContent>
           </Card>
           <Card className="bg-warning/20">
             <CardContent className=" p-4  text-center">
-              <div
-                className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-              >
+              <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
                 <Icon className="w-6 h-6 text-warning" icon="heroicons:chart-pie" />
               </div>
               <div className="block text-sm text-default-600 font-medium  mb-1.5">Completed</div>
@@ -237,9 +223,7 @@ const StatisticPage = () => {
           </Card>
           <Card className="bg-primary/20">
             <CardContent className=" p-4  text-center">
-              <div
-                className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-              >
+              <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
                 <Icon className="w-6 h-6 text-primary" icon="heroicons:clock" />
               </div>
               <div className="block text-sm text-default-600 font-medium  mb-1.5">Hours</div>
@@ -248,9 +232,7 @@ const StatisticPage = () => {
           </Card>
           <Card className="bg-success/20">
             <CardContent className="p-4 text-center">
-              <div
-                className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4"
-              >
+              <div className="mx-auto h-10 w-10  rounded-full flex items-center justify-center bg-white mb-4">
                 <Icon className="w-6 h-6 text-success" icon="heroicons:calculator" />
               </div>
               <div className="block text-sm text-default-600 font-medium  mb-1.5">Spendings</div>
@@ -260,9 +242,7 @@ const StatisticPage = () => {
         </div>
         {/* progress */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 ">
-          <ProgressBlock
-            title="Progress"
-          />
+          <ProgressBlock title="Progress" />
           <ProgressBlock
             title="Progress"
             colors={["#F1595C", "#F9E1E5"]}
@@ -273,26 +253,12 @@ const StatisticPage = () => {
             colors={["#50C793", "#E5F3E5"]}
             labels={["Success", "Failure"]}
           />
-          <ProgressBlock
-            title="Progress"
-            colors={["#FA916B", "#fcc8b5"]}
-          />
+          <ProgressBlock title="Progress" colors={["#FA916B", "#fcc8b5"]} />
         </div>
         <div className="grid grid-cols-6 gap-4">
-          <OrdersBlock
-            title="Orders"
-            total="123k"
-          />
-          <OrdersBlock
-            title="Orders"
-            total="123k"
-            chartColor="#f1595c"
-          />
-          <OrdersBlock
-            title="Orders"
-            total="123k"
-            chartColor="#50c893"
-          />
+          <OrdersBlock title="Orders" total="123k" />
+          <OrdersBlock title="Orders" total="123k" chartColor="#f1595c" />
+          <OrdersBlock title="Orders" total="123k" chartColor="#50c893" />
           <OrdersBlock
             title="Profit"
             total="123k"
@@ -316,25 +282,13 @@ const StatisticPage = () => {
           />
         </div>
         <div className="grid grid-cols-3 gap-4">
-          <EarningBlock
-            title="Earnings"
-            total="$12,335.00"
-            percentage="+08%"
-          />
-          <EarningBlock
-            title="Earnings"
-            total="$12,335.00"
-            percentage="+08%"
-          />
-          <EarningBlock
-            title="Earnings"
-            total="$12,335.00"
-            percentage="+08%"
-          />
+          <EarningBlock title="Earnings" total="$12,335.00" percentage="+08%" />
+          <EarningBlock title="Earnings" total="$12,335.00" percentage="+08%" />
+          <EarningBlock title="Earnings" total="$12,335.00" percentage="+08%" />
         </div>
       </div>
     </div>
   );
 };
 
-export default StatisticPage;
\ No newline at end of file
+export default StatisticPage;
diff --git a/src/app/[locale]/(protected)/changelog/layout.tsx b/src/app/[locale]/(protected)/changelog/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/changelog/layout.tsx
+++ b/src/app/[locale]/(protected)/changelog/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/changelog/page.tsx b/src/app/[locale]/(protected)/changelog/page.tsx
index 529fe671..cb661887 100644
--- a/src/app/[locale]/(protected)/changelog/page.tsx
+++ b/src/app/[locale]/(protected)/changelog/page.tsx
@@ -1,19 +1,21 @@
-import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useTranslations } from "next-intl";
+
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion"
-import { useTranslations } from "next-intl";
+} from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 interface item {
   version: string;
   date: string;
   changes: { name: string; tag?: string }[];
 }
 const ChangeLogPage = () => {
-  const t = useTranslations("Changelog")
+  const t = useTranslations("Changelog");
   const items: item[] = [
     {
       version: "Version 2.0.1",
@@ -30,8 +32,8 @@ const ChangeLogPage = () => {
         {
           name: "Other minor issues",
           tag: "fixed",
-        }
-      ]
+        },
+      ],
     },
     {
       version: "Version 2.0.0",
@@ -56,8 +58,8 @@ const ChangeLogPage = () => {
         {
           name: "Other minor issues",
           tag: "fixed",
-        }
-      ]
+        },
+      ],
     },
     {
       version: "Version 1.0.1 ",
@@ -74,8 +76,8 @@ const ChangeLogPage = () => {
         {
           name: "Other minor issues",
           tag: "fixed",
-        }
-      ]
+        },
+      ],
     },
     {
       version: "Version 1.0.0 ",
@@ -83,9 +85,9 @@ const ChangeLogPage = () => {
       changes: [
         {
           name: "Initial Release",
-        }
-      ]
-    }
+        },
+      ],
+    },
   ];
   return (
     <div className="grid grid-cols-12 gap-5">
@@ -95,51 +97,52 @@ const ChangeLogPage = () => {
             <CardTitle>{t("version")}</CardTitle>
           </CardHeader>
           <CardContent>
-            <Badge color="primary" className="dark:text-white">New</Badge>
+            <Badge color="primary" className="dark:text-white">
+              New
+            </Badge>
             <div className="mt-6">
               <Accordion type="single" collapsible className="w-full">
-                {
-                  items.map((item, index) => (
-                    <AccordionItem
-                      value={`value-${index + 1}`}
-                      key={`changelog-${index}`}
-                      className="border-default-100"
-                    >
-                      <AccordionTrigger>
-                        <div>
-                          {item.version}
-                          <span className="font-semibold text-xs text-default-400">
-                            - Published on {item.date}
-                          </span>
-                        </div>
-                      </AccordionTrigger>
-                      <AccordionContent>
-                        {item.changes.map((data, j) => (
-                          <div key={j}>
-                            <div className="flex gap-3 items-center mt-2 text-default-600 text-sm">
-                              <span className="h-2 w-2 bg-primary rounded-full"></span>
-                              <span>{data.name}</span>
-                              <span
-                                className={` px-2 rounded-full text-xs capitalize
-                                    ${data.tag === "added"
-                                    ? "bg-primary/10 text-primary"
-                                    : data.tag === "update"
-                                      ? "bg-yellow-100 text-yellow-500"
-                                      : data.tag === "fixed"
-                                        ? "bg-destructive/10 text-destructive"
-                                        : ""
-                                  }
+                {items.map((item, index) => (
+                  <AccordionItem
+                    value={`value-${index + 1}`}
+                    key={`changelog-${index}`}
+                    className="border-default-100"
+                  >
+                    <AccordionTrigger>
+                      <div>
+                        {item.version}
+                        <span className="font-semibold text-xs text-default-400">
+                          - Published on {item.date}
+                        </span>
+                      </div>
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      {item.changes.map((data, j) => (
+                        <div key={j}>
+                          <div className="flex gap-3 items-center mt-2 text-default-600 text-sm">
+                            <span className="h-2 w-2 bg-primary rounded-full"></span>
+                            <span>{data.name}</span>
+                            <span
+                              className={` px-2 rounded-full text-xs capitalize
+                                    ${
+                                      data.tag === "added"
+                                        ? "bg-primary/10 text-primary"
+                                        : data.tag === "update"
+                                          ? "bg-yellow-100 text-yellow-500"
+                                          : data.tag === "fixed"
+                                            ? "bg-destructive/10 text-destructive"
+                                            : ""
+                                    }
                                     `}
-                              >
-                                {data.tag}
-                              </span>
-                            </div>
+                            >
+                              {data.tag}
+                            </span>
                           </div>
-                        ))}
-                      </AccordionContent>
-                    </AccordionItem>
-                  ))
-                }
+                        </div>
+                      ))}
+                    </AccordionContent>
+                  </AccordionItem>
+                ))}
               </Accordion>
             </div>
           </CardContent>
@@ -148,14 +151,10 @@ const ChangeLogPage = () => {
       <div className="lg:col-span-4 col-span-12">
         <Card>
           <CardHeader>
-            <CardTitle>
-              {t("changelog")}
-            </CardTitle>
+            <CardTitle>{t("changelog")}</CardTitle>
           </CardHeader>
           <CardContent>
-            <h5 className="text-xs font-medium">
-              {t("versionHistory")}
-            </h5>
+            <h5 className="text-xs font-medium">{t("versionHistory")}</h5>
             <ul className="space-y-3 mt-6 divide-y  divide-default-100 dark:divide-default-300">
               {items.map((item, i) => (
                 <li
@@ -174,4 +173,4 @@ const ChangeLogPage = () => {
   );
 };
 
-export default ChangeLogPage;
\ No newline at end of file
+export default ChangeLogPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/basic-area.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/basic-area.tsx
index bae016f3..5851df50 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/basic-area.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/basic-area.tsx
@@ -1,17 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-import { colors } from "@/lib/colors";
 
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicArea = ({ height = 300 }) => {
   const [config] = useConfig();
@@ -52,10 +49,8 @@ const BasicArea = ({ height = 300 }) => {
         stops: [50, 100, 0],
       },
     },
-    yaxis: getYAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -63,15 +58,7 @@ const BasicArea = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default BasicArea;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-style-chart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-style-chart.tsx
index ab889731..c0c81faf 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-style-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-style-chart.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { getLabel, getGridConfig } from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GithubStyleChart = () => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "commits",
@@ -1766,29 +1768,21 @@ const GithubStyleChart = () => {
       events: {
         mounted: function (chart: any) {
           var commitsEl = document.querySelector(".cmeta span.commits");
-          var commits = chart.getSeriesTotalXRange(
-            chart.w.globals.minX,
-            chart.w.globals.maxX
-          );
+          var commits = chart.getSeriesTotalXRange(chart.w.globals.minX, chart.w.globals.maxX);
           if (commitsEl) {
             commitsEl.innerHTML = commits;
           }
         },
         updated: function (chart: any) {
           var commitsEl = document.querySelector(".cmeta span.commits");
-          var commits = chart.getSeriesTotalXRange(
-            chart.w.globals.minX,
-            chart.w.globals.maxX
-          );
+          var commits = chart.getSeriesTotalXRange(chart.w.globals.minX, chart.w.globals.maxX);
           if (commitsEl) {
             commitsEl.innerHTML = commits;
           }
         },
       },
     },
-    colors: [
-      colors.primary
-    ],
+    colors: [colors.primary],
     stroke: {
       width: 0,
       curve: "smooth",
@@ -1814,18 +1808,10 @@ const GithubStyleChart = () => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={120}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={120} width={"100%"} />;
 };
 
 export default GithubStyleChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-styles-charts1.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-styles-charts1.tsx
index 0a0937bc..8f299367 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-styles-charts1.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/github-styles-charts1.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { getLabel, getGridConfig } from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GithubStyleCharts1 = () => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "commits",
@@ -1774,9 +1776,7 @@ const GithubStyleCharts1 = () => {
         },
       },
     },
-    colors: [
-      colors.success,
-    ],
+    colors: [colors.success],
     stroke: {
       width: 0,
       curve: "smooth",
@@ -1801,18 +1801,10 @@ const GithubStyleCharts1 = () => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={120}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={120} width={"100%"} />;
 };
 
 export default GithubStyleCharts1;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/irregular-time-series.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/irregular-time-series.tsx
index 731180c2..efe3c125 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/irregular-time-series.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/irregular-time-series.tsx
@@ -1,15 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const IrregularTimeSeries = ({ height = 300 }) => {
   const [config] = useConfig();
@@ -42,11 +41,7 @@ const IrregularTimeSeries = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.success,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.success, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -54,11 +49,7 @@ const IrregularTimeSeries = ({ height = 300 }) => {
 
     fill: {
       type: "gradient",
-      colors: [
-        colors.primary,
-        colors.success,
-        colors.info,
-      ],
+      colors: [colors.primary, colors.success, colors.info],
       gradient: {
         shadeIntensity: 1,
         opacityFrom: 0.2,
@@ -66,12 +57,8 @@ const IrregularTimeSeries = ({ height = 300 }) => {
         stops: [20, 100, 100, 100],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -80,7 +67,7 @@ const IrregularTimeSeries = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -90,19 +77,11 @@ const IrregularTimeSeries = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default IrregularTimeSeries;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/layout.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/layout.tsx
index bc44809d..c13cc57e 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/layout.tsx
@@ -1,4 +1,3 @@
-
 export const metadata = {
   title: "Appex Area Chart",
 };
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/negative-areachart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/negative-areachart.tsx
index d0cdeedf..71534ba7 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/negative-areachart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/negative-areachart.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const NegativeAreaChart = ({ height = 320 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "north",
@@ -201,10 +199,7 @@ const NegativeAreaChart = ({ height = 320 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -212,10 +207,7 @@ const NegativeAreaChart = ({ height = 320 }) => {
 
     fill: {
       type: "gradient",
-      colors: [
-        colors.primary,
-        colors.info,
-      ],
+      colors: [colors.primary, colors.info],
       gradient: {
         shadeIntensity: 1,
         opacityFrom: 0.2,
@@ -223,12 +215,8 @@ const NegativeAreaChart = ({ height = 320 }) => {
         stops: [50, 100, 0],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -237,7 +225,7 @@ const NegativeAreaChart = ({ height = 320 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -247,19 +235,11 @@ const NegativeAreaChart = ({ height = 320 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default NegativeAreaChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/null-value-area.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/null-value-area.tsx
index c30c1454..54b407a2 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/null-value-area.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/null-value-area.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const NullValueAreaChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Network",
@@ -128,10 +126,7 @@ const NullValueAreaChart = ({ height = 300 }) => {
     stroke: {
       curve: "straight",
     },
-    colors: [
-      colors.primary,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -139,22 +134,17 @@ const NullValueAreaChart = ({ height = 300 }) => {
 
     fill: {
       type: "pattern",
-      colors: [
-        colors.primary,
-        colors.success,
-      ],
+      colors: [colors.primary, colors.success],
       pattern: {
         style: ["verticalLines", "horizontalLines"],
         width: 5,
         height: 6,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -169,15 +159,7 @@ const NullValueAreaChart = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default NullValueAreaChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/page.tsx
index 1b13c67a..40773b64 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/page.tsx
@@ -1,17 +1,17 @@
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicArea from "./basic-area";
-import SplineArea from "./spline-area";
-import IrregularTimeSeries from "./irregular-time-series";
-import StackedAreaChart from "./stacked-area";
-import NullValueAreaChart from "./null-value-area";
-import GithubStyleChart from "./github-style-chart";
-import { Link } from '@/i18n/navigation';
-import GithubStyleCharts1 from "./github-styles-charts1";
-import NegativeAreaChart from "./negative-areachart";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
 import avatar7 from "@/public/images/avatar/avatar-7.png";
 
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+import BasicArea from "./basic-area";
+import GithubStyleChart from "./github-style-chart";
+import GithubStyleCharts1 from "./github-styles-charts1";
+import IrregularTimeSeries from "./irregular-time-series";
+import NegativeAreaChart from "./negative-areachart";
+import NullValueAreaChart from "./null-value-area";
+import SplineArea from "./spline-area";
+import StackedAreaChart from "./stacked-area";
 
 const AreaChartPage = () => {
   return (
@@ -50,26 +50,15 @@ const AreaChartPage = () => {
           <GithubStyleChart />
           <div className="flex items-center space-x-2 rtl:space-x-reverse mt-2">
             <div className="w-12 h-12">
-              <Image
-                className="w-full h-full object-cover"
-                src={avatar7}
-                alt=""
-              />
+              <Image className="w-full h-full object-cover" src={avatar7} alt="" />
             </div>
             <div className="">
-              <Link
-                href="#"
-                className="text-base capitalize font-medium text-card-foreground"
-              >
+              <Link href="#" className="text-base capitalize font-medium text-card-foreground">
                 coder
               </Link>
               <div className="cmeta space-x-1 rtl:space-x-reverse">
-                <span className="text-base font-bold text-card-foreground commits">
-                  110
-                </span>
-                <span className="text-base text-card-foreground font-medium ">
-                  commits
-                </span>
+                <span className="text-base font-bold text-card-foreground commits">110</span>
+                <span className="text-base text-card-foreground font-medium ">commits</span>
               </div>
             </div>
           </div>
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/spline-area.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/spline-area.tsx
index e7514219..fe61e888 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/spline-area.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/spline-area.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const SplineArea = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "series1",
@@ -40,10 +38,7 @@ const SplineArea = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -51,10 +46,7 @@ const SplineArea = ({ height = 300 }) => {
 
     fill: {
       type: "gradient",
-      colors: [
-        colors.primary,
-        colors.success,
-      ],
+      colors: [colors.primary, colors.success],
       gradient: {
         shadeIntensity: 1,
         opacityFrom: 0.2,
@@ -62,12 +54,8 @@ const SplineArea = ({ height = 300 }) => {
         stops: [50, 100, 0],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -76,7 +64,7 @@ const SplineArea = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -86,19 +74,11 @@ const SplineArea = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default SplineArea;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/stacked-area.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/stacked-area.tsx
index 96a2a486..923b3ded 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/stacked-area.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-area/stacked-area.tsx
@@ -1,15 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface DataRange {
   min: number;
@@ -19,14 +18,12 @@ const StackedAreaChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   function generateDayWiseTimeSeries(baseval: number, count: number, yrange: DataRange) {
     var i = 0;
     var series: [number, number][] = [];
     while (i < count) {
       var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
       series.push([x, y]);
       baseval += 86400000;
@@ -38,36 +35,24 @@ const StackedAreaChart = ({ height = 300 }) => {
   const series = [
     {
       name: "South",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 60,
+      }),
     },
     {
       name: "North",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 40,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 40,
+      }),
     },
     {
       name: "Central",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 30,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 30,
+      }),
     },
   ];
   const options: any = {
@@ -83,11 +68,7 @@ const StackedAreaChart = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -95,11 +76,7 @@ const StackedAreaChart = ({ height = 300 }) => {
 
     fill: {
       type: "gradient",
-      colors: [
-        colors.primary,
-        colors.primary,
-        colors.info,
-      ],
+      colors: [colors.primary, colors.primary, colors.info],
       gradient: {
         shadeIntensity: 1,
         opacityFrom: 0.4,
@@ -107,9 +84,7 @@ const StackedAreaChart = ({ height = 300 }) => {
         stops: [50, 100, 0],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     xaxis: {
       type: "datetime",
@@ -119,7 +94,7 @@ const StackedAreaChart = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     padding: {
       top: 0,
@@ -129,7 +104,7 @@ const StackedAreaChart = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -139,19 +114,11 @@ const StackedAreaChart = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default StackedAreaChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bar-image-chart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bar-image-chart.tsx
index 0e3d18fd..47352f27 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bar-image-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bar-image-chart.tsx
@@ -1,22 +1,24 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BarImageChart = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "coins",
       data: [
-        2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12,
-        11, 12, 13, 14, 16, 14, 15, 17, 19, 21,
+        2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12, 11, 12, 13, 14, 16,
+        14, 15, 17, 19, 21,
       ],
     },
   ];
@@ -42,13 +44,9 @@ const BarImageChart = ({ height = 350 }) => {
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       shared: false,
       theme: mode === "dark" ? "dark" : "light",
@@ -66,9 +64,7 @@ const BarImageChart = ({ height = 350 }) => {
       type: "image",
       opacity: 0.87,
       image: {
-        src: [
-          "https://apexcharts.com/wp-content/uploads/2018/10/bar-chart-image-fill.png",
-        ],
+        src: ["https://apexcharts.com/wp-content/uploads/2018/10/bar-chart-image-fill.png"],
         width: 466,
         height: 406,
       },
@@ -80,11 +76,9 @@ const BarImageChart = ({ height = 350 }) => {
       },
       labels: {
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ]
-        }
-      }
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+        },
+      },
     },
     xaxis: {
       categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
@@ -96,16 +90,14 @@ const BarImageChart = ({ height = 350 }) => {
       },
       labels: {
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+        },
+      },
     },
     states: {
       hover: {
         filter: "none",
-      }
+      },
     },
     padding: {
       top: 0,
@@ -118,15 +110,7 @@ const BarImageChart = ({ height = 350 }) => {
       offsetY: 40,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default BarImageChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bars-with-marks.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bars-with-marks.tsx
index 3c7d3214..8555ddca 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bars-with-marks.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/bars-with-marks.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BarsWithMarkes = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Actual",
@@ -98,11 +96,11 @@ const BarsWithMarkes = ({ height = 350 }) => {
               strokeWidth: 5,
               strokeHeight: 10,
               strokeColor: "#775DD0",
-            }
-          ]
-        }
-      ]
-    }
+            },
+          ],
+        },
+      ],
+    },
   ];
 
   const options: any = {
@@ -118,8 +116,7 @@ const BarsWithMarkes = ({ height = 350 }) => {
     },
     dataLabels: {
       formatter: function (val: number, opt: any) {
-        const goals =
-          opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex].goals;
+        const goals = opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex].goals;
 
         if (goals && goals.length) {
           return `${val} / ${goals[0].value}`;
@@ -130,20 +127,14 @@ const BarsWithMarkes = ({ height = 350 }) => {
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.success,
-    ],
+    colors: [colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       axisBorder: {
         show: false,
@@ -153,9 +144,7 @@ const BarsWithMarkes = ({ height = 350 }) => {
       },
       labels: {
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
         },
       },
     },
@@ -171,7 +160,7 @@ const BarsWithMarkes = ({ height = 350 }) => {
       showForSingleSeries: true,
       customLegendItems: ["Actual", "Expected"],
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -182,22 +171,11 @@ const BarsWithMarkes = ({ height = 350 }) => {
         height: 10,
         radius: 10,
         offsetX: config.isRtl ? 5 : -5,
-        fillColors: [
-          colors.success,
-          colors.primary,
-        ]
-      }
+        fillColors: [colors.success, colors.primary],
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default BarsWithMarkes;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/basic-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/basic-bar.tsx
index bf736413..27460bf5 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/basic-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/basic-bar.tsx
@@ -1,26 +1,23 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
-    }
+    },
   ];
   const options: any = {
     chart: {
@@ -40,9 +37,7 @@ const BasicBar = ({ height = 350 }) => {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: [
         "South Korea",
@@ -56,35 +51,27 @@ const BasicBar = ({ height = 350 }) => {
         "China",
         "Germany",
       ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
       axisTicks: {
         show: false,
-      }
+      },
     },
     plotOptions: {
       bar: {
         horizontal: true,
-      }
+      },
     },
     padding: {
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
-    }
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default BasicBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/custom-label-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/custom-label-bar.tsx
index 83c625bf..48acdecc 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/custom-label-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/custom-label-bar.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const CustomLabelBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
@@ -32,14 +33,14 @@ const CustomLabelBar = ({ height = 350 }) => {
         horizontal: true,
         dataLabels: {
           position: "bottom",
-        }
-      }
+        },
+      },
     },
     dataLabels: {
       enabled: true,
       textAnchor: "start",
       style: {
-        colors: ["#fff"]
+        colors: ["#fff"],
       },
       formatter: function (val: number, opt: any) {
         return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val;
@@ -52,16 +53,9 @@ const CustomLabelBar = ({ height = 350 }) => {
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"]
-      ]
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -73,11 +67,9 @@ const CustomLabelBar = ({ height = 350 }) => {
       },
       labels: {
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+        },
+      },
     },
     xaxis: {
       categories: [
@@ -98,11 +90,11 @@ const CustomLabelBar = ({ height = 350 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -112,25 +104,17 @@ const CustomLabelBar = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
-    }
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default CustomLabelBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-bar.tsx
index 6e907bd4..705178ab 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-bar.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GroupedBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [44, 55, 41, 64, 22, 43],
@@ -45,29 +42,20 @@ const GroupedBar = ({ height = 350 }) => {
       style: {
         fontSize: "12px",
         fontWeight: 700,
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
+        colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
       },
     },
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: [2001, 2002, 2003, 2004, 2005, 2006],
       axisBorder: {
@@ -76,9 +64,7 @@ const GroupedBar = ({ height = 350 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(
-        mode === 'light' ? colors["default-600"] : colors["default-300"]
-      ),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     padding: {
       top: 0,
@@ -89,7 +75,7 @@ const GroupedBar = ({ height = 350 }) => {
 
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -99,19 +85,11 @@ const GroupedBar = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default GroupedBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-stack-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-stack-bar.tsx
index 3f311f2a..e0a0c818 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-stack-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/grouped-stack-bar.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GroupedStackBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Q1 Budget",
@@ -51,9 +52,7 @@ const GroupedStackBar = ({ height = 350 }) => {
             enabled: false,
             offsetX: 0,
             style: {
-              colors: [
-                mode === 'light' ? colors["default-600"] : colors["default-300"],
-              ],
+              colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
               fontSize: "13px",
               fontWeight: 800,
             },
@@ -66,9 +65,7 @@ const GroupedStackBar = ({ height = 350 }) => {
       offsetX: 0,
       style: {
         fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
+        colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
       },
       formatter: (val: number) => {
         return val / 1000 + "K";
@@ -77,23 +74,14 @@ const GroupedStackBar = ({ height = 350 }) => {
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ]
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: [
         "Online advertising",
@@ -113,11 +101,9 @@ const GroupedStackBar = ({ height = 350 }) => {
           return val + "K";
         },
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+        },
+      },
     },
     padding: {
       top: 0,
@@ -131,7 +117,7 @@ const GroupedStackBar = ({ height = 350 }) => {
       horizontalAlign: "left",
       offsetX: 40,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -141,19 +127,11 @@ const GroupedStackBar = ({ height = 350 }) => {
         width: 12,
         height: 12,
         radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default GroupedStackBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/negative-values-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/negative-values-bar.tsx
index f71438d4..01cc7977 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/negative-values-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/negative-values-bar.tsx
@@ -1,34 +1,31 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const NegativeValuesBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Males",
       data: [
-        0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2,
-        4.5, 3.9, 3.5, 3,
+        0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5, 3.9, 3.5, 3,
       ],
     },
     {
       name: "Females",
       data: [
-        -0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3,
-        -4.4, -4.1, -4, -4.1, -3.4, -3.1, -2.8,
+        -0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4, -4.1, -4,
+        -4.1, -3.4, -3.1, -2.8,
       ],
     },
   ];
@@ -42,36 +39,27 @@ const NegativeValuesBar = ({ height = 350 }) => {
     plotOptions: {
       bar: {
         horizontal: true,
-      }
+      },
     },
     dataLabels: {
       enabled: false,
       offsetX: 0,
       style: {
         fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
+        colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
       },
     },
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: [
         "85+",
@@ -104,9 +92,7 @@ const NegativeValuesBar = ({ height = 350 }) => {
           return Math.abs(Math.round(val)) + "%";
         },
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
         },
       },
     },
@@ -122,7 +108,7 @@ const NegativeValuesBar = ({ height = 350 }) => {
       horizontalAlign: "end",
       offsetX: 40,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -132,19 +118,11 @@ const NegativeValuesBar = ({ height = 350 }) => {
         width: 12,
         height: 12,
         radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default NegativeValuesBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/page.tsx
index 07208c1a..929fe41a 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/page.tsx
@@ -1,112 +1,113 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+import BarImageChart from "./bar-image-chart";
+import BarsWithMarkes from "./bars-with-marks";
 import BasicBar from "./basic-bar";
+import CustomLabelBar from "./custom-label-bar";
 import GroupedBar from "./grouped-bar";
-import StackedBar from "./stacked-bar";
-import StackedBar2 from "./stacked-bar2";
 import GroupedStackBar from "./grouped-stack-bar";
 import NegativeValuesBar from "./negative-values-bar";
-import BarsWithMarkes from "./bars-with-marks";
-import ReversedBar from "./reversed-bar";
-import CustomLabelBar from "./custom-label-bar";
 import PatternedBar from "./patterned-bar";
-import BarImageChart from "./bar-image-chart";
+import ReversedBar from "./reversed-bar";
+import StackedBar from "./stacked-bar";
+import StackedBar2 from "./stacked-bar2";
 
 const BarChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Bar Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grouped Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bar Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bars 100</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar2 />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grouped Stacked Bars</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupedStackBar />
-                </CardContent>
-            </Card>
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Bar Charts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Grouped Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GroupedBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stacked Bar Charts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stacked Bars 100</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedBar2 />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Grouped Stacked Bars</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GroupedStackBar />
+        </CardContent>
+      </Card>
 
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar with Negative Values</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <NegativeValuesBar />
-                </CardContent>
-            </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar with Negative Values</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <NegativeValuesBar />
+        </CardContent>
+      </Card>
 
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar with Markers</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarsWithMarkes />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Reversed Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ReversedBar />
-                </CardContent>
-            </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar with Markers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BarsWithMarkes />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Reversed Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ReversedBar />
+        </CardContent>
+      </Card>
 
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom DataLabels Bar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomLabelBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Patterned Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PatternedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar with Images</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarImageChart />
-                </CardContent>
-            </Card> 
-        </div>
-    );
+      <Card>
+        <CardHeader>
+          <CardTitle>Custom DataLabels Bar</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomLabelBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Patterned Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PatternedBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar with Images</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BarImageChart />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
-export default BarChartPage;
\ No newline at end of file
+export default BarChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/patterned-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/patterned-bar.tsx
index e7c86216..3882d67a 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/patterned-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/patterned-bar.tsx
@@ -1,20 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const PatternedBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Marine Sprite",
@@ -44,7 +43,7 @@ const PatternedBar = ({ height = 350 }) => {
         enabled: true,
         blur: 1,
         opacity: 0.25,
-      }
+      },
     },
     plotOptions: {
       bar: {
@@ -58,15 +57,9 @@ const PatternedBar = ({ height = 350 }) => {
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.info, colors.success],
     tooltip: {
       shared: false,
       theme: mode === "dark" ? "dark" : "light",
@@ -88,7 +81,7 @@ const PatternedBar = ({ height = 350 }) => {
       axisTicks: {
         show: true,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     xaxis: {
       categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
@@ -98,7 +91,7 @@ const PatternedBar = ({ height = 350 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     states: {
       hover: {
@@ -115,7 +108,7 @@ const PatternedBar = ({ height = 350 }) => {
       position: "right",
       offsetY: 40,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -125,19 +118,11 @@ const PatternedBar = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default PatternedBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/reversed-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/reversed-bar.tsx
index 45750bcf..9f695d33 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/reversed-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/reversed-bar.tsx
@@ -1,34 +1,35 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ReversedBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [400, 430, 448, 470, 540, 580, 690],
-    }
+    },
   ];
 
   const options: any = {
     chart: {
       toolbar: {
-        show: false
+        show: false,
       },
     },
     plotOptions: {
       bar: {
         horizontal: true,
-      }
+      },
     },
     dataLabels: {
       enabled: true,
@@ -36,9 +37,7 @@ const ReversedBar = ({ height = 350 }) => {
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"]
-      ]
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
     colors: [colors.info],
     tooltip: {
@@ -50,29 +49,21 @@ const ReversedBar = ({ height = 350 }) => {
       axisTicks: {
         show: true,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     xaxis: {
-      categories: [
-        "June",
-        "July",
-        "August",
-        "September",
-        "October",
-        "November",
-        "December",
-      ],
+      categories: ["June", "July", "August", "September", "October", "November", "December"],
       axisBorder: {
-        show: false
+        show: false,
       },
       axisTicks: {
-        show: false
+        show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
     },
     padding: {
@@ -82,15 +73,7 @@ const ReversedBar = ({ height = 350 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default ReversedBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar.tsx
index 595dfee7..a7558158 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar.tsx
@@ -1,11 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const StackedBar = ({ height = 350 }) => {
   const [config] = useConfig();
@@ -46,40 +49,29 @@ const StackedBar = ({ height = 350 }) => {
         dataLabels: {
           total: {
             enabled: false,
-          }
-        }
-      }
+          },
+        },
+      },
     },
     dataLabels: {
       enabled: true,
       offsetX: 0,
       style: {
         fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        ]
-      }
+        colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+      },
     },
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: [2001, 2002, 2003, 2004, 2005, 2006],
       axisBorder: {
@@ -93,11 +85,9 @@ const StackedBar = ({ height = 350 }) => {
           return val + "K";
         },
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+        },
+      },
     },
     padding: {
       top: 0,
@@ -111,7 +101,7 @@ const StackedBar = ({ height = 350 }) => {
       horizontalAlign: "left",
       offsetX: 40,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -121,19 +111,11 @@ const StackedBar = ({ height = 350 }) => {
         width: 12,
         height: 12,
         radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default StackedBar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar2.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar2.tsx
index 2d488d15..4b358668 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar2.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bar/stacked-bar2.tsx
@@ -1,18 +1,19 @@
 "use client";
 
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const StackedBar2 = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Marine Sprite",
@@ -51,46 +52,33 @@ const StackedBar2 = ({ height = 350 }) => {
             enabled: false,
             offsetX: 0,
             style: {
-              colors: [
-                mode === 'light' ? colors["default-600"] : colors["default-300"],
-              ],
+              colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
               fontSize: "13px",
               fontWeight: 800,
-            }
-          }
-        }
-      }
+            },
+          },
+        },
+      },
     },
     dataLabels: {
       enabled: true,
       offsetX: 0,
       style: {
         fontSize: "12px",
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
+        colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
       },
     },
     stroke: {
       show: false,
       width: 1,
-      colors: [
-        mode === 'light' ? colors["default-600"] : colors["default-300"],
-      ],
+      colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: [2001, 2002, 2003, 2004, 2005, 2006],
       axisBorder: {
@@ -104,9 +92,7 @@ const StackedBar2 = ({ height = 350 }) => {
           return val + "K";
         },
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
         },
       },
     },
@@ -122,7 +108,7 @@ const StackedBar2 = ({ height = 350 }) => {
       horizontalAlign: "left",
       offsetX: 40,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -132,19 +118,11 @@ const StackedBar2 = ({ height = 350 }) => {
         width: 12,
         height: 12,
         radius: 2,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default StackedBar2;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/basic-boxplot.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/basic-boxplot.tsx
index 4400ab66..3450847f 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/basic-boxplot.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/basic-boxplot.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicBoxPlot = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       type: "boxPlot",
@@ -66,10 +63,7 @@ const BasicBoxPlot = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -83,12 +77,10 @@ const BasicBoxPlot = ({ height = 300 }) => {
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -103,15 +95,7 @@ const BasicBoxPlot = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="boxPlot"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="boxPlot" height={height} width={"100%"} />;
 };
 
 export default BasicBoxPlot;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/horizontal-boxplot.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/horizontal-boxplot.tsx
index 2d1cf6f8..7a0e7d99 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/horizontal-boxplot.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/horizontal-boxplot.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const HorizontalBoxPlot = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       data: [
@@ -74,21 +72,16 @@ const HorizontalBoxPlot = ({ height = 300 }) => {
         },
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     stroke: {
-      colors: [
-        colors.primary,
-      ],
+      colors: [colors.primary],
     },
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
     xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -96,20 +89,10 @@ const HorizontalBoxPlot = ({ height = 300 }) => {
         show: false,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
   };
 
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="boxPlot"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="boxPlot" height={height} width={"100%"} />;
 };
 
 export default HorizontalBoxPlot;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/page.tsx
index 5c577847..93886867 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/page.tsx
@@ -1,44 +1,46 @@
 import React from "react";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicBoxPlot from "./basic-boxplot";
 import HorizontalBoxPlot from "./horizontal-boxplot";
 import ScatterBoxplot from "./scatter-boxplot";
 
 const CandleStickChartPage = () => {
-    return (
-        <div className="grid grid-cols-2 gap-6">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Box Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicBoxPlot />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Boxplot with Scatter Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <ScatterBoxplot />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 ">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Horizontal BoxPlot</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <HorizontalBoxPlot />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
+  return (
+    <div className="grid grid-cols-2 gap-6">
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Basic Box Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <BasicBoxPlot />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Boxplot with Scatter Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ScatterBoxplot />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 ">
+        <Card>
+          <CardHeader>
+            <CardTitle>Horizontal BoxPlot</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <HorizontalBoxPlot />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export default CandleStickChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/scatter-boxplot.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/scatter-boxplot.tsx
index daadfbf1..f996504c 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/scatter-boxplot.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-boxplot/scatter-boxplot.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ScatterBoxplot = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "box",
@@ -88,10 +86,7 @@ const ScatterBoxplot = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -105,12 +100,10 @@ const ScatterBoxplot = ({ height = 300 }) => {
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -120,7 +113,7 @@ const ScatterBoxplot = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -130,8 +123,8 @@ const ScatterBoxplot = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -140,15 +133,7 @@ const ScatterBoxplot = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="boxPlot"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="boxPlot" height={height} width={"100%"} />;
 };
 
 export default ScatterBoxplot;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/basic-bubble.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/basic-bubble.tsx
index 7ba7c69e..32cc1b53 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/basic-bubble.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/basic-bubble.tsx
@@ -1,15 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicBubble = ({ height = 350 }) => {
   const [config] = useConfig();
@@ -24,8 +23,7 @@ const BasicBubble = ({ height = 350 }) => {
     var series: [number, number, number][] = [];
     while (i < count) {
       var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
       var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
 
       series.push([x, y, z]);
@@ -81,12 +79,7 @@ const BasicBubble = ({ height = 350 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.info, colors.primary, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -104,14 +97,12 @@ const BasicBubble = ({ height = 350 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -121,25 +112,17 @@ const BasicBubble = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
-    }
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bubble"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bubble" height={height} width={"100%"} />;
 };
 
 export default BasicBubble;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/bubble-3d.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/bubble-3d.tsx
index c1728d4c..80344c7d 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/bubble-3d.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/bubble-3d.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const Bubble3D = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   interface DataRange {
     min: number;
     max: number;
@@ -25,8 +23,7 @@ const Bubble3D = ({ height = 350 }) => {
     var series: [number, number, number][] = [];
     while (i < count) {
       var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
       var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
 
       series.push([x, y, z]);
@@ -82,12 +79,7 @@ const Bubble3D = ({ height = 350 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.info, colors.primary, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -114,14 +106,12 @@ const Bubble3D = ({ height = 350 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -131,19 +121,11 @@ const Bubble3D = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bubble"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bubble" height={height} width={"100%"} />;
 };
 
 export default Bubble3D;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/page.tsx
index 2081a6da..c84b5297 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-bubble/page.tsx
@@ -1,28 +1,29 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicBubble from "./basic-bubble";
 import Bubble3D from "./bubble-3d";
 
 const BarChartPage = () => {
-    return (
-        <div className="space-y-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicBubble />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>3D Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <Bubble3D />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Simple Bubble Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicBubble />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>3D Bubble Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Bubble3D />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
-export default BarChartPage;
\ No newline at end of file
+export default BarChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/basic-candle.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/basic-candle.tsx
index 3684c51e..946e2360 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/basic-candle.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/basic-candle.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicCandle = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       data: [
@@ -276,21 +274,16 @@ const BasicCandle = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -306,13 +299,7 @@ const BasicCandle = ({ height = 300 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="candlestick"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="candlestick" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/candle-stick-line.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/candle-stick-line.tsx
index babec052..a2a0627c 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/candle-stick-line.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/candle-stick-line.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const CandleStickWithLine = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "line",
@@ -300,21 +298,16 @@ const CandleStickWithLine = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -333,13 +326,7 @@ const CandleStickWithLine = ({ height = 300 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="candlestick"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="candlestick" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/category-xaxis.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/category-xaxis.tsx
index 1b4f3562..6bb74d09 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/category-xaxis.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/category-xaxis.tsx
@@ -1,22 +1,20 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
 import dayjs from "dayjs";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { useTheme } from "next-themes";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const CategoryXAxis = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "candle",
@@ -293,10 +291,7 @@ const CategoryXAxis = ({ height = 300 }) => {
         },
       ],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -308,7 +303,7 @@ const CategoryXAxis = ({ height = 300 }) => {
           return dayjs(val).format("MMM DD HH:mm");
         },
         style: {
-          colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          colors: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       axisBorder: {
@@ -318,9 +313,7 @@ const CategoryXAxis = ({ height = 300 }) => {
         show: false,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -329,13 +322,7 @@ const CategoryXAxis = ({ height = 300 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="candlestick"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="candlestick" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/layout.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/layout.tsx
index ae38f77a..23fff7d7 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/layout.tsx
@@ -6,4 +6,4 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/page.tsx
index eaf83709..d8466c64 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-candlestick/page.tsx
@@ -1,43 +1,44 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicCandle from "./basic-candle";
-import CategoryXAxis from "./category-xaxis";
 import CandleStickWithLine from "./candle-stick-line";
+import CategoryXAxis from "./category-xaxis";
 
 const CandleStickChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2 gap-6">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Candlestick Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicCandle />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Category X-Axis</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CategoryXAxis />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 ">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Candlestick with Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CandleStickWithLine />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2 gap-6">
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Basic Candlestick Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <BasicCandle />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Category X-Axis</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CategoryXAxis />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 ">
+        <Card>
+          <CardHeader>
+            <CardTitle>Candlestick with Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CandleStickWithLine />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export default CandleStickChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/basic-column.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/basic-column.tsx
index 0ee1b01f..192fb61b 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/basic-column.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/basic-column.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicColumn = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Net Profit",
@@ -45,19 +42,13 @@ const BasicColumn = ({ height = 300 }) => {
       curve: "smooth",
       width: 2,
     },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     plotOptions: {
       bar: {
         horizontal: false,
@@ -66,18 +57,8 @@ const BasicColumn = ({ height = 300 }) => {
       },
     },
     xaxis: {
-      categories: [
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -93,7 +74,7 @@ const BasicColumn = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -103,19 +84,11 @@ const BasicColumn = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default BasicColumn;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-label.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-label.tsx
index 8dba5e6c..5b4a9ba4 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-label.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-label.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getXAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ColumnWithLabel = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Inflation",
@@ -39,28 +36,20 @@ const ColumnWithLabel = ({ height = 300 }) => {
       style: {
         fontSize: "12px",
         fontWeight: 700,
-        colors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
+        colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
       },
     },
     stroke: {
       curve: "smooth",
       width: 2,
     },
-    colors: [
-      colors.success,
-    ],
+    colors: [colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     plotOptions: {
       bar: {
         columnWidth: "45%",
@@ -70,15 +59,7 @@ const ColumnWithLabel = ({ height = 300 }) => {
       },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default ColumnWithLabel;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-marker.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-marker.tsx
index bf7990f5..349d79b7 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-marker.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-marker.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ColumnMarker = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Actual",
@@ -151,17 +149,8 @@ const ColumnMarker = ({ height = 300 }) => {
     grid: getGridConfig(),
 
     xaxis: {
-      categories: [
-        "2016",
-        "2017",
-        "2018",
-        "2019",
-        "2020",
-        "2021",
-        "2022",
-        "2023",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023"],
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -175,19 +164,9 @@ const ColumnMarker = ({ height = 300 }) => {
         left: 0,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default ColumnMarker;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-negative-values.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-negative-values.tsx
index e4478618..af41b78d 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-negative-values.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-negative-values.tsx
@@ -1,29 +1,26 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ColumnNegativeValues = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Cash Flow",
       data: [
-        1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34,
-        3.88, 13.07, 5.8, 2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4,
-        -47.2, -43.3, -18.6, -48.6, -41.1, -39.6, -37.6, -29.4, -21.4, -2.4,
+        1.45, 5.42, 5.9, -0.42, -12.6, -18.1, -18.2, -14.16, -11.1, -6.09, 0.34, 3.88, 13.07, 5.8,
+        2, 7.37, 8.1, 13.57, 15.75, 17.1, 19.8, -27.03, -54.4, -47.2, -43.3, -18.6, -48.6, -41.1,
+        -39.6, -37.6, -29.4, -21.4, -2.4,
       ],
     },
   ];
@@ -41,11 +38,7 @@ const ColumnNegativeValues = ({ height = 300 }) => {
       curve: "smooth",
       width: 2,
     },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -107,7 +100,7 @@ const ColumnNegativeValues = ({ height = 300 }) => {
         "2013-08-01",
         "2013-09-01",
       ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -115,20 +108,10 @@ const ColumnNegativeValues = ({ height = 300 }) => {
         show: false,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    )
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
   };
 
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default ColumnNegativeValues;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-rotate-labels.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-rotate-labels.tsx
index c12bc900..a95db982 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-rotate-labels.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/column-rotate-labels.tsx
@@ -1,27 +1,24 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ColumnRotateLabels = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Servings",
       data: [44, 55, 41, 67, 76, 43, 60, 50, 70],
-    }
+    },
   ];
 
   const options: any = {
@@ -36,7 +33,7 @@ const ColumnRotateLabels = ({ height = 300 }) => {
           x: "Mangoes",
           seriesIndex: 0,
           label: {
-            borderColor: 'transparent',
+            borderColor: "transparent",
             offsetY: 0,
             style: {
               color: "#fff",
@@ -53,17 +50,13 @@ const ColumnRotateLabels = ({ height = 300 }) => {
     stroke: {
       width: 2,
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     plotOptions: {
       bar: {
         borderRadius: 5,
@@ -82,24 +75,16 @@ const ColumnRotateLabels = ({ height = 300 }) => {
         "Watermelons",
         "Cherries",
       ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
       axisTicks: {
         show: false,
-      }
-    }
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default ColumnRotateLabels;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/distributed-chart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/distributed-chart.tsx
index 232b19fe..e47a8c72 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/distributed-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/distributed-chart.tsx
@@ -1,26 +1,23 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getXAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const DistributedChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [21, 22, 10, 28, 16, 21, 13, 30],
-    }
+    },
   ];
 
   const options: any = {
@@ -36,18 +33,12 @@ const DistributedChart = ({ height = 300 }) => {
       curve: "smooth",
       width: 2,
     },
-    colors: [
-      colors.primary,
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     plotOptions: {
       bar: {
         columnWidth: "45%",
@@ -65,7 +56,7 @@ const DistributedChart = ({ height = 300 }) => {
         ["David", "Wilson"],
         ["Lily", "Roberts"],
       ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -81,7 +72,7 @@ const DistributedChart = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -91,19 +82,11 @@ const DistributedChart = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default DistributedChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/dumbbell.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/dumbbell.tsx
index 2e16ea41..8de2404d 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/dumbbell.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/dumbbell.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const DumbbellChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [
@@ -69,12 +66,7 @@ const DumbbellChart = ({ height = 300 }) => {
       bar: {
         isDumbbell: true,
         columnWidth: 3,
-        dumbbellColors: [
-          [
-            colors.primary,
-            colors.success,
-          ],
-        ],
+        dumbbellColors: [[colors.primary, colors.success]],
       },
     },
     colors: [colors.info],
@@ -87,16 +79,14 @@ const DumbbellChart = ({ height = 300 }) => {
       type: "gradient",
       gradient: {
         type: "vertical",
-        gradientToColors: [
-          mode === 'light' ? colors["default-600"] : colors["default-300"],
-        ],
+        gradientToColors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
         inverseColors: true,
         stops: [0, 100],
       },
     },
     xaxis: {
       categories: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -110,19 +100,9 @@ const DumbbellChart = ({ height = 300 }) => {
         left: 0,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="rangeBar" height={height} width={"100%"} />;
 };
 
 export default DumbbellChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-label-column.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-label-column.tsx
index 36f0a422..171d40a4 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-label-column.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-label-column.tsx
@@ -1,22 +1,20 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 import dayjs from "dayjs";
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GroupLabelColumn = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "sales",
@@ -78,9 +76,7 @@ const GroupLabelColumn = ({ height = 300 }) => {
     },
     grid: getGridConfig(),
 
-    yaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     plotOptions: {
       bar: {
@@ -95,18 +91,14 @@ const GroupLabelColumn = ({ height = 300 }) => {
           return "Q" + Math.ceil(dayjs(val).month() / 3);
         },
         style: {
-          colors: Array(8).fill(
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ),
+          colors: Array(8).fill(mode === "light" ? colors["default-600"] : colors["default-300"]),
         },
       },
       group: {
         style: {
           fontSize: "10px",
           fontWeight: 700,
-          colors: Array(2).fill(
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ),
+          colors: Array(2).fill(mode === "light" ? colors["default-600"] : colors["default-300"]),
         },
         groups: [
           { title: "2019", cols: 4 },
@@ -115,15 +107,7 @@ const GroupLabelColumn = ({ height = 300 }) => {
       },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default GroupLabelColumn;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-stacked.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-stacked.tsx
index fea06a36..dcbf6bd9 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-stacked.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/group-stacked.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GroupStacked = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Q1 Budget",
@@ -52,12 +53,7 @@ const GroupStacked = ({ height = 300 }) => {
       curve: "smooth",
       width: 2,
     },
-    colors: [
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.primary,
-    ],
+    colors: [colors.info, colors.success, colors.primary, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -69,9 +65,7 @@ const GroupStacked = ({ height = 300 }) => {
           return val / 1000 + "K";
         },
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ],
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
         },
       },
     },
@@ -90,7 +84,7 @@ const GroupStacked = ({ height = 300 }) => {
         "Meetings",
         "Public relations",
       ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -106,7 +100,7 @@ const GroupStacked = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -116,19 +110,11 @@ const GroupStacked = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default GroupStacked;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/page.tsx
index d4dad362..0d547797 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/page.tsx
@@ -1,111 +1,111 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicColumn from "./basic-column";
 import ColumnWithLabel from "./column-label";
+import ColumnMarker from "./column-marker";
+import ColumnNegativeValues from "./column-negative-values";
+import ColumnRotateLabels from "./column-rotate-labels";
+import DistributedChart from "./distributed-chart";
+import DumbbellChart from "./dumbbell";
+import GroupLabelColumn from "./group-label-column";
+import GroupStacked from "./group-stacked";
 import StackedColumn from "./stacked-column";
 import StackedColumn2 from "./stacked-column2";
-import GroupStacked from "./group-stacked";
-import DumbbellChart from "./dumbbell";
-import ColumnMarker from "./column-marker";
-import GroupLabelColumn from "./group-label-column";
-import ColumnRotateLabels from "./column-rotate-labels";
-import ColumnNegativeValues from "./column-negative-values";
-import DistributedChart from "./distributed-chart";
 
 const ColumnChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Column Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicColumn />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Data Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnWithLabel />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Columns</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedColumn />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Column 100</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedColumn2 />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grouped Stacked Columns</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupStacked />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Dumbbell Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DumbbellChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Markers</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnMarker />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Group Label</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupLabelColumn />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Rotated Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnRotateLabels />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Column with Nagetive Values</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColumnNegativeValues />
-                </CardContent>
-            </Card>
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6 ">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Column Charts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicColumn />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Column with Data Labels</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ColumnWithLabel />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stacked Columns</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedColumn />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stacked Column 100</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedColumn2 />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Grouped Stacked Columns</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GroupStacked />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Dumbbell Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DumbbellChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Column with Markers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ColumnMarker />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Column with Group Label</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GroupLabelColumn />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Column with Rotated Labels</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ColumnRotateLabels />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Column with Nagetive Values</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ColumnNegativeValues />
+        </CardContent>
+      </Card>
 
-            <Card>
-                <CardHeader>
-                    <CardTitle>Distributed Columns Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DistributedChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
+      <Card>
+        <CardHeader>
+          <CardTitle>Distributed Columns Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DistributedChart />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ColumnChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column.tsx
index 08b9e45b..d3b166ec 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const StackedColumn = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "PRODUCT A",
@@ -50,20 +47,13 @@ const StackedColumn = ({ height = 300 }) => {
       curve: "smooth",
       width: 2,
     },
-    colors: [
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.primary,
-    ],
+    colors: [colors.info, colors.success, colors.primary, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     plotOptions: {
       bar: {
         columnWidth: "45%",
@@ -75,7 +65,7 @@ const StackedColumn = ({ height = 300 }) => {
     },
     xaxis: {
       categories: ["Feb", "Mar", "Apr", "May"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -91,7 +81,7 @@ const StackedColumn = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -101,19 +91,11 @@ const StackedColumn = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default StackedColumn;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column2.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column2.tsx
index 92697745..ce393a7d 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column2.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-column/stacked-column2.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const StackedColumn2 = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "PRODUCT A",
@@ -47,18 +44,12 @@ const StackedColumn2 = ({ height = 300 }) => {
       curve: "smooth",
       width: 2,
     },
-    colors: [
-      colors.info,
-      colors.primary,
-      colors.primary,
-    ],
+    colors: [colors.info, colors.primary, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     plotOptions: {
       bar: {
         columnWidth: "45%",
@@ -69,15 +60,8 @@ const StackedColumn2 = ({ height = 300 }) => {
       },
     },
     xaxis: {
-      categories: [
-        "2011 Q1",
-        "2012 Q2",
-        "2013 Q3",
-        "2014 Q4",
-        "2015 Q5",
-        "2016 Q6",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      categories: ["2011 Q1", "2012 Q2", "2013 Q3", "2014 Q4", "2015 Q5", "2016 Q6"],
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -93,7 +77,7 @@ const StackedColumn2 = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -103,19 +87,11 @@ const StackedColumn2 = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default StackedColumn2;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/layout.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/layout.tsx
index df6c0872..894a7085 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/layout.tsx
@@ -7,4 +7,3 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 };
 
 export default Layout;
-
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-area.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-area.tsx
index db111bcc..a3c420bb 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-area.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-area.tsx
@@ -1,11 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const LineArea = ({ height = 300 }) => {
   const [config] = useConfig();
@@ -27,8 +30,8 @@ const LineArea = ({ height = 300 }) => {
   const options: any = {
     chart: {
       toolbar: {
-        show: false
-      }
+        show: false,
+      },
     },
     stroke: {
       curve: "smooth",
@@ -36,7 +39,7 @@ const LineArea = ({ height = 300 }) => {
     },
     dataLabels: {
       enabled: true,
-      enabledOnSeries: [1]
+      enabledOnSeries: [1],
     },
     labels: [
       "01 Jan 2001",
@@ -52,10 +55,7 @@ const LineArea = ({ height = 300 }) => {
       "11 Jan 2001",
       "12 Jan 2001",
     ],
-    colors: [
-      colors.info,
-      colors.primary,
-    ],
+    colors: [colors.info, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -69,42 +69,38 @@ const LineArea = ({ height = 300 }) => {
     },
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
       axisTicks: {
         show: false,
-      }
+      },
     },
     yaxis: [
       {
         title: {
           text: "Website Blog",
           style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
         },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
+        labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       },
       {
         opposite: true,
         title: {
           text: "Social Media",
           style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-          }
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
+          },
         },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
-      }
+        labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
+      },
     ],
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -114,19 +110,11 @@ const LineArea = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default LineArea;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column-area.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column-area.tsx
index 03fd154e..0ca26537 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column-area.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column-area.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const LineColumnArea = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "TEAM A",
@@ -34,8 +35,8 @@ const LineColumnArea = ({ height = 300 }) => {
   const options: any = {
     chart: {
       toolbar: {
-        show: false
-      }
+        show: false,
+      },
     },
     stroke: {
       width: [0, 2, 5],
@@ -43,7 +44,7 @@ const LineColumnArea = ({ height = 300 }) => {
     },
     plotOptions: {
       bar: {
-        columnWidth: "50%"
+        columnWidth: "50%",
       },
     },
     fill: {
@@ -55,7 +56,7 @@ const LineColumnArea = ({ height = 300 }) => {
         opacityFrom: 0.85,
         opacityTo: 0.55,
         stops: [0, 100, 100, 100],
-      }
+      },
     },
     labels: [
       "01/01/2003",
@@ -75,29 +76,25 @@ const LineColumnArea = ({ height = 300 }) => {
     },
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
       axisTicks: {
         show: false,
-      }
+      },
     },
     yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       title: {
         text: "Points",
         style: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       min: 0,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-    ],
+    colors: [colors.primary, colors.info, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
       shared: true,
@@ -115,7 +112,7 @@ const LineColumnArea = ({ height = 300 }) => {
 
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -125,19 +122,11 @@ const LineColumnArea = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default LineColumnArea;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column.tsx
index bc328fa4..51972210 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/line-column.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const LineColumn = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Website Blog",
@@ -53,10 +54,7 @@ const LineColumn = ({ height = 350 }) => {
       "11 Jan 2001",
       "12 Jan 2001",
     ],
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -66,14 +64,14 @@ const LineColumn = ({ height = 350 }) => {
         horizontal: false,
         columnWidth: "45%",
         endingShape: "rounded",
-      }
+      },
     },
 
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
-        show: false
+        show: false,
       },
       axisTicks: {
         show: false,
@@ -84,29 +82,25 @@ const LineColumn = ({ height = 350 }) => {
         title: {
           text: "Website Blog",
           style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
         },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
+        labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       },
       {
         opposite: true,
         title: {
           text: "Social Media",
           style: {
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
         },
-        labels: getLabel(
-          mode === 'light' ? colors["default-600"] : colors["default-300"]
-        )
-      }
+        labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
+      },
     ],
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -116,19 +110,11 @@ const LineColumn = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default LineColumn;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/multiple-yaxis.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/multiple-yaxis.tsx
index ba3ef453..1f187abc 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/multiple-yaxis.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/multiple-yaxis.tsx
@@ -1,44 +1,45 @@
 "use client";
-import React, { useState } from 'react';
+
+import React, { useState } from "react";
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MultipleYAxis = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const [options, setOptions] = useState<any>({
     chart: {
       toolbar: {
         show: false,
       },
-      type: 'line',
-      stacked: false
+      type: "line",
+      stacked: false,
     },
     dataLabels: {
-      enabled: false
+      enabled: false,
     },
     stroke: {
-      width: [1, 1, 4]
+      width: [1, 1, 4],
     },
     title: {
-      text: 'XYZ - Stock Analysis (2009 - 2016)',
-      align: 'center',
+      text: "XYZ - Stock Analysis (2009 - 2016)",
+      align: "center",
       offsetX: 0,
       style: {
         color: colors.primary,
-      }
+      },
     },
     xaxis: {
       categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -49,7 +50,7 @@ const MultipleYAxis = ({ height = 350 }) => {
     yaxis: [
       {
         min: 0,
-        seriesName: 'Income',
+        seriesName: "Income",
         axisTicks: {
           show: true,
         },
@@ -60,59 +61,59 @@ const MultipleYAxis = ({ height = 350 }) => {
         labels: {
           style: {
             colors: colors.primary,
-          }
+          },
         },
         title: {
           text: "Income (thousand crores)",
           style: {
             color: colors.success,
-          }
+          },
         },
       },
       {
         min: 0,
-        seriesName: 'Cashflow',
+        seriesName: "Cashflow",
         opposite: true,
         axisTicks: {
           show: true,
         },
         axisBorder: {
           show: true,
-          color: colors.success
+          color: colors.success,
         },
         labels: {
           style: {
             colors: colors.success,
-          }
+          },
         },
         title: {
           text: "Operating Cashflow (thousand crores)",
           style: {
             color: colors.success,
-          }
-        }
+          },
+        },
       },
       {
-        seriesName: 'Revenue',
+        seriesName: "Revenue",
         opposite: true,
         axisTicks: {
           show: true,
         },
         axisBorder: {
           show: true,
-          color: colors.warning
+          color: colors.warning,
         },
         labels: {
           style: {
-            colors: colors.primary
+            colors: colors.primary,
           },
         },
         title: {
           text: "Revenue (thousand crores)",
           style: {
-            color: colors.primary
-          }
-        }
+            color: colors.primary,
+          },
+        },
       },
     ],
     grid: getGridConfig(),
@@ -120,9 +121,9 @@ const MultipleYAxis = ({ height = 350 }) => {
       theme: mode === "dark" ? "dark" : "light",
     },
     legend: {
-      horizontalAlign: 'center',
+      horizontalAlign: "center",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 10,
@@ -132,36 +133,30 @@ const MultipleYAxis = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   });
 
-  const [series, setSeries] = useState([{
-    name: 'Income',
-    type: 'column',
-    data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
-  }, {
-    name: 'Cashflow',
-    type: 'column',
-    data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
-  }, {
-    name: 'Revenue',
-    type: 'line',
-    data: [20, 29, 37, 36, 44, 45, 50, 58]
-  }]);
+  const [series, setSeries] = useState([
+    {
+      name: "Income",
+      type: "column",
+      data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6],
+    },
+    {
+      name: "Cashflow",
+      type: "column",
+      data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5],
+    },
+    {
+      name: "Revenue",
+      type: "line",
+      data: [20, 29, 37, 36, 44, 45, 50, 58],
+    },
+  ]);
 
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default MultipleYAxis;
-
-
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/page.tsx
index 086148d0..075d30e1 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-combo/page.tsx
@@ -1,9 +1,9 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import LineColumn from "./line-column";
-import MultipleYAxis from "./multiple-yaxis";
+
 import LineArea from "./line-area";
+import LineColumn from "./line-column";
 import LineColumnArea from "./line-column-area";
+import MultipleYAxis from "./multiple-yaxis";
 
 const ComboChartPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/basic-funnel.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/basic-funnel.tsx
index d808ea47..6a73832f 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/basic-funnel.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/basic-funnel.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicFunnel = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Funnel Series",
@@ -41,9 +43,7 @@ const BasicFunnel = ({ height = 350 }) => {
         enabled: true,
       },
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -78,15 +78,7 @@ const BasicFunnel = ({ height = 350 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default BasicFunnel;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/layout.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/layout.tsx
index 585fbd2f..ae1125fd 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/layout.tsx
@@ -7,4 +7,3 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 };
 
 export default Layout;
-
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/page.tsx
index 5245378b..fa49a5ba 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/page.tsx
@@ -1,30 +1,29 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicFunnel from "./basic-funnel";
 import PyramidChart from "./pyramid";
 
-
 const FunnelChartPage = () => {
-    return (
-        <div className="grid   grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Funnel Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicFunnel />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pyramid Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PyramidChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid   grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Funnel Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicFunnel />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Pyramid Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PyramidChart />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default FunnelChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/pyramid.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/pyramid.tsx
index c210796b..e5863a2b 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/pyramid.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-funnel/pyramid.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const PyramidChart = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "",
@@ -42,12 +44,7 @@ const PyramidChart = ({ height = 350 }) => {
         enabled: true,
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.info, colors.primary, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -55,12 +52,7 @@ const PyramidChart = ({ height = 350 }) => {
 
     fill: {
       type: "gradient",
-      colors: [
-        colors.primary,
-        colors.info,
-        colors.primary,
-        colors.success,
-      ],
+      colors: [colors.primary, colors.info, colors.primary, colors.success],
     },
     yaxis: {
       show: false,
@@ -88,15 +80,7 @@ const PyramidChart = ({ height = 350 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="bar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="bar" height={height} width={"100%"} />;
 };
 
 export default PyramidChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/basic-heatmap.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/basic-heatmap.tsx
index 9719ac58..a3477e88 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/basic-heatmap.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/basic-heatmap.tsx
@@ -1,15 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface YRange {
   min: number;
@@ -25,8 +24,7 @@ function generateData(count: number, yrange: YRange): DataPoint[] {
   var series = [];
   while (i < count) {
     var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
     series.push({
       x: x,
@@ -41,7 +39,6 @@ const BasicHeatMap = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Metric1",
@@ -129,7 +126,7 @@ const BasicHeatMap = ({ height = 350 }) => {
       },
     },
     xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -137,24 +134,14 @@ const BasicHeatMap = ({ height = 350 }) => {
         show: false,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     grid: getGridConfig(),
     legend: {
       show: false,
     },
   };
 
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="heatmap" height={height} width={"100%"} />;
 };
 
 export default BasicHeatMap;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/color-range.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/color-range.tsx
index e48b5cc0..b1dc830a 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/color-range.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/color-range.tsx
@@ -1,15 +1,14 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface YRange {
   min: number;
@@ -25,8 +24,7 @@ function generateData(count: number, yrange: YRange): DataPoint[] {
   var series = [];
   while (i < count) {
     var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
     series.push({
       x: x,
@@ -40,9 +38,6 @@ const ColorRange = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
-
   const series = [
     {
       name: "W1",
@@ -175,15 +170,13 @@ const ColorRange = ({ height = 300 }) => {
       heatmap: {
         colorScale: {
           inverse: true,
-        }
-      }
+        },
+      },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     grid: getGridConfig(),
     xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -191,18 +184,9 @@ const ColorRange = ({ height = 300 }) => {
         show: false,
       },
     },
-
   };
 
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="heatmap" height={height} width={"100%"} />;
 };
 
 export default ColorRange;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/mulitple-colors-heatmap.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/mulitple-colors-heatmap.tsx
index 3020099e..2c597a52 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/mulitple-colors-heatmap.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/mulitple-colors-heatmap.tsx
@@ -1,14 +1,15 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 interface YRange {
   min: number;
   max: number;
@@ -23,8 +24,7 @@ function generateData(count: number, yrange: YRange): DataPoint[] {
   var series = [];
   while (i < count) {
     var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
     series.push({
       x: x,
@@ -38,7 +38,6 @@ const MultipleColorsHeatMap = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "W1",
@@ -154,9 +153,7 @@ const MultipleColorsHeatMap = ({ height = 350 }) => {
         },
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     xaxis: {
       type: "category",
@@ -177,7 +174,7 @@ const MultipleColorsHeatMap = ({ height = 350 }) => {
         "04:30",
         "05:00",
       ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -190,18 +187,10 @@ const MultipleColorsHeatMap = ({ height = 350 }) => {
     },
     grid: {
       show: false,
-    }
+    },
   };
 
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="heatmap" height={height} width={"100%"} />;
 };
 
 export default MultipleColorsHeatMap;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/page.tsx
index cf93e71e..93eb6d30 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/page.tsx
@@ -1,38 +1,39 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicHeatMap from "./basic-heatmap";
 import MultipleColorsHeatMap from "./mulitple-colors-heatmap";
 import RoundedHeatMap from "./rounded-heatmap";
 
 const HeatMapChartPage = () => {
-    return (
-        <div className="grid grid-cols-1   gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Heat Map Chart(Single Color)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicHeatMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Heatmap - Multiple Colors</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleColorsHeatMap />
-                </CardContent>
-            </Card>
+  return (
+    <div className="grid grid-cols-1   gap-6 ">
+      <Card>
+        <CardHeader>
+          <CardTitle>Heat Map Chart(Single Color)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicHeatMap />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Heatmap - Multiple Colors</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MultipleColorsHeatMap />
+        </CardContent>
+      </Card>
 
-            <Card>
-                <CardHeader>
-                    <CardTitle>Rounded(range without shades)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RoundedHeatMap />
-                </CardContent>
-            </Card>
-        </div>
-    );
+      <Card>
+        <CardHeader>
+          <CardTitle>Rounded(range without shades)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RoundedHeatMap />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default HeatMapChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/rounded-heatmap.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/rounded-heatmap.tsx
index c11b2e82..fca85947 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/rounded-heatmap.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-heatmap/rounded-heatmap.tsx
@@ -1,14 +1,15 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 interface YRange {
   min: number;
   max: number;
@@ -23,8 +24,7 @@ function generateData(count: number, yrange: YRange): DataPoint[] {
   var series = [];
   while (i < count) {
     var x = (i + 1).toString();
-    var y =
-      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
     series.push({
       x: x,
@@ -38,7 +38,6 @@ const RoundedHeatMap = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Metric1",
@@ -112,13 +111,7 @@ const RoundedHeatMap = ({ height = 300 }) => {
         show: false,
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     plotOptions: {
       heatmap: {
         radius: 30,
@@ -145,12 +138,10 @@ const RoundedHeatMap = ({ height = 300 }) => {
         colors: ["#fff"],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       type: "category",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -167,7 +158,7 @@ const RoundedHeatMap = ({ height = 300 }) => {
     legend: {
       position: "bottom",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -177,20 +168,12 @@ const RoundedHeatMap = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
-    }
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
   };
 
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="heatmap"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="heatmap" height={height} width={"100%"} />;
 };
 
 export default RoundedHeatMap;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/brush-linechart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/brush-linechart.tsx
index 432274fb..53ae31f6 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/brush-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/brush-linechart.tsx
@@ -1,12 +1,15 @@
 "use client";
+
 import React, { useState } from "react";
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface DataRange {
   min: number;
@@ -16,14 +19,12 @@ const BrushLinechart = () => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   function generateDayWiseTimeSeries(baseval: number, count: number, yrange: DataRange) {
     var i = 0;
     var series: [number, number][] = [];
     while (i < count) {
       var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
       series.push([x, y]);
       baseval += 86400000;
@@ -52,9 +53,7 @@ const BrushLinechart = () => {
         show: false,
       },
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     grid: getGridConfig(),
     stroke: {
       width: 3,
@@ -76,11 +75,11 @@ const BrushLinechart = () => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     yaxis: {
       tickAmount: 2,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     padding: {
       top: 0,
@@ -125,7 +124,7 @@ const BrushLinechart = () => {
       tooltip: {
         enabled: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -135,29 +134,17 @@ const BrushLinechart = () => {
     },
     yaxis: {
       tickAmount: 2,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
   };
 
   return (
     <div id="wrapper">
       <div id="chart-line2">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height={230}
-          width={"100%"}
-        />
+        <Chart options={options} series={series} type="line" height={230} width={"100%"} />
       </div>
       <div id="chart-line">
-        <Chart
-          options={optionsLine}
-          series={seriesLine}
-          type="area"
-          height={130}
-          width={"100%"}
-        />
+        <Chart options={optionsLine} series={seriesLine} type="area" height={130} width={"100%"} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/dashed-linechart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/dashed-linechart.tsx
index 010a98a7..f821f9a7 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/dashed-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/dashed-linechart.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const DashedLineChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Sesson Duration",
@@ -48,22 +45,14 @@ const DashedLineChart = ({ height = 300 }) => {
       curve: "straight",
       dashArray: [0, 8, 5],
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.info, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     padding: {
       top: 0,
@@ -73,7 +62,7 @@ const DashedLineChart = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -83,19 +72,11 @@ const DashedLineChart = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default DashedLineChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/gradiant-linechart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/gradiant-linechart.tsx
index a815f2cc..85567d19 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/gradiant-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/gradiant-linechart.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GradiantLineChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5],
@@ -38,9 +35,7 @@ const GradiantLineChart = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.success,
-    ],
+    colors: [colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -49,9 +44,7 @@ const GradiantLineChart = ({ height = 300 }) => {
       type: "gradient",
       gradient: {
         shade: "dark",
-        gradientToColors: [
-          colors.primary,
-        ],
+        gradientToColors: [colors.primary],
         shadeIntensity: 1,
         type: "horizontal",
         opacityFrom: 1,
@@ -59,12 +52,8 @@ const GradiantLineChart = ({ height = 300 }) => {
         stops: [0, 100, 100, 100],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -72,15 +61,7 @@ const GradiantLineChart = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default GradiantLineChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-chart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-chart.tsx
index 8aea1a33..2911fc39 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-chart.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicLineChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
@@ -36,20 +33,14 @@ const BasicLineChart = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     padding: {
       top: 0,
@@ -58,15 +49,7 @@ const BasicLineChart = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default BasicLineChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-annotations.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-annotations.tsx
index 30ab52e6..f38e8e8e 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-annotations.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-annotations.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const LineWithAnnonotations = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [7800.0, 8100.0, 8400.0, 9000.0, 9300.0, 9600.0],
@@ -35,17 +32,13 @@ const LineWithAnnonotations = ({ height = 300 }) => {
       curve: "straight",
       width: 4,
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: [
         "Jan",
@@ -67,7 +60,7 @@ const LineWithAnnonotations = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     padding: {
       top: 0,
@@ -77,16 +70,16 @@ const LineWithAnnonotations = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
     },
     annotations: {
       yaxis: [
         {
           y: 8200,
-          borderColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          borderColor: mode === "light" ? colors["default-600"] : colors["default-300"],
           label: {
-            borderColor: 'transparent',
+            borderColor: "transparent",
             style: {
               color: "#fff",
               background: colors.primary,
@@ -97,10 +90,10 @@ const LineWithAnnonotations = ({ height = 300 }) => {
         {
           y: 8600,
           y2: 9000,
-          borderColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          borderColor: mode === "light" ? colors["default-600"] : colors["default-300"],
           fillColor: colors.primary,
           label: {
-            borderColor: 'transparent',
+            borderColor: "transparent",
             style: {
               fontSize: "10px",
               color: colors.success,
@@ -114,12 +107,12 @@ const LineWithAnnonotations = ({ height = 300 }) => {
         {
           x: new Date("23 Nov 2017").getTime(),
           strokeDashArray: 0,
-          borderColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          borderColor: mode === "light" ? colors["default-600"] : colors["default-300"],
           label: {
-            borderColor: 'transparent',
+            borderColor: "transparent",
             style: {
               color: colors.success,
-              background: 'transparent',
+              background: "transparent",
             },
             text: "Anno Test",
           },
@@ -127,14 +120,14 @@ const LineWithAnnonotations = ({ height = 300 }) => {
         {
           x: new Date("26 Nov 2017").getTime(),
           x2: new Date("28 Nov 2017").getTime(),
-          fillColor: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          fillColor: mode === "light" ? colors["default-600"] : colors["default-300"],
           opacity: 0.4,
           label: {
-            borderColor: 'transparent',
+            borderColor: "transparent",
             style: {
               fontSize: "10px",
               color: colors.warning,
-              background: 'transparent',
+              background: "transparent",
             },
             offsetY: -10,
             text: "X-axis range",
@@ -153,7 +146,7 @@ const LineWithAnnonotations = ({ height = 300 }) => {
             cssClass: "apexcharts-custom-class",
           },
           label: {
-            borderColor: 'transparent',
+            borderColor: "transparent",
             offsetY: 0,
             style: {
               color: colors.info,
@@ -173,15 +166,7 @@ const LineWithAnnonotations = ({ height = 300 }) => {
       ],
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default LineWithAnnonotations;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-datalabels.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-datalabels.tsx
index 9fd15c8e..8148d328 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-datalabels.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/line-with-datalabels.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const LineChartWithDataLabels = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [28, 29, 33, 36, 32, 32, 33],
@@ -38,20 +35,13 @@ const LineChartWithDataLabels = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.danger,
-    ],
+    colors: [colors.primary, colors.danger],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -60,7 +50,7 @@ const LineChartWithDataLabels = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -70,19 +60,11 @@ const LineChartWithDataLabels = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
+        offsetX: config.isRtl ? 5 : -5,
       },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default LineChartWithDataLabels;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/missingdata-linechart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/missingdata-linechart.tsx
index 102cdeb4..e1ff0408 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/missingdata-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/missingdata-linechart.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MissingDataLineChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Peter",
@@ -24,45 +21,11 @@ const MissingDataLineChart = ({ height = 300 }) => {
     },
     {
       name: "Johnny",
-      data: [
-        10,
-        15,
-        null,
-        12,
-        null,
-        10,
-        12,
-        15,
-        null,
-        null,
-        12,
-        null,
-        14,
-        null,
-        null,
-        null,
-      ],
+      data: [10, 15, null, 12, null, 10, 12, 15, null, null, 12, null, 14, null, null, null],
     },
     {
       name: "David",
-      data: [
-        null,
-        null,
-        null,
-        null,
-        3,
-        4,
-        1,
-        3,
-        4,
-        6,
-        7,
-        9,
-        5,
-        null,
-        null,
-        null,
-      ],
+      data: [null, null, null, null, 3, 4, 1, 3, 4, 6, 7, 9, 5, null, null, null],
     },
   ];
 
@@ -85,19 +48,13 @@ const MissingDataLineChart = ({ height = 300 }) => {
     animations: {
       enabled: false,
     },
-    colors: [
-      colors.primary,
-      colors.danger,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.danger, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     xaxis: {
       axisBorder: {
@@ -106,7 +63,7 @@ const MissingDataLineChart = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
 
     padding: {
@@ -117,7 +74,7 @@ const MissingDataLineChart = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -127,19 +84,11 @@ const MissingDataLineChart = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
+        offsetX: config.isRtl ? 5 : -5,
       },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default MissingDataLineChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx
index ea603e09..64618aa8 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/page.tsx
@@ -1,14 +1,15 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicLineChart from "./line-chart";
-import LineChartWithDataLabels from "./line-with-datalabels";
-import ZoomableTimeSeries from "./zoomable-timeseries";
-import LineWithAnnonotations from "./line-with-annotations";
-import DashedLineChart from "./dashed-linechart";
-import StepLineChart from "./step-linechart";
-import GradiantLineChart from "./gradiant-linechart";
-import MissingDataLineChart from "./missingdata-linechart";
+
 import BrushLineChart from "./brush-linechart";
+import DashedLineChart from "./dashed-linechart";
+import GradiantLineChart from "./gradiant-linechart";
+import BasicLineChart from "./line-chart";
+import LineWithAnnonotations from "./line-with-annotations";
+import LineChartWithDataLabels from "./line-with-datalabels";
+import MissingDataLineChart from "./missingdata-linechart";
+import StepLineChart from "./step-linechart";
 import SynchronizedChart from "./synchronized-chart";
+import ZoomableTimeSeries from "./zoomable-timeseries";
 
 const LineChartPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/realttime-linechart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/realttime-linechart.tsx
index f36de838..0ac8718b 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/realttime-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/realttime-linechart.tsx
@@ -1,12 +1,15 @@
 "use client";
+
 import { useState } from "react";
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getXAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const RealTimeLineChart = ({ height = 300 }) => {
   const [chartData, setChartData] = useState({
@@ -16,7 +19,6 @@ const RealTimeLineChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const options: any = {
     chart: {
       toolbar: {
@@ -39,15 +41,13 @@ const RealTimeLineChart = ({ height = 300 }) => {
     markers: {
       size: 0,
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
-    yaxis: getXAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    xaxis: getXAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+    yaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/step-linechart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/step-linechart.tsx
index 8c85d224..5c925e59 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/step-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/step-linechart.tsx
@@ -1,22 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const StepLineChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58],
@@ -34,20 +31,14 @@ const StepLineChart = ({ height = 300 }) => {
     stroke: {
       curve: "stepline",
     },
-    colors: [
-      colors.success,
-    ],
+    colors: [colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     padding: {
       top: 0,
@@ -61,15 +52,7 @@ const StepLineChart = ({ height = 300 }) => {
       },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="line"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="line" height={height} width={"100%"} />;
 };
 
 export default StepLineChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/synchronized-chart.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/synchronized-chart.tsx
index 1f87549e..93b804dc 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/synchronized-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/synchronized-chart.tsx
@@ -1,11 +1,15 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { getLabel, getGridConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 interface DataRange {
   min: number;
   max: number;
@@ -19,8 +23,7 @@ const SynchronizedChart = ({ height = 300 }) => {
     var series: [number, number][] = [];
     while (i < count) {
       var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
       series.push([x, y]);
       baseval += 86400000;
@@ -48,13 +51,11 @@ const SynchronizedChart = ({ height = 300 }) => {
 
       height: 160,
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     grid: getGridConfig(),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -62,9 +63,7 @@ const SynchronizedChart = ({ height = 300 }) => {
         show: false,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
   };
   const seriesLine2 = [
     {
@@ -85,13 +84,11 @@ const SynchronizedChart = ({ height = 300 }) => {
 
       height: 160,
     },
-    colors: [
-      colors.danger,
-    ],
+    colors: [colors.danger],
     grid: getGridConfig(),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -100,7 +97,7 @@ const SynchronizedChart = ({ height = 300 }) => {
       },
     },
     yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
   };
 
@@ -135,24 +132,18 @@ const SynchronizedChart = ({ height = 300 }) => {
     colors: [colors.info],
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     yaxis: {
       tickAmount: 2,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
   };
 
   return (
     <div id="wrapper">
       <div id="chart-line">
-        <Chart
-          options={options}
-          series={series}
-          type="line"
-          height={160}
-          width={"100%"}
-        />
+        <Chart options={options} series={series} type="line" height={160} width={"100%"} />
       </div>
       <div id="chart-line2">
         <Chart
@@ -164,13 +155,7 @@ const SynchronizedChart = ({ height = 300 }) => {
         />
       </div>
       <div id="chart-area">
-        <Chart
-          options={optionsArea}
-          series={seriesArea}
-          type="area"
-          height={160}
-          width={"100%"}
-        />
+        <Chart options={optionsArea} series={seriesArea} type="area" height={160} width={"100%"} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/zoomable-timeseries.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/zoomable-timeseries.tsx
index 490cfff9..ace42e1d 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/zoomable-timeseries.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-line/zoomable-timeseries.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getYAxisConfig,
-  getLabel,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ZoomableTimeSeries = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "XYZ MOTORS",
@@ -550,9 +548,7 @@ const ZoomableTimeSeries = ({ height = 300 }) => {
       enabled: true,
       autoScaleYaxis: true,
     },
-    colors: [
-      colors.success,
-    ],
+    colors: [colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -567,12 +563,10 @@ const ZoomableTimeSeries = ({ height = 300 }) => {
         stops: [0, 90, 100],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -587,15 +581,7 @@ const ZoomableTimeSeries = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default ZoomableTimeSeries;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-donut.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-donut.tsx
index 71c891a6..80a8bdfe 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-donut.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-donut.tsx
@@ -1,17 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+import { useTheme } from "next-themes";
 
 import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicDonut = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [44, 55, 41, 17, 15];
 
   const options: any = {
@@ -28,15 +29,9 @@ const BasicDonut = ({ height = 350 }) => {
       },
     },
     stroke: {
-      width: 0
+      width: 0,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.secondary,
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary, colors.secondary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -48,7 +43,7 @@ const BasicDonut = ({ height = 350 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -58,19 +53,11 @@ const BasicDonut = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="donut"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="donut" height={height} width={"100%"} />;
 };
 
 export default BasicDonut;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-pie.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-pie.tsx
index 791f5fb7..4f145f43 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-pie.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/basic-pie.tsx
@@ -1,10 +1,13 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicPie = ({ height = 350 }) => {
   const [config] = useConfig();
@@ -19,7 +22,7 @@ const BasicPie = ({ height = 350 }) => {
       },
     },
     stroke: {
-      width: 0
+      width: 0,
     },
     labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
     dataLabels: {
@@ -28,13 +31,7 @@ const BasicPie = ({ height = 350 }) => {
         fontSize: "20px",
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.secondary,
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary, colors.secondary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -46,7 +43,7 @@ const BasicPie = ({ height = 350 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -56,19 +53,11 @@ const BasicPie = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="pie"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="pie" height={height} width={"100%"} />;
 };
 
 export default BasicPie;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/donut-pattern.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/donut-pattern.tsx
index 33a45144..f18529be 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/donut-pattern.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/donut-pattern.tsx
@@ -1,17 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const DonutPattern = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [44, 55, 41, 17, 15];
 
   const options: any = {
@@ -43,13 +44,7 @@ const DonutPattern = ({ height = 350 }) => {
       opacity: 1,
       pattern: {
         enabled: true,
-        style: [
-          "verticalLines",
-          "squares",
-          "horizontalLines",
-          "circles",
-          "slantedLines",
-        ],
+        style: ["verticalLines", "squares", "horizontalLines", "circles", "slantedLines"],
       },
       colors: [
         colors.primary,
@@ -58,7 +53,6 @@ const DonutPattern = ({ height = 350 }) => {
         colors.success,
         colors.secondary,
         colors.danger,
-
       ],
     },
     states: {
@@ -70,9 +64,9 @@ const DonutPattern = ({ height = 350 }) => {
       pie: {
         donut: {
           labels: {
-            show: false
-          }
-        }
+            show: false,
+          },
+        },
       },
     },
     theme: {
@@ -87,7 +81,7 @@ const DonutPattern = ({ height = 350 }) => {
       show: true,
       position: "bottom",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -97,8 +91,8 @@ const DonutPattern = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -107,15 +101,7 @@ const DonutPattern = ({ height = 350 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="donut"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="donut" height={height} width={"100%"} />;
 };
 
 export default DonutPattern;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/gradiant-donut.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/gradiant-donut.tsx
index ed478d31..3c898f28 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/gradiant-donut.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/gradiant-donut.tsx
@@ -1,78 +1,71 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GradiantDonut = ({ height = 350 }) => {
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
+  const series = [44, 55, 41, 17, 15];
 
-
-    const series = [44, 55, 41, 17, 15];
-
-    const options: any = {
-        chart: {
-            toolbar: {
-                show: false,
-            }
-        },
-        plotOptions: {
-            pie: {
-                startAngle: -90,
-                endAngle: 270
-            }
-        },
-        dataLabels: {
-            enabled: false
-        },
-        fill: {
-            type: 'gradient',
-        },
-        legend: {
-            position: 'bottom',
-            formatter: function (val: number, opts: any) {
-                return val + " - " + opts.w.globals.series[opts.seriesIndex]
-            },
-            labels: {
-                colors: mode === 'light' ? colors["default-600"] : colors["default-300"]
-            },
-            itemMargin: {
-                horizontal: 5,
-                vertical: 5,
-            },
-            markers: {
-                width: 10,
-                height: 10,
-                radius: 10,
-                offsetX: config.isRtl ? 5 : -5
-            }
-        },
-        stroke: {
-            width: 0
-        },
-        tooltip: {
-            theme: mode === "dark" || mode === "system" ? "dark" : "light",
-        },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="donut"
-            height={height}
-            width={"100%"}
-        />
-    );
+  const options: any = {
+    chart: {
+      toolbar: {
+        show: false,
+      },
+    },
+    plotOptions: {
+      pie: {
+        startAngle: -90,
+        endAngle: 270,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    fill: {
+      type: "gradient",
+    },
+    legend: {
+      position: "bottom",
+      formatter: function (val: number, opts: any) {
+        return val + " - " + opts.w.globals.series[opts.seriesIndex];
+      },
+      labels: {
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
+      },
+      itemMargin: {
+        horizontal: 5,
+        vertical: 5,
+      },
+      markers: {
+        width: 10,
+        height: 10,
+        radius: 10,
+        offsetX: config.isRtl ? 5 : -5,
+      },
+    },
+    stroke: {
+      width: 0,
+    },
+    tooltip: {
+      theme: mode === "dark" || mode === "system" ? "dark" : "light",
+    },
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  };
+  return <Chart options={options} series={series} type="donut" height={height} width={"100%"} />;
 };
 
 export default GradiantDonut;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/image-pie.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/image-pie.tsx
index ba73f539..a11dd397 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/image-pie.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/image-pie.tsx
@@ -1,16 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ImagePie = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [44, 33, 54, 45];
 
   const options: any = {
@@ -26,13 +28,7 @@ const ImagePie = ({ height = 350 }) => {
         fontSize: "20px",
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary,
-      colors.secondary,
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary, colors.secondary],
     fill: {
       type: "image",
       opacity: 0.85,
@@ -61,7 +57,7 @@ const ImagePie = ({ height = 350 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -71,19 +67,11 @@ const ImagePie = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="pie"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="pie" height={height} width={"100%"} />;
 };
 
 export default ImagePie;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/mono-chrome.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/mono-chrome.tsx
index 1917c945..63677b1e 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/mono-chrome.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/mono-chrome.tsx
@@ -1,73 +1,64 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MonoChrome = ({ height = 350 }) => {
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [25, 15, 44, 55, 41, 17];
-    const options: any = {
-        chart: {
-            toolbar: {
-                show: false,
-            }
-        },
-        labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-        theme: {
-            monochrome: {
-                enabled: true
-            }
-        },
-        plotOptions: {
-            pie: {
-                dataLabels: {
-                    offset: -5
-                }
-            }
-        },
+  const series = [25, 15, 44, 55, 41, 17];
+  const options: any = {
+    chart: {
+      toolbar: {
+        show: false,
+      },
+    },
+    labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+    theme: {
+      monochrome: {
+        enabled: true,
+      },
+    },
+    plotOptions: {
+      pie: {
         dataLabels: {
-            formatter(val: number, opts: any) {
-                const name = opts.w.globals.labels[opts.seriesIndex]
-                return [name, val.toFixed(1) + '%']
-            }
+          offset: -5,
         },
-        fill: {
-            colors: [
-                colors.primary
-            ]
-        },
-        tooltip: {
-            theme: mode === "dark" ? "dark" : "light",
-        },
-        stroke: {
-            width: 0
-        },
-        legend: {
-            show: false
-        },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="pie"
-            height={height}
-            width={"100%"}
-        />
-    );
+      },
+    },
+    dataLabels: {
+      formatter(val: number, opts: any) {
+        const name = opts.w.globals.labels[opts.seriesIndex];
+        return [name, val.toFixed(1) + "%"];
+      },
+    },
+    fill: {
+      colors: [colors.primary],
+    },
+    tooltip: {
+      theme: mode === "dark" ? "dark" : "light",
+    },
+    stroke: {
+      width: 0,
+    },
+    legend: {
+      show: false,
+    },
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  };
+  return <Chart options={options} series={series} type="pie" height={height} width={"100%"} />;
 };
 
 export default MonoChrome;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/page.tsx
index 49cd0874..6f8df739 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/page.tsx
@@ -1,75 +1,74 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicPie from "./basic-pie";
-import BasicDonut from "./basic-donut";
-import MonoChrome from "./mono-chrome";
-import GradiantDonut from "./gradiant-donut";
-import SemiDonut from "./semi-donut";
-import DonutPattern from "./donut-pattern";
-import ImagePie from "./image-pie";
 
+import BasicDonut from "./basic-donut";
+import BasicPie from "./basic-pie";
+import DonutPattern from "./donut-pattern";
+import GradiantDonut from "./gradiant-donut";
+import ImagePie from "./image-pie";
+import MonoChrome from "./mono-chrome";
+import SemiDonut from "./semi-donut";
 
 const PieChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicPie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicDonut />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Monochrome Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MonoChrome />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Gradient Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GradiantDonut />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Semi Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <SemiDonut />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Patterned Donut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DonutPattern />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie with Image</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ImagePie />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Pie Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicPie />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Donut Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicDonut />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Monochrome Pie Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MonoChrome />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Gradient Donut Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GradiantDonut />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Semi Donut Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SemiDonut />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Patterned Donut Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DonutPattern />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Pie with Image</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ImagePie />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default PieChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/semi-donut.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/semi-donut.tsx
index 78d9e052..9e0936db 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/semi-donut.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-pie/semi-donut.tsx
@@ -1,16 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const SemiDonut = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [44, 55, 41, 17, 15];
 
   const options: any = {
@@ -19,14 +21,7 @@ const SemiDonut = ({ height = 350 }) => {
         show: false,
       },
     },
-    labels: [
-      "Monday",
-      "Tuesday",
-      "Wednesday",
-      "Thursday",
-      "Friday",
-      "Saturday",
-    ],
+    labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
     theme: {
       monochrome: {
         enabled: true,
@@ -46,16 +41,10 @@ const SemiDonut = ({ height = 350 }) => {
       },
     },
     stroke: {
-      width: 0
+      width: 0,
     },
     fill: {
-      colors: [
-        colors.primary,
-        colors.info,
-        colors.success,
-        colors.primary,
-        colors.secondary,
-      ],
+      colors: [colors.primary, colors.info, colors.success, colors.primary, colors.secondary],
     },
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
@@ -64,7 +53,7 @@ const SemiDonut = ({ height = 350 }) => {
       show: true,
       position: "bottom",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -74,8 +63,8 @@ const SemiDonut = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -84,15 +73,7 @@ const SemiDonut = ({ height = 350 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="donut"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="donut" height={height} width={"100%"} />;
 };
 
 export default SemiDonut;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/basic-polar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/basic-polar.tsx
index c5467047..8c9e0183 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/basic-polar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/basic-polar.tsx
@@ -1,20 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicPolar = ({ height = 400 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [14, 23, 21, 17, 15, 10, 12, 17, 21];
   const options: any = {
     chart: {
@@ -25,12 +24,7 @@ const BasicPolar = ({ height = 400 }) => {
     dataLabels: {
       enabled: false,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     fill: {
       opacity: 0.5,
     },
@@ -41,24 +35,20 @@ const BasicPolar = ({ height = 400 }) => {
       polarArea: {
         rings: {
           strokeWidth: 1,
-          strokeColor: 'transparent',
+          strokeColor: "transparent",
         },
         spokes: {
           strokeWidth: 1,
-          connectorColors: 'transparent',
+          connectorColors: "transparent",
         },
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     legend: {
       position: "bottom",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -68,8 +58,8 @@ const BasicPolar = ({ height = 400 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -79,13 +69,7 @@ const BasicPolar = ({ height = 400 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="polarArea"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="polarArea" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/mono-chrome.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/mono-chrome.tsx
index 54fcd600..98aaa735 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/mono-chrome.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/mono-chrome.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getXAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MonChromePolarArea = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [42, 47, 52, 58, 65];
 
   const options: any = {
@@ -31,9 +33,7 @@ const MonChromePolarArea = ({ height = 300 }) => {
       width: 1,
       colors: undefined,
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -41,9 +41,7 @@ const MonChromePolarArea = ({ height = 300 }) => {
     yaxis: {
       show: false,
     },
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     plotOptions: {
       polarArea: {
         rings: {
@@ -64,7 +62,7 @@ const MonChromePolarArea = ({ height = 300 }) => {
     legend: {
       position: "bottom",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -74,8 +72,8 @@ const MonChromePolarArea = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -85,13 +83,7 @@ const MonChromePolarArea = ({ height = 300 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="polarArea"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="polarArea" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/page.tsx
index 10685741..ffa3f6e3 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-polararea/page.tsx
@@ -1,28 +1,29 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicPolar from "./basic-polar";
 import MonChromePolarArea from "./mono-chrome";
 
 const PieChartPage = () => {
-    return (
-        <div className="grid  grid-cols-1 gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Polar Area Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicPolar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Polar Area Monochrome</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MonChromePolarArea />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid  grid-cols-1 gap-6 ">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Polar Area Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicPolar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Polar Area Monochrome</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MonChromePolarArea />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default PieChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/basic-radar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/basic-radar.tsx
index b3813769..0f8ae717 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/basic-radar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/basic-radar.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicRadar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Series 1",
@@ -32,9 +34,7 @@ const BasicRadar = ({ height = 350 }) => {
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     fill: {
       type: "gradient",
       colors: colors.primary,
@@ -45,12 +45,10 @@ const BasicRadar = ({ height = 350 }) => {
         stops: [50, 100, 0],
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: ["January", "February", "March", "April", "May", "June"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -64,9 +62,9 @@ const BasicRadar = ({ height = 350 }) => {
         offsetX: 0,
         offsetY: 0,
         polygons: {
-          strokeColors: 'transparent',
+          strokeColors: "transparent",
           strokeWidth: 0.5,
-          connectorColors: 'transparent',
+          connectorColors: "transparent",
         },
       },
     },
@@ -77,15 +75,7 @@ const BasicRadar = ({ height = 350 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="radar" height={height} width={"100%"} />;
 };
 
 export default BasicRadar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/multiple-series-radar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/multiple-series-radar.tsx
index e1fe608f..12aa66b0 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/multiple-series-radar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/multiple-series-radar.tsx
@@ -1,20 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MultipleSeriesRadar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Series 1",
@@ -52,19 +51,15 @@ const MultipleSeriesRadar = ({ height = 350 }) => {
         offsetX: 0,
         offsetY: 0,
         polygons: {
-          strokeColors: 'transparent',
+          strokeColors: "transparent",
           strokeWidth: 0.5,
-          connectorColors: 'transparent',
+          connectorColors: "transparent",
         },
       },
     },
     fill: {
       type: "gradient",
-      colors: [
-        colors.primary,
-        colors.info,
-        colors.success,
-      ],
+      colors: [colors.primary, colors.info, colors.success],
       gradient: {
         shadeIntensity: 1,
         opacityFrom: 0.2,
@@ -75,12 +70,10 @@ const MultipleSeriesRadar = ({ height = 350 }) => {
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
       categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -97,7 +90,7 @@ const MultipleSeriesRadar = ({ height = 350 }) => {
     legend: {
       show: true,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -107,19 +100,11 @@ const MultipleSeriesRadar = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="radar" height={height} width={"100%"} />;
 };
 
 export default MultipleSeriesRadar;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/page.tsx
index 8ea25276..0455cef5 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/page.tsx
@@ -1,43 +1,44 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicRadar from "./basic-radar";
 import MultipleSeriesRadar from "./multiple-series-radar";
 import RadarPolygonFill from "./radar-polygon-fill";
 
 const RadarChartPage = () => {
-    return (
-        <div className="grid grid-cols-2  gap-6 ">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Radar Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicRadar />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Radar Chart - Multiple series</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <MultipleSeriesRadar />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Radar with Polygon-fill</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <RadarPolygonFill />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
+  return (
+    <div className="grid grid-cols-2  gap-6 ">
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Basic Radar Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <BasicRadar />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Radar Chart - Multiple series</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <MultipleSeriesRadar />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Radar with Polygon-fill</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <RadarPolygonFill />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export default RadarChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/radar-polygon-fill.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/radar-polygon-fill.tsx
index 1275ead3..3f30070a 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/radar-polygon-fill.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radar/radar-polygon-fill.tsx
@@ -1,20 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const RadarPolygonFill = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Series 1",
@@ -51,26 +50,16 @@ const RadarPolygonFill = ({ height = 350 }) => {
         offsetX: 0,
         offsetY: 0,
         polygons: {
-          strokeColors: 'transparent',
+          strokeColors: "transparent",
           strokeWidth: 0.5,
-          connectorColors: 'transparent',
-        }
-      }
+          connectorColors: "transparent",
+        },
+      },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     xaxis: {
-      categories: [
-        "Sunday",
-        "Monday",
-        "Tuesday",
-        "Wednesday",
-        "Thursday",
-        "Friday",
-        "Saturday",
-      ],
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      categories: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -87,19 +76,11 @@ const RadarPolygonFill = ({ height = 350 }) => {
     legend: {
       show: true,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="radar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="radar" height={height} width={"100%"} />;
 };
 
 export default RadarPolygonFill;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/basic-radial-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/basic-radial-bar.tsx
index 428162ec..0e39a879 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/basic-radial-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/basic-radial-bar.tsx
@@ -1,16 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicRadialBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [80];
 
   const options: any = {
@@ -32,14 +34,12 @@ const BasicRadialBar = ({ height = 350 }) => {
           value: {
             fontSize: "18px",
             fontWeight: 700,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
         },
       },
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     labels: ["Cricket"],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
@@ -52,13 +52,7 @@ const BasicRadialBar = ({ height = 350 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="radialBar" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/custom-angle.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/custom-angle.tsx
index 64e26c8a..a70da109 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/custom-angle.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/custom-angle.tsx
@@ -1,95 +1,86 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const CustomAngle = ({ height = 350 }) => {
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
+  const series = [76, 67, 61, 90];
 
-    const series = [76, 67, 61, 90];
-
-    const options: any = {
-        chart: {
-            toolbar: {
-                show: false,
-            },
+  const options: any = {
+    chart: {
+      toolbar: {
+        show: false,
+      },
+    },
+    stroke: {
+      curve: "smooth",
+      width: 6,
+    },
+    plotOptions: {
+      radialBar: {
+        offsetY: 0,
+        startAngle: 0,
+        endAngle: 270,
+        hollow: {
+          margin: 5,
+          size: "30%",
+          background: "transparent",
+          image: undefined,
         },
-        stroke: {
-            curve: "smooth",
-            width: 6,
+        dataLabels: {
+          name: {
+            show: false,
+          },
+          value: {
+            show: false,
+          },
         },
-        plotOptions: {
-            radialBar: {
-                offsetY: 0,
-                startAngle: 0,
-                endAngle: 270,
-                hollow: {
-                    margin: 5,
-                    size: '30%',
-                    background: 'transparent',
-                    image: undefined,
-                },
-                dataLabels: {
-                    name: {
-                        show: false,
-                    },
-                    value: {
-                        show: false,
-                    }
-                }
-            }
-        },
-        colors: [
-            colors.primary,
-            colors.info,
-            colors.success,
-            colors.primary
-        ],
-        labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
-        legend: {
-            show: true,
-            floating: true,
-            fontSize: '16px',
-            position: 'left',
-            offsetX: 160,
-            offsetY: 15,
-            labels: {
-                useSeriesColors: true,
-            },
-            markers: {
-                size: 0
-            },
-            formatter: function (seriesName: string[], opts: any) {
-                return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex]
-            },
-            itemMargin: {
-                vertical: 3
-            }
-        },
-        tooltip: {
-            theme: mode === "dark" ? "dark" : "light",
-        },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="radialBar"
-            height={height}
-            width={"100%"}
-        />
-    );
+      },
+    },
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
+    labels: ["Vimeo", "Messenger", "Facebook", "LinkedIn"],
+    legend: {
+      show: true,
+      floating: true,
+      fontSize: "16px",
+      position: "left",
+      offsetX: 160,
+      offsetY: 15,
+      labels: {
+        useSeriesColors: true,
+      },
+      markers: {
+        size: 0,
+      },
+      formatter: function (seriesName: string[], opts: any) {
+        return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex];
+      },
+      itemMargin: {
+        vertical: 3,
+      },
+    },
+    tooltip: {
+      theme: mode === "dark" ? "dark" : "light",
+    },
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  };
+  return (
+    <Chart options={options} series={series} type="radialBar" height={height} width={"100%"} />
+  );
 };
 
 export default CustomAngle;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/gradiant-radial-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/gradiant-radial-bar.tsx
index 6e289927..2b8634bc 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/gradiant-radial-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/gradiant-radial-bar.tsx
@@ -1,17 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GradiantRadialBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [75];
 
   const options: any = {
@@ -55,12 +56,12 @@ const GradiantRadialBar = ({ height = 350 }) => {
             formatter: function (val: string) {
               return parseInt(val);
             },
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "36px",
             show: true,
-          }
-        }
-      }
+          },
+        },
+      },
     },
     fill: {
       type: "gradient",
@@ -68,18 +69,14 @@ const GradiantRadialBar = ({ height = 350 }) => {
         shade: "dark",
         type: "horizontal",
         shadeIntensity: 0.5,
-        gradientToColors: [
-          colors.primary,
-        ],
+        gradientToColors: [colors.primary],
         inverseColors: true,
         opacityFrom: 1,
         opacityTo: 1,
         stops: [0, 100],
       },
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     labels: ["Cricket"],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
@@ -93,13 +90,7 @@ const GradiantRadialBar = ({ height = 350 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="radialBar" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/multiple-radial-bar.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/multiple-radial-bar.tsx
index b6e6a963..c40e859e 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/multiple-radial-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/multiple-radial-bar.tsx
@@ -1,16 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MultipleRadialBar = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [44, 55, 67, 83];
 
   const options: any = {
@@ -32,7 +34,7 @@ const MultipleRadialBar = ({ height = 350 }) => {
           value: {
             fontSize: "16px",
             fontWeight: 700,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
           total: {
             show: true,
@@ -44,12 +46,7 @@ const MultipleRadialBar = ({ height = 350 }) => {
         },
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     labels: ["Apples", "Oranges", "Bananas", "Berries"],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
@@ -62,13 +59,7 @@ const MultipleRadialBar = ({ height = 350 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="radialBar" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/page.tsx
index 1da8ace1..b9caccb2 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/page.tsx
@@ -1,75 +1,74 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicRadialBar from "./basic-radial-bar";
-import MultipleRadialBar from "./multiple-radial-bar";
 import CustomAngle from "./custom-angle";
 import GradiantRadialBar from "./gradiant-radial-bar";
+import MultipleRadialBar from "./multiple-radial-bar";
 import RadialBarWithImage from "./radialbar-with-Image";
-import StrokedGauge from "./stroked-gauge";
 import SemiCircleGauge from "./semi-circle-gauge";
-
+import StrokedGauge from "./stroked-gauge";
 
 const RadialBarsChart = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6 ">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Radialbar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicRadialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Multiple Radialbar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleRadialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Circle Chart - Custom Angle </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomAngle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Gradient Circle Chart </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GradiantRadialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Radialbars with Image </CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RadialBarWithImage />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stroked Gauge</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StrokedGauge />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Semi Circular Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <SemiCircleGauge />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6 ">
+      <Card>
+        <CardHeader>
+          <CardTitle>Simple Radialbar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicRadialBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle> Multiple Radialbar</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MultipleRadialBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle> Circle Chart - Custom Angle </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomAngle />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle> Gradient Circle Chart </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GradiantRadialBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle> Radialbars with Image </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RadialBarWithImage />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stroked Gauge</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StrokedGauge />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Semi Circular Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SemiCircleGauge />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default RadialBarsChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/radialbar-with-Image.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/radialbar-with-Image.tsx
index de6a322d..5d427287 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/radialbar-with-Image.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/radialbar-with-Image.tsx
@@ -1,16 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const RadialBarWithImage = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [67];
 
   const options: any = {
@@ -37,7 +39,7 @@ const RadialBarWithImage = ({ height = 350 }) => {
           },
           value: {
             show: true,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
             offsetY: 70,
             fontSize: "22px",
           },
@@ -54,9 +56,7 @@ const RadialBarWithImage = ({ height = 350 }) => {
       lineCap: "round",
     },
     labels: ["Volatility"],
-    colors: [
-      colors.success,
-    ],
+    colors: [colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -68,13 +68,7 @@ const RadialBarWithImage = ({ height = 350 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="radialBar" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/semi-circle-gauge.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/semi-circle-gauge.tsx
index 0cc2c5f1..5d0d8303 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/semi-circle-gauge.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/semi-circle-gauge.tsx
@@ -1,16 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const SemiCircleGauge = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [76];
 
   const options: any = {
@@ -52,7 +54,7 @@ const SemiCircleGauge = ({ height = 350 }) => {
             offsetY: -2,
             fontSize: "22px",
             fontWeight: 700,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
         },
       },
@@ -81,13 +83,7 @@ const SemiCircleGauge = ({ height = 350 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="radialBar" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/stroked-gauge.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/stroked-gauge.tsx
index 96563c8e..efd5c18e 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/stroked-gauge.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-radialbars/stroked-gauge.tsx
@@ -1,16 +1,18 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const StrokedGauge = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [67, 80];
 
   const options = {
@@ -33,7 +35,7 @@ const StrokedGauge = ({ height = 350 }) => {
           value: {
             offsetY: 76,
             fontSize: "22px",
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
             formatter: function (val: number) {
               return val + "%";
             },
@@ -56,9 +58,7 @@ const StrokedGauge = ({ height = 350 }) => {
       dashArray: 4,
     },
     labels: ["Median Ratio"],
-    colors: [
-      colors.primary
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -70,13 +70,7 @@ const StrokedGauge = ({ height = 350 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="radialBar"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="radialBar" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/basic-range.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/basic-range.tsx
index 3762f788..35a86c4b 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/basic-range.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/basic-range.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getXAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicRange = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "New York Temperature",
@@ -87,9 +88,7 @@ const BasicRange = ({ height = 300 }) => {
     dataLabels: {
       enabled: false,
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -101,15 +100,11 @@ const BasicRange = ({ height = 300 }) => {
           return val + "°C";
         },
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"]
-          ]
-        }
-      }
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+        },
+      },
     },
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
 
     padding: {
       top: 0,
@@ -119,13 +114,7 @@ const BasicRange = ({ height = 300 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeArea"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="rangeArea" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/combo-range.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/combo-range.tsx
index 97c4d1e1..d6b014ce 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/combo-range.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/combo-range.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ComboRange = ({ height = 350 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       type: "rangeArea",
@@ -89,8 +90,8 @@ const ComboRange = ({ height = 350 }) => {
         {
           x: "Aug",
           y: [2100, 2900],
-        }
-      ]
+        },
+      ],
     },
     {
       type: "line",
@@ -136,7 +137,7 @@ const ComboRange = ({ height = 350 }) => {
           x: "Oct",
           y: 2000,
         },
-      ]
+      ],
     },
     {
       type: "line",
@@ -182,8 +183,8 @@ const ComboRange = ({ height = 350 }) => {
           x: "Oct",
           y: 1500,
         },
-      ]
-    }
+      ],
+    },
   ];
 
   const options: any = {
@@ -203,7 +204,7 @@ const ComboRange = ({ height = 350 }) => {
       customLegendItems: ["Team B", "Team A"],
       inverseOrder: true,
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 10,
@@ -213,8 +214,8 @@ const ComboRange = ({ height = 350 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     stroke: {
       curve: "straight",
@@ -224,10 +225,7 @@ const ComboRange = ({ height = 350 }) => {
     dataLabels: {
       enabled: false,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -236,14 +234,12 @@ const ComboRange = ({ height = 350 }) => {
     yaxis: {
       labels: {
         style: {
-          colors: [
-            mode === 'light' ? colors["default-600"] : colors["default-300"],
-          ]
-        }
-      }
+          colors: [mode === "light" ? colors["default-600"] : colors["default-300"]],
+        },
+      },
     },
     xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -259,13 +255,7 @@ const ComboRange = ({ height = 350 }) => {
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeArea"
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type="rangeArea" height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/page.tsx
index 4006f8e6..567499ec 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-range/page.tsx
@@ -1,29 +1,29 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicRange from "./basic-range";
 import ComboRange from "./combo-range";
 
 const RangeChartPage = () => {
-    return (
-        <div className="grid grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Range Area Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicRange />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Combo</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ComboRange />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Range Area Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicRange />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Combo</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ComboRange />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default RangeChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/basic-scatter.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/basic-scatter.tsx
index 8068f00c..3b37c5b9 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/basic-scatter.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/basic-scatter.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicScatter = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "SAMPLE A",
@@ -139,17 +141,12 @@ const BasicScatter = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
 
-
     fill: {
       opacity: 1,
     },
@@ -161,7 +158,7 @@ const BasicScatter = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
 
     xaxis: {
@@ -171,11 +168,11 @@ const BasicScatter = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -185,8 +182,8 @@ const BasicScatter = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -195,15 +192,7 @@ const BasicScatter = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="scatter"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="scatter" height={height} width={"100%"} />;
 };
 
 export default BasicScatter;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/date-time.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/date-time.tsx
index e2bb26db..8e8a90d6 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/date-time.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/date-time.tsx
@@ -1,17 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const DateTime = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   interface DataRange {
     min: number;
     max: number;
@@ -21,8 +23,7 @@ const DateTime = ({ height = 300 }) => {
     var series: [number, number][] = [];
     while (i < count) {
       var x = baseval;
-      var y =
-        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+      var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
 
       series.push([x, y]);
       baseval += 86400000;
@@ -34,58 +35,38 @@ const DateTime = ({ height = 300 }) => {
   const series = [
     {
       name: "TEAM 1",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 60,
+      }),
     },
     {
       name: "TEAM 2",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        20,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 20, {
+        min: 10,
+        max: 60,
+      }),
     },
     {
       name: "TEAM 3",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        30,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 30, {
+        min: 10,
+        max: 60,
+      }),
     },
     {
       name: "TEAM 4",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        10,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {
+        min: 10,
+        max: 60,
+      }),
     },
     {
       name: "TEAM 5",
-      data: generateDayWiseTimeSeries(
-        new Date("11 Feb 2017 GMT").getTime(),
-        30,
-        {
-          min: 10,
-          max: 60,
-        }
-      ),
+      data: generateDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 30, {
+        min: 10,
+        max: 60,
+      }),
     },
   ];
   const options: any = {
@@ -105,11 +86,7 @@ const DateTime = ({ height = 300 }) => {
       curve: "smooth",
       width: 4,
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -126,7 +103,7 @@ const DateTime = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
 
     xaxis: {
@@ -137,11 +114,11 @@ const DateTime = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -151,8 +128,8 @@ const DateTime = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -161,15 +138,7 @@ const DateTime = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="scatter"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="scatter" height={height} width={"100%"} />;
 };
 
 export default DateTime;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/page.tsx
index ba65f8b8..d1b9ebf6 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/page.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicScatter from "./basic-scatter";
 import DateTime from "./date-time";
 import ScatterImage from "./scatter-image";
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/scatter-image.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/scatter-image.tsx
index 4f5ece5d..30764efc 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/scatter-image.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-scatter/scatter-image.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ScatterImage = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Messenger",
@@ -73,11 +74,7 @@ const ScatterImage = ({ height = 300 }) => {
       enabled: false,
     },
 
-
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -98,7 +95,7 @@ const ScatterImage = ({ height = 300 }) => {
       axisTicks: {
         show: false,
       },
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       tickAmount: 7,
     },
 
@@ -111,7 +108,7 @@ const ScatterImage = ({ height = 300 }) => {
       },
       min: 0,
       max: 40,
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       tickAmount: 10,
     },
     markers: {
@@ -125,7 +122,7 @@ const ScatterImage = ({ height = 300 }) => {
     },
     legend: {
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -135,19 +132,11 @@ const ScatterImage = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="scatter"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="scatter" height={height} width={"100%"} />;
 };
 
 export default ScatterImage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/basic-timeline.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/basic-timeline.tsx
index 69f58738..d54790b6 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/basic-timeline.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/basic-timeline.tsx
@@ -1,48 +1,37 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicTimeline = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [
         {
           x: "Code",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-04").getTime(),
-          ],
+          y: [new Date("2019-03-02").getTime(), new Date("2019-03-04").getTime()],
         },
         {
           x: "Test",
-          y: [
-            new Date("2019-03-04").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
+          y: [new Date("2019-03-04").getTime(), new Date("2019-03-08").getTime()],
         },
         {
           x: "Validation",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-12").getTime(),
-          ],
+          y: [new Date("2019-03-08").getTime(), new Date("2019-03-12").getTime()],
         },
         {
           x: "Deployment",
-          y: [
-            new Date("2019-03-12").getTime(),
-            new Date("2019-03-18").getTime(),
-          ],
+          y: [new Date("2019-03-12").getTime(), new Date("2019-03-18").getTime()],
         },
       ],
     },
@@ -61,19 +50,17 @@ const BasicTimeline = ({ height = 300 }) => {
       },
     },
 
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
     yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -88,15 +75,7 @@ const BasicTimeline = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="rangeBar" height={height} width={"100%"} />;
 };
 
 export default BasicTimeline;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/custom-color.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/custom-color.tsx
index c976e6d8..d3ace3f6 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/custom-color.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/custom-color.tsx
@@ -1,59 +1,46 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
-import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
 import moment from "moment";
+import { useTheme } from "next-themes";
+
+import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 const CustomColor = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [
         {
           x: "Analysis",
-          y: [
-            new Date("2019-02-27").getTime(),
-            new Date("2019-03-04").getTime(),
-          ],
+          y: [new Date("2019-02-27").getTime(), new Date("2019-03-04").getTime()],
           fillColor: "#008FFB",
         },
         {
           x: "Design",
-          y: [
-            new Date("2019-03-04").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
+          y: [new Date("2019-03-04").getTime(), new Date("2019-03-08").getTime()],
           fillColor: "#00E396",
         },
         {
           x: "Coding",
-          y: [
-            new Date("2019-03-07").getTime(),
-            new Date("2019-03-10").getTime(),
-          ],
+          y: [new Date("2019-03-07").getTime(), new Date("2019-03-10").getTime()],
           fillColor: "#775DD0",
         },
         {
           x: "Testing",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-12").getTime(),
-          ],
+          y: [new Date("2019-03-08").getTime(), new Date("2019-03-12").getTime()],
           fillColor: "#FEB019",
         },
         {
           x: "Deployment",
-          y: [
-            new Date("2019-03-12").getTime(),
-            new Date("2019-03-17").getTime(),
-          ],
+          y: [new Date("2019-03-12").getTime(), new Date("2019-03-17").getTime()],
           fillColor: "#FF4560",
         },
       ],
@@ -87,11 +74,9 @@ const CustomColor = ({ height = 300 }) => {
       },
       style: {
         colors: ["#fff"],
-      }
+      },
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -102,7 +87,7 @@ const CustomColor = ({ height = 300 }) => {
     },
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -115,17 +100,9 @@ const CustomColor = ({ height = 300 }) => {
       right: 0,
       bottom: 0,
       left: 0,
-    }
+    },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="rangeBar" height={height} width={"100%"} />;
 };
 
 export default CustomColor;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/dumbbell-timeline.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/dumbbell-timeline.tsx
index 719e2643..2cdb2973 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/dumbbell-timeline.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/dumbbell-timeline.tsx
@@ -1,18 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const DumbbellTimelineChart = ({ height = 400 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       data: [
@@ -59,36 +60,27 @@ const DumbbellTimelineChart = ({ height = 400 }) => {
       bar: {
         horizontal: true,
         isDumbbell: true,
-        dumbbellColors: [
-          [
-            colors.warning,
-            colors.info,
-          ],
-        ],
+        dumbbellColors: [[colors.warning, colors.info]],
       },
     },
     fill: {
       type: "gradient",
       gradient: {
-        gradientToColors: [
-          colors.info,
-        ],
+        gradientToColors: [colors.info],
         inverseColors: false,
         stops: [0, 100],
       },
     },
-    colors: [
-      colors.primary,
-    ],
+    colors: [colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
     yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     xaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -103,15 +95,7 @@ const DumbbellTimelineChart = ({ height = 400 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="rangeBar" height={height} width={"100%"} />;
 };
 
 export default DumbbellTimelineChart;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/group-rows.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/group-rows.tsx
index a96a3317..c813bfc3 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/group-rows.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/group-rows.tsx
@@ -1,21 +1,19 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const GroupRows = ({ height = 400 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "George Washington",
@@ -52,10 +50,7 @@ const GroupRows = ({ height = 400 }) => {
         },
         {
           x: "Secretary of State",
-          y: [
-            new Date(1790, 2, 22).getTime(),
-            new Date(1793, 11, 31).getTime(),
-          ],
+          y: [new Date(1790, 2, 22).getTime(), new Date(1793, 11, 31).getTime()],
         },
       ],
     },
@@ -160,12 +155,7 @@ const GroupRows = ({ height = 400 }) => {
     fill: {
       type: "solid",
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.primary
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.primary],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -173,7 +163,7 @@ const GroupRows = ({ height = 400 }) => {
 
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -181,14 +171,12 @@ const GroupRows = ({ height = 400 }) => {
         show: false,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     legend: {
       position: "right",
       horizontalAlign: "right",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -198,8 +186,8 @@ const GroupRows = ({ height = 400 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -208,15 +196,7 @@ const GroupRows = ({ height = 400 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="rangeBar" height={height} width={"100%"} />;
 };
 
 export default GroupRows;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-range.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-range.tsx
index 05415a54..5ca98965 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-range.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-range.tsx
@@ -1,70 +1,50 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { getGridConfig, getLabel } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MultiRange = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Bob",
       data: [
         {
           x: "Design",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
+          y: [new Date("2019-03-05").getTime(), new Date("2019-03-08").getTime()],
         },
         {
           x: "Code",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-05").getTime(),
-          ],
+          y: [new Date("2019-03-02").getTime(), new Date("2019-03-05").getTime()],
         },
         {
           x: "Code",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-07").getTime(),
-          ],
+          y: [new Date("2019-03-05").getTime(), new Date("2019-03-07").getTime()],
         },
         {
           x: "Test",
-          y: [
-            new Date("2019-03-03").getTime(),
-            new Date("2019-03-09").getTime(),
-          ],
+          y: [new Date("2019-03-03").getTime(), new Date("2019-03-09").getTime()],
         },
         {
           x: "Test",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-11").getTime(),
-          ],
+          y: [new Date("2019-03-08").getTime(), new Date("2019-03-11").getTime()],
         },
         {
           x: "Validation",
-          y: [
-            new Date("2019-03-11").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
+          y: [new Date("2019-03-11").getTime(), new Date("2019-03-16").getTime()],
         },
         {
           x: "Design",
-          y: [
-            new Date("2019-03-01").getTime(),
-            new Date("2019-03-03").getTime(),
-          ],
+          y: [new Date("2019-03-01").getTime(), new Date("2019-03-03").getTime()],
         },
       ],
     },
@@ -73,17 +53,11 @@ const MultiRange = ({ height = 300 }) => {
       data: [
         {
           x: "Design",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-05").getTime(),
-          ],
+          y: [new Date("2019-03-02").getTime(), new Date("2019-03-05").getTime()],
         },
         {
           x: "Test",
-          y: [
-            new Date("2019-03-06").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
+          y: [new Date("2019-03-06").getTime(), new Date("2019-03-16").getTime()],
           goals: [
             {
               name: "Break",
@@ -94,24 +68,15 @@ const MultiRange = ({ height = 300 }) => {
         },
         {
           x: "Code",
-          y: [
-            new Date("2019-03-03").getTime(),
-            new Date("2019-03-07").getTime(),
-          ],
+          y: [new Date("2019-03-03").getTime(), new Date("2019-03-07").getTime()],
         },
         {
           x: "Deployment",
-          y: [
-            new Date("2019-03-20").getTime(),
-            new Date("2019-03-22").getTime(),
-          ],
+          y: [new Date("2019-03-20").getTime(), new Date("2019-03-22").getTime()],
         },
         {
           x: "Design",
-          y: [
-            new Date("2019-03-10").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
+          y: [new Date("2019-03-10").getTime(), new Date("2019-03-16").getTime()],
         },
       ],
     },
@@ -120,17 +85,11 @@ const MultiRange = ({ height = 300 }) => {
       data: [
         {
           x: "Code",
-          y: [
-            new Date("2019-03-10").getTime(),
-            new Date("2019-03-17").getTime(),
-          ],
+          y: [new Date("2019-03-10").getTime(), new Date("2019-03-17").getTime()],
         },
         {
           x: "Validation",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-09").getTime(),
-          ],
+          y: [new Date("2019-03-05").getTime(), new Date("2019-03-09").getTime()],
           goals: [
             {
               name: "Break",
@@ -155,21 +114,17 @@ const MultiRange = ({ height = 300 }) => {
         barHeight: "80%",
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-    ],
+    colors: [colors.primary, colors.info, colors.success],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
     grid: getGridConfig(),
     yaxis: {
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
     },
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -181,7 +136,7 @@ const MultiRange = ({ height = 300 }) => {
       position: "top",
       horizontalAlign: "left",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -191,8 +146,8 @@ const MultiRange = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -201,15 +156,7 @@ const MultiRange = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="rangeBar" height={height} width={"100%"} />;
 };
 
 export default MultiRange;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-series.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-series.tsx
index 8c40fb43..acec4433 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-series.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/multi-series.tsx
@@ -1,46 +1,35 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getLabel,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
 import moment from "moment";
+import { useTheme } from "next-themes";
+
+import { getGridConfig, getLabel, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 const MultiSeries = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   const series = [
     {
       name: "Bob",
       data: [
         {
           x: "Design",
-          y: [
-            new Date("2019-03-05").getTime(),
-            new Date("2019-03-08").getTime(),
-          ],
+          y: [new Date("2019-03-05").getTime(), new Date("2019-03-08").getTime()],
         },
         {
           x: "Code",
-          y: [
-            new Date("2019-03-08").getTime(),
-            new Date("2019-03-11").getTime(),
-          ],
+          y: [new Date("2019-03-08").getTime(), new Date("2019-03-11").getTime()],
         },
         {
           x: "Test",
-          y: [
-            new Date("2019-03-11").getTime(),
-            new Date("2019-03-16").getTime(),
-          ],
+          y: [new Date("2019-03-11").getTime(), new Date("2019-03-16").getTime()],
         },
       ],
     },
@@ -49,24 +38,15 @@ const MultiSeries = ({ height = 300 }) => {
       data: [
         {
           x: "Design",
-          y: [
-            new Date("2019-03-02").getTime(),
-            new Date("2019-03-05").getTime(),
-          ],
+          y: [new Date("2019-03-02").getTime(), new Date("2019-03-05").getTime()],
         },
         {
           x: "Code",
-          y: [
-            new Date("2019-03-06").getTime(),
-            new Date("2019-03-09").getTime(),
-          ],
+          y: [new Date("2019-03-06").getTime(), new Date("2019-03-09").getTime()],
         },
         {
           x: "Test",
-          y: [
-            new Date("2019-03-10").getTime(),
-            new Date("2019-03-19").getTime(),
-          ],
+          y: [new Date("2019-03-10").getTime(), new Date("2019-03-19").getTime()],
         },
       ],
     },
@@ -105,10 +85,7 @@ const MultiSeries = ({ height = 300 }) => {
         stops: [50, 0, 100, 100],
       },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-    ],
+    colors: [colors.primary, colors.info],
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
     },
@@ -116,7 +93,7 @@ const MultiSeries = ({ height = 300 }) => {
 
     xaxis: {
       type: "datetime",
-      labels: getLabel(mode === 'light' ? colors["default-600"] : colors["default-300"]),
+      labels: getLabel(mode === "light" ? colors["default-600"] : colors["default-300"]),
       axisBorder: {
         show: false,
       },
@@ -124,13 +101,11 @@ const MultiSeries = ({ height = 300 }) => {
         show: false,
       },
     },
-    yaxis: getYAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     legend: {
       position: "top",
       labels: {
-        colors: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        colors: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
       itemMargin: {
         horizontal: 5,
@@ -140,8 +115,8 @@ const MultiSeries = ({ height = 300 }) => {
         width: 10,
         height: 10,
         radius: 10,
-        offsetX: config.isRtl ? 5 : -5
-      }
+        offsetX: config.isRtl ? 5 : -5,
+      },
     },
     padding: {
       top: 0,
@@ -150,15 +125,7 @@ const MultiSeries = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="rangeBar"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="rangeBar" height={height} width={"100%"} />;
 };
 
 export default MultiSeries;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/page.tsx
index 85976df5..bdc9b24d 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-timeline/page.tsx
@@ -1,65 +1,65 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicTimeline from "./basic-timeline";
 import CustomColor from "./custom-color";
-import MultiSeries from "./multi-series";
-import MultiRange from "./multi-range";
-import GroupRows from "./group-rows";
 import DumbbellTimelineChart from "./dumbbell-timeline";
+import GroupRows from "./group-rows";
+import MultiRange from "./multi-range";
+import MultiSeries from "./multi-series";
 
 const RangeChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic TimeLine Charts</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicTimeline />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Different Color For Each Bar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomColor />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multi Series Timeline</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultiSeries />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Advanced Timeline (Multiple Range)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultiRange />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multiple series (Group rows)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GroupRows />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Dumbbell Chart (Horizontal)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DumbbellTimelineChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic TimeLine Charts</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicTimeline />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Different Color For Each Bar</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomColor />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Multi Series Timeline</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MultiSeries />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Advanced Timeline (Multiple Range)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MultiRange />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Multiple series (Group rows)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GroupRows />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Dumbbell Chart (Horizontal)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DumbbellTimelineChart />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default RangeChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/basic-treemap.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/basic-treemap.tsx
index 9a4bf146..8819c5e7 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/basic-treemap.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/basic-treemap.tsx
@@ -1,101 +1,94 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const BasicTreeMap = ({ height = 300 }) => {
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
+  const series = [
+    {
+      data: [
         {
-            data: [
-                {
-                    x: 'New Delhi',
-                    y: 218
-                },
-                {
-                    x: 'Kolkata',
-                    y: 149
-                },
-                {
-                    x: 'Mumbai',
-                    y: 184
-                },
-                {
-                    x: 'Ahmedabad',
-                    y: 55
-                },
-                {
-                    x: 'Bangaluru',
-                    y: 84
-                },
-                {
-                    x: 'Pune',
-                    y: 31
-                },
-                {
-                    x: 'Chennai',
-                    y: 70
-                },
-                {
-                    x: 'Jaipur',
-                    y: 30
-                },
-                {
-                    x: 'Surat',
-                    y: 44
-                },
-                {
-                    x: 'Hyderabad',
-                    y: 68
-                },
-                {
-                    x: 'Lucknow',
-                    y: 28
-                },
-                {
-                    x: 'Indore',
-                    y: 19
-                },
-                {
-                    x: 'Kanpur',
-                    y: 29
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            }
+          x: "New Delhi",
+          y: 218,
         },
-        dataLabels: {
-            enabled: true,
+        {
+          x: "Kolkata",
+          y: 149,
         },
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
+        {
+          x: "Mumbai",
+          y: 184,
         },
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
+        {
+          x: "Ahmedabad",
+          y: 55,
+        },
+        {
+          x: "Bangaluru",
+          y: 84,
+        },
+        {
+          x: "Pune",
+          y: 31,
+        },
+        {
+          x: "Chennai",
+          y: 70,
+        },
+        {
+          x: "Jaipur",
+          y: 30,
+        },
+        {
+          x: "Surat",
+          y: 44,
+        },
+        {
+          x: "Hyderabad",
+          y: 68,
+        },
+        {
+          x: "Lucknow",
+          y: 28,
+        },
+        {
+          x: "Indore",
+          y: 19,
+        },
+        {
+          x: "Kanpur",
+          y: 29,
+        },
+      ],
+    },
+  ];
+  const options: any = {
+    chart: {
+      type: "treemap",
+      toolbar: {
+        show: false,
+      },
+    },
+    dataLabels: {
+      enabled: true,
+    },
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+  };
+  return <Chart options={options} series={series} type="treemap" height={height} width={"100%"} />;
 };
 
 export default BasicTreeMap;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/color-range.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/color-range.tsx
index f93be7a2..ee0e3bd7 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/color-range.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/color-range.tsx
@@ -1,133 +1,126 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const ColorRange = ({ height = 300 }) => {
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
+  const series = [
+    {
+      data: [
         {
-            data: [
-                {
-                    x: 'INTC',
-                    y: 1.2
-                },
-                {
-                    x: 'GS',
-                    y: 0.4
-                },
-                {
-                    x: 'CVX',
-                    y: -1.4
-                },
-                {
-                    x: 'GE',
-                    y: 2.7
-                },
-                {
-                    x: 'CAT',
-                    y: -0.3
-                },
-                {
-                    x: 'RTX',
-                    y: 5.1
-                },
-                {
-                    x: 'CSCO',
-                    y: -2.3
-                },
-                {
-                    x: 'JNJ',
-                    y: 2.1
-                },
-                {
-                    x: 'PG',
-                    y: 0.3
-                },
-                {
-                    x: 'TRV',
-                    y: 0.12
-                },
-                {
-                    x: 'MMM',
-                    y: -2.31
-                },
-                {
-                    x: 'NKE',
-                    y: 3.98
-                },
-                {
-                    x: 'IYT',
-                    y: 1.67
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            },
+          x: "INTC",
+          y: 1.2,
         },
-        dataLabels: {
-            enabled: true,
-            style: {
-                fontSize: '12px',
-            },
-            formatter: function (text: string, op: any) {
-                return [text, op.value]
-            },
-            offsetY: -4
+        {
+          x: "GS",
+          y: 0.4,
         },
-        plotOptions: {
-            treemap: {
-                enableShades: true,
-                shadeIntensity: 0.5,
-                reverseNegativeShade: true,
-                colorScale: {
-                    ranges: [
-                        {
-                            from: -6,
-                            to: 0,
-                            color: '#724bf1'
-                        },
-                        {
-                            from: 0.001,
-                            to: 6,
-                            color: '#52B12C'
-                        }
-                    ]
-                }
-            }
+        {
+          x: "CVX",
+          y: -1.4,
         },
+        {
+          x: "GE",
+          y: 2.7,
+        },
+        {
+          x: "CAT",
+          y: -0.3,
+        },
+        {
+          x: "RTX",
+          y: 5.1,
+        },
+        {
+          x: "CSCO",
+          y: -2.3,
+        },
+        {
+          x: "JNJ",
+          y: 2.1,
+        },
+        {
+          x: "PG",
+          y: 0.3,
+        },
+        {
+          x: "TRV",
+          y: 0.12,
+        },
+        {
+          x: "MMM",
+          y: -2.31,
+        },
+        {
+          x: "NKE",
+          y: 3.98,
+        },
+        {
+          x: "IYT",
+          y: 1.67,
+        },
+      ],
+    },
+  ];
+  const options: any = {
+    chart: {
+      type: "treemap",
+      toolbar: {
+        show: false,
+      },
+    },
+    dataLabels: {
+      enabled: true,
+      style: {
+        fontSize: "12px",
+      },
+      formatter: function (text: string, op: any) {
+        return [text, op.value];
+      },
+      offsetY: -4,
+    },
+    plotOptions: {
+      treemap: {
+        enableShades: true,
+        shadeIntensity: 0.5,
+        reverseNegativeShade: true,
+        colorScale: {
+          ranges: [
+            {
+              from: -6,
+              to: 0,
+              color: "#724bf1",
+            },
+            {
+              from: 0.001,
+              to: 6,
+              color: "#52B12C",
+            },
+          ],
+        },
+      },
+    },
 
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
-        },
-        legend: {
-            show: false
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+    legend: {
+      show: false,
+    },
+  };
+  return <Chart options={options} series={series} type="treemap" height={height} width={"100%"} />;
 };
 
 export default ColorRange;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/distributed-treemap.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/distributed-treemap.tsx
index 7601e971..346e8bfa 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/distributed-treemap.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/distributed-treemap.tsx
@@ -1,121 +1,114 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const DistributedTreeMap = ({ height = 300 }) => {
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
+  const series = [
+    {
+      data: [
         {
-            data: [
-                {
-                    x: 'New Delhi',
-                    y: 218
-                },
-                {
-                    x: 'Kolkata',
-                    y: 149
-                },
-                {
-                    x: 'Mumbai',
-                    y: 184
-                },
-                {
-                    x: 'Ahmedabad',
-                    y: 55
-                },
-                {
-                    x: 'Bangaluru',
-                    y: 84
-                },
-                {
-                    x: 'Pune',
-                    y: 31
-                },
-                {
-                    x: 'Chennai',
-                    y: 70
-                },
-                {
-                    x: 'Jaipur',
-                    y: 30
-                },
-                {
-                    x: 'Surat',
-                    y: 44
-                },
-                {
-                    x: 'Hyderabad',
-                    y: 68
-                },
-                {
-                    x: 'Lucknow',
-                    y: 28
-                },
-                {
-                    x: 'Indore',
-                    y: 19
-                },
-                {
-                    x: 'Kanpur',
-                    y: 29
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            },
+          x: "New Delhi",
+          y: 218,
         },
-        dataLabels: {
-            enabled: true,
+        {
+          x: "Kolkata",
+          y: 149,
         },
-        colors: [
-            '#3B93A5',
-            '#F7B844',
-            '#ADD8C7',
-            '#EC3C65',
-            '#CDD7B6',
-            '#C1F666',
-            '#D43F97',
-            '#1E5D8C',
-            '#421243',
-            '#7F94B0',
-            '#EF6537',
-            '#C0ADDB'
-        ],
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
+        {
+          x: "Mumbai",
+          y: 184,
         },
-        plotOptions: {
-            treemap: {
-                distributed: true,
-                enableShades: false
-            }
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
+        {
+          x: "Ahmedabad",
+          y: 55,
+        },
+        {
+          x: "Bangaluru",
+          y: 84,
+        },
+        {
+          x: "Pune",
+          y: 31,
+        },
+        {
+          x: "Chennai",
+          y: 70,
+        },
+        {
+          x: "Jaipur",
+          y: 30,
+        },
+        {
+          x: "Surat",
+          y: 44,
+        },
+        {
+          x: "Hyderabad",
+          y: 68,
+        },
+        {
+          x: "Lucknow",
+          y: 28,
+        },
+        {
+          x: "Indore",
+          y: 19,
+        },
+        {
+          x: "Kanpur",
+          y: 29,
+        },
+      ],
+    },
+  ];
+  const options: any = {
+    chart: {
+      type: "treemap",
+      toolbar: {
+        show: false,
+      },
+    },
+    dataLabels: {
+      enabled: true,
+    },
+    colors: [
+      "#3B93A5",
+      "#F7B844",
+      "#ADD8C7",
+      "#EC3C65",
+      "#CDD7B6",
+      "#C1F666",
+      "#D43F97",
+      "#1E5D8C",
+      "#421243",
+      "#7F94B0",
+      "#EF6537",
+      "#C0ADDB",
+    ],
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+    plotOptions: {
+      treemap: {
+        distributed: true,
+        enableShades: false,
+      },
+    },
+  };
+  return <Chart options={options} series={series} type="treemap" height={height} width={"100%"} />;
 };
 
 export default DistributedTreeMap;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/multiple-series-treemap.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/multiple-series-treemap.tsx
index 652ebaa8..e0fda7f9 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/multiple-series-treemap.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/multiple-series-treemap.tsx
@@ -1,95 +1,88 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+import { hexToRGB } from "@/lib/utils/utils";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const MultipleSeriesTreeMap = ({ height = 300 }) => {
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
-
-
-    const series = [
+  const series = [
+    {
+      name: "Desktops",
+      data: [
         {
-            name: 'Desktops',
-            data: [
-                {
-                    x: 'ABC',
-                    y: 10
-                },
-                {
-                    x: 'DEF',
-                    y: 60
-                },
-                {
-                    x: 'XYZ',
-                    y: 41
-                }
-            ]
+          x: "ABC",
+          y: 10,
         },
         {
-            name: 'Mobile',
-            data: [
-                {
-                    x: 'ABCD',
-                    y: 10
-                },
-                {
-                    x: 'DEFG',
-                    y: 20
-                },
-                {
-                    x: 'WXYZ',
-                    y: 51
-                },
-                {
-                    x: 'PQR',
-                    y: 30
-                },
-                {
-                    x: 'MNO',
-                    y: 20
-                },
-                {
-                    x: 'CDE',
-                    y: 30
-                }
-            ]
-        }
-    ];
-    const options: any = {
-        chart: {
-            type: 'treemap',
-            toolbar: {
-                show: false,
-            },
+          x: "DEF",
+          y: 60,
         },
-        dataLabels: {
-            enabled: true,
+        {
+          x: "XYZ",
+          y: 41,
         },
-        colors: ["#62f78c"],
-        padding: {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0,
+      ],
+    },
+    {
+      name: "Mobile",
+      data: [
+        {
+          x: "ABCD",
+          y: 10,
         },
-        legend: {
-            show: false
-        }
-    };
-    return (
-        <Chart
-            options={options}
-            series={series}
-            type="treemap"
-            height={height}
-            width={"100%"}
-        />
-    );
+        {
+          x: "DEFG",
+          y: 20,
+        },
+        {
+          x: "WXYZ",
+          y: 51,
+        },
+        {
+          x: "PQR",
+          y: 30,
+        },
+        {
+          x: "MNO",
+          y: 20,
+        },
+        {
+          x: "CDE",
+          y: 30,
+        },
+      ],
+    },
+  ];
+  const options: any = {
+    chart: {
+      type: "treemap",
+      toolbar: {
+        show: false,
+      },
+    },
+    dataLabels: {
+      enabled: true,
+    },
+    colors: ["#62f78c"],
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
+    legend: {
+      show: false,
+    },
+  };
+  return <Chart options={options} series={series} type="treemap" height={height} width={"100%"} />;
 };
 
 export default MultipleSeriesTreeMap;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/page.tsx b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/page.tsx
index f7f596da..d39ac83d 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/page.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/charts-appex-treemap/page.tsx
@@ -1,47 +1,47 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicTreeMap from "./basic-treemap";
-import MultipleSeriesTreeMap from "./multiple-series-treemap";
 import ColorRange from "./color-range";
 import DistributedTreeMap from "./distributed-treemap";
+import MultipleSeriesTreeMap from "./multiple-series-treemap";
 
 const TreeMapChartPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicTreeMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multi-Dimensional Treemap Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleSeriesTreeMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle> Color Range</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ColorRange />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Distributed Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DistributedTreeMap />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Tree Map</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicTreeMap />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Multi-Dimensional Treemap Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MultipleSeriesTreeMap />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle> Color Range</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ColorRange />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Distributed Tree Map</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DistributedTreeMap />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default TreeMapChartPage;
diff --git a/src/app/[locale]/(protected)/charts/appex-charts/layout.tsx b/src/app/[locale]/(protected)/charts/appex-charts/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/charts/appex-charts/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/appex-charts/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/delay-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/delay-chart.tsx
index de20d1ec..c6dbb2ea 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/delay-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/delay-chart.tsx
@@ -1,55 +1,28 @@
 "use client";
+
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Bar } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Bar } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, PointElement);
 
 const DelayChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   const data: any = {
     labels: labels,
@@ -84,10 +57,10 @@ const DelayChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
-      }
+      },
     },
     animation: {
       onComplete: () => {
@@ -113,14 +86,14 @@ const DelayChart = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           stepSize: 50,
         },
       },
       x: {
         stacked: true,
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
         },
         grid: {
@@ -129,7 +102,7 @@ const DelayChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/drop-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/drop-chart.tsx
index 99426cf4..4f3e0da3 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/drop-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/drop-chart.tsx
@@ -1,53 +1,28 @@
 "use client";
+
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const DropChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   const data: any = {
     labels: labels,
@@ -80,10 +55,10 @@ const DropChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
-      }
+      },
     },
     animation: {
       y: {
@@ -110,13 +85,13 @@ const DropChart = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
         stacked: true,
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
         },
         grid: {
@@ -125,9 +100,9 @@ const DropChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
+      },
     },
     maintainAspectRatio: false,
   };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/layout.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/layout.tsx
index a2e6272c..cec4e62a 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/layout.tsx
@@ -6,4 +6,4 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/loop-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/loop-chart.tsx
index 17b05b28..0175d343 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/loop-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/loop-chart.tsx
@@ -1,54 +1,28 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const LoopChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   const data: any = {
     labels: labels,
@@ -81,7 +55,7 @@ const LoopChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
       },
@@ -108,13 +82,13 @@ const LoopChart = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
         stacked: true,
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
         },
         grid: {
@@ -123,7 +97,7 @@ const LoopChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/page.tsx
index 3e22aacd..06d74c3f 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/page.tsx
@@ -1,10 +1,9 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import PrograssiveLine from "./prograssive-line";
+
 import DelayChart from "./delay-chart";
 import DropChart from "./drop-chart";
 import LoopChart from "./loop-chart";
-
+import PrograssiveLine from "./prograssive-line";
 
 const ChartsChartJsAnimation = () => {
   return (
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/prograssive-line.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/prograssive-line.tsx
index d870f199..0d931f48 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/prograssive-line.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-animations/prograssive-line.tsx
@@ -1,52 +1,27 @@
 "use client";
+
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const ProgressiveLine = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   var data = [];
   let data2 = [];
@@ -64,9 +39,7 @@ const ProgressiveLine = ({ height = 350 }) => {
   const previousY = (ctx: any) =>
     ctx.index === 0
       ? ctx.chart.scales.y.getPixelForValue(100)
-      : ctx.chart
-        .getDatasetMeta(ctx.datasetIndex)
-        .data[ctx.index - 1].getProps(["y"], true).y;
+      : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(["y"], true).y;
   const animation = {
     x: {
       type: "number",
@@ -122,7 +95,7 @@ const ProgressiveLine = ({ height = 350 }) => {
       legend: {
         legend: false,
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
       },
@@ -143,14 +116,14 @@ const ProgressiveLine = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
         type: "linear",
         stacked: true,
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
         },
         grid: {
@@ -159,9 +132,9 @@ const ProgressiveLine = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
+      },
     },
 
     maintainAspectRatio: false,
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/basic-area.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/basic-area.tsx
index 55ee671e..2ce81081 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/basic-area.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/basic-area.tsx
@@ -1,41 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const BasicArea = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -55,7 +40,7 @@ const BasicArea = ({ height = 350 }) => {
       },
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -67,7 +52,7 @@ const BasicArea = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -77,9 +62,9 @@ const BasicArea = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-        }
-      }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
+      },
     },
 
     maintainAspectRatio: false,
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/draw-time.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/draw-time.tsx
index d2dab40e..34946286 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/draw-time.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/draw-time.tsx
@@ -1,43 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const DrawTime = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -54,8 +37,8 @@ const DrawTime = ({ height = 350 }) => {
         borderColor: colors.warning,
         backgroundColor: hexToRGB(colors.warning, 0.4),
         fill: true,
-      }
-    ]
+      },
+    ],
   };
 
   const options: any = {
@@ -66,14 +49,14 @@ const DrawTime = ({ height = 350 }) => {
       },
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       interaction: {
         mode: "nearest",
         axis: "x",
         intersect: false,
-      }
+      },
     },
 
     scales: {
@@ -83,7 +66,7 @@ const DrawTime = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -93,7 +76,7 @@ const DrawTime = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/line-datasets.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/line-datasets.tsx
index 3af09226..9aa1d760 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/line-datasets.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/line-datasets.tsx
@@ -1,48 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const LineDatasets = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -84,7 +62,7 @@ const LineDatasets = ({ height = 350 }) => {
       },
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -99,7 +77,7 @@ const LineDatasets = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -109,7 +87,7 @@ const LineDatasets = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -119,11 +97,7 @@ const LineDatasets = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/linechart-stacked.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/linechart-stacked.tsx
index 88ded9f6..e94cb85c 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/linechart-stacked.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/linechart-stacked.tsx
@@ -1,47 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const LineChartStacked = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -83,7 +62,7 @@ const LineChartStacked = ({ height = 350 }) => {
       },
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -95,7 +74,7 @@ const LineChartStacked = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         stacked: true,
       },
@@ -107,7 +86,7 @@ const LineChartStacked = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -116,11 +95,7 @@ const LineChartStacked = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/page.tsx
index 6fe96448..a4f8b2d4 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/page.tsx
@@ -1,55 +1,56 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicArea from "./basic-area";
-import LineDatasets from "./line-datasets";
 import DrawTime from "./draw-time";
+import LineDatasets from "./line-datasets";
 import LineChartStacked from "./linechart-stacked";
 import RadarStacked from "./radar-stacked";
 
 const ChartsChartJsAreaPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Boundaries</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicArea />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Datasets</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LineDatasets />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Draw Time</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DrawTime />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Line Chart Stacked</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LineChartStacked />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Radar Chart Stacked</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RadarStacked />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Line Chart Boundaries</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicArea />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Line Chart Datasets</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LineDatasets />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Line Chart Draw Time</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DrawTime />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Line Chart Stacked</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LineChartStacked />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Radar Chart Stacked</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RadarStacked />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartsChartJsAreaPage;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/radar-stacked.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/radar-stacked.tsx
index 210fd817..df0d94c6 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/radar-stacked.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-area/radar-stacked.tsx
@@ -1,22 +1,22 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
-  Title,
-  Tooltip,
-  Legend,
   PointElement,
   RadialLinearScale,
+  Title,
+  Tooltip,
 } from "chart.js";
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Radar } from "react-chartjs-2";
 
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -29,31 +29,10 @@ ChartJS.register(
 );
 
 const RadarStacked = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
-    labels: [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-    ],
+    labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
     datasets: [
       {
         label: "Dataset 1",
@@ -93,7 +72,7 @@ const RadarStacked = ({ height = 350 }) => {
       },
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/basic-bar.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/basic-bar.tsx
index 1a413e55..c57affa1 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/basic-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/basic-bar.tsx
@@ -1,39 +1,25 @@
 "use client";
 
 import {
+  BarElement,
+  CategoryScale,
   Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
   Legend,
-} from "chart.js";
-import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
   LinearScale,
-  BarElement,
   Title,
   Tooltip,
-  Legend
-);
+} from "chart.js";
+import { useTheme } from "next-themes";
+import { Bar } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const BasicBar = ({ height = 350 }: { height?: number }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -67,7 +53,7 @@ const BasicBar = ({ height = 350 }: { height?: number }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -82,8 +68,7 @@ const BasicBar = ({ height = 350 }: { height?: number }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -93,8 +78,8 @@ const BasicBar = ({ height = 350 }: { height?: number }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
       },
     },
 
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/floating-bar.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/floating-bar.tsx
index 91dff689..725e9944 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/floating-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/floating-bar.tsx
@@ -1,42 +1,25 @@
 "use client";
 
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
   Title,
   Tooltip,
-  Legend,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Bar } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const FloatingBar = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -87,7 +70,7 @@ const FloatingBar = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -102,7 +85,7 @@ const FloatingBar = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -112,7 +95,7 @@ const FloatingBar = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -122,11 +105,7 @@ const FloatingBar = ({ height = 350 }) => {
 
   return (
     <div>
-      <Bar
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Bar options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/horizontal-bar.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/horizontal-bar.tsx
index 67251a92..eebd5365 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/horizontal-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/horizontal-bar.tsx
@@ -1,42 +1,25 @@
 "use client";
 
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
   Title,
   Tooltip,
-  Legend,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Bar } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const HorizontalBar = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -79,8 +62,8 @@ const HorizontalBar = ({ height = 350 }) => {
         borderRadius: "0",
         borderSkipped: "bottom",
         barThickness: 25,
-      }
-    ]
+      },
+    ],
   };
   const options: any = {
     indexAxis: "y",
@@ -88,7 +71,7 @@ const HorizontalBar = ({ height = 350 }) => {
     plugins: {
       position: "right",
       labels: {
-        color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+        color: mode === "light" ? colors["default-600"] : colors["default-300"],
       },
     },
     scales: {
@@ -101,7 +84,7 @@ const HorizontalBar = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -111,7 +94,7 @@ const HorizontalBar = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/page.tsx
index f09e610c..66fb6114 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/page.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicBar from "./basic-bar";
 import FloatingBar from "./floating-bar";
 import HorizontalBar from "./horizontal-bar";
@@ -7,58 +8,58 @@ import StackedBarWithGroups from "./stackedbar-with-groups";
 import VerticalBar from "./vertical-bar";
 
 const ChartsChartJsBarPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart Border Radius</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Floating Bars</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <FloatingBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Horizontal Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <HorizontalBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked  Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bar Chart with Groups</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBarWithGroups />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Vertical Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <VerticalBar />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart Border Radius</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Floating Bars</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <FloatingBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Horizontal Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <HorizontalBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stacked Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stacked Bar Chart with Groups</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedBarWithGroups />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Vertical Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <VerticalBar />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartsChartJsBarPage;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stacked-bar.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stacked-bar.tsx
index bb1c9e3d..c9c72b3a 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stacked-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stacked-bar.tsx
@@ -1,43 +1,25 @@
 "use client";
 
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
   Title,
   Tooltip,
-  Legend,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Bar } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const StackedBar = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -84,7 +66,7 @@ const StackedBar = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -100,7 +82,7 @@ const StackedBar = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -111,7 +93,7 @@ const StackedBar = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stackedbar-with-groups.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stackedbar-with-groups.tsx
index 6c972e72..1bd00056 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stackedbar-with-groups.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/stackedbar-with-groups.tsx
@@ -1,43 +1,25 @@
 "use client";
 
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
   Title,
   Tooltip,
-  Legend,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Bar } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const StackedBarWithGroups = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -87,7 +69,7 @@ const StackedBarWithGroups = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -103,7 +85,7 @@ const StackedBarWithGroups = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -114,7 +96,7 @@ const StackedBarWithGroups = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/vertical-bar.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/vertical-bar.tsx
index 2c1dd6cf..a14b7bcf 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/vertical-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-bar/vertical-bar.tsx
@@ -1,41 +1,25 @@
 "use client";
 
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
   Title,
   Tooltip,
-  Legend,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Bar } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Bar } from "react-chartjs-2";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const VerticalBar = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -70,7 +54,7 @@ const VerticalBar = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -85,7 +69,7 @@ const VerticalBar = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -95,7 +79,7 @@ const VerticalBar = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/alignment-andtitle-position.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/alignment-andtitle-position.tsx
index fca311c2..eb97f351 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/alignment-andtitle-position.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/alignment-andtitle-position.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,10 +29,8 @@ ChartJS.register(
 );
 
 const AlignmentAndTitlePosition = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -51,12 +48,12 @@ const AlignmentAndTitlePosition = ({ height = 350 }) => {
       legend: {
         position: "bottom",
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
           text: "The Chart Title",
         },
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -70,7 +67,7 @@ const AlignmentAndTitlePosition = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -80,7 +77,7 @@ const AlignmentAndTitlePosition = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-events.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-events.tsx
index 0678fa9a..a73ecea9 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-events.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-events.tsx
@@ -1,57 +1,39 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Doughnut } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, ArcElement);
 
 const LegendEvents = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["Primary", "Info", "Warning", "Success", "Muted"],
     datasets: [
       {
         label: "Dataset 1",
         data: [20, 50, 60, 70, 20],
-        backgroundColor: [colors.primary, colors.info, colors.warning, colors.success, colors.secondary],
+        backgroundColor: [
+          colors.primary,
+          colors.info,
+          colors.warning,
+          colors.success,
+          colors.secondary,
+        ],
       },
     ],
   };
@@ -60,7 +42,7 @@ const LegendEvents = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -69,11 +51,7 @@ const LegendEvents = ({ height = 350 }) => {
 
   return (
     <div>
-      <Doughnut
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Doughnut options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-html.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-html.tsx
index 4d30fcb4..7b77f150 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-html.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-html.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
 } from "chart.js";
-
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { colors } from "@/lib/colors";
 import { Line } from "react-chartjs-2";
 
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,14 +29,8 @@ ChartJS.register(
 );
 
 const LegendHTML = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -60,7 +53,7 @@ const LegendHTML = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -74,7 +67,7 @@ const LegendHTML = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -84,7 +77,7 @@ const LegendHTML = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -93,11 +86,7 @@ const LegendHTML = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-position.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-position.tsx
index a022b087..5269e43b 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-position.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/legend-position.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,10 +29,8 @@ ChartJS.register(
 );
 
 const LegendPosition = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -51,7 +48,7 @@ const LegendPosition = ({ height = 350 }) => {
       legend: {
         position: "bottom",
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -65,7 +62,7 @@ const LegendPosition = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -75,7 +72,7 @@ const LegendPosition = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -84,10 +81,7 @@ const LegendPosition = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height} />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/page.tsx
index e9708f87..1dfd61fe 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/page.tsx
@@ -1,56 +1,56 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+import AlignmentAndTitlePosition from "./alignment-andtitle-position";
 import LegendEvents from "./legend-events";
 import LegendHTML from "./legend-html";
-import PointStyle from "./point-style";
 import LegendPosition from "./legend-position";
-import AlignmentAndTitlePosition from "./alignment-andtitle-position";
-
+import PointStyle from "./point-style";
 
 const ChartsChartJsLegendPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Events</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LegendEvents />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>HTML Legend(incompleted)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LegendHTML />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Point Style</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PointStyle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Legend Position</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <LegendPosition />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Alignment and Title Position</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <AlignmentAndTitlePosition />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Events</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LegendEvents />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>HTML Legend(incompleted)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LegendHTML />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Point Style</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PointStyle />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Legend Position</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <LegendPosition />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Alignment and Title Position</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <AlignmentAndTitlePosition />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartsChartJsLegendPage;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/point-style.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/point-style.tsx
index 3ac59d40..c27bc896 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/point-style.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-legend/point-style.tsx
@@ -1,22 +1,22 @@
 "use client";
+
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -29,10 +29,8 @@ ChartJS.register(
 );
 
 const PointStyle = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -53,7 +51,7 @@ const PointStyle = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -67,7 +65,7 @@ const PointStyle = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -77,7 +75,7 @@ const PointStyle = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/basic-line.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/basic-line.tsx
index e1730b3b..e163f35a 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/basic-line.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/basic-line.tsx
@@ -1,44 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const BasicLine = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -61,7 +43,7 @@ const BasicLine = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -69,14 +51,14 @@ const BasicLine = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -86,7 +68,7 @@ const BasicLine = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -96,11 +78,7 @@ const BasicLine = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/interpolation-modes.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/interpolation-modes.tsx
index 8ee31151..3dfefaa4 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/interpolation-modes.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/interpolation-modes.tsx
@@ -1,46 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const InterpolationModes = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
   const DATA_COUNT = 12;
   const labels = [];
   for (let i = 0; i < DATA_COUNT; ++i) {
@@ -74,7 +54,7 @@ const InterpolationModes = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -82,14 +62,14 @@ const InterpolationModes = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -99,7 +79,7 @@ const InterpolationModes = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -109,11 +89,7 @@ const InterpolationModes = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/layout.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/layout.tsx
index 36439c03..1336e2c7 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/layout.tsx
@@ -7,4 +7,3 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 };
 
 export default Layout;
-
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/line-styling.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/line-styling.tsx
index 149cd2f5..eece5552 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/line-styling.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/line-styling.tsx
@@ -1,23 +1,22 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
-  Filler,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
+
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
 
 ChartJS.register(
   CategoryScale,
@@ -31,28 +30,9 @@ ChartJS.register(
 );
 
 const LineStyling = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   const data: any = {
     labels: labels,
@@ -88,9 +68,9 @@ const LineStyling = ({ height = 350 }) => {
       },
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
+      },
     },
 
     scales: {
@@ -100,30 +80,26 @@ const LineStyling = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
         grid: {
           drawTicks: false,
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-        }
-      }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
+      },
     },
     maintainAspectRatio: false,
   };
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/linesegment-styling.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/linesegment-styling.tsx
index d703fb7a..dfcc4e94 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/linesegment-styling.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/linesegment-styling.tsx
@@ -1,32 +1,22 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 interface Context {
   p0: {
@@ -40,36 +30,15 @@ interface Context {
 }
 
 const LineSegmentStyling = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
   const skipped = (ctx: Context, value: string | number): string | number | undefined =>
     ctx.p0.skip || ctx.p1.skip ? value : undefined;
 
   const down = (ctx: Context, value: string | number): string | number | undefined =>
     ctx.p0.parsed.y > ctx.p1.parsed.y ? value : undefined;
 
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   const data: any = {
     labels: labels,
@@ -79,11 +48,11 @@ const LineSegmentStyling = ({ height = 350 }) => {
         data: [65, 59, NaN, 48, 56, 57, 40],
         borderColor: hexToRGB(colors.info, 0.5),
         segment: {
-          borderColor: (ctx: Context) =>
-            skipped(ctx, colors.primary) || down(ctx, colors.danger),
-          borderDash: (ctx: Context): number[] | undefined => skipped(ctx, [6, 6] as any) as number[] | undefined
+          borderColor: (ctx: Context) => skipped(ctx, colors.primary) || down(ctx, colors.danger),
+          borderDash: (ctx: Context): number[] | undefined =>
+            skipped(ctx, [6, 6] as any) as number[] | undefined,
         },
-        spanGaps: true
+        spanGaps: true,
       },
     ],
   };
@@ -92,7 +61,7 @@ const LineSegmentStyling = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -100,14 +69,14 @@ const LineSegmentStyling = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -117,7 +86,7 @@ const LineSegmentStyling = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -126,11 +95,7 @@ const LineSegmentStyling = ({ height = 350 }) => {
   };
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/multi-axisline-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/multi-axisline-chart.tsx
index 66b9ba52..e56fac9e 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/multi-axisline-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/multi-axisline-chart.tsx
@@ -1,72 +1,41 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const MultiAxisLineChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
   const data: any = {
     labels,
     datasets: [
       {
         label: "Dataset 1",
-        data: labels.map(() =>
-          faker.number.int({ min: -1000, max: 1000 })
-        ),
+        data: labels.map(() => faker.number.int({ min: -1000, max: 1000 })),
         borderColor: hexToRGB(colors.danger, 0.5),
         backgroundColor: hexToRGB(colors.danger, 0.5),
         yAxisID: "y",
       },
       {
         label: "Dataset 2",
-        data: labels.map(() =>
-          faker.number.int({ min: -1000, max: 1000 })
-        ),
+        data: labels.map(() => faker.number.int({ min: -1000, max: 1000 })),
         borderColor: hexToRGB(colors.primary, 0.5),
         backgroundColor: hexToRGB(colors.primary, 0.5),
         yAxisID: "y1",
@@ -79,7 +48,7 @@ const MultiAxisLineChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -87,14 +56,14 @@ const MultiAxisLineChart = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       y1: {
@@ -111,7 +80,7 @@ const MultiAxisLineChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -121,11 +90,7 @@ const MultiAxisLineChart = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/page.tsx
index 592bf143..94d2aefd 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/page.tsx
@@ -1,12 +1,12 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicLine from "./basic-line";
 import InterpolationModes from "./interpolation-modes";
+import LineStyling from "./line-styling";
+import LineSegmentStyling from "./linesegment-styling";
 import MultiAxisLineChart from "./multi-axisline-chart";
 import PointStyling from "./point-styling";
-import LineSegmentStyling from "./linesegment-styling";
 import SteppedLineCharts from "./steppedline-charts";
-import LineStyling from "./line-styling";
 
 const ChartsChartJsBar = () => {
   return (
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/point-styling.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/point-styling.tsx
index bfb18d8f..4c4b012f 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/point-styling.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/point-styling.tsx
@@ -1,41 +1,27 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const PointStyling = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const labels = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6"];
 
   const data: any = {
@@ -49,15 +35,15 @@ const PointStyling = ({ height = 350 }) => {
         pointStyle: "circle",
         pointRadius: 10,
         pointHoverRadius: 15,
-      }
-    ]
+      },
+    ],
   };
   const options: any = {
     responsive: true,
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -65,14 +51,14 @@ const PointStyling = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -82,7 +68,7 @@ const PointStyling = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -92,11 +78,7 @@ const PointStyling = ({ height = 350 }) => {
 
   return (
     <div>
-      <Line
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Line options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/steppedline-charts.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/steppedline-charts.tsx
index c08058d4..bea06913 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/steppedline-charts.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-line/steppedline-charts.tsx
@@ -1,43 +1,27 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const SteppedLineCharts = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
   const labels = ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5", "Day 6"];
 
   const data: any = {
@@ -57,7 +41,7 @@ const SteppedLineCharts = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -65,14 +49,14 @@ const SteppedLineCharts = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -82,7 +66,7 @@ const SteppedLineCharts = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/bubble-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/bubble-chart.tsx
index b676ecbd..432f8920 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/bubble-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/bubble-chart.tsx
@@ -1,43 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Bubble } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const BubbleChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -80,7 +63,7 @@ const BubbleChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -88,14 +71,14 @@ const BubbleChart = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -105,7 +88,7 @@ const BubbleChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/centeredpoint-labels.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/centeredpoint-labels.tsx
index 3586ab87..9ca48743 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/centeredpoint-labels.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/centeredpoint-labels.tsx
@@ -1,22 +1,20 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  RadialLinearScale,
   Title,
   Tooltip,
-  Legend,
-  RadialLinearScale,
 } from "chart.js";
-
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { colors } from "@/lib/colors";
 import { PolarArea } from "react-chartjs-2";
 
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
 
 ChartJS.register(
   CategoryScale,
@@ -29,21 +27,8 @@ ChartJS.register(
 );
 
 const PolarAreaCenteredPointLabel = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["Primary", "Info", "Warning", "Success"],
     datasets: [
@@ -59,7 +44,7 @@ const PolarAreaCenteredPointLabel = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/combo-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/combo-chart.tsx
index b1dc330d..60f2f532 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/combo-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/combo-chart.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  BarElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
-  BarElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Bar } from "react-chartjs-2";
 
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,16 +29,8 @@ ChartJS.register(
 );
 
 const ComboChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -65,7 +56,7 @@ const ComboChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -73,14 +64,14 @@ const ComboChart = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -90,7 +81,7 @@ const ComboChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/doughnut-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/doughnut-chart.tsx
index 3eb6f080..f2a8683f 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/doughnut-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/doughnut-chart.tsx
@@ -1,47 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Doughnut } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, ArcElement);
 
 const DoughnutChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["Primary", "Info", "Warning", "Success"],
     datasets: [
@@ -62,7 +41,7 @@ const DoughnutChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/multi-series-pie.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/multi-series-pie.tsx
index 3f5a107d..6c56400e 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/multi-series-pie.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/multi-series-pie.tsx
@@ -1,48 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Doughnut } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, ArcElement);
 
 const MultiSeriesPieChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["Primary", "Info", "Warning", "Success"],
     datasets: [
@@ -69,7 +47,7 @@ const MultiSeriesPieChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx
index e8931937..0739d68a 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/page.tsx
@@ -1,93 +1,92 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import MultiSeriesPieChart from "./multi-series-pie";
-import PolarAreaChart from "./polar-area";
-import PolarAreaCenteredPointLabel from "./centeredpoint-labels";
-import RadarChart from "./radar-chart";
+
 import BubbleChart from "./bubble-chart";
+import PolarAreaCenteredPointLabel from "./centeredpoint-labels";
 import ComboChart from "./combo-chart";
 import DoughnutChart from "./doughnut-chart";
+import MultiSeriesPieChart from "./multi-series-pie";
 import PieChart from "./pie-chart";
+import PolarAreaChart from "./polar-area";
+import RadarChart from "./radar-chart";
 import ScatterChart from "./scatter-chart";
 
-
 const ChartsChartJsOther = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BubbleChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Combo bar/line</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ComboChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Doughnut Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <DoughnutChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multi Series Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultiSeriesPieChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PieChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Polar Area</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PolarAreaChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Polar Area Centered Point Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PolarAreaCenteredPointLabel />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Radar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <RadarChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScatterChart />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Bubble Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BubbleChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Combo bar/line</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ComboChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Doughnut Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <DoughnutChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Multi Series Pie Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MultiSeriesPieChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Pie Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PieChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Polar Area</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PolarAreaChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Polar Area Centered Point Labels</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PolarAreaCenteredPointLabel />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Radar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <RadarChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Scatter Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ScatterChart />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartsChartJsOther;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/pie-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/pie-chart.tsx
index 93c75e82..a2218713 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/pie-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/pie-chart.tsx
@@ -1,48 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Doughnut } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, ArcElement);
 
 const PieChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["Primary", "Info", "Warning", "Success"],
     datasets: [
@@ -58,7 +36,7 @@ const PieChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -67,11 +45,7 @@ const PieChart = ({ height = 350 }) => {
 
   return (
     <div>
-      <Doughnut
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Doughnut options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/polar-area.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/polar-area.tsx
index abfb1151..c7ea9084 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/polar-area.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/polar-area.tsx
@@ -1,22 +1,20 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  RadialLinearScale,
   Title,
   Tooltip,
-  Legend,
-  RadialLinearScale,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { PolarArea } from "react-chartjs-2";
 
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
 
 ChartJS.register(
   CategoryScale,
@@ -29,21 +27,8 @@ ChartJS.register(
 );
 
 const PolarAreaChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["Primary", "Info", "Warning", "Success"],
     datasets: [
@@ -59,7 +44,7 @@ const PolarAreaChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -68,11 +53,7 @@ const PolarAreaChart = ({ height = 350 }) => {
 
   return (
     <div>
-      <PolarArea
-        options={options}
-        data={data}
-        height={height}
-      />
+      <PolarArea options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/radar-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/radar-chart.tsx
index cd1486e2..3e7254c6 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/radar-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/radar-chart.tsx
@@ -1,51 +1,28 @@
 "use client";
+
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Radar } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, ArcElement);
 
 const RadarChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
   const data: any = {
-    labels: [
-      "Eating",
-      "Drinking",
-      "Sleeping",
-      "Designing",
-      "Coding",
-      "Cycling",
-      "Running",
-    ],
+    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
     datasets: [
       {
         label: "My First Dataset",
@@ -76,7 +53,7 @@ const RadarChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -85,11 +62,7 @@ const RadarChart = ({ height = 350 }) => {
 
   return (
     <div>
-      <Radar
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Radar options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/scatter-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/scatter-chart.tsx
index e480c841..884b0328 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/scatter-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-other/scatter-chart.tsx
@@ -1,45 +1,28 @@
 "use client";
+
 import React from "react";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
   Title,
   Tooltip,
-  Legend,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Scatter } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend);
 
 const ScatterChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data: any = {
-    labels: [
-      "Eating",
-      "Drinking",
-      "Sleeping",
-      "Designing",
-      "Coding",
-      "Cycling",
-      "Running",
-    ],
+    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
     datasets: [
       {
         label: "Scatter Dataset",
@@ -67,14 +50,14 @@ const ScatterChart = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -84,7 +67,7 @@ const ScatterChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -94,7 +77,7 @@ const ScatterChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -103,11 +86,7 @@ const ScatterChart = ({ height = 350 }) => {
 
   return (
     <div>
-      <Scatter
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Scatter options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/center-positioning.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/center-positioning.tsx
index eacf3547..0e15267f 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/center-positioning.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/center-positioning.tsx
@@ -1,50 +1,28 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Scatter } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const CenterPositioningScale = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const data: any = {
-    labels: [
-      "Eating",
-      "Drinking",
-      "Sleeping",
-      "Designing",
-      "Coding",
-      "Cycling",
-      "Running",
-    ],
+    labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
     datasets: [
       {
         label: "Dataset 1",
@@ -120,27 +98,25 @@ const CenterPositioningScale = ({ height = 350 }) => {
       },
     ],
     scales: {
-
       y: {
         border: {
           display: false,
         },
         grid: {
-          display: false
+          display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
-
         grid: {
           drawTicks: false,
           display: false,
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -150,7 +126,7 @@ const CenterPositioningScale = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -159,11 +135,7 @@ const CenterPositioningScale = ({ height = 350 }) => {
 
   return (
     <div>
-      <Scatter
-        options={options}
-        data={data}
-        height={height}
-      />
+      <Scatter options={options} data={data} height={height} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/grid-configure.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/grid-configure.tsx
index 5b6f95b6..daa15004 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/grid-configure.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/grid-configure.tsx
@@ -1,46 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { colors } from "@/lib/colors";
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const GridConfigure = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -63,7 +43,7 @@ const GridConfigure = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -74,10 +54,10 @@ const GridConfigure = ({ height = 350 }) => {
           display: false,
         },
         grid: {
-          display: false
+          display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -91,7 +71,7 @@ const GridConfigure = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/page.tsx
index 2d1db47a..636b5bd1 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/page.tsx
@@ -1,48 +1,47 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import CenterPositioningScale from "./center-positioning";
 import GridConfigure from "./grid-configure";
 import TickConfiguration from "./tick-configuration";
 import TitleConfiguration from "./title-configuration";
 
-
 const ChartsChartJsScaleOptions = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Center Positioning</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CenterPositioningScale />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Grid Configuration</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <GridConfigure />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Tick Configuration</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TickConfiguration />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Title Configuration</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TitleConfiguration />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Center Positioning</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CenterPositioningScale />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Grid Configuration</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <GridConfigure />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Tick Configuration</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TickConfiguration />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Title Configuration</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TitleConfiguration />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartsChartJsScaleOptions;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/tick-configuration.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/tick-configuration.tsx
index 701b436b..9725f999 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/tick-configuration.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/tick-configuration.tsx
@@ -1,41 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const TickConfiguration = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -58,9 +43,9 @@ const TickConfiguration = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
-        }
-      }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
+      },
     },
 
     scales: {
@@ -73,7 +58,7 @@ const TickConfiguration = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -85,7 +70,7 @@ const TickConfiguration = ({ height = 350 }) => {
           callback: function (val: number, index: number) {
             return index % 2 === 0 ? this.getLabelForValue(val) : "";
           },
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         } as any,
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/title-configuration.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/title-configuration.tsx
index 00b74f90..5bdf8de3 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/title-configuration.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scaleoptions/title-configuration.tsx
@@ -1,40 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const TitleConfiguration = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -49,15 +35,15 @@ const TitleConfiguration = ({ height = 350 }) => {
         data: [24, 42, 40, 19, 86, 27, 90],
         borderColor: hexToRGB(colors.warning),
         tension: 0.1,
-      }
-    ]
+      },
+    ],
   };
   const options: any = {
     responsive: true,
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -68,7 +54,7 @@ const TitleConfiguration = ({ height = 350 }) => {
           display: false,
         },
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
           text: "YAxis Title",
           font: {
@@ -84,12 +70,12 @@ const TitleConfiguration = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
           text: "XAxis Title",
           font: {
@@ -105,7 +91,7 @@ const TitleConfiguration = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-minmax.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-minmax.tsx
index 854f6754..77378582 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-minmax.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-minmax.tsx
@@ -1,43 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const LinearScaleMinMax = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -62,7 +45,7 @@ const LinearScaleMinMax = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
         text: "Min and Max Settings",
@@ -72,14 +55,14 @@ const LinearScaleMinMax = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         min: 10,
         max: 50,
@@ -91,7 +74,7 @@ const LinearScaleMinMax = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-stepsize.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-stepsize.tsx
index 1d7ac450..24e0f1d0 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-stepsize.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/linearscale-stepsize.tsx
@@ -1,53 +1,28 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
+
+import { colors } from "@/lib/colors";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const LinearScaleStepSize = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   const data: any = {
     labels: labels,
@@ -73,11 +48,11 @@ const LinearScaleStepSize = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
         text: "Chart.js Line Chart",
-      }
+      },
     },
     hover: {
       mode: "index",
@@ -86,10 +61,10 @@ const LinearScaleStepSize = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
           text: "Value",
         },
@@ -98,7 +73,7 @@ const LinearScaleStepSize = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           stepSize: 50,
         },
         min: 0,
@@ -106,7 +81,7 @@ const LinearScaleStepSize = ({ height = 350 }) => {
       },
       x: {
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
           text: "Month",
         },
@@ -116,7 +91,7 @@ const LinearScaleStepSize = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/logscale-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/logscale-chart.tsx
index 07251f9d..1f307367 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/logscale-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/logscale-chart.tsx
@@ -1,23 +1,22 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  LogarithmicScale,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
-  LogarithmicScale,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
+
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
 
 ChartJS.register(
   CategoryScale,
@@ -31,22 +30,9 @@ ChartJS.register(
 );
 
 const LogScaleChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
   const data: any = {
     labels: labels,
     datasets: [
@@ -62,7 +48,7 @@ const LogScaleChart = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
         text: "Chart.js Line Chart - Logarithmic",
@@ -72,14 +58,14 @@ const LogScaleChart = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         type: "logarithmic",
       },
@@ -90,7 +76,7 @@ const LogScaleChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/page.tsx
index 99e7e2b1..dedc3794 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/page.tsx
@@ -1,10 +1,10 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import LinearScaleMinMax from "./linearscale-minmax";
-import LinearScaleSuggestedMinMax from "./suggested-minmax";
 import LinearScaleStepSize from "./linearscale-stepsize";
-import StackedLinearCategory from "./stackedlinear-category";
 import LogScaleChart from "./logscale-chart";
+import StackedLinearCategory from "./stackedlinear-category";
+import LinearScaleSuggestedMinMax from "./suggested-minmax";
 import TimeScaleChart from "./timescale-chart";
 
 const ChartsChartJsScales = () => {
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/stackedlinear-category.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/stackedlinear-category.tsx
index 11c8c0d9..f82943d6 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/stackedlinear-category.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/stackedlinear-category.tsx
@@ -1,53 +1,27 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const StackedLinearCategory = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-  const labels = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-  ];
+  const labels = ["January", "February", "March", "April", "May", "June", "July"];
 
   const data: any = {
     labels: labels,
@@ -73,30 +47,29 @@ const StackedLinearCategory = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
         text: "Stacked scales",
-      }
+      },
     },
 
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         stackWeight: 2,
         type: "linear",
         position: "left",
         stack: "demo",
-
       },
       x: {
         grid: {
@@ -105,7 +78,7 @@ const StackedLinearCategory = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       y2: {
@@ -114,7 +87,7 @@ const StackedLinearCategory = ({ height = 350 }) => {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         stackWeight: 1,
         type: "category",
@@ -124,8 +97,8 @@ const StackedLinearCategory = ({ height = 350 }) => {
         stack: "demo",
         border: {
           color: hexToRGB(colors.primary, 0.5),
-        }
-      }
+        },
+      },
     },
     maintainAspectRatio: false,
   };
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/suggested-minmax.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/suggested-minmax.tsx
index 4db4e70c..0f1939b4 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/suggested-minmax.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/suggested-minmax.tsx
@@ -1,44 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Line } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const LinearScaleSuggestedMinMax = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -61,10 +43,9 @@ const LinearScaleSuggestedMinMax = ({ height = 350 }) => {
   const options: any = {
     responsive: true,
     plugins: {
-
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
         text: "Suggested Min and Max Settings",
@@ -74,14 +55,14 @@ const LinearScaleSuggestedMinMax = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         suggestedMin: 30,
         suggestedMax: 50,
@@ -93,9 +74,9 @@ const LinearScaleSuggestedMinMax = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"]
-        }
-      }
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
+        },
+      },
     },
 
     maintainAspectRatio: false,
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/timescale-chart.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/timescale-chart.tsx
index a67487cd..23034be9 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/timescale-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scales/timescale-chart.tsx
@@ -1,48 +1,27 @@
 "use client";
 
+import { faker } from "@faker-js/faker";
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-import { faker } from "@faker-js/faker";
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const TimeScaleChart = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
-
-
-
-
-
-
   const labels = [
     "Nov 24",
     "Nov 25",
@@ -113,10 +92,9 @@ const TimeScaleChart = ({ height = 350 }) => {
   const options: any = {
     responsive: true,
     plugins: {
-
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         display: true,
         text: "Chart.js Time Scale",
@@ -126,17 +104,17 @@ const TimeScaleChart = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
           text: "value",
         },
@@ -148,13 +126,13 @@ const TimeScaleChart = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         time: {
           tooltipFormat: "DD T",
         },
         title: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
           display: true,
           text: "Date",
         },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/page.tsx
index 9c701964..40d087d9 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/page.tsx
@@ -1,29 +1,29 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import ScriptBar from "./script-bar";
 import ScriptBubble from "./script-bubble";
 
 const ChartsChartJsScriptBar = () => {
-    return (
-        <div className="grid  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScriptBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScriptBubble />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ScriptBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bubble Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ScriptBubble />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartsChartJsScriptBar;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bar.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bar.tsx
index 24d29367..43adac5e 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bar.tsx
@@ -1,29 +1,21 @@
 "use client";
 
 import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
   BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
   Title,
   Tooltip,
-  Legend,
 } from "chart.js";
-
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { colors } from "@/lib/colors";
 import { Bar } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 interface Context {
   parsed: {
@@ -43,14 +35,12 @@ const Utils: UtilsType = {
 const colorize = (opaque: boolean) => {
   return (ctx: Context) => {
     const v = ctx.parsed.y;
-    const c =
-      v < -50 ? "#D60000" : v < 0 ? "#F46300" : v < 50 ? "#0358B6" : "#44DE28";
+    const c = v < -50 ? "#D60000" : v < 0 ? "#F46300" : v < 50 ? "#0358B6" : "#44DE28";
     return opaque ? c : Utils.transparentize(c, 1 - Math.abs(v / 150));
   };
 };
 
 const ScriptBar = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
   const data: any = {
@@ -82,14 +72,14 @@ const ScriptBar = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -99,7 +89,7 @@ const ScriptBar = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bubble.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bubble.tsx
index 521f8f73..c8156aea 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bubble.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-scriptable/script-bubble.tsx
@@ -1,40 +1,26 @@
 "use client";
 
 import {
-  Chart as ChartJS,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  PointElement,
 } from "chart.js";
-
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-
 import { Bubble } from "react-chartjs-2";
 
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  PointElement
-);
-
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
 
+ChartJS.register(CategoryScale, LinearScale, LineElement, Title, Tooltip, Legend, PointElement);
 
 const ScriptBubble = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "June", "July"],
     datasets: [
@@ -76,7 +62,7 @@ const ScriptBubble = ({ height = 350 }) => {
     plugins: {
       legend: {
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
@@ -92,13 +78,13 @@ const ScriptBubble = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -107,7 +93,7 @@ const ScriptBubble = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/layout.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/layout.tsx
index a55d91b7..72be1512 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/layout.tsx
@@ -7,4 +7,3 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 };
 
 export default Layout;
-
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/page.tsx
index f3cdc77a..6b601b86 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/page.tsx
@@ -1,17 +1,18 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import TitleAlignment from "./title-alignment";
 
 const ChartsChartJsTitlePage = () => {
-    return (
-        <Card>
-            <CardHeader>
-                <CardTitle>Alignment</CardTitle>
-            </CardHeader>
-            <CardContent>
-                <TitleAlignment />
-            </CardContent>
-        </Card>
-    );
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Alignment</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <TitleAlignment />
+      </CardContent>
+    </Card>
+  );
 };
 
 export default ChartsChartJsTitlePage;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/title-alignment.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/title-alignment.tsx
index 25d287a5..75464192 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/title-alignment.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-title/title-alignment.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,10 +29,8 @@ ChartJS.register(
 );
 
 const TitleAlignment = ({ height = 450 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -53,24 +50,24 @@ const TitleAlignment = ({ height = 450 }) => {
         title: {
           display: true,
           text: "The Chart Title",
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -80,7 +77,7 @@ const TitleAlignment = ({ height = 450 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/custom-tooltip.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/custom-tooltip.tsx
index 00e029dc..1d56792d 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/custom-tooltip.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/custom-tooltip.tsx
@@ -1,24 +1,23 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
   TooltipItem,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,7 +29,7 @@ ChartJS.register(
   PointElement
 );
 
-const footer = (tooltipItems: TooltipItem<'line'>[]) => {
+const footer = (tooltipItems: TooltipItem<"line">[]) => {
   let sum = 0;
 
   tooltipItems.forEach(function (tooltipItem) {
@@ -40,13 +39,8 @@ const footer = (tooltipItems: TooltipItem<'line'>[]) => {
 };
 
 const CustomTooltip = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -70,7 +64,7 @@ const CustomTooltip = ({ height = 350 }) => {
       legend: {
         position: "top",
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       tooltip: {
@@ -82,14 +76,14 @@ const CustomTooltip = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -99,7 +93,7 @@ const CustomTooltip = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/interaction-modes.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/interaction-modes.tsx
index 07789b74..18feb41f 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/interaction-modes.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/interaction-modes.tsx
@@ -1,24 +1,23 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
   TooltipItem,
 } from "chart.js";
-
-
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { colors } from "@/lib/colors";
 import { Line } from "react-chartjs-2";
 
+import { colors } from "@/lib/colors";
+import { hexToRGB } from "@/lib/utils/utils";
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,7 +29,7 @@ ChartJS.register(
   PointElement
 );
 
-const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
+const customTooltip = (tooltipItems: TooltipItem<"line">[]) => {
   let sum = 0;
 
   tooltipItems.forEach(function (tooltipItem) {
@@ -40,13 +39,8 @@ const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
 };
 
 const InteractionModes = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -74,7 +68,7 @@ const InteractionModes = ({ height = 350 }) => {
       legend: {
         position: "top",
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       tooltip: {
@@ -86,14 +80,14 @@ const InteractionModes = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -103,7 +97,7 @@ const InteractionModes = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/page.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/page.tsx
index 0e296e17..aec8b495 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/page.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/page.tsx
@@ -1,47 +1,47 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import CustomTooltip from "./custom-tooltip";
 import InteractionModes from "./interaction-modes";
-import TooltipPointStyle from "./tooltip-point-style";
 import PositionTooltip from "./position-tooltip";
+import TooltipPointStyle from "./tooltip-point-style";
 
 const ChartsChartJsTitlePage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom Tooltip Content</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomTooltip />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Interaction Modes</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <InteractionModes />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Point Style</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TooltipPointStyle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Position(incomplete)</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PositionTooltip />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Custom Tooltip Content</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomTooltip />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Interaction Modes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <InteractionModes />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Point Style</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TooltipPointStyle />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Position(incomplete)</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PositionTooltip />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartsChartJsTitlePage;
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/position-tooltip.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/position-tooltip.tsx
index a6db68ac..889d4279 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/position-tooltip.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/position-tooltip.tsx
@@ -1,24 +1,23 @@
 "use client";
 
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
   TooltipItem,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -30,7 +29,7 @@ ChartJS.register(
   PointElement
 );
 
-const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
+const customTooltip = (tooltipItems: TooltipItem<"line">[]) => {
   let sum = 0;
 
   tooltipItems.forEach(function (tooltipItem) {
@@ -40,13 +39,8 @@ const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
 };
 
 const PositionTooltip = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -74,7 +68,7 @@ const PositionTooltip = ({ height = 350 }) => {
       legend: {
         position: "top",
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       tooltip: {
@@ -86,14 +80,14 @@ const PositionTooltip = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -103,7 +97,7 @@ const PositionTooltip = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/tooltip-point-style.tsx b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/tooltip-point-style.tsx
index c8d8b75c..f67a86b6 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/tooltip-point-style.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/charts-chartjs-tooltip/tooltip-point-style.tsx
@@ -1,25 +1,24 @@
 "use client";
+
 import React from "react";
 import {
-  Chart as ChartJS,
+  ArcElement,
   CategoryScale,
+  Chart as ChartJS,
+  Legend,
   LinearScale,
   LineElement,
+  PointElement,
   Title,
   Tooltip,
-  Legend,
-  ArcElement,
-  PointElement,
   TooltipItem,
 } from "chart.js";
+import { useTheme } from "next-themes";
+import { Line } from "react-chartjs-2";
 
 import { colors } from "@/lib/colors";
-
-import { useTheme } from "next-themes";
 import { hexToRGB } from "@/lib/utils/utils";
 
-import { Line } from "react-chartjs-2";
-
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -31,7 +30,7 @@ ChartJS.register(
   PointElement
 );
 
-const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
+const customTooltip = (tooltipItems: TooltipItem<"line">[]) => {
   let sum = 0;
 
   tooltipItems.forEach(function (tooltipItem) {
@@ -41,12 +40,8 @@ const customTooltip = (tooltipItems: TooltipItem<'line'>[]) => {
 };
 
 const TooltipPointStyle = ({ height = 350 }) => {
-
   const { theme: mode } = useTheme();
 
-
-
-
   const data: any = {
     labels: ["January", "February", "March", "April", "May", "Jun", "July"],
     datasets: [
@@ -86,7 +81,7 @@ const TooltipPointStyle = ({ height = 350 }) => {
       legend: {
         position: "top",
         labels: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       tooltip: {
@@ -99,14 +94,14 @@ const TooltipPointStyle = ({ height = 350 }) => {
     scales: {
       y: {
         border: {
-          display: false
+          display: false,
         },
         grid: {
           drawTicks: false,
           display: false,
         },
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
       x: {
@@ -116,7 +111,7 @@ const TooltipPointStyle = ({ height = 350 }) => {
         },
 
         ticks: {
-          color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+          color: mode === "light" ? colors["default-600"] : colors["default-300"],
         },
       },
     },
diff --git a/src/app/[locale]/(protected)/charts/chart-js/layout.tsx b/src/app/[locale]/(protected)/charts/chart-js/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/charts/chart-js/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/chart-js/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/charts/layout.tsx b/src/app/[locale]/(protected)/charts/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/charts/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/area-connect-nulls.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/area-connect-nulls.tsx
index ac1f9ca9..a6ef735f 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/area-connect-nulls.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/area-connect-nulls.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Area,
+  AreaChart,
   CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const AreaChartConnectNulls = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -67,28 +66,24 @@ const AreaChartConnectNulls = ({ height = 300 }) => {
     <div>
       <ResponsiveContainer height={height}>
         <AreaChart data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <Tooltip />
@@ -100,37 +95,34 @@ const AreaChartConnectNulls = ({ height = 300 }) => {
             dot={true}
             strokeWidth={2}
             fill={colors.primary}
-            style={{
-              opacity: 0.5,
-
-            } as React.CSSProperties}
+            style={
+              {
+                opacity: 0.5,
+              } as React.CSSProperties
+            }
           />
         </AreaChart>
       </ResponsiveContainer>
       <ResponsiveContainer height={height}>
         <AreaChart data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <Tooltip />
@@ -144,10 +136,11 @@ const AreaChartConnectNulls = ({ height = 300 }) => {
             dot={true}
             strokeWidth={2}
             fill={colors.primary}
-            style={{
-              opacity: 0.5,
-
-            } as React.CSSProperties}
+            style={
+              {
+                opacity: 0.5,
+              } as React.CSSProperties
+            }
           />
         </AreaChart>
       </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/areachart-fillby-value.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/areachart-fillby-value.tsx
index b0834b17..4e0a8718 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/areachart-fillby-value.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/areachart-fillby-value.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Area,
+  AreaChart,
   CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const AreaChartFillByValue = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -82,22 +81,24 @@ const AreaChartFillByValue = ({ height = 300 }) => {
   return (
     <ResponsiveContainer width={"100%"} height={height}>
       <AreaChart data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip />
@@ -115,10 +116,11 @@ const AreaChartFillByValue = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.primary}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/basic-area-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/basic-area-chart.tsx
index 30f15388..98fc4afe 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/basic-area-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/basic-area-chart.tsx
@@ -1,24 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
 
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
-
 const BasicAreaChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -79,22 +77,24 @@ const BasicAreaChart = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
@@ -105,11 +105,11 @@ const BasicAreaChart = ({ height = 300 }) => {
           stroke={colors.primary}
           dot={true}
           strokeWidth={2}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
-
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/cardinal-area.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/cardinal-area.tsx
index 61765134..097237fd 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/cardinal-area.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/cardinal-area.tsx
@@ -1,19 +1,19 @@
 "use client";
 
+import { curveCardinal } from "d3-shape";
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Area,
+  AreaChart,
   CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
 } from "recharts";
-import { curveCardinal } from "d3-shape";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
 
 const CustomTooltip = ({ active, payload }: any) => {
   if (active && payload && payload.length > 0) {
@@ -28,10 +28,7 @@ const CustomTooltip = ({ active, payload }: any) => {
   return null;
 };
 
-
-
 const CardinalAreaChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const cardinal = curveCardinal.tension(0.2);
@@ -49,22 +46,24 @@ const CardinalAreaChart = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={<CustomTooltip />} />
@@ -76,10 +75,12 @@ const CardinalAreaChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.warning}
-          style={{
-            opacity: 0.5,
-            "--theme-warning": colors.warning,
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+              "--theme-warning": colors.warning,
+            } as React.CSSProperties
+          }
         />
         <Area
           type={cardinal}
@@ -89,10 +90,12 @@ const CardinalAreaChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.success}
-          style={{
-            opacity: 0.5,
-            "--theme-success": colors.success,
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+              "--theme-success": colors.success,
+            } as React.CSSProperties
+          }
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx
index 7caa49e8..e8df905b 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/page.tsx
@@ -1,13 +1,13 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BasicAreaChart from "./basic-area-chart";
-import StackedRechartArea from "./stacked-rechart-area";
-import TinyRechartArea from "./tiny-rechart-area";
-import PercentReAreaChart from "./percent-area";
-import CardinalAreaChart from "./cardinal-area";
+
 import AreaChartConnectNulls from "./area-connect-nulls";
-import ReSynchronizedAreaChart from "./synchronized-area";
 import AreaChartFillByValue from "./areachart-fillby-value";
+import BasicAreaChart from "./basic-area-chart";
+import CardinalAreaChart from "./cardinal-area";
+import PercentReAreaChart from "./percent-area";
+import StackedRechartArea from "./stacked-rechart-area";
+import ReSynchronizedAreaChart from "./synchronized-area";
+import TinyRechartArea from "./tiny-rechart-area";
 
 const RechartAreaPage = () => {
   return (
@@ -76,7 +76,6 @@ const RechartAreaPage = () => {
           <ReSynchronizedAreaChart />
         </CardContent>
       </Card>
-
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/percent-area.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/percent-area.tsx
index 6784a6d0..0171bdf0 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/percent-area.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/percent-area.tsx
@@ -1,22 +1,14 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, XAxis, YAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
-} from "recharts";
 
 const PercentReAreaChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       month: "2015.01",
@@ -62,8 +54,7 @@ const PercentReAreaChart = ({ height = 300 }) => {
     },
   ];
 
-  const toPercent = (decimal: number, fixed = 0) =>
-    `${(decimal * 100).toFixed(fixed)}%`;
+  const toPercent = (decimal: number, fixed = 0) => `${(decimal * 100).toFixed(fixed)}%`;
 
   const getPercent = (value: number, total: number) => {
     const ratio = total > 0 ? value / total : 0;
@@ -71,28 +62,28 @@ const PercentReAreaChart = ({ height = 300 }) => {
     return toPercent(ratio, 2);
   };
 
-
-
   return (
     <ResponsiveContainer height={height}>
       <AreaChart width={600} height={300} data={data} stackOffset="expand">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="month"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tickFormatter={toPercent}
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
 
@@ -104,10 +95,11 @@ const PercentReAreaChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.warning}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
         <Area
           type="monotone"
@@ -117,10 +109,11 @@ const PercentReAreaChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.success}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
         <Area
           type="monotone"
@@ -129,11 +122,11 @@ const PercentReAreaChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.primary}
-          style={{
-            opacity: 0.5,
-
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/stacked-rechart-area.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/stacked-rechart-area.tsx
index 5c523cee..fd8317e2 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/stacked-rechart-area.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/stacked-rechart-area.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Area,
+  AreaChart,
   CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const StackedRechartArea = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -79,22 +78,24 @@ const StackedRechartArea = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
@@ -107,10 +108,11 @@ const StackedRechartArea = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.warning}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
         <Area
           type="monotone"
@@ -120,10 +122,11 @@ const StackedRechartArea = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.success}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
         <Area
           type="monotone"
@@ -132,10 +135,11 @@ const StackedRechartArea = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.primary}
-          style={{
-            opacity: 0.5,
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+            } as React.CSSProperties
+          }
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/synchronized-area.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/synchronized-area.tsx
index 53614ec4..4d3a242c 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/synchronized-area.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/synchronized-area.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Area,
+  AreaChart,
   CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const ReSynchronizedAreaChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -80,28 +79,24 @@ const ReSynchronizedAreaChart = ({ height = 300 }) => {
     <div>
       <ResponsiveContainer height={height}>
         <AreaChart width={600} height={150} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <Tooltip />
@@ -114,37 +109,34 @@ const ReSynchronizedAreaChart = ({ height = 300 }) => {
             dot={true}
             strokeWidth={2}
             fill={colors.primary}
-            style={{
-              opacity: 0.5,
-
-            } as React.CSSProperties}
+            style={
+              {
+                opacity: 0.5,
+              } as React.CSSProperties
+            }
           />
         </AreaChart>
       </ResponsiveContainer>
       <ResponsiveContainer height={height}>
         <AreaChart width={600} height={150} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: 12,
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <Tooltip />
@@ -157,9 +149,11 @@ const ReSynchronizedAreaChart = ({ height = 300 }) => {
             dot={true}
             strokeWidth={2}
             fill={colors.success}
-            style={{
-              opacity: 0.5,
-            } as React.CSSProperties}
+            style={
+              {
+                opacity: 0.5,
+              } as React.CSSProperties
+            }
           />
         </AreaChart>
       </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/tiny-rechart-area.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/tiny-rechart-area.tsx
index 07c34d5d..972021da 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/tiny-rechart-area.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-area/tiny-rechart-area.tsx
@@ -1,23 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Area,
+  AreaChart,
   CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  AreaChart,
-  Area,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const TinyRechartArea = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -63,7 +62,6 @@ const TinyRechartArea = ({ height = 300 }) => {
     },
   ];
 
-
   const CustomTooltip = ({ active, payload }: any) => {
     if (active && payload && payload.length > 0) {
       return (
@@ -80,22 +78,24 @@ const TinyRechartArea = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <AreaChart width={600} height={300} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
@@ -106,11 +106,12 @@ const TinyRechartArea = ({ height = 300 }) => {
           stroke={colors.primary}
           dot={true}
           strokeWidth={2}
-
-          style={{
-            opacity: 0.5,
-            fill: colors.primary,
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.5,
+              fill: colors.primary,
+            } as React.CSSProperties
+          }
         />
       </AreaChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/background-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/background-bar.tsx
index e6efd5ae..9b58235b 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/background-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/background-bar.tsx
@@ -1,61 +1,42 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const BackgroundBar = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-          background={{ fill: "transparent" }}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.success}
-        />
+        <Bar dataKey="pv" fill={colors.primary} background={{ fill: "transparent" }} />
+        <Bar dataKey="uv" fill={colors.success} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barchart-with-multixaxis.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barchart-with-multixaxis.tsx
index 482c2b53..cf0a8541 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barchart-with-multixaxis.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barchart-with-multixaxis.tsx
@@ -1,19 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Bar,
+  BarChart,
   CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-  Legend,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 interface DataPoint {
   date: string;
   uv: number;
@@ -96,7 +99,6 @@ const data: DataPoint[] = [
   },
 ];
 
-
 const monthTickFormatter = (tick: string): string => {
   const date = new Date(tick);
   return (date.getMonth() + 1).toString();
@@ -125,24 +127,19 @@ const BarChartWithMultiAxis = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="date"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
           tickFormatter={monthTickFormatter}
         />
@@ -158,24 +155,22 @@ const BarChartWithMultiAxis = ({ height = 300 }) => {
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Bar
-          dataKey="pv"
-          fill={colors.warning}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
+        <Bar dataKey="pv" fill={colors.warning} />
+        <Bar dataKey="uv" fill={colors.info} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barwith-minheight.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barwith-minheight.tsx
index 6783c9b0..742321ed 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barwith-minheight.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/barwith-minheight.tsx
@@ -1,20 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Bar,
+  BarChart,
   CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-  LabelList,
 } from "recharts";
-import { data } from "./data";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const renderCustomizedLabel = (props: any) => {
   const { x, y, width, height, value } = props;
@@ -37,51 +39,37 @@ const renderCustomizedLabel = (props: any) => {
 };
 
 const BarWithMinHeight = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
 
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-          minPointSize={5}
-        >
+        <Bar dataKey="pv" fill={colors.primary} minPointSize={5}>
           <LabelList dataKey="name" content={renderCustomizedLabel} />
         </Bar>
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-          minPointSize={10}
-        />
+        <Bar dataKey="uv" fill={colors.info} minPointSize={10} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/bi-axxial-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/bi-axxial-bar.tsx
index 687f8ae8..96eadcf5 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/bi-axxial-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/bi-axxial-bar.tsx
@@ -1,75 +1,55 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const BiAxialBar = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           yAxisId="left"
           orientation="left"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <YAxis
           yAxisId="right"
           orientation="right"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
 
         <Tooltip content={<CustomTooltip />} />
-        <Bar
-          yAxisId="left"
-          dataKey="pv"
-          fill={colors.primary}
-        />
-        <Bar
-          yAxisId="right"
-          dataKey="uv"
-          fill={colors.success}
-        />
+        <Bar yAxisId="left" dataKey="pv" fill={colors.primary} />
+        <Bar yAxisId="right" dataKey="uv" fill={colors.success} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/brush-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/brush-bar.tsx
index f5b8381f..e917f7ff 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/brush-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/brush-bar.tsx
@@ -1,20 +1,21 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
   Bar,
+  BarChart,
+  Brush,
+  CartesianGrid,
   Legend,
   ReferenceLine,
-  Brush,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const data = [
   { name: "1", uv: 300, pv: 456 },
   { name: "2", uv: -145, pv: 230 },
@@ -58,55 +59,36 @@ const data = [
 ];
 
 const BrushBar = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Legend verticalAlign="top" wrapperStyle={{ paddingBottom: "20px" }} />
-        <ReferenceLine
-          y={0}
-          stroke='none'
-        />
-        <Brush
-          dataKey="name"
-          height={30}
-          stroke={colors.info}
-        />
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-        />
+        <ReferenceLine y={0} stroke="none" />
+        <Brush dataKey="name" height={30} stroke={colors.info} />
+        <Bar dataKey="pv" fill={colors.primary} />
+        <Bar dataKey="uv" fill={colors.info} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-shape.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-shape.tsx
index 623aea11..764f4b11 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-shape.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-shape.tsx
@@ -1,26 +1,28 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Bar,
+  BarChart,
   CartesianGrid,
   Cell,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
 } from "recharts";
-import { data } from "./data";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const getPath = (x: number, y: number, width: number, height: number) => {
-  return `M${x},${y + height}C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3
-    }
+  return `M${x},${y + height}C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3}
     ${x + width / 2}, ${y}
-    C${x + width / 2},${y + height / 3} ${x + (2 * width) / 3},${y + height} ${x + width
+    C${x + width / 2},${y + height / 3} ${x + (2 * width) / 3},${y + height} ${
+      x + width
     }, ${y + height}
     Z`;
 };
@@ -32,49 +34,35 @@ const TriangleBar = (props: any) => {
 };
 
 const CustomShape = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="uv"
-          fill="#8884d8"
-          shape={<TriangleBar />}
-          label={{ position: "top" }}
-        >
+        <Bar dataKey="uv" fill="#8884d8" shape={<TriangleBar />} label={{ position: "top" }}>
           {data.map((entry, index) => (
-            <Cell
-              key={`cell-${index}`}
-              fill={colors.primary}
-            />
+            <Cell key={`cell-${index}`} fill={colors.primary} />
           ))}
         </Bar>
       </BarChart>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-tooltip.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-tooltip.tsx
index 3f55b186..3d05430a 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-tooltip.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/custom-tooltip.tsx
@@ -1,15 +1,15 @@
-const CustomTooltip = ({ active, payload }:any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload) {
+    return (
+      <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
+        <span>{`${payload[0].name}`}</span>
+        <span>:</span>
+        <span>{`${payload[0].value}%`}</span>
+      </div>
+    );
+  }
 
-    return null;
+  return null;
 };
 
-export default CustomTooltip
\ No newline at end of file
+export default CustomTooltip;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/customized-event-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/customized-event-bar.tsx
index b7dc7166..34c4b3f1 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/customized-event-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/customized-event-bar.tsx
@@ -1,87 +1,88 @@
-"use client"
-import { useState } from 'react';
-import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';
+"use client";
 
+import { useState } from "react";
 import { useTheme } from "next-themes";
+import { Bar, BarChart, Cell, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
+
 const CustomizedEvent = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
+  const [data, setData] = useState([
+    {
+      name: "Page A",
+      uv: 4000,
+      pv: 2400,
+      amt: 2400,
+    },
+    {
+      name: "Page B",
+      uv: 3000,
+      pv: 1398,
+      amt: 2210,
+    },
+    {
+      name: "Page C",
+      uv: 2000,
+      pv: 9800,
+      amt: 2290,
+    },
+    {
+      name: "Page D",
+      uv: 2780,
+      pv: 3908,
+      amt: 2000,
+    },
+    {
+      name: "Page E",
+      uv: 1890,
+      pv: 4800,
+      amt: 2181,
+    },
+    {
+      name: "Page F",
+      uv: 2390,
+      pv: 3800,
+      amt: 2500,
+    },
+    {
+      name: "Page G",
+      uv: 3490,
+      pv: 4300,
+      amt: 2100,
+    },
+  ]);
 
-    const [data, setData] = useState([
-        {
-            name: 'Page A',
-            uv: 4000,
-            pv: 2400,
-            amt: 2400,
-        },
-        {
-            name: 'Page B',
-            uv: 3000,
-            pv: 1398,
-            amt: 2210,
-        },
-        {
-            name: 'Page C',
-            uv: 2000,
-            pv: 9800,
-            amt: 2290,
-        },
-        {
-            name: 'Page D',
-            uv: 2780,
-            pv: 3908,
-            amt: 2000,
-        },
-        {
-            name: 'Page E',
-            uv: 1890,
-            pv: 4800,
-            amt: 2181,
-        },
-        {
-            name: 'Page F',
-            uv: 2390,
-            pv: 3800,
-            amt: 2500,
-        },
-        {
-            name: 'Page G',
-            uv: 3490,
-            pv: 4300,
-            amt: 2100,
-        },
-    ]);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeItem = data[activeIndex];
 
-    const [activeIndex, setActiveIndex] = useState(0);
-    const activeItem = data[activeIndex];
+  const handleClick = (entry: any, index: number) => {
+    setActiveIndex(index);
+  };
 
-    const handleClick = (entry: any, index: number) => {
-        setActiveIndex(index);
-    };
-
-    return (
-        <div style={{ width: '100%' }}>
-            <p className='text-center text-card-foreground font-base font-medium'>Click each rectangle </p>
-            <ResponsiveContainer width="100%" height={height}>
-                <BarChart data={data}>
-                    <Bar dataKey="uv" onClick={handleClick}>
-                        {data.map((entry, index) => (
-                            <Cell
-                                cursor="pointer"
-                                fill={index === activeIndex ? colors.success
-                                    :
-                                    colors.primary}
-                                key={`cell-${index}`}
-                            />
-                        ))}
-                    </Bar>
-                </BarChart>
-            </ResponsiveContainer>
-            <p className="text-center text-card-foreground font-base font-medium pt-2">{`Uv of "${activeItem.name}": ${activeItem.uv}`}</p>
-        </div>
-    );
+  return (
+    <div style={{ width: "100%" }}>
+      <p className="text-center text-card-foreground font-base font-medium">
+        Click each rectangle{" "}
+      </p>
+      <ResponsiveContainer width="100%" height={height}>
+        <BarChart data={data}>
+          <Bar dataKey="uv" onClick={handleClick}>
+            {data.map((entry, index) => (
+              <Cell
+                cursor="pointer"
+                fill={index === activeIndex ? colors.success : colors.primary}
+                key={`cell-${index}`}
+              />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+      <p className="text-center text-card-foreground font-base font-medium pt-2">{`Uv of "${activeItem.name}": ${activeItem.uv}`}</p>
+    </div>
+  );
 };
 
 export default CustomizedEvent;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data.ts b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data.ts
index 4bef7447..f80706b5 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data.ts
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/data.ts
@@ -1,44 +1,44 @@
 export const data = [
-    {
-      name: 'Page A',
-      uv: 4000,
-      pv: 2400,
-      amt: 2400,
-    },
-    {
-      name: 'Page B',
-      uv: 3000,
-      pv: 1398,
-      amt: 2210,
-    },
-    {
-      name: 'Page C',
-      uv: 2000,
-      pv: 9800,
-      amt: 2290,
-    },
-    {
-      name: 'Page D',
-      uv: 2780,
-      pv: 3908,
-      amt: 2000,
-    },
-    {
-      name: 'Page E',
-      uv: 1890,
-      pv: 4800,
-      amt: 2181,
-    },
-    {
-      name: 'Page F',
-      uv: 2390,
-      pv: 3800,
-      amt: 2500,
-    },
-    {
-      name: 'Page G',
-      uv: 3490,
-      pv: 4300,
-      amt: 2100,
-    },
-  ];
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: "Page E",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/mix-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/mix-bar.tsx
index 09dd1c41..ad1cf731 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/mix-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/mix-bar.tsx
@@ -1,67 +1,44 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const MixBar = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          stackId="a"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          stackId="a"
-          fill={colors.info}
-        />
-        <Bar
-          dataKey="amt"
-          fill={colors.success}
-        />
+        <Bar dataKey="pv" stackId="a" fill={colors.primary} />
+        <Bar dataKey="uv" stackId="a" fill={colors.info} />
+        <Bar dataKey="amt" fill={colors.success} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/no-padding-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/no-padding-bar.tsx
index f1b4eb25..a3cc1b28 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/no-padding-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/no-padding-bar.tsx
@@ -1,52 +1,40 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const NoPaddingBar = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data} barSize={20}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
           scale="point"
           padding={{ left: 10, right: 10 }}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
         <Bar
@@ -55,7 +43,6 @@ const NoPaddingBar = ({ height = 300 }) => {
           background={{
             fill: colors.warning,
           }}
-
         />
       </BarChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/page.tsx
index 9fffaf49..50a8db7c 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/page.tsx
@@ -1,137 +1,137 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TinyBar from "./tiny-bar";
-import SimpleBar from "./simple-bar";
-import StackedBar from "./stacked-bar";
-import MixBar from "./mix-bar";
-import CustomShape from "./custom-shape";
-import PositiveAndNegative from "./positive-negative-bar";
-import BrushBar from "./brush-bar";
-import CustomizedEventBar from "./customized-event-bar";
-import BarWithMinHeight from "./barwith-minheight";
-import StackedBarWithSign from "./stacked-barwith-sign";
-import BiAxialBar from "./bi-axxial-bar";
+
 import BackgroundBar from "./background-bar";
 import BarChartWithMultiAxis from "./barchart-with-multixaxis";
+import BarWithMinHeight from "./barwith-minheight";
+import BiAxialBar from "./bi-axxial-bar";
+import BrushBar from "./brush-bar";
+import CustomShape from "./custom-shape";
+import CustomizedEventBar from "./customized-event-bar";
+import MixBar from "./mix-bar";
 import NoPaddingBar from "./no-padding-bar";
+import PositiveAndNegative from "./positive-negative-bar";
+import SimpleBar from "./simple-bar";
+import StackedBar from "./stacked-bar";
+import StackedBarWithSign from "./stacked-barwith-sign";
+import TinyBar from "./tiny-bar";
 
 const ChartJsRechartBarPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Tiny Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TinyBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <SimpleBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Stacked Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Mix Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MixBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom Shape Bar</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomShape />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Positive And Negative Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PositiveAndNegative />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Brush Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BrushBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart With Customized Event</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomizedEventBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart With Min Height</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarWithMinHeight />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart Stacked By Sign</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StackedBarWithSign />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bi Axial Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BiAxialBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart Has Background</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BackgroundBar />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart With Multi XAxis</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BarChartWithMultiAxis />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bar Chart No Padding</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <NoPaddingBar />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Tiny Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TinyBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Simple Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SimpleBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Stacked Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Mix Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MixBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Custom Shape Bar</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomShape />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Positive And Negative Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PositiveAndNegative />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Brush Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BrushBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart With Customized Event</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomizedEventBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart With Min Height</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BarWithMinHeight />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart Stacked By Sign</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StackedBarWithSign />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bi Axial Bar Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BiAxialBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart Has Background</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BackgroundBar />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart With Multi XAxis</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BarChartWithMultiAxis />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bar Chart No Padding</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <NoPaddingBar />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartJsRechartBarPage;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/positive-negative-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/positive-negative-bar.tsx
index 8670fc09..343368d4 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/positive-negative-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/positive-negative-bar.tsx
@@ -1,18 +1,20 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  Bar,
+  BarChart,
   CartesianGrid,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-  ReferenceLine,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const data = [
@@ -61,50 +63,35 @@ const data = [
 ];
 
 const PositiveAndNegative = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <ReferenceLine
-          y={0}
-          stroke='none'
-        />
-        <Bar
-          dataKey="pv"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-        />
+        <ReferenceLine y={0} stroke="none" />
+        <Bar dataKey="pv" fill={colors.primary} />
+        <Bar dataKey="uv" fill={colors.info} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/simple-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/simple-bar.tsx
index 63996fe8..a6708120 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/simple-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/simple-bar.tsx
@@ -1,61 +1,43 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const SimpleBar = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          fill={colors.warning}
-        />
-        <Bar
-          dataKey="uv"
-          fill={colors.info}
-        />
+        <Bar dataKey="pv" fill={colors.warning} />
+        <Bar dataKey="uv" fill={colors.info} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-bar.tsx
index 231dae7e..4d1a36e8 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-bar.tsx
@@ -1,63 +1,43 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  Tooltip,
-} from "recharts";
-import { data } from "./data";
+
 import CustomTooltip from "./custom-tooltip";
+import { data } from "./data";
 
 const StackedBar = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Bar
-          dataKey="pv"
-          stackId="a"
-          fill={colors.warning}
-        />
-        <Bar
-          dataKey="uv"
-          stackId="a"
-          fill={colors.info}
-        />
+        <Bar dataKey="pv" stackId="a" fill={colors.warning} />
+        <Bar dataKey="uv" stackId="a" fill={colors.info} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-barwith-sign.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-barwith-sign.tsx
index 65d073a5..94b51444 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-barwith-sign.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/stacked-barwith-sign.tsx
@@ -1,20 +1,23 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  CartesianGrid,
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  BarChart,
   Bar,
-  Tooltip,
+  BarChart,
+  CartesianGrid,
   Legend,
   ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 const data = [
   {
     name: "Page A",
@@ -63,53 +66,40 @@ const StackedBarWithSign = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <BarChart height={height} data={data} stackOffset="sign">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <ReferenceLine
-          y={0}
-          stroke='none'
-        />
-        <Bar
-          dataKey="pv"
-          stackId="stack"
-          fill={colors.primary}
-        />
-        <Bar
-          dataKey="uv"
-          stackId="stack"
-          fill={colors.success}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
+        <ReferenceLine y={0} stroke="none" />
+        <Bar dataKey="pv" stackId="stack" fill={colors.primary} />
+        <Bar dataKey="uv" stackId="stack" fill={colors.success} />
       </BarChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/tiny-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/tiny-bar.tsx
index bdefc553..3cabb3cb 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/tiny-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-bar/tiny-bar.tsx
@@ -1,26 +1,23 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, BarChart, Bar } from 'recharts';
+
 import { data } from "./data";
 
 const TinyBar = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer height={height}>
-            <BarChart height={height} data={data} >
-                <Bar
-                    dataKey="uv"
-                    fill={colors.primary}
-                />
-
-            </BarChart>
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer height={height}>
+      <BarChart height={height} data={data}>
+        <Bar dataKey="uv" fill={colors.primary} />
+      </BarChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default TinyBar;
\ No newline at end of file
+export default TinyBar;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/composedchart-with-axislabels.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/composedchart-with-axislabels.tsx
index 5037c809..aa5a2780 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/composedchart-with-axislabels.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/composedchart-with-axislabels.tsx
@@ -1,27 +1,26 @@
 "use client";
 
-
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  ComposedChart,
-  Line,
   Area,
   Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const ComposedChartWithAxisLabels = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -87,27 +86,33 @@ const ComposedChartWithAxisLabels = ({ height = 300 }) => {
           left: 20,
         }}
       >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
         <Area
           type="monotone"
@@ -115,16 +120,13 @@ const ComposedChartWithAxisLabels = ({ height = 300 }) => {
           stroke={colors.primary}
           dot={true}
           strokeWidth={2}
-          style={{
-            opacity: 0.7,
-
-          } as React.CSSProperties}
-        />
-        <Bar
-          dataKey="pv"
-          barSize={20}
-          fill={colors.primary}
+          style={
+            {
+              opacity: 0.7,
+            } as React.CSSProperties
+          }
         />
+        <Bar dataKey="pv" barSize={20} fill={colors.primary} />
         <Line
           type="monotone"
           strokeWidth={2}
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/linebar-area-composedchart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/linebar-area-composedchart.tsx
index 11d93ac3..009b0e5e 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/linebar-area-composedchart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/linebar-area-composedchart.tsx
@@ -1,27 +1,26 @@
 "use client";
-import React from "react";
 
+import React from "react";
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  ComposedChart,
-  Line,
   Area,
   Bar,
+  CartesianGrid,
+  ComposedChart,
+  Line,
+  ResponsiveContainer,
+  Scatter,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Scatter,
-  ResponsiveContainer,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const LineBarAreaComposedChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -93,22 +92,24 @@ const LineBarAreaComposedChart = ({ height = 300 }) => {
           left: 20,
         }}
       >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
@@ -118,16 +119,13 @@ const LineBarAreaComposedChart = ({ height = 300 }) => {
           stroke={colors.primary}
           dot={true}
           strokeWidth={2}
-          style={{
-            opacity: 0.7,
-
-          } as React.CSSProperties}
-        />
-        <Bar
-          dataKey="pv"
-          barSize={20}
-          fill={colors.primary}
+          style={
+            {
+              opacity: 0.7,
+            } as React.CSSProperties
+          }
         />
+        <Bar dataKey="pv" barSize={20} fill={colors.primary} />
         <Line
           type="monotone"
           strokeWidth={2}
@@ -138,11 +136,7 @@ const LineBarAreaComposedChart = ({ height = 300 }) => {
             strokeWidth: 2,
           }}
         />
-        <Scatter
-          dataKey="cnt"
-          data={data}
-          fill={colors.danger}
-        />
+        <Scatter dataKey="cnt" data={data} fill={colors.danger} />
       </ComposedChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/page.tsx
index 0a8367d9..fc3cc2f4 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/page.tsx
@@ -1,12 +1,12 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+import ComposedChartWithAxisLabels from "./composedchart-with-axislabels";
 import LineBarAreaComposedChart from "./linebar-area-composedchart";
 import SameDataComposedChart from "./samedata-composed-chart";
-import ReVerticalComposedChart from "./vertical-composed-chart";
-import ComposedChartWithAxisLabels from "./composedchart-with-axislabels";
 import ReScatterAndLineOfBestFit from "./scatter-line-bestfit";
+import ReVerticalComposedChart from "./vertical-composed-chart";
 
 const ChartJsRechartComposed = () => {
-
   return (
     <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
       <Card>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/samedata-composed-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/samedata-composed-chart.tsx
index efe2f2b0..af103e5f 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/samedata-composed-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/samedata-composed-chart.tsx
@@ -1,27 +1,27 @@
 "use client";
-import React from "react";
 
+import React from "react";
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  ComposedChart,
-  Line,
   Area,
   Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const SameDataComposedChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -87,33 +87,35 @@ const SameDataComposedChart = ({ height = 300 }) => {
           left: 20,
         }}
       >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Bar
-          dataKey="uv"
-          barSize={20}
-          fill={colors.primary}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
+        <Bar dataKey="uv" barSize={20} fill={colors.primary} />
         <Line
           type="monotone"
           strokeWidth={2}
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/scatter-line-bestfit.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/scatter-line-bestfit.tsx
index 94881bf8..56a096ee 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/scatter-line-bestfit.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/scatter-line-bestfit.tsx
@@ -1,28 +1,28 @@
 "use client";
-import React from "react";
 
+import React from "react";
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  ComposedChart,
-  Line,
   Area,
   Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Scatter,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  Scatter,
-  ResponsiveContainer,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const ReScatterAndLineOfBestFit = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const data = [
     { index: 10000, red: 1643, blue: 790 },
     { index: 1666, red: 182, blue: 42 },
@@ -59,45 +59,41 @@ const ReScatterAndLineOfBestFit = ({ height = 300 }) => {
           left: 20,
         }}
       >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="index"
           type="number"
           label={{ value: "Index", position: "insideBottomRight", offset: 0 }}
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           unit="ms"
           type="number"
           label={{ value: "Time", angle: -90, position: "insideLeft" }}
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-        />
-        <Scatter
-          name="red"
-          dataKey="red"
-          data={data}
-          fill={colors.danger}
-        />
-        <Scatter
-          name="blue"
-          dataKey="blue"
-          data={data}
-          fill={colors.primary}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
+        <Scatter name="red" dataKey="red" data={data} fill={colors.danger} />
+        <Scatter name="blue" dataKey="blue" data={data} fill={colors.primary} />
 
         <Line
           type="monotone"
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/vertical-composed-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/vertical-composed-chart.tsx
index 9004e030..f7c5ac39 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/vertical-composed-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-composed/vertical-composed-chart.tsx
@@ -1,26 +1,26 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  ComposedChart,
-  Line,
   Area,
   Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const ReVerticalComposedChart = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -87,46 +87,49 @@ const ReVerticalComposedChart = ({ height = 300 }) => {
           left: 20,
         }}
       >
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           type="number"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           dataKey="name"
           type="category"
           scale="band"
-          tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
+          tick={{
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
+            fontSize: 12,
+          }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <Tooltip content={CustomTooltip} />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
         <Area
           dataKey="amt"
           stroke={colors.primary}
           dot={true}
           strokeWidth={2}
-          style={{
-            opacity: 0.7,
-
-          } as React.CSSProperties}
-        />
-        <Bar
-          dataKey="pv"
-          barSize={20}
-          fill={colors.primary}
+          style={
+            {
+              opacity: 0.7,
+            } as React.CSSProperties
+          }
         />
+        <Bar dataKey="pv" barSize={20} fill={colors.primary} />
         <Line
           strokeWidth={2}
           dataKey="uv"
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/basic-line.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/basic-line.tsx
index 4d8f4319..1b7201d9 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/basic-line.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/basic-line.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const BasicLine = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -67,29 +67,25 @@ const BasicLine = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={CustomTooltip} />
         <Line
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/biaxial-linechart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/biaxial-linechart.tsx
index 9fe80f2b..ae1d1702 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/biaxial-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/biaxial-linechart.tsx
@@ -1,18 +1,20 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const BiAxialLineChart = ({ height = 300 }) => {
@@ -66,42 +68,42 @@ const BiAxialLineChart = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           dataKey="name"
         />
 
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           yAxisId="left"
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           yAxisId="right"
           orientation="right"
         />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
         <Tooltip content={CustomTooltip} />
         <Line
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/connect-nulls.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/connect-nulls.tsx
index c2c8866c..d2ba240c 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/connect-nulls.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/connect-nulls.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const ConnectNulls = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     { name: "Page A", uv: 4000 },
     { name: "Page B", uv: 3000 },
@@ -33,28 +33,24 @@ const ConnectNulls = ({ height = 300 }) => {
     <>
       <ResponsiveContainer height={height}>
         <LineChart height={height} data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
           />
           <Tooltip />
           <Line
@@ -71,28 +67,24 @@ const ConnectNulls = ({ height = 300 }) => {
       <div className="mt-4"></div>
       <ResponsiveContainer width="100%" height={200}>
         <LineChart width={500} height={200} data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
           />
 
           <Tooltip />
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/custom-tooltip.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/custom-tooltip.tsx
index 3f55b186..3d05430a 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/custom-tooltip.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/custom-tooltip.tsx
@@ -1,15 +1,15 @@
-const CustomTooltip = ({ active, payload }:any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
+const CustomTooltip = ({ active, payload }: any) => {
+  if (active && payload) {
+    return (
+      <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
+        <span>{`${payload[0].name}`}</span>
+        <span>:</span>
+        <span>{`${payload[0].value}%`}</span>
+      </div>
+    );
+  }
 
-    return null;
+  return null;
 };
 
-export default CustomTooltip
\ No newline at end of file
+export default CustomTooltip;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-dot.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-dot.tsx
index 67f87243..06ef0190 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-dot.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-dot.tsx
@@ -1,17 +1,19 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const data = [
@@ -71,64 +73,44 @@ const CustomDot: React.FC<CustomDotProps> = (props) => {
 
   if (value !== undefined && value > 2500) {
     return (
-      <svg
-        x={cx - 10}
-        y={cy - 10}
-        width={20}
-        height={20}
-        fill="red"
-        viewBox="0 0 1024 1024"
-      >
+      <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="red" viewBox="0 0 1024 1024">
         <path d="M512 1009.984c-274.912 0-497.76-222.848-497.76-497.76s222.848-497.76 497.76-497.76c274.912 0 497.76 222.848 497.76 497.76s-222.848 497.76-497.76 497.76zM340.768 295.936c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM686.176 296.704c-39.488 0-71.52 32.8-71.52 73.248s32.032 73.248 71.52 73.248c39.488 0 71.52-32.8 71.52-73.248s-32.032-73.248-71.52-73.248zM772.928 555.392c-18.752-8.864-40.928-0.576-49.632 18.528-40.224 88.576-120.256 143.552-208.832 143.552-85.952 0-164.864-52.64-205.952-137.376-9.184-18.912-31.648-26.592-50.08-17.28-18.464 9.408-21.216 21.472-15.936 32.64 52.8 111.424 155.232 186.784 269.76 186.784 117.984 0 217.12-70.944 269.76-186.784 8.672-19.136 9.568-31.2-9.12-40.096z" />
       </svg>
     );
   }
 
   return (
-    <svg
-      x={cx - 10}
-      y={cy - 10}
-      width={20}
-      height={20}
-      fill="green"
-      viewBox="0 0 1024 1024"
-    >
+    <svg x={cx - 10} y={cy - 10} width={20} height={20} fill="green" viewBox="0 0 1024 1024">
       <path d="M517.12 53.248q95.232 0 179.2 36.352t145.92 98.304 98.304 145.92 36.352 179.2-36.352 179.2-98.304 145.92-145.92 98.304-179.2 36.352-179.2-36.352-145.92-98.304-98.304-145.92-36.352-179.2 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352zM663.552 261.12q-15.36 0-28.16 6.656t-23.04 18.432-15.872 27.648-5.632 33.28q0 35.84 21.504 61.44t51.2 25.6 51.2-25.6 21.504-61.44q0-17.408-5.632-33.28t-15.872-27.648-23.04-18.432-28.16-6.656zM373.76 261.12q-29.696 0-50.688 25.088t-20.992 60.928 20.992 61.44 50.688 25.6 50.176-25.6 20.48-61.44-20.48-60.928-50.176-25.088zM520.192 602.112q-51.2 0-97.28 9.728t-82.944 27.648-62.464 41.472-35.84 51.2q-1.024 1.024-1.024 2.048-1.024 3.072-1.024 8.704t2.56 11.776 7.168 11.264 12.8 6.144q25.6-27.648 62.464-50.176 31.744-19.456 79.36-35.328t114.176-15.872q67.584 0 116.736 15.872t81.92 35.328q37.888 22.528 63.488 50.176 17.408-5.12 19.968-18.944t0.512-18.944-3.072-7.168-1.024-3.072q-26.624-55.296-100.352-88.576t-176.128-33.28z" />
     </svg>
   );
 };
 
 const CustomizedDot = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={CustomTooltip} />
         <Line
@@ -140,12 +122,7 @@ const CustomizedDot = ({ height = 300 }) => {
           }}
           stroke={colors.primary}
         />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.info}
-          dot={<CustomDot />}
-        />
+        <Line type="monotone" dataKey="pv" stroke={colors.info} dot={<CustomDot />} />
       </LineChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-label.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-label.tsx
index bc25e8cc..a710e3e9 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-label.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/customized-label.tsx
@@ -1,17 +1,19 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 interface CustomLabelProps {
@@ -29,7 +31,6 @@ const CustomLabel = ({ x, y, stroke, value }: CustomLabelProps) => {
 };
 
 const CustomizedLabel = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const data = [
@@ -79,42 +80,29 @@ const CustomizedLabel = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
 
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="uv"
-          stroke={colors.primary}
-          label={<CustomLabel />}
-        />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.info}
-        />
+        <Line type="monotone" dataKey="uv" stroke={colors.primary} label={<CustomLabel />} />
+        <Line type="monotone" dataKey="pv" stroke={colors.info} />
       </LineChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/dashedline-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/dashedline-chart.tsx
index 6da536ea..c92407f2 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/dashedline-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/dashedline-chart.tsx
@@ -1,21 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const DashedLineChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const data = [
@@ -66,28 +67,24 @@ const DashedLineChart = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={CustomTooltip} />
         <Line
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/linechart-with-padding.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/linechart-with-padding.tsx
index e65dc774..cd29bfeb 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/linechart-with-padding.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/linechart-with-padding.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const LineChartWithPadding = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -67,33 +67,33 @@ const LineChartWithPadding = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
           padding={{ left: 30, right: 30 }}
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip />
         <Legend
-          formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
         />
         <Line
           type="monotone"
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/multi-series.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/multi-series.tsx
index fadbbc49..34e17982 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/multi-series.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/multi-series.tsx
@@ -1,24 +1,24 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const MultiSeriesChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const series = [
     {
       name: "Series 1",
@@ -49,31 +49,27 @@ const MultiSeriesChart = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
 
         <XAxis
           dataKey="category"
           type="category"
           allowDuplicatedCategory={false}
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           dataKey="value"
         />
         <Tooltip />
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/page.tsx
index 4ea65f3c..3731f984 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/page.tsx
@@ -1,154 +1,154 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicLine from "./basic-line";
-import TinyLineChart from "./tinyline-chart";
-import DashedLineChart from "./dashedline-chart";
-import VerticalLineChart from "./verticalline-chart";
 import BiAxialLineChart from "./biaxial-linechart";
-import SpecifiedDomain from "./specified-domain";
 import ConnectNulls from "./connect-nulls";
-import LineChartWithPadding from "./linechart-with-padding";
-import LineChartWithReferenceLines from "./reference-lines";
 import CustomizedDot from "./customized-dot";
 import CustomizedLabel from "./customized-label";
-import SynchronizedLineChart from "./synchronized-linechart";
+import DashedLineChart from "./dashedline-chart";
+import LineChartWithPadding from "./linechart-with-padding";
 import MultiSeriesChart from "./multi-series";
+import LineChartWithReferenceLines from "./reference-lines";
+import SpecifiedDomain from "./specified-domain";
+import SynchronizedLineChart from "./synchronized-linechart";
+import TinyLineChart from "./tinyline-chart";
+import VerticalLineChart from "./verticalline-chart";
 
 const ChartJsRechartLinePage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  gap-6">
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Basic Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BasicLine />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Tiny Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <TinyLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Dashed Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <DashedLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Vertical Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <VerticalLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Biaxial Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <BiAxialLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Vertical Line Chart With Specified Domain</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <SpecifiedDomain />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart With XAxis Padding</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <LineChartWithPadding />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart With Reference Lines</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <LineChartWithReferenceLines />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Customized Dot Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CustomizedDot />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2 lg:col-span-1">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Customized Label</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <CustomizedLabel />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart Has Multi Series</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <MultiSeriesChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Synchronized Line Chart</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <SynchronizedLineChart />
-                    </CardContent>
-                </Card>
-            </div>
-            <div className="col-span-2">
-                <Card>
-                    <CardHeader>
-                        <CardTitle>Line Chart Connect Nulls</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                        <ConnectNulls />
-                    </CardContent>
-                </Card>
-            </div>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  gap-6">
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Basic Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <BasicLine />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Tiny Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TinyLineChart />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Dashed Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DashedLineChart />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Vertical Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <VerticalLineChart />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Biaxial Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <BiAxialLineChart />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Vertical Line Chart With Specified Domain</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <SpecifiedDomain />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Line Chart With XAxis Padding</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <LineChartWithPadding />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Line Chart With Reference Lines</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <LineChartWithReferenceLines />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Customized Dot Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CustomizedDot />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2 lg:col-span-1">
+        <Card>
+          <CardHeader>
+            <CardTitle>Customized Label</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <CustomizedLabel />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Line Chart Has Multi Series</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <MultiSeriesChart />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Synchronized Line Chart</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <SynchronizedLineChart />
+          </CardContent>
+        </Card>
+      </div>
+      <div className="col-span-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Line Chart Connect Nulls</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <ConnectNulls />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
 };
 
 export default ChartJsRechartLinePage;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/reference-lines.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/reference-lines.tsx
index cd8c2ae5..47836fb7 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/reference-lines.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/reference-lines.tsx
@@ -1,25 +1,25 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Legend,
+  Line,
+  LineChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Legend,
-  ReferenceLine,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const LineChartWithReferenceLines = ({ height = 300 }) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       name: "Page A",
@@ -69,48 +69,36 @@ const LineChartWithReferenceLines = ({ height = 300 }) => {
     <>
       <ResponsiveContainer height={height}>
         <LineChart height={height} data={data}>
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
           />
           <Tooltip />
           <Legend
-            formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-          />
-          <ReferenceLine
-            x="Page C"
-            stroke={colors.warning}
-            label="Max PV PAGE"
-          />
-          <ReferenceLine
-            y={9800}
-            label="Max"
-            stroke={colors.warning}
-          />
-          <Line
-            type="monotone"
-            dataKey="pv"
-            stroke={colors.warning}
+            formatter={(value, entry) => (
+              <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+                {value}
+              </span>
+            )}
           />
+          <ReferenceLine x="Page C" stroke={colors.warning} label="Max PV PAGE" />
+          <ReferenceLine y={9800} label="Max" stroke={colors.warning} />
+          <Line type="monotone" dataKey="pv" stroke={colors.warning} />
           <Line
             type="monotone"
             dataKey="uv"
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/specified-domain.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/specified-domain.tsx
index 6924ec05..18690743 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/specified-domain.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/specified-domain.tsx
@@ -1,21 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const SpecifiedDomain = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const data = [
@@ -65,29 +66,25 @@ const SpecifiedDomain = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data} layout="vertical">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
           type="number"
           domain={[0, "dataMax + 1000"]}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           dataKey="name"
           type="category"
         />
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/synchronized-linechart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/synchronized-linechart.tsx
index 8a830ac6..d772c7ea 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/synchronized-linechart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/synchronized-linechart.tsx
@@ -1,24 +1,25 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
+  Area,
+  AreaChart,
+  Brush,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
-  Brush,
-  AreaChart,
-  Area,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const SynchronizedLineChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const data = [
@@ -70,28 +71,24 @@ const SynchronizedLineChart = ({ height = 300 }) => {
     <>
       <ResponsiveContainer height={height}>
         <LineChart height={height} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
           />
           <Tooltip content={CustomTooltip} />
           <Line
@@ -106,33 +103,27 @@ const SynchronizedLineChart = ({ height = 300 }) => {
         </LineChart>
       </ResponsiveContainer>
 
-      <p className="text-sm ml-14 mt-2 mb-5 text-card-foreground ">
-        Maybe some other content
-      </p>
+      <p className="text-sm ml-14 mt-2 mb-5 text-card-foreground ">Maybe some other content</p>
       <ResponsiveContainer width="100%" height={200}>
         <LineChart width={500} height={200} data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
           />
           <Tooltip content={CustomTooltip} />
           <Line
@@ -150,28 +141,24 @@ const SynchronizedLineChart = ({ height = 300 }) => {
 
       <ResponsiveContainer width="100%" height={200}>
         <AreaChart data={data} syncId="anyId">
-          <CartesianGrid
-            stroke='none'
-            strokeDasharray="1 1"
-            vertical={false}
-          />
+          <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
           <XAxis
             dataKey="name"
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
             axisLine={false}
           />
           <YAxis
             tick={{
-              fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+              fill: mode === "light" ? colors["default-600"] : colors["default-300"],
               fontSize: "12px",
             }}
             tickLine={false}
-            stroke='none'
+            stroke="none"
           />
           <Tooltip content={CustomTooltip} />
           <Area
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/tinyline-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/tinyline-chart.tsx
index d4c009d6..0ff48e5c 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/tinyline-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/tinyline-chart.tsx
@@ -1,21 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const TinyLineChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const data = [
@@ -66,28 +67,24 @@ const TinyLineChart = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           dataKey="name"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={CustomTooltip} />
         <Line
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/verticalline-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/verticalline-chart.tsx
index e0fdb86e..4b6b7aee 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/verticalline-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-line/verticalline-chart.tsx
@@ -1,21 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
-  LineChart,
-  Line,
   CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip,
   XAxis,
   YAxis,
-  Tooltip,
-  ResponsiveContainer,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
 
 const VerticalLineChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const data = [
@@ -65,38 +66,29 @@ const VerticalLineChart = ({ height = 300 }) => {
   return (
     <ResponsiveContainer height={height}>
       <LineChart height={height} data={data} layout="vertical">
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="1 1"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="1 1" vertical={false} />
         <XAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
           type="number"
         />
         <YAxis
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           dataKey="name"
           type="category"
         />
         <Tooltip content={CustomTooltip} />
-        <Line
-          type="monotone"
-          dataKey="pv"
-          stroke={colors.primary}
-          strokeDasharray="5 5"
-        />
+        <Line type="monotone" dataKey="pv" stroke={colors.primary} strokeDasharray="5 5" />
         <Line
           type="monotone"
           dataKey="uv"
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/customized-label-pie.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/customized-label-pie.tsx
index 76987d8f..c519ce0a 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/customized-label-pie.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/customized-label-pie.tsx
@@ -1,60 +1,63 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
 
 const data = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
+  { name: "Group A", value: 400 },
+  { name: "Group B", value: 300 },
+  { name: "Group C", value: 300 },
+  { name: "Group D", value: 200 },
 ];
 
 const RADIAN = Math.PI / 180;
-const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index }: any) => {
-    const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-    const x = cx + radius * Math.cos(-midAngle * RADIAN);
-    const y = cy + radius * Math.sin(-midAngle * RADIAN);
+const renderCustomizedLabel = ({
+  cx,
+  cy,
+  midAngle,
+  innerRadius,
+  outerRadius,
+  percent,
+  index,
+}: any) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
 
-    return (
-        <text x={x} y={y} fill="white" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
-            {`${(percent * 100).toFixed(0)}%`}
-        </text>
-    );
+  return (
+    <text x={x} y={y} fill="white" textAnchor={x > cx ? "start" : "end"} dominantBaseline="central">
+      {`${(percent * 100).toFixed(0)}%`}
+    </text>
+  );
 };
 
 const CustomizedLabelPie = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
-
-    const COLORS = [
-        colors.primary,
-        colors.info,
-        colors.warning,
-        colors.success
-    ]
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height}>
-                <Pie
-                    data={data}
-                    cx="50%"
-                    cy="50%"
-                    labelLine={false}
-                    label={renderCustomizedLabel}
-                    outerRadius={130}
-                    fill={colors.info}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-            </PieChart>
-        </ResponsiveContainer>
-    );
+  const COLORS = [colors.primary, colors.info, colors.warning, colors.success];
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart height={height}>
+        <Pie
+          data={data}
+          cx="50%"
+          cy="50%"
+          labelLine={false}
+          label={renderCustomizedLabel}
+          outerRadius={130}
+          fill={colors.info}
+          dataKey="value"
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+          ))}
+        </Pie>
+      </PieChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default CustomizedLabelPie;
\ No newline at end of file
+export default CustomizedLabelPie;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/page.tsx
index 636570aa..739b58db 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/page.tsx
@@ -1,65 +1,65 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TwoLevelPie from "./twolevel-pie";
-import StraightAngle from "./straight-angle";
-import TwoSimplePie from "./two-simple-pie";
+
 import CustomizedLabelPie from "./customized-label-pie";
 import PieChartWithPaddingAngle from "./pie-chart-with-paddingangle";
 import PieWithNeedle from "./piewith-needle";
+import StraightAngle from "./straight-angle";
+import TwoSimplePie from "./two-simple-pie";
+import TwoLevelPie from "./twolevel-pie";
 
 const ChartJsRechartPiePage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Two Level Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TwoLevelPie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Straight Angle Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <StraightAngle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Two Simple Pie Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <TwoSimplePie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart With Customized Label</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomizedLabelPie />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart With Padding Angle</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PieChartWithPaddingAngle />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Pie Chart With Needle</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <PieWithNeedle />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Two Level Pie Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TwoLevelPie />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Straight Angle Pie Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <StraightAngle />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Two Simple Pie Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <TwoSimplePie />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Pie Chart With Customized Label</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomizedLabelPie />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Pie Chart With Padding Angle</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PieChartWithPaddingAngle />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Pie Chart With Needle</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <PieWithNeedle />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartJsRechartPiePage;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/pie-chart-with-paddingangle.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/pie-chart-with-paddingangle.tsx
index 9ef40b07..805ea8c5 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/pie-chart-with-paddingangle.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/pie-chart-with-paddingangle.tsx
@@ -1,65 +1,58 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
 
 const PieChartWithPaddingAngle = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
+  const data = [
+    { name: "Group A", value: 400 },
+    { name: "Group B", value: 300 },
+    { name: "Group C", value: 300 },
+    { name: "Group D", value: 200 },
+  ];
+  const COLORS = [colors.primary, colors.info, colors.warning, colors.success];
 
-
-    const data = [
-        { name: 'Group A', value: 400 },
-        { name: 'Group B', value: 300 },
-        { name: 'Group C', value: 300 },
-        { name: 'Group D', value: 200 },
-    ];
-    const COLORS = [
-        colors.primary,
-        colors.info,
-        colors.warning,
-        colors.success
-    ];
-
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height}>
-                <Pie
-                    data={data}
-                    cx={120}
-                    cy={150}
-                    innerRadius={80}
-                    outerRadius={120}
-                    fill={colors.primary}
-                    paddingAngle={5}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-                <Pie
-                    data={data}
-                    cx={420}
-                    cy={120}
-                    startAngle={180}
-                    endAngle={0}
-                    innerRadius={80}
-                    outerRadius={100}
-                    fill={colors.info}
-                    paddingAngle={5}
-                    dataKey="value"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                    ))}
-                </Pie>
-            </PieChart>
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart height={height}>
+        <Pie
+          data={data}
+          cx={120}
+          cy={150}
+          innerRadius={80}
+          outerRadius={120}
+          fill={colors.primary}
+          paddingAngle={5}
+          dataKey="value"
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+          ))}
+        </Pie>
+        <Pie
+          data={data}
+          cx={420}
+          cy={120}
+          startAngle={180}
+          endAngle={0}
+          innerRadius={80}
+          outerRadius={100}
+          fill={colors.info}
+          paddingAngle={5}
+          dataKey="value"
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+          ))}
+        </Pie>
+      </PieChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default PieChartWithPaddingAngle;
\ No newline at end of file
+export default PieChartWithPaddingAngle;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/piewith-needle.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/piewith-needle.tsx
index a9e9cd1f..84a5b0a1 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/piewith-needle.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/piewith-needle.tsx
@@ -1,15 +1,16 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
 
 const RADIAN = Math.PI / 180;
 const data = [
-    { name: "A", value: 80, color: "#ff0000" },
-    { name: "B", value: 45, color: "#00ff00" },
-    { name: "C", value: 25, color: "#0000ff" },
+  { name: "A", value: 80, color: "#ff0000" },
+  { name: "B", value: 45, color: "#00ff00" },
+  { name: "C", value: 25, color: "#0000ff" },
 ];
 const cx = 300;
 const cy = 160;
@@ -17,58 +18,70 @@ const iR = 50;
 const oR = 100;
 const value = 50;
 
-const needle = (value: number, data: any, cx: number, cy: number, iR: number, oR: number, color: string) => {
-    let total = 0;
-    data.forEach((v: any) => {
-        total += v.value;
-    });
-    const ang = 180.0 * (1 - value / total);
-    const length = (iR + 2 * oR) / 3;
-    const sin = Math.sin(-RADIAN * ang);
-    const cos = Math.cos(-RADIAN * ang);
-    const r = 5;
-    const x0 = cx + 5;
-    const y0 = cy + 5;
-    const xba = x0 + r * sin;
-    const yba = y0 - r * cos;
-    const xbb = x0 - r * sin;
-    const ybb = y0 + r * cos;
-    const xp = x0 + length * cos;
-    const yp = y0 + length * sin;
+const needle = (
+  value: number,
+  data: any,
+  cx: number,
+  cy: number,
+  iR: number,
+  oR: number,
+  color: string
+) => {
+  let total = 0;
+  data.forEach((v: any) => {
+    total += v.value;
+  });
+  const ang = 180.0 * (1 - value / total);
+  const length = (iR + 2 * oR) / 3;
+  const sin = Math.sin(-RADIAN * ang);
+  const cos = Math.cos(-RADIAN * ang);
+  const r = 5;
+  const x0 = cx + 5;
+  const y0 = cy + 5;
+  const xba = x0 + r * sin;
+  const yba = y0 - r * cos;
+  const xbb = x0 - r * sin;
+  const ybb = y0 + r * cos;
+  const xp = x0 + length * cos;
+  const yp = y0 + length * sin;
 
-    return [
-        <circle cx={x0} cy={y0} r={r} fill={color} stroke="none" key="pie-needle-circle" />,
-        <path d={`M${xba} ${yba}L${xbb} ${ybb} L${xp} ${yp} L${xba} ${yba}`} stroke="#none" fill={color} key="pie-needle-path" />,
-    ];
+  return [
+    <circle cx={x0} cy={y0} r={r} fill={color} stroke="none" key="pie-needle-circle" />,
+    <path
+      d={`M${xba} ${yba}L${xbb} ${ybb} L${xp} ${yp} L${xba} ${yba}`}
+      stroke="#none"
+      fill={color}
+      key="pie-needle-path"
+    />,
+  ];
 };
 
 const PieWithNeedle = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height}>
-                <Pie
-                    dataKey="value"
-                    startAngle={180}
-                    endAngle={0}
-                    data={data}
-                    cx={cx}
-                    cy={cy}
-                    innerRadius={iR}
-                    outerRadius={oR}
-                    fill={colors.primary}
-                    stroke="none"
-                >
-                    {data.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                </Pie>
-                {needle(value, data, cx, cy, iR, oR, colors.warning)}
-            </PieChart>
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart height={height}>
+        <Pie
+          dataKey="value"
+          startAngle={180}
+          endAngle={0}
+          data={data}
+          cx={cx}
+          cy={cy}
+          innerRadius={iR}
+          outerRadius={oR}
+          fill={colors.primary}
+          stroke="none"
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={entry.color} />
+          ))}
+        </Pie>
+        {needle(value, data, cx, cy, iR, oR, colors.warning)}
+      </PieChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default PieWithNeedle;
\ No newline at end of file
+export default PieWithNeedle;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/straight-angle.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/straight-angle.tsx
index f17ec421..6ae59802 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/straight-angle.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/straight-angle.tsx
@@ -1,38 +1,39 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Pie, PieChart, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie } from 'recharts';
+
 const data = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
-    { name: 'Group E', value: 278 },
-    { name: 'Group F', value: 189 },
+  { name: "Group A", value: 400 },
+  { name: "Group B", value: 300 },
+  { name: "Group C", value: 300 },
+  { name: "Group D", value: 200 },
+  { name: "Group E", value: 278 },
+  { name: "Group F", value: 189 },
 ];
 const StraightAngle = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart >
-                <Pie
-                    dataKey="value"
-                    startAngle={180}
-                    endAngle={0}
-                    data={data}
-                    cx="50%"
-                    cy="50%"
-                    outerRadius={80}
-                    fill={colors.primary}
-                    label
-                />
-            </PieChart>
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart>
+        <Pie
+          dataKey="value"
+          startAngle={180}
+          endAngle={0}
+          data={data}
+          cx="50%"
+          cy="50%"
+          outerRadius={80}
+          fill={colors.primary}
+          label
+        />
+      </PieChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default StraightAngle;
\ No newline at end of file
+export default StraightAngle;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/two-simple-pie.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/two-simple-pie.tsx
index cc5c26fa..b85fcbc2 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/two-simple-pie.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/two-simple-pie.tsx
@@ -1,65 +1,71 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie, Tooltip } from 'recharts';
 
 const data01 = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
-    { name: 'Group E', value: 278 },
-    { name: 'Group F', value: 189 },
+  { name: "Group A", value: 400 },
+  { name: "Group B", value: 300 },
+  { name: "Group C", value: 300 },
+  { name: "Group D", value: 200 },
+  { name: "Group E", value: 278 },
+  { name: "Group F", value: 189 },
 ];
 
 const data02 = [
-    { name: 'Group A', value: 2400 },
-    { name: 'Group B', value: 4567 },
-    { name: 'Group C', value: 1398 },
-    { name: 'Group D', value: 9800 },
-    { name: 'Group E', value: 3908 },
-    { name: 'Group F', value: 4800 },
+  { name: "Group A", value: 2400 },
+  { name: "Group B", value: 4567 },
+  { name: "Group C", value: 1398 },
+  { name: "Group D", value: 9800 },
+  { name: "Group E", value: 3908 },
+  { name: "Group F", value: 4800 },
 ];
 const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
+  if (active && payload) {
+    return (
+      <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
+        <span>{`${payload[0].name}`}</span>
+        <span>:</span>
+        <span>{`${payload[0].value}%`}</span>
+      </div>
+    );
+  }
 
-    return null;
+  return null;
 };
 
 const TwoSimplePie = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart >
-                <Pie
-                    dataKey="value"
-                    isAnimationActive={false}
-                    data={data01}
-                    cx="50%"
-                    cy="50%"
-                    outerRadius={80}
-                    fill={colors.primary}
-                    label
-                />
-                <Pie dataKey="value" data={data02} cx={500} cy={200} innerRadius={40} outerRadius={80}
-                    fill={colors.info}
-                />
-                <Tooltip content={<CustomTooltip />} />
-            </PieChart>
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart>
+        <Pie
+          dataKey="value"
+          isAnimationActive={false}
+          data={data01}
+          cx="50%"
+          cy="50%"
+          outerRadius={80}
+          fill={colors.primary}
+          label
+        />
+        <Pie
+          dataKey="value"
+          data={data02}
+          cx={500}
+          cy={200}
+          innerRadius={40}
+          outerRadius={80}
+          fill={colors.info}
+        />
+        <Tooltip content={<CustomTooltip />} />
+      </PieChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default TwoSimplePie;
\ No newline at end of file
+export default TwoSimplePie;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/twolevel-pie.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/twolevel-pie.tsx
index 1c2f9289..b88c50a2 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/twolevel-pie.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-pie/twolevel-pie.tsx
@@ -1,47 +1,58 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Pie, PieChart, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, PieChart, Pie } from 'recharts';
-
 
 const data01 = [
-    { name: 'Group A', value: 400 },
-    { name: 'Group B', value: 300 },
-    { name: 'Group C', value: 300 },
-    { name: 'Group D', value: 200 },
+  { name: "Group A", value: 400 },
+  { name: "Group B", value: 300 },
+  { name: "Group C", value: 300 },
+  { name: "Group D", value: 200 },
 ];
 const data02 = [
-    { name: 'A1', value: 100 },
-    { name: 'A2', value: 300 },
-    { name: 'B1', value: 100 },
-    { name: 'B2', value: 80 },
-    { name: 'B3', value: 40 },
-    { name: 'B4', value: 30 },
-    { name: 'B5', value: 50 },
-    { name: 'C1', value: 100 },
-    { name: 'C2', value: 200 },
-    { name: 'D1', value: 150 },
-    { name: 'D2', value: 50 },
+  { name: "A1", value: 100 },
+  { name: "A2", value: 300 },
+  { name: "B1", value: 100 },
+  { name: "B2", value: 80 },
+  { name: "B3", value: 40 },
+  { name: "B4", value: 30 },
+  { name: "B5", value: 50 },
+  { name: "C1", value: 100 },
+  { name: "C2", value: 200 },
+  { name: "D1", value: 150 },
+  { name: "D2", value: 50 },
 ];
 
 const TwoLevelPie = ({ height = 300 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <PieChart height={height} >
-                <Pie data={data01} dataKey="value" cx="50%" cy="50%" outerRadius={60}
-                    fill={colors.primary} />
-                <Pie data={data02} dataKey="value" cx="50%" cy="50%" innerRadius={70} outerRadius={90}
-                    fill={colors.info}
-                    label
-                />
-            </PieChart>
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <PieChart height={height}>
+        <Pie
+          data={data01}
+          dataKey="value"
+          cx="50%"
+          cy="50%"
+          outerRadius={60}
+          fill={colors.primary}
+        />
+        <Pie
+          data={data02}
+          dataKey="value"
+          cx="50%"
+          cy="50%"
+          innerRadius={70}
+          outerRadius={90}
+          fill={colors.info}
+          label
+        />
+      </PieChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default TwoLevelPie;
\ No newline at end of file
+export default TwoLevelPie;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/page.tsx
index 72825899..49c1fa18 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/page.tsx
@@ -1,7 +1,10 @@
 import React from "react";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import ReSimpleRadarChart from "./simple-radar-chart";
 import ReSpecifiedDomainRadarChart from "./specified-domain-radar";
+
 const ChartJsRechartRadar = () => {
   return (
     <div className="grid   grid-cols-1 gap-6">
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/simple-radar-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/simple-radar-chart.tsx
index bc0c434a..62e625c8 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/simple-radar-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/simple-radar-chart.tsx
@@ -1,20 +1,20 @@
 "use client";
-import React from "react";
 
+import React from "react";
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
   Radar,
   RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
   ResponsiveContainer,
 } from "recharts";
 
-const ReSimpleRadarChart = ({ height = 300 }) => {
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
 
+const ReSimpleRadarChart = ({ height = 300 }) => {
   const { theme: mode } = useTheme();
 
   const data = [
@@ -68,10 +68,12 @@ const ReSimpleRadarChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.primary}
-          style={{
-            opacity: 0.4,
-            "--theme-primary": colors.primary,
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.4,
+              "--theme-primary": colors.primary,
+            } as React.CSSProperties
+          }
         />
       </RadarChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/specified-domain-radar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/specified-domain-radar.tsx
index 07c541d4..adc70aa3 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/specified-domain-radar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radar/specified-domain-radar.tsx
@@ -1,23 +1,22 @@
 "use client";
-import React from "react";
 
+import React from "react";
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
   Radar,
   RadarChart,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis,
   ResponsiveContainer,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 const ReSpecifiedDomainRadarChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   const data = [
     {
       subject: "Math",
@@ -69,10 +68,12 @@ const ReSpecifiedDomainRadarChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.primary}
-          style={{
-            opacity: 0.2,
-            "--theme-primary": colors.primary,
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.2,
+              "--theme-primary": colors.primary,
+            } as React.CSSProperties
+          }
         />
         <Radar
           name="Lily"
@@ -81,10 +82,11 @@ const ReSpecifiedDomainRadarChart = ({ height = 300 }) => {
           dot={true}
           strokeWidth={2}
           fill={colors.success}
-          style={{
-            opacity: 0.4,
-
-          } as React.CSSProperties}
+          style={
+            {
+              opacity: 0.4,
+            } as React.CSSProperties
+          }
         />
       </RadarChart>
     </ResponsiveContainer>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/basic-radial-bar.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/basic-radial-bar.tsx
index 9b48d26d..9e7b9454 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/basic-radial-bar.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/basic-radial-bar.tsx
@@ -1,88 +1,94 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { Legend, RadialBar, RadialBarChart, ResponsiveContainer } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { RadialBarChart, RadialBar, Legend, ResponsiveContainer } from 'recharts';
-
-
 
 const BasicRadialBar = ({ height = 450 }) => {
-    const [config] = useConfig();
-    const { theme: mode } = useTheme();
+  const [config] = useConfig();
+  const { theme: mode } = useTheme();
 
-    const data = [
-        {
-            name: '18-24',
-            uv: 31.47,
-            pv: 2400,
-            fill: '#8884d8',
-        },
-        {
-            name: '25-29',
-            uv: 26.69,
-            pv: 4567,
-            fill: '#83a6ed',
-        },
-        {
-            name: '30-34',
-            uv: 15.69,
-            pv: 1398,
-            fill: '#8dd1e1',
-        },
-        {
-            name: '35-39',
-            uv: 8.22,
-            pv: 9800,
-            fill: '#82ca9d',
-        },
-        {
-            name: '40-49',
-            uv: 8.63,
-            pv: 3908,
-            fill: '#a4de6c',
-        },
-        {
-            name: '50+',
-            uv: 2.63,
-            pv: 4800,
-            fill: '#d0ed57',
-        },
-        {
-            name: '30',
-            uv: 6.67,
-            pv: 4800,
-            fill: '#ffc658',
-        },
-    ];
+  const data = [
+    {
+      name: "18-24",
+      uv: 31.47,
+      pv: 2400,
+      fill: "#8884d8",
+    },
+    {
+      name: "25-29",
+      uv: 26.69,
+      pv: 4567,
+      fill: "#83a6ed",
+    },
+    {
+      name: "30-34",
+      uv: 15.69,
+      pv: 1398,
+      fill: "#8dd1e1",
+    },
+    {
+      name: "35-39",
+      uv: 8.22,
+      pv: 9800,
+      fill: "#82ca9d",
+    },
+    {
+      name: "40-49",
+      uv: 8.63,
+      pv: 3908,
+      fill: "#a4de6c",
+    },
+    {
+      name: "50+",
+      uv: 2.63,
+      pv: 4800,
+      fill: "#d0ed57",
+    },
+    {
+      name: "30",
+      uv: 6.67,
+      pv: 4800,
+      fill: "#ffc658",
+    },
+  ];
 
-    const style = {
-        top: '50%',
-        right: config.isRtl ? "" : "0",
-        left: config.isRtl ? "0" : "",
-        transform: 'translate(0, -50%)',
-        lineHeight: '24px',
-    };
+  const style = {
+    top: "50%",
+    right: config.isRtl ? "" : "0",
+    left: config.isRtl ? "0" : "",
+    transform: "translate(0, -50%)",
+    lineHeight: "24px",
+  };
 
-
-    return (
-        <ResponsiveContainer width="100%" height={height}>
-            <RadialBarChart height={height} cx="50%" cy="50%" innerRadius="10%" outerRadius="100%" barSize={10} data={data}>
-                <RadialBar
-                    background
-                    dataKey="uv"
-                />
-                <Legend
-                    iconSize={10}
-                    layout="vertical"
-                    verticalAlign="middle"
-                    wrapperStyle={style}
-                    formatter={(value, entry) => <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>{value}</span>}
-                />
-            </RadialBarChart>
-
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RadialBarChart
+        height={height}
+        cx="50%"
+        cy="50%"
+        innerRadius="10%"
+        outerRadius="100%"
+        barSize={10}
+        data={data}
+      >
+        <RadialBar background dataKey="uv" />
+        <Legend
+          iconSize={10}
+          layout="vertical"
+          verticalAlign="middle"
+          wrapperStyle={style}
+          formatter={(value, entry) => (
+            <span style={{ color: entry.color, marginRight: config.isRtl ? "5px" : "0px" }}>
+              {value}
+            </span>
+          )}
+        />
+      </RadialBarChart>
+    </ResponsiveContainer>
+  );
 };
 
-export default BasicRadialBar;
\ No newline at end of file
+export default BasicRadialBar;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/page.tsx
index 9e28dae4..9bcf5933 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-radialbar/page.tsx
@@ -1,22 +1,18 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicRadialBar from "./basic-radial-bar";
 
-
-
 const ChartJsRadialBarPage = () => {
-
-
-    return (
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Radial Bar Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicRadialBar />
-                </CardContent>
-            </Card>
-    );
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Simple Radial Bar Chart</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <BasicRadialBar />
+      </CardContent>
+    </Card>
+  );
 };
 
 export default ChartJsRadialBarPage;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/basic-scatter.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/basic-scatter.tsx
index 7a4963e0..69440545 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/basic-scatter.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/basic-scatter.tsx
@@ -1,18 +1,21 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
   CartesianGrid,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 const data: { x: number; y: number; z: number }[] = [
   { x: 100, y: 200, z: 200 },
   { x: 120, y: 100, z: 260 },
@@ -22,29 +25,23 @@ const data: { x: number; y: number; z: number }[] = [
   { x: 110, y: 280, z: 200 },
 ];
 const BasicScatter = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <ScatterChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           type="number"
           dataKey="x"
           name="stature"
           unit="cm"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
@@ -53,18 +50,14 @@ const BasicScatter = ({ height = 300 }) => {
           name="weight"
           unit="kg"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          name="A school"
-          data={data}
-          fill={colors.primary}
-        />
+        <Scatter name="A school" data={data} fill={colors.primary} />
       </ScatterChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/bubble-chart.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/bubble-chart.tsx
index 0f0cb4b8..a401163f 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/bubble-chart.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/bubble-chart.tsx
@@ -1,21 +1,15 @@
 "use client";
 
 import { useTheme } from "next-themes";
+import { ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import {
-  XAxis,
-  YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  ZAxis,
-} from "recharts";
+
 interface DataProps {
   hour: string;
   index: number;
-  value: number
+  value: number;
 }
 const data01: DataProps[] = [
   { hour: "12a", index: 1, value: 170 },
@@ -110,7 +104,6 @@ const renderTooltip = (props: any) => {
   }
 };
 const BubbleChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   const domain = parseDomain();
@@ -118,7 +111,7 @@ const BubbleChart = ({ height = 300 }) => {
 
   return (
     <>
-      <div style={{ width: "100%", height }} >
+      <div style={{ width: "100%", height }}>
         <ResponsiveContainer width="100%" height={60}>
           <ScatterChart
             margin={{
@@ -133,7 +126,7 @@ const BubbleChart = ({ height = 300 }) => {
               dataKey="hour"
               interval={0}
               tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+                fill: mode === "light" ? colors["default-600"] : colors["default-300"],
                 fontSize: "0px",
               }}
               tickLine={{ transform: "translate(0, -6)" }}
@@ -151,21 +144,13 @@ const BubbleChart = ({ height = 300 }) => {
               stroke="none"
               label={{ value: "Sunday", position: "insideRight" }}
             />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
+            <ZAxis type="number" dataKey="value" domain={domain} range={range} />
             <Tooltip
               cursor={{ strokeDasharray: "3 3" }}
               wrapperStyle={{ zIndex: 100 }}
               content={renderTooltip}
             />
-            <Scatter
-              data={data01}
-              fill={colors.primary}
-            />
+            <Scatter data={data01} fill={colors.primary} />
           </ScatterChart>
         </ResponsiveContainer>
 
@@ -187,7 +172,7 @@ const BubbleChart = ({ height = 300 }) => {
               interval={0}
               tickLine={{ transform: "translate(0, -6)" }}
               tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+                fill: mode === "light" ? colors["default-600"] : colors["default-300"],
                 fontSize: "0px",
               }}
               stroke="none"
@@ -203,21 +188,13 @@ const BubbleChart = ({ height = 300 }) => {
               label={{ value: "Monday", position: "insideRight" }}
               stroke="none"
             />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
+            <ZAxis type="number" dataKey="value" domain={domain} range={range} />
             <Tooltip
               cursor={{ strokeDasharray: "3 3" }}
               wrapperStyle={{ zIndex: 100 }}
               content={renderTooltip}
             />
-            <Scatter
-              data={data02}
-              fill={colors.info}
-            />
+            <Scatter data={data02} fill={colors.info} />
           </ScatterChart>
         </ResponsiveContainer>
 
@@ -239,7 +216,7 @@ const BubbleChart = ({ height = 300 }) => {
               interval={0}
               tickLine={{ transform: "translate(0, -6)" }}
               tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+                fill: mode === "light" ? colors["default-600"] : colors["default-300"],
                 fontSize: "0px",
               }}
               stroke="none"
@@ -255,21 +232,13 @@ const BubbleChart = ({ height = 300 }) => {
               label={{ value: "Tuesday", position: "insideRight" }}
               stroke="none"
             />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
+            <ZAxis type="number" dataKey="value" domain={domain} range={range} />
             <Tooltip
               cursor={{ strokeDasharray: "3 3" }}
               wrapperStyle={{ zIndex: 100 }}
               content={renderTooltip}
             />
-            <Scatter
-              data={data01}
-              fill={colors.warning}
-            />
+            <Scatter data={data01} fill={colors.warning} />
           </ScatterChart>
         </ResponsiveContainer>
 
@@ -291,7 +260,7 @@ const BubbleChart = ({ height = 300 }) => {
               interval={0}
               tickLine={{ transform: "translate(0, -6)" }}
               tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+                fill: mode === "light" ? colors["default-600"] : colors["default-300"],
                 fontSize: "0px",
               }}
               stroke="none"
@@ -308,21 +277,13 @@ const BubbleChart = ({ height = 300 }) => {
               label={{ value: "Wednesday", position: "insideRight" }}
               stroke="none"
             />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
+            <ZAxis type="number" dataKey="value" domain={domain} range={range} />
             <Tooltip
               cursor={{ strokeDasharray: "3 3" }}
               wrapperStyle={{ zIndex: 100 }}
               content={renderTooltip}
             />
-            <Scatter
-              data={data02}
-              fill={colors.info}
-            />
+            <Scatter data={data02} fill={colors.info} />
           </ScatterChart>
         </ResponsiveContainer>
 
@@ -357,21 +318,13 @@ const BubbleChart = ({ height = 300 }) => {
               label={{ value: "Thursday", position: "insideRight" }}
               stroke="none"
             />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
+            <ZAxis type="number" dataKey="value" domain={domain} range={range} />
             <Tooltip
               cursor={{ strokeDasharray: "3 3" }}
               wrapperStyle={{ zIndex: 100 }}
               content={renderTooltip}
             />
-            <Scatter
-              data={data01}
-              fill={colors.success}
-            />
+            <Scatter data={data01} fill={colors.success} />
           </ScatterChart>
         </ResponsiveContainer>
 
@@ -406,21 +359,13 @@ const BubbleChart = ({ height = 300 }) => {
               label={{ value: "Friday", position: "insideRight" }}
               stroke="none"
             />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
+            <ZAxis type="number" dataKey="value" domain={domain} range={range} />
             <Tooltip
               cursor={{ strokeDasharray: "3 3" }}
               wrapperStyle={{ zIndex: 100 }}
               content={renderTooltip}
             />
-            <Scatter
-              data={data02}
-              fill={colors.primary}
-            />
+            <Scatter data={data02} fill={colors.primary} />
           </ScatterChart>
         </ResponsiveContainer>
 
@@ -443,7 +388,7 @@ const BubbleChart = ({ height = 300 }) => {
               tickLine={{ transform: "translate(0, -6)" }}
               stroke="none"
               tick={{
-                fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+                fill: mode === "light" ? colors["default-600"] : colors["default-300"],
 
                 fontSize: "12px",
               }}
@@ -459,21 +404,13 @@ const BubbleChart = ({ height = 300 }) => {
               label={{ value: "Saturday", position: "insideRight" }}
               stroke="none"
             />
-            <ZAxis
-              type="number"
-              dataKey="value"
-              domain={domain}
-              range={range}
-            />
+            <ZAxis type="number" dataKey="value" domain={domain} range={range} />
             <Tooltip
               cursor={{ strokeDasharray: "3 3" }}
               wrapperStyle={{ zIndex: 100 }}
               content={renderTooltip}
             />
-            <Scatter
-              data={data01}
-              fill={colors.info}
-            />
+            <Scatter data={data01} fill={colors.info} />
           </ScatterChart>
         </ResponsiveContainer>
       </div>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/custom-tooltip.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/custom-tooltip.tsx
index 7f1ec663..3d05430a 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/custom-tooltip.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/custom-tooltip.tsx
@@ -1,15 +1,15 @@
 const CustomTooltip = ({ active, payload }: any) => {
-    if (active && payload) {
-        return (
-            <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
-                <span>{`${payload[0].name}`}</span>
-                <span>:</span>
-                <span>{`${payload[0].value}%`}</span>
-            </div>
-        );
-    }
+  if (active && payload) {
+    return (
+      <div className="bg-slate-900 text-primary-foreground p-3 rounded-md space-x-2 rtl:space-x-reverse ">
+        <span>{`${payload[0].name}`}</span>
+        <span>:</span>
+        <span>{`${payload[0].value}%`}</span>
+      </div>
+    );
+  }
 
-    return null;
+  return null;
 };
 
-export default CustomTooltip
\ No newline at end of file
+export default CustomTooltip;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/jointline-scatter.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/jointline-scatter.tsx
index 7749e9ad..04766f10 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/jointline-scatter.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/jointline-scatter.tsx
@@ -1,20 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
   CartesianGrid,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
   ZAxis,
 } from "recharts";
 
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 interface DataPoint {
   x: number;
   y: number;
@@ -36,28 +38,23 @@ const data02: DataPoint[] = [
 ];
 
 const JointLineScatter = ({ height = 400 }) => {
-
   const { theme: mode } = useTheme();
 
   return (
     <ResponsiveContainer width="100%" height={height}>
       <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           type="number"
           dataKey="x"
           name="stature"
           unit="cm"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
@@ -66,29 +63,17 @@ const JointLineScatter = ({ height = 400 }) => {
           name="weight"
           unit="kg"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <ZAxis type="number" range={[100]} />
         <Tooltip content={<CustomTooltip />} />
 
-        <Scatter
-          name="A school"
-          data={data01}
-          line
-          shape="cross"
-          fill={colors.info}
-        />
-        <Scatter
-          name="B school"
-          data={data02}
-          line
-          shape="diamond"
-          fill={colors.success}
-        />
+        <Scatter name="A school" data={data01} line shape="cross" fill={colors.info} />
+        <Scatter name="B school" data={data02} line shape="diamond" fill={colors.success} />
       </ScatterChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/multiple-yaxes-scatter.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/multiple-yaxes-scatter.tsx
index 11a8ae1c..f86917db 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/multiple-yaxes-scatter.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/multiple-yaxes-scatter.tsx
@@ -1,18 +1,21 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
   CartesianGrid,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 interface DataPoint {
   x: number;
   y: number;
@@ -42,29 +45,23 @@ const data02: DataPoint[] = [
 ];
 
 const MultipleYAxesChart = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           type="number"
           dataKey="x"
           name="stature"
           unit="cm"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
@@ -73,11 +70,11 @@ const MultipleYAxesChart = ({ height = 300 }) => {
           name="weight"
           unit="kg"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           yAxisId="left"
         />
         <YAxis
@@ -86,27 +83,17 @@ const MultipleYAxesChart = ({ height = 300 }) => {
           name="weight"
           unit="kg"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           yAxisId="right"
           orientation="right"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          yAxisId="left"
-          name="A school"
-          data={data01}
-          fill={colors.primary}
-        />
-        <Scatter
-          yAxisId="right"
-          name="A school"
-          data={data02}
-          fill={colors.primary}
-        />
+        <Scatter yAxisId="left" name="A school" data={data01} fill={colors.primary} />
+        <Scatter yAxisId="right" name="A school" data={data02} fill={colors.primary} />
       </ScatterChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/page.tsx
index a228f635..5b45fedf 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/page.tsx
@@ -1,74 +1,74 @@
-
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicScatter from "./basic-scatter";
-import ThreeDimScatter from "./threedim-scatter";
-import JointLineScatter from "./jointline-scatter";
 import BubbleChart from "./bubble-chart";
-import ScatterChartWithLabels from "./scatterchart-withlabels";
+import JointLineScatter from "./jointline-scatter";
 import MultipleYAxesChart from "./multiple-yaxes-scatter";
 import ScatterChartWithCells from "./scatter-chartwith-cells";
+import ScatterChartWithLabels from "./scatterchart-withlabels";
+import ThreeDimScatter from "./threedim-scatter";
 
 const ChartJsRechartScatterPage = () => {
-    return (
-        <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Basic Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicScatter />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Three Dim Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ThreeDimScatter />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Joint Line Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <JointLineScatter />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Bubble Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BubbleChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Scatter Chart With Labels</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScatterChartWithLabels />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Multiple YAxes Scatter Chart</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <MultipleYAxesChart />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Scatter Chart With Cells</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <ScatterChartWithCells />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="grid xl:grid-cols-2  grid-cols-1 gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Basic Scatter Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicScatter />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Three Dim Scatter Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ThreeDimScatter />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Joint Line Scatter Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <JointLineScatter />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Bubble Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BubbleChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Scatter Chart With Labels</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ScatterChartWithLabels />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Multiple YAxes Scatter Chart</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <MultipleYAxesChart />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Scatter Chart With Cells</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <ScatterChartWithCells />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartJsRechartScatterPage;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatter-chartwith-cells.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatter-chartwith-cells.tsx
index e9b6c064..88afbb2b 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatter-chartwith-cells.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatter-chartwith-cells.tsx
@@ -1,19 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
   CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  Cell,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 interface DataPoint {
   x: number;
   y: number;
@@ -29,36 +32,25 @@ const data: DataPoint[] = [
 ];
 
 const ScatterChartWithCells = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
-  const COLORS = [
-    colors.primary,
-    colors.info,
-    colors.warning,
-    colors.success,
-  ];
+  const COLORS = [colors.primary, colors.info, colors.warning, colors.success];
 
   return (
     <ResponsiveContainer width="100%" height={height}>
       <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           type="number"
           dataKey="x"
           name="stature"
           unit="cm"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
@@ -67,19 +59,15 @@ const ScatterChartWithCells = ({ height = 300 }) => {
           name="weight"
           unit="kg"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
 
         <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          data={data}
-          name="A school"
-          fill={colors.primary}
-        >
+        <Scatter data={data} name="A school" fill={colors.primary}>
           {data.map((entry, index) => (
             <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
           ))}
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatterchart-withlabels.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatterchart-withlabels.tsx
index 6eb36088..bdd98aa6 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatterchart-withlabels.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/scatterchart-withlabels.tsx
@@ -1,19 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
   CartesianGrid,
+  LabelList,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
-  LabelList,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 interface DataPoint {
   x: number;
   y: number;
@@ -29,28 +32,23 @@ const data: DataPoint[] = [
 ];
 
 const ScatterChartWithLabels = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
   return (
     <ResponsiveContainer width="100%" height={height}>
       <ScatterChart height={height} data={data}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           type="number"
           dataKey="x"
           name="stature"
           unit="cm"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
@@ -59,18 +57,14 @@ const ScatterChartWithLabels = ({ height = 300 }) => {
           name="weight"
           unit="kg"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
         />
         <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          name="A school"
-          data={data}
-          fill={colors.info}
-        >
+        <Scatter name="A school" data={data} fill={colors.info}>
           <LabelList dataKey="x" />
         </Scatter>
       </ScatterChart>
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/threedim-scatter.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/threedim-scatter.tsx
index f3fa719e..6ac7a2da 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/threedim-scatter.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-scatter/threedim-scatter.tsx
@@ -1,19 +1,22 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { colors } from "@/lib/colors";
-import { useConfig } from "@/lib/hooks/use-config";
 import {
   CartesianGrid,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  Tooltip,
   XAxis,
   YAxis,
-  ResponsiveContainer,
-  Tooltip,
-  ScatterChart,
-  Scatter,
   ZAxis,
 } from "recharts";
+
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
 import CustomTooltip from "./custom-tooltip";
+
 interface DataPoint {
   x: number;
   y: number;
@@ -37,29 +40,23 @@ const data02: DataPoint[] = [
 ];
 
 const ThreeDimScatter = ({ height = 300 }) => {
-
   const { theme: mode } = useTheme();
 
-
   return (
     <ResponsiveContainer width="100%" height={height}>
       <ScatterChart height={height}>
-        <CartesianGrid
-          stroke='none'
-          strokeDasharray="3 3"
-          vertical={false}
-        />
+        <CartesianGrid stroke="none" strokeDasharray="3 3" vertical={false} />
         <XAxis
           type="number"
           dataKey="x"
           name="stature"
           unit="cm"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
+          stroke="none"
           axisLine={false}
         />
         <YAxis
@@ -68,32 +65,16 @@ const ThreeDimScatter = ({ height = 300 }) => {
           name="weight"
           unit="kg"
           tick={{
-            fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            fill: mode === "light" ? colors["default-600"] : colors["default-300"],
             fontSize: "12px",
           }}
           tickLine={false}
-          stroke='none'
-        />
-        <ZAxis
-          type="number"
-          dataKey="z"
-          range={[60, 400]}
-          name="score"
-          unit="km"
+          stroke="none"
         />
+        <ZAxis type="number" dataKey="z" range={[60, 400]} name="score" unit="km" />
         <Tooltip content={<CustomTooltip />} />
-        <Scatter
-          name="A school"
-          data={data01}
-          shape="star"
-          fill={colors.info}
-        />
-        <Scatter
-          name="B school"
-          data={data02}
-          fill={colors.success}
-          shape="triangle"
-        />
+        <Scatter name="A school" data={data01} shape="star" fill={colors.info} />
+        <Scatter name="B school" data={data02} fill={colors.success} shape="triangle" />
       </ScatterChart>
     </ResponsiveContainer>
   );
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/basic-tree-map.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/basic-tree-map.tsx
index fa15ef1e..c15742d1 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/basic-tree-map.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/basic-tree-map.tsx
@@ -1,155 +1,159 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { ResponsiveContainer, Treemap } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, Treemap } from 'recharts';
 
 const data: any = [
-    {
-        name: 'axis',
+  {
+    name: "axis",
+    children: [
+      { name: "Axes", size: 1302 },
+      { name: "Axis", size: 24593 },
+      { name: "AxisGridLine", size: 652 },
+      { name: "AxisLabel", size: 636 },
+      { name: "CartesianAxes", size: 6703 },
+    ],
+  },
+  {
+    name: "controls",
+    children: [
+      { name: "AnchorControl", size: 2138 },
+      { name: "ClickControl", size: 3824 },
+      { name: "Control", size: 1353 },
+      { name: "ControlList", size: 4665 },
+      { name: "DragControl", size: 2649 },
+      { name: "ExpandControl", size: 2832 },
+      { name: "HoverControl", size: 4896 },
+      { name: "IControl", size: 763 },
+      { name: "PanZoomControl", size: 5222 },
+      { name: "SelectionControl", size: 7862 },
+      { name: "TooltipControl", size: 8435 },
+    ],
+  },
+  {
+    name: "data",
+    children: [
+      { name: "Data", size: 20544 },
+      { name: "DataList", size: 19788 },
+      { name: "DataSprite", size: 10349 },
+      { name: "EdgeSprite", size: 3301 },
+      { name: "NodeSprite", size: 19382 },
+      {
+        name: "render",
         children: [
-            { name: 'Axes', size: 1302 },
-            { name: 'Axis', size: 24593 },
-            { name: 'AxisGridLine', size: 652 },
-            { name: 'AxisLabel', size: 636 },
-            { name: 'CartesianAxes', size: 6703 },
+          { name: "ArrowType", size: 698 },
+          { name: "EdgeRenderer", size: 5569 },
+          { name: "IRenderer", size: 353 },
+          { name: "ShapeRenderer", size: 2247 },
         ],
-    },
-    {
-        name: 'controls',
+      },
+      { name: "ScaleBinding", size: 11275 },
+      { name: "Tree", size: 7147 },
+      { name: "TreeBuilder", size: 9930 },
+    ],
+  },
+  {
+    name: "events",
+    children: [
+      { name: "DataEvent", size: 7313 },
+      { name: "SelectionEvent", size: 6880 },
+      { name: "TooltipEvent", size: 3701 },
+      { name: "VisualizationEvent", size: 2117 },
+    ],
+  },
+  {
+    name: "legend",
+    children: [
+      { name: "Legend", size: 20859 },
+      { name: "LegendItem", size: 4614 },
+      { name: "LegendRange", size: 10530 },
+    ],
+  },
+  {
+    name: "operator",
+    children: [
+      {
+        name: "distortion",
         children: [
-            { name: 'AnchorControl', size: 2138 },
-            { name: 'ClickControl', size: 3824 },
-            { name: 'Control', size: 1353 },
-            { name: 'ControlList', size: 4665 },
-            { name: 'DragControl', size: 2649 },
-            { name: 'ExpandControl', size: 2832 },
-            { name: 'HoverControl', size: 4896 },
-            { name: 'IControl', size: 763 },
-            { name: 'PanZoomControl', size: 5222 },
-            { name: 'SelectionControl', size: 7862 },
-            { name: 'TooltipControl', size: 8435 },
+          { name: "BifocalDistortion", size: 4461 },
+          { name: "Distortion", size: 6314 },
+          { name: "FisheyeDistortion", size: 3444 },
         ],
-    },
-    {
-        name: 'data',
+      },
+      {
+        name: "encoder",
         children: [
-            { name: 'Data', size: 20544 },
-            { name: 'DataList', size: 19788 },
-            { name: 'DataSprite', size: 10349 },
-            { name: 'EdgeSprite', size: 3301 },
-            { name: 'NodeSprite', size: 19382 },
-            {
-                name: 'render',
-                children: [
-                    { name: 'ArrowType', size: 698 },
-                    { name: 'EdgeRenderer', size: 5569 },
-                    { name: 'IRenderer', size: 353 },
-                    { name: 'ShapeRenderer', size: 2247 },
-                ],
-            },
-            { name: 'ScaleBinding', size: 11275 },
-            { name: 'Tree', size: 7147 },
-            { name: 'TreeBuilder', size: 9930 },
+          { name: "ColorEncoder", size: 3179 },
+          { name: "Encoder", size: 4060 },
+          { name: "PropertyEncoder", size: 4138 },
+          { name: "ShapeEncoder", size: 1690 },
+          { name: "SizeEncoder", size: 1830 },
         ],
-    },
-    {
-        name: 'events',
+      },
+      {
+        name: "filter",
         children: [
-            { name: 'DataEvent', size: 7313 },
-            { name: 'SelectionEvent', size: 6880 },
-            { name: 'TooltipEvent', size: 3701 },
-            { name: 'VisualizationEvent', size: 2117 },
+          { name: "FisheyeTreeFilter", size: 5219 },
+          { name: "GraphDistanceFilter", size: 3165 },
+          { name: "VisibilityFilter", size: 3509 },
         ],
-    },
-    {
-        name: 'legend',
+      },
+      { name: "IOperator", size: 1286 },
+      {
+        name: "label",
         children: [
-            { name: 'Legend', size: 20859 },
-            { name: 'LegendItem', size: 4614 },
-            { name: 'LegendRange', size: 10530 },
+          { name: "Labeler", size: 9956 },
+          { name: "RadialLabeler", size: 3899 },
+          { name: "StackedAreaLabeler", size: 3202 },
         ],
-    },
-    {
-        name: 'operator',
+      },
+      {
+        name: "layout",
         children: [
-            {
-                name: 'distortion',
-                children: [
-                    { name: 'BifocalDistortion', size: 4461 },
-                    { name: 'Distortion', size: 6314 },
-                    { name: 'FisheyeDistortion', size: 3444 },
-                ],
-            },
-            {
-                name: 'encoder',
-                children: [
-                    { name: 'ColorEncoder', size: 3179 },
-                    { name: 'Encoder', size: 4060 },
-                    { name: 'PropertyEncoder', size: 4138 },
-                    { name: 'ShapeEncoder', size: 1690 },
-                    { name: 'SizeEncoder', size: 1830 },
-                ],
-            },
-            {
-                name: 'filter',
-                children: [
-                    { name: 'FisheyeTreeFilter', size: 5219 },
-                    { name: 'GraphDistanceFilter', size: 3165 },
-                    { name: 'VisibilityFilter', size: 3509 },
-                ],
-            },
-            { name: 'IOperator', size: 1286 },
-            {
-                name: 'label',
-                children: [
-                    { name: 'Labeler', size: 9956 },
-                    { name: 'RadialLabeler', size: 3899 },
-                    { name: 'StackedAreaLabeler', size: 3202 },
-                ],
-            },
-            {
-                name: 'layout',
-                children: [
-                    { name: 'AxisLayout', size: 6725 },
-                    { name: 'BundledEdgeRouter', size: 3727 },
-                    { name: 'CircleLayout', size: 9317 },
-                    { name: 'CirclePackingLayout', size: 12003 },
-                    { name: 'DendrogramLayout', size: 4853 },
-                    { name: 'ForceDirectedLayout', size: 8411 },
-                    { name: 'IcicleTreeLayout', size: 4864 },
-                    { name: 'IndentedTreeLayout', size: 3174 },
-                    { name: 'Layout', size: 7881 },
-                    { name: 'NodeLinkTreeLayout', size: 12870 },
-                    { name: 'PieLayout', size: 2728 },
-                    { name: 'RadialTreeLayout', size: 12348 },
-                    { name: 'RandomLayout', size: 870 },
-                    { name: 'StackedAreaLayout', size: 9121 },
-                    { name: 'TreeMapLayout', size: 9191 },
-                ],
-            },
-            { name: 'Operator', size: 2490 },
-            { name: 'OperatorList', size: 5248 },
-            { name: 'OperatorSequence', size: 4190 },
-            { name: 'OperatorSwitch', size: 2581 },
-            { name: 'SortOperator', size: 2023 },
+          { name: "AxisLayout", size: 6725 },
+          { name: "BundledEdgeRouter", size: 3727 },
+          { name: "CircleLayout", size: 9317 },
+          { name: "CirclePackingLayout", size: 12003 },
+          { name: "DendrogramLayout", size: 4853 },
+          { name: "ForceDirectedLayout", size: 8411 },
+          { name: "IcicleTreeLayout", size: 4864 },
+          { name: "IndentedTreeLayout", size: 3174 },
+          { name: "Layout", size: 7881 },
+          { name: "NodeLinkTreeLayout", size: 12870 },
+          { name: "PieLayout", size: 2728 },
+          { name: "RadialTreeLayout", size: 12348 },
+          { name: "RandomLayout", size: 870 },
+          { name: "StackedAreaLayout", size: 9121 },
+          { name: "TreeMapLayout", size: 9191 },
         ],
-    },
+      },
+      { name: "Operator", size: 2490 },
+      { name: "OperatorList", size: 5248 },
+      { name: "OperatorSequence", size: 4190 },
+      { name: "OperatorSwitch", size: 2581 },
+      { name: "SortOperator", size: 2023 },
+    ],
+  },
 ];
 const BasicTreeMap = ({ height = 350 }) => {
+  const { theme: mode } = useTheme();
 
-    const { theme: mode } = useTheme();
-
-
-    return (
-        <ResponsiveContainer height={height}>
-            <Treemap width={400} height={200} data={data} dataKey="size" aspectRatio={4 / 3}
-                stroke="#fff"
-                fill={colors.primary}
-            />
-        </ResponsiveContainer>
-    );
+  return (
+    <ResponsiveContainer height={height}>
+      <Treemap
+        width={400}
+        height={200}
+        data={data}
+        dataKey="size"
+        aspectRatio={4 / 3}
+        stroke="#fff"
+        fill={colors.primary}
+      />
+    </ResponsiveContainer>
+  );
 };
 
-export default BasicTreeMap;
\ No newline at end of file
+export default BasicTreeMap;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/custom-content-treemap.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/custom-content-treemap.tsx
index 78bca8e3..7c8054cc 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/custom-content-treemap.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/custom-content-treemap.tsx
@@ -1,198 +1,195 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
+import { ResponsiveContainer, Treemap } from "recharts";
+
 import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
-import { ResponsiveContainer, Treemap } from 'recharts';
 
 const data: any = [
-    {
-        name: 'axis',
+  {
+    name: "axis",
+    children: [
+      { name: "Axes", size: 1302 },
+      { name: "Axis", size: 24593 },
+      { name: "AxisGridLine", size: 652 },
+      { name: "AxisLabel", size: 636 },
+      { name: "CartesianAxes", size: 6703 },
+    ],
+  },
+  {
+    name: "controls",
+    children: [
+      { name: "AnchorControl", size: 2138 },
+      { name: "ClickControl", size: 3824 },
+      { name: "Control", size: 1353 },
+      { name: "ControlList", size: 4665 },
+      { name: "DragControl", size: 2649 },
+      { name: "ExpandControl", size: 2832 },
+      { name: "HoverControl", size: 4896 },
+      { name: "IControl", size: 763 },
+      { name: "PanZoomControl", size: 5222 },
+      { name: "SelectionControl", size: 7862 },
+      { name: "TooltipControl", size: 8435 },
+    ],
+  },
+  {
+    name: "data",
+    children: [
+      { name: "Data", size: 20544 },
+      { name: "DataList", size: 19788 },
+      { name: "DataSprite", size: 10349 },
+      { name: "EdgeSprite", size: 3301 },
+      { name: "NodeSprite", size: 19382 },
+      {
+        name: "render",
         children: [
-            { name: 'Axes', size: 1302 },
-            { name: 'Axis', size: 24593 },
-            { name: 'AxisGridLine', size: 652 },
-            { name: 'AxisLabel', size: 636 },
-            { name: 'CartesianAxes', size: 6703 },
+          { name: "ArrowType", size: 698 },
+          { name: "EdgeRenderer", size: 5569 },
+          { name: "IRenderer", size: 353 },
+          { name: "ShapeRenderer", size: 2247 },
         ],
-    },
-    {
-        name: 'controls',
+      },
+      { name: "ScaleBinding", size: 11275 },
+      { name: "Tree", size: 7147 },
+      { name: "TreeBuilder", size: 9930 },
+    ],
+  },
+  {
+    name: "events",
+    children: [
+      { name: "DataEvent", size: 7313 },
+      { name: "SelectionEvent", size: 6880 },
+      { name: "TooltipEvent", size: 3701 },
+      { name: "VisualizationEvent", size: 2117 },
+    ],
+  },
+  {
+    name: "legend",
+    children: [
+      { name: "Legend", size: 20859 },
+      { name: "LegendItem", size: 4614 },
+      { name: "LegendRange", size: 10530 },
+    ],
+  },
+  {
+    name: "operator",
+    children: [
+      {
+        name: "distortion",
         children: [
-            { name: 'AnchorControl', size: 2138 },
-            { name: 'ClickControl', size: 3824 },
-            { name: 'Control', size: 1353 },
-            { name: 'ControlList', size: 4665 },
-            { name: 'DragControl', size: 2649 },
-            { name: 'ExpandControl', size: 2832 },
-            { name: 'HoverControl', size: 4896 },
-            { name: 'IControl', size: 763 },
-            { name: 'PanZoomControl', size: 5222 },
-            { name: 'SelectionControl', size: 7862 },
-            { name: 'TooltipControl', size: 8435 },
+          { name: "BifocalDistortion", size: 4461 },
+          { name: "Distortion", size: 6314 },
+          { name: "FisheyeDistortion", size: 3444 },
         ],
-    },
-    {
-        name: 'data',
+      },
+      {
+        name: "encoder",
         children: [
-            { name: 'Data', size: 20544 },
-            { name: 'DataList', size: 19788 },
-            { name: 'DataSprite', size: 10349 },
-            { name: 'EdgeSprite', size: 3301 },
-            { name: 'NodeSprite', size: 19382 },
-            {
-                name: 'render',
-                children: [
-                    { name: 'ArrowType', size: 698 },
-                    { name: 'EdgeRenderer', size: 5569 },
-                    { name: 'IRenderer', size: 353 },
-                    { name: 'ShapeRenderer', size: 2247 },
-                ],
-            },
-            { name: 'ScaleBinding', size: 11275 },
-            { name: 'Tree', size: 7147 },
-            { name: 'TreeBuilder', size: 9930 },
+          { name: "ColorEncoder", size: 3179 },
+          { name: "Encoder", size: 4060 },
+          { name: "PropertyEncoder", size: 4138 },
+          { name: "ShapeEncoder", size: 1690 },
+          { name: "SizeEncoder", size: 1830 },
         ],
-    },
-    {
-        name: 'events',
+      },
+      {
+        name: "filter",
         children: [
-            { name: 'DataEvent', size: 7313 },
-            { name: 'SelectionEvent', size: 6880 },
-            { name: 'TooltipEvent', size: 3701 },
-            { name: 'VisualizationEvent', size: 2117 },
+          { name: "FisheyeTreeFilter", size: 5219 },
+          { name: "GraphDistanceFilter", size: 3165 },
+          { name: "VisibilityFilter", size: 3509 },
         ],
-    },
-    {
-        name: 'legend',
+      },
+      { name: "IOperator", size: 1286 },
+      {
+        name: "label",
         children: [
-            { name: 'Legend', size: 20859 },
-            { name: 'LegendItem', size: 4614 },
-            { name: 'LegendRange', size: 10530 },
+          { name: "Labeler", size: 9956 },
+          { name: "RadialLabeler", size: 3899 },
+          { name: "StackedAreaLabeler", size: 3202 },
         ],
-    },
-    {
-        name: 'operator',
+      },
+      {
+        name: "layout",
         children: [
-            {
-                name: 'distortion',
-                children: [
-                    { name: 'BifocalDistortion', size: 4461 },
-                    { name: 'Distortion', size: 6314 },
-                    { name: 'FisheyeDistortion', size: 3444 },
-                ],
-            },
-            {
-                name: 'encoder',
-                children: [
-                    { name: 'ColorEncoder', size: 3179 },
-                    { name: 'Encoder', size: 4060 },
-                    { name: 'PropertyEncoder', size: 4138 },
-                    { name: 'ShapeEncoder', size: 1690 },
-                    { name: 'SizeEncoder', size: 1830 },
-                ],
-            },
-            {
-                name: 'filter',
-                children: [
-                    { name: 'FisheyeTreeFilter', size: 5219 },
-                    { name: 'GraphDistanceFilter', size: 3165 },
-                    { name: 'VisibilityFilter', size: 3509 },
-                ],
-            },
-            { name: 'IOperator', size: 1286 },
-            {
-                name: 'label',
-                children: [
-                    { name: 'Labeler', size: 9956 },
-                    { name: 'RadialLabeler', size: 3899 },
-                    { name: 'StackedAreaLabeler', size: 3202 },
-                ],
-            },
-            {
-                name: 'layout',
-                children: [
-                    { name: 'AxisLayout', size: 6725 },
-                    { name: 'BundledEdgeRouter', size: 3727 },
-                    { name: 'CircleLayout', size: 9317 },
-                    { name: 'CirclePackingLayout', size: 12003 },
-                    { name: 'DendrogramLayout', size: 4853 },
-                    { name: 'ForceDirectedLayout', size: 8411 },
-                    { name: 'IcicleTreeLayout', size: 4864 },
-                    { name: 'IndentedTreeLayout', size: 3174 },
-                    { name: 'Layout', size: 7881 },
-                    { name: 'NodeLinkTreeLayout', size: 12870 },
-                    { name: 'PieLayout', size: 2728 },
-                    { name: 'RadialTreeLayout', size: 12348 },
-                    { name: 'RandomLayout', size: 870 },
-                    { name: 'StackedAreaLayout', size: 9121 },
-                    { name: 'TreeMapLayout', size: 9191 },
-                ],
-            },
-            { name: 'Operator', size: 2490 },
-            { name: 'OperatorList', size: 5248 },
-            { name: 'OperatorSequence', size: 4190 },
-            { name: 'OperatorSwitch', size: 2581 },
-            { name: 'SortOperator', size: 2023 },
+          { name: "AxisLayout", size: 6725 },
+          { name: "BundledEdgeRouter", size: 3727 },
+          { name: "CircleLayout", size: 9317 },
+          { name: "CirclePackingLayout", size: 12003 },
+          { name: "DendrogramLayout", size: 4853 },
+          { name: "ForceDirectedLayout", size: 8411 },
+          { name: "IcicleTreeLayout", size: 4864 },
+          { name: "IndentedTreeLayout", size: 3174 },
+          { name: "Layout", size: 7881 },
+          { name: "NodeLinkTreeLayout", size: 12870 },
+          { name: "PieLayout", size: 2728 },
+          { name: "RadialTreeLayout", size: 12348 },
+          { name: "RandomLayout", size: 870 },
+          { name: "StackedAreaLayout", size: 9121 },
+          { name: "TreeMapLayout", size: 9191 },
         ],
-    },
-];
-const COLORS = [
-    '#8889DD',
-    '#9597E4',
-    '#8DC77B',
-    '#A5D297',
-    '#E2CF45',
-    '#F8C12D'
+      },
+      { name: "Operator", size: 2490 },
+      { name: "OperatorList", size: 5248 },
+      { name: "OperatorSequence", size: 4190 },
+      { name: "OperatorSwitch", size: 2581 },
+      { name: "SortOperator", size: 2023 },
+    ],
+  },
 ];
+const COLORS = ["#8889DD", "#9597E4", "#8DC77B", "#A5D297", "#E2CF45", "#F8C12D"];
 
 const CustomizedContent = ({ root, depth, x, y, width, height, index, colors, name }: any) => {
-    return (
-        <g>
-            <rect
-                x={x}
-                y={y}
-                width={width}
-                height={height}
-                style={{
-                    fill: depth < 2 ? colors[Math.floor((index / root.children.length) * 6)] : '#ffffff00',
-                    stroke: '#fff',
-                    strokeWidth: 2 / (depth + 1e-10),
-                    strokeOpacity: 1 / (depth + 1e-10),
-                }}
-            />
-            {depth === 1 ? (
-                <text x={x + width / 2} y={y + height / 2 + 7} textAnchor="middle" fill="#fff" fontSize={14}>
-                    {name}
-                </text>
-            ) : null}
-            {depth === 1 ? (
-                <text x={x + 4} y={y + 18} fill="#fff" fontSize={16} fillOpacity={0.9}>
-                    {index + 1}
-                </text>
-            ) : null}
-        </g>
-    );
-
-}
-
-const CustomContentTreeMap = ({ height = 350 }) => {
-
-    const { theme: mode } = useTheme();
-
-
-    return (
-        <ResponsiveContainer height={height}>
-            <Treemap
-                data={data}
-                dataKey="size"
-                aspectRatio={4 / 3}
-                stroke="#fff"
-                fill={colors.info}
-                content={<CustomizedContent colors={COLORS} />}
-            />
-        </ResponsiveContainer>
-    );
+  return (
+    <g>
+      <rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        style={{
+          fill: depth < 2 ? colors[Math.floor((index / root.children.length) * 6)] : "#ffffff00",
+          stroke: "#fff",
+          strokeWidth: 2 / (depth + 1e-10),
+          strokeOpacity: 1 / (depth + 1e-10),
+        }}
+      />
+      {depth === 1 ? (
+        <text
+          x={x + width / 2}
+          y={y + height / 2 + 7}
+          textAnchor="middle"
+          fill="#fff"
+          fontSize={14}
+        >
+          {name}
+        </text>
+      ) : null}
+      {depth === 1 ? (
+        <text x={x + 4} y={y + 18} fill="#fff" fontSize={16} fillOpacity={0.9}>
+          {index + 1}
+        </text>
+      ) : null}
+    </g>
+  );
 };
 
-export default CustomContentTreeMap;
\ No newline at end of file
+const CustomContentTreeMap = ({ height = 350 }) => {
+  const { theme: mode } = useTheme();
+
+  return (
+    <ResponsiveContainer height={height}>
+      <Treemap
+        data={data}
+        dataKey="size"
+        aspectRatio={4 / 3}
+        stroke="#fff"
+        fill={colors.info}
+        content={<CustomizedContent colors={COLORS} />}
+      />
+    </ResponsiveContainer>
+  );
+};
+
+export default CustomContentTreeMap;
diff --git a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/page.tsx b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/page.tsx
index 91f40807..6ebd7a50 100644
--- a/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/page.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/charts-rechart-treemap/page.tsx
@@ -1,29 +1,31 @@
 import React from "react";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 import BasicTreeMap from "./basic-tree-map";
 import CustomContentTreeMap from "./custom-content-treemap";
 
 const ChartjsRechartTreemapPage = () => {
-    return (
-        <div className="space-y-6">
-            <Card>
-                <CardHeader>
-                    <CardTitle>Simple Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <BasicTreeMap />
-                </CardContent>
-            </Card>
-            <Card>
-                <CardHeader>
-                    <CardTitle>Custom Content Tree Map</CardTitle>
-                </CardHeader>
-                <CardContent>
-                    <CustomContentTreeMap />
-                </CardContent>
-            </Card>
-        </div>
-    );
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Simple Tree Map</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <BasicTreeMap />
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Custom Content Tree Map</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <CustomContentTreeMap />
+        </CardContent>
+      </Card>
+    </div>
+  );
 };
 
 export default ChartjsRechartTreemapPage;
diff --git a/src/app/[locale]/(protected)/charts/rechart/layout.tsx b/src/app/[locale]/(protected)/charts/rechart/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/charts/rechart/layout.tsx
+++ b/src/app/[locale]/(protected)/charts/rechart/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/accordion/basic-accordion.tsx b/src/app/[locale]/(protected)/components/accordion/basic-accordion.tsx
index 1bc380dc..568e7d55 100644
--- a/src/app/[locale]/(protected)/components/accordion/basic-accordion.tsx
+++ b/src/app/[locale]/(protected)/components/accordion/basic-accordion.tsx
@@ -3,35 +3,37 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@/components/ui/accordion"
+} from "@/components/ui/accordion";
+
 const BasicAccordion = () => {
   return (
     <Accordion type="single" collapsible className="w-full">
       <AccordionItem value="item-1">
-        <AccordionTrigger>
-          How does Dashcode work?
-        </AccordionTrigger>
+        <AccordionTrigger>How does Dashcode work?</AccordionTrigger>
         <AccordionContent>
           Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
+          it is the that carries your reader from anheadine try at attention-grabbing to the body of
+          your blog post.
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-2">
         <AccordionTrigger>Where I can learn more about using Dashcode?</AccordionTrigger>
         <AccordionContent>
           Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
+          it is the that carries your reader from anheadine try at attention-grabbing to the body of
+          your blog post.
         </AccordionContent>
       </AccordionItem>
       <AccordionItem value="item-3">
         <AccordionTrigger>Why Dashcode is so important?</AccordionTrigger>
         <AccordionContent>
           Journalist call this critical, introductory section the and when bridge properly executed,
-          it is the that carries your reader from anheadine try at attention-grabbing to the body of your blog post.
+          it is the that carries your reader from anheadine try at attention-grabbing to the body of
+          your blog post.
         </AccordionContent>
       </AccordionItem>
     </Accordion>
   );
 };
 
-export default BasicAccordion;
\ No newline at end of file
+export default BasicAccordion;
diff --git a/src/app/[locale]/(protected)/components/accordion/layout.tsx b/src/app/[locale]/(protected)/components/accordion/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/accordion/layout.tsx
+++ b/src/app/[locale]/(protected)/components/accordion/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/accordion/page.tsx b/src/app/[locale]/(protected)/components/accordion/page.tsx
index 333b3f9d..ee773efc 100644
--- a/src/app/[locale]/(protected)/components/accordion/page.tsx
+++ b/src/app/[locale]/(protected)/components/accordion/page.tsx
@@ -1,11 +1,13 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicAccordion from "./basic-accordion";
 import { basicAccordion } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const AccordionPage = () => {
   return (
     <div>
-      <SiteBreadcrumb/>
+      <SiteBreadcrumb />
       <Card title="Basic Accordion" code={basicAccordion}>
         <BasicAccordion />
       </Card>
@@ -13,4 +15,4 @@ const AccordionPage = () => {
   );
 };
 
-export default AccordionPage;
\ No newline at end of file
+export default AccordionPage;
diff --git a/src/app/[locale]/(protected)/components/accordion/source-code.ts b/src/app/[locale]/(protected)/components/accordion/source-code.ts
index 661a9e9e..f6da83d5 100644
--- a/src/app/[locale]/(protected)/components/accordion/source-code.ts
+++ b/src/app/[locale]/(protected)/components/accordion/source-code.ts
@@ -1,4 +1,4 @@
-export const basicAccordion=`import {
+export const basicAccordion = `import {
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -34,4 +34,4 @@ const BasicAccordion = () => {
   );
 };
 
-export default BasicAccordion;`
\ No newline at end of file
+export default BasicAccordion;`;
diff --git a/src/app/[locale]/(protected)/components/alert-dialog/basic-alert-dialog.tsx b/src/app/[locale]/(protected)/components/alert-dialog/basic-alert-dialog.tsx
index f5f20b51..c9add5b0 100644
--- a/src/app/[locale]/(protected)/components/alert-dialog/basic-alert-dialog.tsx
+++ b/src/app/[locale]/(protected)/components/alert-dialog/basic-alert-dialog.tsx
@@ -8,8 +8,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
+
 const BasicAlertDialog = () => {
   return (
     <AlertDialog>
@@ -20,8 +21,8 @@ const BasicAlertDialog = () => {
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
@@ -30,7 +31,7 @@ const BasicAlertDialog = () => {
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
-  )
+  );
 };
 
-export default BasicAlertDialog;
\ No newline at end of file
+export default BasicAlertDialog;
diff --git a/src/app/[locale]/(protected)/components/alert-dialog/layout.tsx b/src/app/[locale]/(protected)/components/alert-dialog/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/alert-dialog/layout.tsx
+++ b/src/app/[locale]/(protected)/components/alert-dialog/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/alert-dialog/page.tsx b/src/app/[locale]/(protected)/components/alert-dialog/page.tsx
index 3b164404..5fd3b6a6 100644
--- a/src/app/[locale]/(protected)/components/alert-dialog/page.tsx
+++ b/src/app/[locale]/(protected)/components/alert-dialog/page.tsx
@@ -1,11 +1,13 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicAlertDialog from "./basic-alert-dialog";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import {basicAlertDialog} from "./source-code";
+
+import BasicAlertDialog from "./basic-alert-dialog";
+import { basicAlertDialog } from "./source-code";
+
 const AlertDialogPage = () => {
   return (
     <div>
-      <SiteBreadcrumb/>
+      <SiteBreadcrumb />
       <Card title="Basic Alert Dialog" code={basicAlertDialog}>
         <BasicAlertDialog />
       </Card>
@@ -13,4 +15,4 @@ const AlertDialogPage = () => {
   );
 };
 
-export default AlertDialogPage;
\ No newline at end of file
+export default AlertDialogPage;
diff --git a/src/app/[locale]/(protected)/components/alert-dialog/source-code.ts b/src/app/[locale]/(protected)/components/alert-dialog/source-code.ts
index 033cd9f3..81042291 100644
--- a/src/app/[locale]/(protected)/components/alert-dialog/source-code.ts
+++ b/src/app/[locale]/(protected)/components/alert-dialog/source-code.ts
@@ -1,4 +1,4 @@
-export const basicAlertDialog=`import {
+export const basicAlertDialog = `import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
@@ -33,4 +33,4 @@ const BasicAlertDialog = () => {
   )
 };
 
-export default BasicAlertDialog;`
\ No newline at end of file
+export default BasicAlertDialog;`;
diff --git a/src/app/[locale]/(protected)/components/alert/basic-alert.tsx b/src/app/[locale]/(protected)/components/alert/basic-alert.tsx
index ba69830a..72e5f026 100644
--- a/src/app/[locale]/(protected)/components/alert/basic-alert.tsx
+++ b/src/app/[locale]/(protected)/components/alert/basic-alert.tsx
@@ -1,45 +1,31 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Alert, AlertDescription } from "@/components/ui/alert";
 
 const BasicAlert = () => {
   return (
     <div className="space-y-4">
       <Alert>
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="primary">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="secondary">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="success">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="destructive">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="warning">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="info">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
     </div>
   );
 };
 
-export default BasicAlert;
\ No newline at end of file
+export default BasicAlert;
diff --git a/src/app/[locale]/(protected)/components/alert/dismissable-alert.tsx b/src/app/[locale]/(protected)/components/alert/dismissable-alert.tsx
index 9b5f0fa3..4f1b1837 100644
--- a/src/app/[locale]/(protected)/components/alert/dismissable-alert.tsx
+++ b/src/app/[locale]/(protected)/components/alert/dismissable-alert.tsx
@@ -1,46 +1,49 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Icon } from "@/components/ui/icon";
 
 const DissmissableAlert = () => {
   return (
     <div className="space-y-4">
       <Alert dismissible>
         <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons:bell-solid" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert color="primary" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons:bell-solid" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert color="secondary" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons-outline:support" className="w-5 h-5" /> This is an alert—check it
+          out!
         </AlertDescription>
       </Alert>
       <Alert color="success" dismissible>
         <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="akar-icons:double-check" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert color="warning" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
+          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" /> This is an alert—check
+          it out!
         </AlertDescription>
       </Alert>
       <Alert color="destructive" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
+          <Icon icon="heroicons-outline:ban" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert color="info" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" /> This is an
+          alert—check it out!
         </AlertDescription>
       </Alert>
     </div>
   );
 };
 
-export default DissmissableAlert;
\ No newline at end of file
+export default DissmissableAlert;
diff --git a/src/app/[locale]/(protected)/components/alert/dismissable-softalert.tsx b/src/app/[locale]/(protected)/components/alert/dismissable-softalert.tsx
index 1eb66457..004e1934 100644
--- a/src/app/[locale]/(protected)/components/alert/dismissable-softalert.tsx
+++ b/src/app/[locale]/(protected)/components/alert/dismissable-softalert.tsx
@@ -1,46 +1,50 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Icon } from "@/components/ui/icon";
 
 const DissmissableSoftAlert = () => {
   return (
     <div className="space-y-4">
       <Alert variant="soft" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons:bell-solid" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert variant="soft" color="primary" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons-outline:support" className="w-5 h-5" /> This is an alert—check it
+          out!
         </AlertDescription>
       </Alert>
       <Alert variant="soft" color="secondary" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons-outline:support" className="w-5 h-5" /> This is an alert—check it
+          out!
         </AlertDescription>
       </Alert>
       <Alert variant="soft" color="success" dismissible>
         <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="akar-icons:double-check" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert variant="soft" color="warning" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
+          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" /> This is an alert—check
+          it out!
         </AlertDescription>
       </Alert>
       <Alert variant="soft" color="destructive" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
+          <Icon icon="heroicons-outline:ban" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert variant="soft" color="info" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" /> This is an
+          alert—check it out!
         </AlertDescription>
       </Alert>
     </div>
   );
 };
 
-export default DissmissableSoftAlert;
\ No newline at end of file
+export default DissmissableSoftAlert;
diff --git a/src/app/[locale]/(protected)/components/alert/layout.tsx b/src/app/[locale]/(protected)/components/alert/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/alert/layout.tsx
+++ b/src/app/[locale]/(protected)/components/alert/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/alert/link-colors.tsx b/src/app/[locale]/(protected)/components/alert/link-colors.tsx
index a395b8ae..829c9b25 100644
--- a/src/app/[locale]/(protected)/components/alert/link-colors.tsx
+++ b/src/app/[locale]/(protected)/components/alert/link-colors.tsx
@@ -1,46 +1,75 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import Link from 'next/link';
+import Link from "next/link";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
 
 const LinkColorsAlert = () => {
   return (
     <div className="space-y-4">
       <Alert variant="soft">
         <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
+          This is an alert with{" "}
+          <Link href="#" className="font-bold underline">
+            an example link
+          </Link>
+          . Check it out!
         </AlertDescription>
       </Alert>
       <Alert color="primary" variant="soft">
         <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
+          This is an alert with{" "}
+          <Link href="#" className="font-bold underline">
+            an example link
+          </Link>
+          . Check it out!
         </AlertDescription>
       </Alert>
       <Alert color="secondary" variant="soft">
         <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
+          This is an alert with{" "}
+          <Link href="#" className="font-bold underline">
+            an example link
+          </Link>
+          . Check it out!
         </AlertDescription>
       </Alert>
       <Alert color="success" variant="soft">
         <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
+          This is an alert with{" "}
+          <Link href="#" className="font-bold underline">
+            an example link
+          </Link>
+          . Check it out!
         </AlertDescription>
       </Alert>
       <Alert color="destructive" variant="soft">
         <AlertDescription>
-          This is an alert with <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
+          This is an alert with{" "}
+          <Link href="#" className="font-bold underline">
+            an example link
+          </Link>
+          . Check it out!
         </AlertDescription>
       </Alert>
       <Alert color="warning" variant="soft">
         <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
+          This is an alert with{" "}
+          <Link href="#" className="font-bold underline">
+            an example link
+          </Link>
+          . Check it out!
         </AlertDescription>
       </Alert>
       <Alert color="info" variant="soft">
         <AlertDescription>
-          This is an alert with  <Link href="#" className='font-bold underline'>an example link</Link>. Check it out!
+          This is an alert with{" "}
+          <Link href="#" className="font-bold underline">
+            an example link
+          </Link>
+          . Check it out!
         </AlertDescription>
       </Alert>
     </div>
   );
 };
 
-export default LinkColorsAlert;
\ No newline at end of file
+export default LinkColorsAlert;
diff --git a/src/app/[locale]/(protected)/components/alert/outline-alert.tsx b/src/app/[locale]/(protected)/components/alert/outline-alert.tsx
index 55a338c2..4771b9be 100644
--- a/src/app/[locale]/(protected)/components/alert/outline-alert.tsx
+++ b/src/app/[locale]/(protected)/components/alert/outline-alert.tsx
@@ -1,45 +1,31 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Alert, AlertDescription } from "@/components/ui/alert";
 
 const OutlineAlert = () => {
   return (
     <div className="space-y-4">
       <Alert variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="primary" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="secondary" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="success" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="destructive" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="warning" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="info" variant="outline">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
     </div>
   );
 };
 
-export default OutlineAlert;
\ No newline at end of file
+export default OutlineAlert;
diff --git a/src/app/[locale]/(protected)/components/alert/outline-alerticon.tsx b/src/app/[locale]/(protected)/components/alert/outline-alerticon.tsx
index 9b319bb3..4ea5f452 100644
--- a/src/app/[locale]/(protected)/components/alert/outline-alerticon.tsx
+++ b/src/app/[locale]/(protected)/components/alert/outline-alerticon.tsx
@@ -1,46 +1,49 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Icon } from '@/components/ui/icon';
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Icon } from "@/components/ui/icon";
 
 const OutlineAlertIcon = () => {
   return (
     <div className="space-y-4">
-     <Alert variant="outline" dismissible>
+      <Alert variant="outline" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons:bell-solid" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
-     <Alert variant="outline" color="primary" dismissible>
+      <Alert variant="outline" color="primary" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons:bell-solid" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons:bell-solid" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert variant="outline" color="secondary" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:support" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons-outline:support" className="w-5 h-5" /> This is an alert—check it
+          out!
         </AlertDescription>
       </Alert>
       <Alert variant="outline" color="success" dismissible>
         <AlertDescription>
-          <Icon icon="akar-icons:double-check" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="akar-icons:double-check" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert variant="outline" color="warning" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" />   This is an alert—check it out!
+          <Icon icon="heroicons-outline:exclamation" className="w-5 h-5" /> This is an alert—check
+          it out!
         </AlertDescription>
       </Alert>
       <Alert variant="outline" color="destructive" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:ban" className="w-5 h-5" />   This is an alert—check it out!
+          <Icon icon="heroicons-outline:ban" className="w-5 h-5" /> This is an alert—check it out!
         </AlertDescription>
       </Alert>
       <Alert variant="outline" color="info" dismissible>
         <AlertDescription>
-          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" />  This is an alert—check it out!
+          <Icon icon="heroicons-outline:information-circle" className="w-5 h-5" /> This is an
+          alert—check it out!
         </AlertDescription>
       </Alert>
     </div>
   );
 };
 
-export default OutlineAlertIcon;
\ No newline at end of file
+export default OutlineAlertIcon;
diff --git a/src/app/[locale]/(protected)/components/alert/page.tsx b/src/app/[locale]/(protected)/components/alert/page.tsx
index 3b7c7cc0..bef1a3fb 100644
--- a/src/app/[locale]/(protected)/components/alert/page.tsx
+++ b/src/app/[locale]/(protected)/components/alert/page.tsx
@@ -1,18 +1,27 @@
 import Card from "@/components/ui/structures/code-snippet";
-import SoftColorsAlert from "./soft-colors";
-import LinkColorsAlert from "./link-colors";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicAlert from "./basic-alert";
 import DissmissableAlert from "./dismissable-alert";
 import DissmissableSoftAlert from "./dismissable-softalert";
+import LinkColorsAlert from "./link-colors";
 import OutlineAlert from "./outline-alert";
 import OutlineAlertIcon from "./outline-alerticon";
-import BasicAlert from "./basic-alert";
-import { basicAlert, dismissableAlert, dismissableSoftAlert, linkColorsAlert, outlineAlert, outlineAlertIcon, softColorAlert } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import SoftColorsAlert from "./soft-colors";
+import {
+  basicAlert,
+  dismissableAlert,
+  dismissableSoftAlert,
+  linkColorsAlert,
+  outlineAlert,
+  outlineAlertIcon,
+  softColorAlert,
+} from "./source-code";
 
 const AlertPage = () => {
   return (
     <>
-    <SiteBreadcrumb/>
+      <SiteBreadcrumb />
       <div className="grid grid-cols-2  gap-6">
         <div className="col-span-2 lg:col-span-1">
           <Card title="Color" code={basicAlert}>
@@ -54,4 +63,4 @@ const AlertPage = () => {
   );
 };
 
-export default AlertPage;
\ No newline at end of file
+export default AlertPage;
diff --git a/src/app/[locale]/(protected)/components/alert/soft-colors.tsx b/src/app/[locale]/(protected)/components/alert/soft-colors.tsx
index 185a16b8..55983f1f 100644
--- a/src/app/[locale]/(protected)/components/alert/soft-colors.tsx
+++ b/src/app/[locale]/(protected)/components/alert/soft-colors.tsx
@@ -1,45 +1,31 @@
-import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Alert, AlertDescription } from "@/components/ui/alert";
 
 const SoftColorsAlert = () => {
   return (
     <div className="space-y-4">
-       <Alert variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+      <Alert variant="soft">
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="primary" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="secondary" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="success" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="destructive" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="warning" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
       <Alert color="info" variant="soft">
-        <AlertDescription>
-          This is an alert—check it out!
-        </AlertDescription>
+        <AlertDescription>This is an alert—check it out!</AlertDescription>
       </Alert>
     </div>
   );
 };
 
-export default SoftColorsAlert;
\ No newline at end of file
+export default SoftColorsAlert;
diff --git a/src/app/[locale]/(protected)/components/alert/source-code.ts b/src/app/[locale]/(protected)/components/alert/source-code.ts
index 2d47575d..df511f48 100644
--- a/src/app/[locale]/(protected)/components/alert/source-code.ts
+++ b/src/app/[locale]/(protected)/components/alert/source-code.ts
@@ -1,4 +1,4 @@
-export const basicAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
+export const basicAlert = `import { Alert, AlertDescription } from '@/components/ui/alert';
 
 const BasicAlert = () => {
   return (
@@ -42,9 +42,9 @@ const BasicAlert = () => {
   );
 };
 
-export default BasicAlert;`
+export default BasicAlert;`;
 
-export const softColorAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
+export const softColorAlert = `import { Alert, AlertDescription } from '@/components/ui/alert';
 
 const SoftColorsAlert = () => {
   return (
@@ -88,9 +88,9 @@ const SoftColorsAlert = () => {
   );
 };
 
-export default SoftColorsAlert;`
+export default SoftColorsAlert;`;
 
-export const linkColorsAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
+export const linkColorsAlert = `import { Alert, AlertDescription } from '@/components/ui/alert';
 import Link from 'next/link';
 
 const LinkColorsAlert = () => {
@@ -135,9 +135,9 @@ const LinkColorsAlert = () => {
   );
 };
 
-export default LinkColorsAlert;`
+export default LinkColorsAlert;`;
 
-export const dismissableAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
+export const dismissableAlert = `import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Icon } from '@/components/ui/icon';
 
 const DissmissableAlert = () => {
@@ -182,9 +182,9 @@ const DissmissableAlert = () => {
   );
 };
 
-export default DissmissableAlert;`
+export default DissmissableAlert;`;
 
-export const dismissableSoftAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
+export const dismissableSoftAlert = `import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Icon } from '@/components/ui/icon';
 
 const DissmissableSoftAlert = () => {
@@ -229,9 +229,9 @@ const DissmissableSoftAlert = () => {
   );
 };
 
-export default DissmissableSoftAlert;`
+export default DissmissableSoftAlert;`;
 
-export const outlineAlert=`import { Alert, AlertDescription } from '@/components/ui/alert';
+export const outlineAlert = `import { Alert, AlertDescription } from '@/components/ui/alert';
 
 const OutlineAlert = () => {
   return (
@@ -275,9 +275,9 @@ const OutlineAlert = () => {
   );
 };
 
-export default OutlineAlert;`
+export default OutlineAlert;`;
 
-export const outlineAlertIcon=`import { Alert, AlertDescription } from '@/components/ui/alert';
+export const outlineAlertIcon = `import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Icon } from '@/components/ui/icon';
 
 const OutlineAlertIcon = () => {
@@ -322,4 +322,4 @@ const OutlineAlertIcon = () => {
   );
 };
 
-export default OutlineAlertIcon;`
\ No newline at end of file
+export default OutlineAlertIcon;`;
diff --git a/src/app/[locale]/(protected)/components/avatar/avatar-group.tsx b/src/app/[locale]/(protected)/components/avatar/avatar-group.tsx
index b3a3560c..8e73f32c 100644
--- a/src/app/[locale]/(protected)/components/avatar/avatar-group.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/avatar-group.tsx
@@ -23,4 +23,4 @@ const AvatarGroup = () => {
   );
 };
 
-export default AvatarGroup;
\ No newline at end of file
+export default AvatarGroup;
diff --git a/src/app/[locale]/(protected)/components/avatar/avatar-shape.tsx b/src/app/[locale]/(protected)/components/avatar/avatar-shape.tsx
index bda666ad..673d4fab 100644
--- a/src/app/[locale]/(protected)/components/avatar/avatar-shape.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/avatar-shape.tsx
@@ -1,12 +1,13 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
 const AvatarShape = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <Avatar shape="circle"  color="primary">
+      <Avatar shape="circle" color="primary">
         <AvatarImage src="/images/avatar/av-4.jpg" alt="dashcode" />
         <AvatarFallback> LI </AvatarFallback>
       </Avatar>
-      <Avatar shape="square" >
+      <Avatar shape="square">
         <AvatarImage src="/images/avatar/av-1.jpg" alt="dashcode" />
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
@@ -14,4 +15,4 @@ const AvatarShape = () => {
   );
 };
 
-export default AvatarShape;
\ No newline at end of file
+export default AvatarShape;
diff --git a/src/app/[locale]/(protected)/components/avatar/basic-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/basic-avatar.tsx
index 4802fff9..88a3dd9e 100644
--- a/src/app/[locale]/(protected)/components/avatar/basic-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/basic-avatar.tsx
@@ -1,4 +1,5 @@
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
 const BasicAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -27,4 +28,4 @@ const BasicAvatar = () => {
   );
 };
 
-export default BasicAvatar;
\ No newline at end of file
+export default BasicAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/border-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/border-avatar.tsx
index 8a8ccd5a..9b068837 100644
--- a/src/app/[locale]/(protected)/components/avatar/border-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/border-avatar.tsx
@@ -1,30 +1,49 @@
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
 const BorderAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" >
+      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background">
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="primary">
+      <Avatar
+        className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background"
+        color="primary"
+      >
         <AvatarFallback> LI </AvatarFallback>
       </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="secondary">
+      <Avatar
+        className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background"
+        color="secondary"
+      >
         <AvatarFallback> SH </AvatarFallback>
       </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="success">
+      <Avatar
+        className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background"
+        color="success"
+      >
         <AvatarFallback> SU </AvatarFallback>
       </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="info">
+      <Avatar
+        className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background"
+        color="info"
+      >
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="warning">
+      <Avatar
+        className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background"
+        color="warning"
+      >
         <AvatarFallback> SR </AvatarFallback>
       </Avatar>
-      <Avatar className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background" color="destructive">
+      <Avatar
+        className="ring-1 ring-border hover:ring-border ring-offset-[3px]  ring-offset-background"
+        color="destructive"
+      >
         <AvatarFallback> AR </AvatarFallback>
       </Avatar>
     </div>
   );
 };
 
-export default BorderAvatar;
\ No newline at end of file
+export default BorderAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/border-color-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/border-color-avatar.tsx
index 5d6db46c..7d758044 100644
--- a/src/app/[locale]/(protected)/components/avatar/border-color-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/border-color-avatar.tsx
@@ -1,10 +1,9 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
 const BorderColorAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <Avatar
-        className="ring-1 ring-default ring-offset-[3px] ring-offset-background"
-      >
+      <Avatar className="ring-1 ring-default ring-offset-[3px] ring-offset-background">
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
       <Avatar
@@ -25,10 +24,7 @@ const BorderColorAvatar = () => {
       >
         <AvatarFallback> SU </AvatarFallback>
       </Avatar>
-      <Avatar
-        className="ring-1 ring-info ring-offset-[3px] ring-offset-background"
-        color="info"
-      >
+      <Avatar className="ring-1 ring-info ring-offset-[3px] ring-offset-background" color="info">
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
       <Avatar
@@ -44,8 +40,7 @@ const BorderColorAvatar = () => {
       >
         <AvatarFallback> AR </AvatarFallback>
       </Avatar>
-
     </div>
-  )
-}
-export default BorderColorAvatar;
\ No newline at end of file
+  );
+};
+export default BorderColorAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/icon-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/icon-avatar.tsx
index 6fad9382..9a5c0f8a 100644
--- a/src/app/[locale]/(protected)/components/avatar/icon-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/icon-avatar.tsx
@@ -1,22 +1,35 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { CircleCheck, MessageSquare, Trash2, User } from "lucide-react";
+
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+
 const IconAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
       <Avatar>
-        <AvatarFallback><User className="w-5 h-5" /></AvatarFallback>
+        <AvatarFallback>
+          <User className="w-5 h-5" />
+        </AvatarFallback>
       </Avatar>
       <Avatar color="primary">
-        <AvatarFallback> <MessageSquare className="w-5 h-5" /></AvatarFallback>
+        <AvatarFallback>
+          {" "}
+          <MessageSquare className="w-5 h-5" />
+        </AvatarFallback>
       </Avatar>
       <Avatar color="secondary">
-        <AvatarFallback> <Trash2 className="w-5 h-5" /> </AvatarFallback>
+        <AvatarFallback>
+          {" "}
+          <Trash2 className="w-5 h-5" />{" "}
+        </AvatarFallback>
       </Avatar>
       <Avatar color="success">
-        <AvatarFallback> <CircleCheck className="w-5 h-5" /> </AvatarFallback>
+        <AvatarFallback>
+          {" "}
+          <CircleCheck className="w-5 h-5" />{" "}
+        </AvatarFallback>
       </Avatar>
     </div>
   );
 };
 
-export default IconAvatar;
\ No newline at end of file
+export default IconAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/image-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/image-avatar.tsx
index 00292a9d..14cd0b4b 100644
--- a/src/app/[locale]/(protected)/components/avatar/image-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/image-avatar.tsx
@@ -32,7 +32,7 @@ const ImageAvatar = () => {
         <AvatarFallback> AR </AvatarFallback>
       </Avatar>
     </div>
-  )
-}
+  );
+};
 
 export default ImageAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/layout.tsx b/src/app/[locale]/(protected)/components/avatar/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/avatar/layout.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/avatar/page.tsx b/src/app/[locale]/(protected)/components/avatar/page.tsx
index 960c04d1..f1ae63f6 100644
--- a/src/app/[locale]/(protected)/components/avatar/page.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/page.tsx
@@ -1,17 +1,30 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import AvatarGroup from "./avatar-group";
+import AvatarShape from "./avatar-shape";
 import BasicAvatar from "./basic-avatar";
-import ImageAvatar from "./image-avatar";
-import TonalAvatar from "./tonal-avatar";
-import IconAvatar from "./icon-avatar";
 import BorderAvatar from "./border-avatar";
 import BorderColorAvatar from "./border-color-avatar";
-import SizeAvatar from "./size-avatar";
+import IconAvatar from "./icon-avatar";
+import ImageAvatar from "./image-avatar";
 import RoundedAvatar from "./rounded-avatar";
+import SizeAvatar from "./size-avatar";
+import {
+  avatarGroup,
+  avatarShape,
+  basicAvatar,
+  borderAvatar,
+  borderColorAvatar,
+  iconAvatar,
+  imageAvatar,
+  roundedAvatar,
+  sizeAvatar,
+  tonalAvatar,
+  tooltipAvatar,
+} from "./source-code";
+import TonalAvatar from "./tonal-avatar";
 import TooltipAvatar from "./tooltip-avatar";
-import AvatarShape from "./avatar-shape";
-import AvatarGroup from "./avatar-group";
-import { avatarGroup, avatarShape, basicAvatar, borderAvatar, borderColorAvatar, iconAvatar, imageAvatar, roundedAvatar, sizeAvatar, tonalAvatar, tooltipAvatar } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const AvatarPage = () => {
   return (
@@ -56,4 +69,4 @@ const AvatarPage = () => {
   );
 };
 
-export default AvatarPage;
\ No newline at end of file
+export default AvatarPage;
diff --git a/src/app/[locale]/(protected)/components/avatar/rounded-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/rounded-avatar.tsx
index 60692fb1..ce53022b 100644
--- a/src/app/[locale]/(protected)/components/avatar/rounded-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/rounded-avatar.tsx
@@ -1,20 +1,21 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
 const RoundedAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
-      <Avatar rounded="sm"  color="primary">
+      <Avatar rounded="sm" color="primary">
         <AvatarImage src="/images/avatar/av-1.jpg" alt="dashcode" />
         <AvatarFallback> LI </AvatarFallback>
       </Avatar>
-      <Avatar rounded="md"  >
+      <Avatar rounded="md">
         <AvatarImage src="/images/avatar/av-2.jpg" alt="dashcode" />
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
-      <Avatar rounded="lg"  color="secondary">
+      <Avatar rounded="lg" color="secondary">
         <AvatarImage src="/images/avatar/av-3.jpg" alt="dashcode" />
         <AvatarFallback> SH </AvatarFallback>
       </Avatar>
-      <Avatar rounded="full"  color="success">
+      <Avatar rounded="full" color="success">
         <AvatarImage src="/images/avatar/av-4.jpg" alt="avatar image" />
         <AvatarFallback> SU </AvatarFallback>
       </Avatar>
@@ -22,4 +23,4 @@ const RoundedAvatar = () => {
   );
 };
 
-export default RoundedAvatar;
\ No newline at end of file
+export default RoundedAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/size-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/size-avatar.tsx
index ad21d632..86566101 100644
--- a/src/app/[locale]/(protected)/components/avatar/size-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/size-avatar.tsx
@@ -1,29 +1,30 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
 const SizeAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
       <Avatar size="sm">
-        <AvatarImage  src="/images/avatar/avatar-1.png" alt="dashcode" />
+        <AvatarImage src="/images/avatar/avatar-1.png" alt="dashcode" />
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
       <Avatar size="base" color="primary">
-        <AvatarImage  src="/images/avatar/avatar-2.png" alt="dashcode" />
+        <AvatarImage src="/images/avatar/avatar-2.png" alt="dashcode" />
         <AvatarFallback> LI </AvatarFallback>
       </Avatar>
       <Avatar size="md" color="success">
-        <AvatarImage  src="/images/avatar/avatar-3.png" alt="dashcode" />
+        <AvatarImage src="/images/avatar/avatar-3.png" alt="dashcode" />
         <AvatarFallback> SU </AvatarFallback>
       </Avatar>
       <Avatar size="lg" color="info">
-        <AvatarImage  src="/images/avatar/avatar-4.png" alt="dashcode" />
+        <AvatarImage src="/images/avatar/avatar-4.png" alt="dashcode" />
         <AvatarFallback> PR </AvatarFallback>
       </Avatar>
       <Avatar size="xl" color="warning">
-        <AvatarImage  src="/images/avatar/avatar-5.png" alt="dashcode" />
+        <AvatarImage src="/images/avatar/avatar-5.png" alt="dashcode" />
         <AvatarFallback> SR </AvatarFallback>
       </Avatar>
     </div>
   );
 };
 
-export default SizeAvatar;
\ No newline at end of file
+export default SizeAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/source-code.ts b/src/app/[locale]/(protected)/components/avatar/source-code.ts
index 22ee3dee..78c48af5 100644
--- a/src/app/[locale]/(protected)/components/avatar/source-code.ts
+++ b/src/app/[locale]/(protected)/components/avatar/source-code.ts
@@ -27,7 +27,7 @@ const BasicAvatar = () => {
   );
 };
 
-export default BasicAvatar;`
+export default BasicAvatar;`;
 
 export const imageAvatar = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
@@ -66,9 +66,9 @@ const ImageAvatar = () => {
   )
 }
 
-export default ImageAvatar;`
+export default ImageAvatar;`;
 
-export const tonalAvatar=`import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+export const tonalAvatar = `import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 const TonalAvatar = () => {
   return (
@@ -98,9 +98,9 @@ const TonalAvatar = () => {
   );
 };
 
-export default TonalAvatar;`
+export default TonalAvatar;`;
 
-export const iconAvatar=`import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+export const iconAvatar = `import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { CircleCheck, MessageSquare, Trash2, User } from "lucide-react";
 const IconAvatar = () => {
   return (
@@ -121,9 +121,9 @@ const IconAvatar = () => {
   );
 };
 
-export default IconAvatar;`
+export default IconAvatar;`;
 
-export const borderAvatar=`import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+export const borderAvatar = `import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 const BorderAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -152,9 +152,9 @@ const BorderAvatar = () => {
   );
 };
 
-export default BorderAvatar;`
+export default BorderAvatar;`;
 
-export const borderColorAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export const borderColorAvatar = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 const BorderColorAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -204,9 +204,9 @@ const BorderColorAvatar = () => {
     </div>
   )
 }
-export default BorderColorAvatar;`
+export default BorderColorAvatar;`;
 
-export const sizeAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export const sizeAvatar = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 const SizeAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -234,9 +234,9 @@ const SizeAvatar = () => {
   );
 };
 
-export default SizeAvatar;`
+export default SizeAvatar;`;
 
-export const roundedAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export const roundedAvatar = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 const RoundedAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -260,9 +260,9 @@ const RoundedAvatar = () => {
   );
 };
 
-export default RoundedAvatar;`
+export default RoundedAvatar;`;
 
-export const avatarShape=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export const avatarShape = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 const AvatarShape = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -278,9 +278,9 @@ const AvatarShape = () => {
   );
 };
 
-export default AvatarShape;`
+export default AvatarShape;`;
 
-export const tooltipAvatar=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export const tooltipAvatar = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   Tooltip,
   TooltipArrow,
@@ -402,9 +402,9 @@ const TooltipAvatar = () => {
   );
 };
 
-export default TooltipAvatar;`
+export default TooltipAvatar;`;
 
-export const avatarGroup=`import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+export const avatarGroup = `import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 const AvatarGroup = () => {
   return (
@@ -429,4 +429,4 @@ const AvatarGroup = () => {
   );
 };
 
-export default AvatarGroup;`
\ No newline at end of file
+export default AvatarGroup;`;
diff --git a/src/app/[locale]/(protected)/components/avatar/tonal-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/tonal-avatar.tsx
index bc5de452..254a4aae 100644
--- a/src/app/[locale]/(protected)/components/avatar/tonal-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/tonal-avatar.tsx
@@ -3,29 +3,29 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 const TonalAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
-    <Avatar variant="ghost" >
-      <AvatarFallback > PR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="primary">
-      <AvatarFallback> LI </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="secondary">
-      <AvatarFallback> SH </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="success">
-      <AvatarFallback> SU </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="info">
-      <AvatarFallback> PR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="warning">
-      <AvatarFallback> SR </AvatarFallback>
-    </Avatar>
-    <Avatar variant="ghost" color="destructive">
-      <AvatarFallback> AR </AvatarFallback>
-    </Avatar>
-  </div>
+      <Avatar variant="ghost">
+        <AvatarFallback> PR </AvatarFallback>
+      </Avatar>
+      <Avatar variant="ghost" color="primary">
+        <AvatarFallback> LI </AvatarFallback>
+      </Avatar>
+      <Avatar variant="ghost" color="secondary">
+        <AvatarFallback> SH </AvatarFallback>
+      </Avatar>
+      <Avatar variant="ghost" color="success">
+        <AvatarFallback> SU </AvatarFallback>
+      </Avatar>
+      <Avatar variant="ghost" color="info">
+        <AvatarFallback> PR </AvatarFallback>
+      </Avatar>
+      <Avatar variant="ghost" color="warning">
+        <AvatarFallback> SR </AvatarFallback>
+      </Avatar>
+      <Avatar variant="ghost" color="destructive">
+        <AvatarFallback> AR </AvatarFallback>
+      </Avatar>
+    </div>
   );
 };
 
-export default TonalAvatar;
\ No newline at end of file
+export default TonalAvatar;
diff --git a/src/app/[locale]/(protected)/components/avatar/tooltip-avatar.tsx b/src/app/[locale]/(protected)/components/avatar/tooltip-avatar.tsx
index 4b468e35..41ffadb4 100644
--- a/src/app/[locale]/(protected)/components/avatar/tooltip-avatar.tsx
+++ b/src/app/[locale]/(protected)/components/avatar/tooltip-avatar.tsx
@@ -6,6 +6,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+
 const TooltipAvatar = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -13,9 +14,7 @@ const TooltipAvatar = () => {
         <Tooltip>
           <TooltipTrigger>
             <Avatar>
-              <AvatarImage
-                src="/images/avatar/avatar-1.png" alt="dashcode"
-              />
+              <AvatarImage src="/images/avatar/avatar-1.png" alt="dashcode" />
               <AvatarFallback> PR </AvatarFallback>
             </Avatar>
           </TooltipTrigger>
@@ -29,9 +28,7 @@ const TooltipAvatar = () => {
         <Tooltip>
           <TooltipTrigger>
             <Avatar color="primary">
-              <AvatarImage
-                src="/images/avatar/avatar-2.png" alt="dashcode"
-              />
+              <AvatarImage src="/images/avatar/avatar-2.png" alt="dashcode" />
               <AvatarFallback> LI </AvatarFallback>
             </Avatar>
           </TooltipTrigger>
@@ -45,9 +42,7 @@ const TooltipAvatar = () => {
         <Tooltip>
           <TooltipTrigger>
             <Avatar color="secondary">
-              <AvatarImage
-                src="/images/avatar/avatar-3.png" alt="dashcode"
-              />
+              <AvatarImage src="/images/avatar/avatar-3.png" alt="dashcode" />
               <AvatarFallback> SH </AvatarFallback>
             </Avatar>
           </TooltipTrigger>
@@ -60,9 +55,7 @@ const TooltipAvatar = () => {
         <Tooltip>
           <TooltipTrigger>
             <Avatar color="success">
-              <AvatarImage
-                src="/images/avatar/avatar-4.png" alt="dashcode"
-              />
+              <AvatarImage src="/images/avatar/avatar-4.png" alt="dashcode" />
               <AvatarFallback> SU </AvatarFallback>
             </Avatar>
           </TooltipTrigger>
@@ -75,9 +68,7 @@ const TooltipAvatar = () => {
         <Tooltip>
           <TooltipTrigger>
             <Avatar color="info">
-              <AvatarImage
-                src="/images/avatar/avatar-5.png" alt="dashcode"
-              />
+              <AvatarImage src="/images/avatar/avatar-5.png" alt="dashcode" />
               <AvatarFallback> PR </AvatarFallback>
             </Avatar>
           </TooltipTrigger>
@@ -90,9 +81,7 @@ const TooltipAvatar = () => {
         <Tooltip>
           <TooltipTrigger>
             <Avatar color="warning">
-              <AvatarImage
-                src="/images/avatar/avatar-6.png" alt="dashcode"
-              />
+              <AvatarImage src="/images/avatar/avatar-6.png" alt="dashcode" />
               <AvatarFallback> SR </AvatarFallback>
             </Avatar>
           </TooltipTrigger>
@@ -105,9 +94,7 @@ const TooltipAvatar = () => {
         <Tooltip>
           <TooltipTrigger>
             <Avatar color="destructive">
-              <AvatarImage
-                src="/images/avatar/avatar-7.png" alt="dashcode"
-              />
+              <AvatarImage src="/images/avatar/avatar-7.png" alt="dashcode" />
               <AvatarFallback> AR </AvatarFallback>
             </Avatar>
           </TooltipTrigger>
@@ -120,4 +107,4 @@ const TooltipAvatar = () => {
   );
 };
 
-export default TooltipAvatar;
\ No newline at end of file
+export default TooltipAvatar;
diff --git a/src/app/[locale]/(protected)/components/badge/badges-button.tsx b/src/app/[locale]/(protected)/components/badge/badges-button.tsx
index f4376910..69fc5216 100644
--- a/src/app/[locale]/(protected)/components/badge/badges-button.tsx
+++ b/src/app/[locale]/(protected)/components/badge/badges-button.tsx
@@ -4,20 +4,30 @@ import { Button } from "@/components/ui/button";
 const BadgesButton = () => {
   return (
     <div className="flex flex-wrap gap-5">
-      <Button>Notifications <Badge color="success" className="ms-1">5</Badge></Button>
-      <Button
-        color="success">Messages
-        <Badge color="warning" className="ms-1">5</Badge>
+      <Button>
+        Notifications{" "}
+        <Badge color="success" className="ms-1">
+          5
+        </Badge>
+      </Button>
+      <Button color="success">
+        Messages
+        <Badge color="warning" className="ms-1">
+          5
+        </Badge>
       </Button>
       <Button
         color="destructive"
         variant="outline"
         className="hover:bg-transparent hover:text-destructive"
-      >Mails
-        <Badge color="destructive" className="ms-1">5</Badge>
+      >
+        Mails
+        <Badge color="destructive" className="ms-1">
+          5
+        </Badge>
       </Button>
     </div>
   );
 };
 
-export default BadgesButton;
\ No newline at end of file
+export default BadgesButton;
diff --git a/src/app/[locale]/(protected)/components/badge/badges-icon.tsx b/src/app/[locale]/(protected)/components/badge/badges-icon.tsx
index 92c81c75..e6d352f0 100644
--- a/src/app/[locale]/(protected)/components/badge/badges-icon.tsx
+++ b/src/app/[locale]/(protected)/components/badge/badges-icon.tsx
@@ -1,23 +1,30 @@
-import { Badge } from "@/components/ui/badge";
 import { BellRing, Heart, Mail } from "lucide-react";
 
+import { Badge } from "@/components/ui/badge";
+
 const BadgesIcon = () => {
   return (
     <div className="flex flex-wrap gap-10">
       <div className="relative inline-block">
         <BellRing className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1 py-0.5 text-xs bg-default -translate-y-3.5 translate-x-3.5">15</Badge>
+        <Badge className="absolute top-0 right-0 rounded-full px-1 py-0.5 text-xs bg-default -translate-y-3.5 translate-x-3.5">
+          15
+        </Badge>
       </div>
       <div className="relative inline-block">
         <Mail className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-primary -translate-y-3.5 translate-x-3.5">5</Badge>
+        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-primary -translate-y-3.5 translate-x-3.5">
+          5
+        </Badge>
       </div>
       <div className="relative inline-block">
         <Heart className="w-5 h-5 text-default-700" />
-        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-warning -translate-y-3.5 translate-x-3.5">8</Badge>
+        <Badge className="absolute top-0 right-0 rounded-full px-1.5 py-0.5 text-xs bg-warning -translate-y-3.5 translate-x-3.5">
+          8
+        </Badge>
       </div>
     </div>
   );
 };
 
-export default BadgesIcon;
\ No newline at end of file
+export default BadgesIcon;
diff --git a/src/app/[locale]/(protected)/components/badge/badges-position.tsx b/src/app/[locale]/(protected)/components/badge/badges-position.tsx
index fa5d21cc..eb266a0d 100644
--- a/src/app/[locale]/(protected)/components/badge/badges-position.tsx
+++ b/src/app/[locale]/(protected)/components/badge/badges-position.tsx
@@ -6,22 +6,36 @@ const BadgePositions = () => {
     <div className="flex flex-wrap gap-8">
       <Button className="relative">
         Notifications
-        <Badge color="success" className="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2">5</Badge>
+        <Badge color="success" className="absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2">
+          5
+        </Badge>
       </Button>
       <Button color="success" className="relative">
         Messages
-        <Badge color="warning" className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2">5</Badge>
+        <Badge color="warning" className="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2">
+          5
+        </Badge>
       </Button>
       <Button color="destructive" variant="outline" className="relative">
         Audio Call
-        <Badge color="destructive" className="absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2">5</Badge>
+        <Badge
+          color="destructive"
+          className="absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2"
+        >
+          5
+        </Badge>
       </Button>
       <Button color="success" variant="outline" className="relative">
         Drafts
-        <Badge color="success" className="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2">5</Badge>
+        <Badge
+          color="success"
+          className="absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2"
+        >
+          5
+        </Badge>
       </Button>
     </div>
   );
 };
 
-export default BadgePositions;
\ No newline at end of file
+export default BadgePositions;
diff --git a/src/app/[locale]/(protected)/components/badge/basic-badge.tsx b/src/app/[locale]/(protected)/components/badge/basic-badge.tsx
index f6621410..35a084a6 100644
--- a/src/app/[locale]/(protected)/components/badge/basic-badge.tsx
+++ b/src/app/[locale]/(protected)/components/badge/basic-badge.tsx
@@ -14,4 +14,4 @@ const BasicBadge = () => {
   );
 };
 
-export default BasicBadge;
\ No newline at end of file
+export default BasicBadge;
diff --git a/src/app/[locale]/(protected)/components/badge/gradient-badges.tsx b/src/app/[locale]/(protected)/components/badge/gradient-badges.tsx
index 617bf178..39a46649 100644
--- a/src/app/[locale]/(protected)/components/badge/gradient-badges.tsx
+++ b/src/app/[locale]/(protected)/components/badge/gradient-badges.tsx
@@ -4,13 +4,17 @@ const GradientBadges = () => {
   return (
     <div className="flex flex-wrap gap-5">
       <Badge className="bg-gradient-to-r from-primary to-success border-none">Primary</Badge>
-      <Badge className="bg-gradient-to-r from-secondary to-secondary/80 border-none">Secondary</Badge>
+      <Badge className="bg-gradient-to-r from-secondary to-secondary/80 border-none">
+        Secondary
+      </Badge>
       <Badge className="bg-gradient-to-tr from-success to-info border-none">Success</Badge>
       <Badge className="bg-gradient-to-tr from-info to-primary border-none">Info</Badge>
       <Badge className="bg-gradient-to-r from-warning to-destructive border-none">Warning</Badge>
-      <Badge className="bg-gradient-to-r from-destructive to-warning border-none">Destructive</Badge>
+      <Badge className="bg-gradient-to-r from-destructive to-warning border-none">
+        Destructive
+      </Badge>
     </div>
   );
 };
 
-export default GradientBadges;
\ No newline at end of file
+export default GradientBadges;
diff --git a/src/app/[locale]/(protected)/components/badge/icon-badges.tsx b/src/app/[locale]/(protected)/components/badge/icon-badges.tsx
index d2d3c0ce..9f78dde6 100644
--- a/src/app/[locale]/(protected)/components/badge/icon-badges.tsx
+++ b/src/app/[locale]/(protected)/components/badge/icon-badges.tsx
@@ -1,18 +1,36 @@
-import { Badge } from "@/components/ui/badge";
 import { Star } from "lucide-react";
 
+import { Badge } from "@/components/ui/badge";
+
 const IconBadges = () => {
   return (
     <div className="flex flex-wrap gap-5">
-      <Badge> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Default</Badge>
-      <Badge color="primary"> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Primary</Badge>
-      <Badge color="secondary"> <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Secondary</Badge>
-      <Badge color="success"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Success</Badge>
-      <Badge color="info"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Info</Badge>
-      <Badge color="warning"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Warning</Badge>
-      <Badge color="destructive"><Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Destructive</Badge>
+      <Badge>
+        {" "}
+        <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Default
+      </Badge>
+      <Badge color="primary">
+        {" "}
+        <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Primary
+      </Badge>
+      <Badge color="secondary">
+        {" "}
+        <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Secondary
+      </Badge>
+      <Badge color="success">
+        <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Success
+      </Badge>
+      <Badge color="info">
+        <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Info
+      </Badge>
+      <Badge color="warning">
+        <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Warning
+      </Badge>
+      <Badge color="destructive">
+        <Star className="w-3.5 h-3.5 -mt-0.5 me-0.5" /> Destructive
+      </Badge>
     </div>
   );
 };
 
-export default IconBadges;
\ No newline at end of file
+export default IconBadges;
diff --git a/src/app/[locale]/(protected)/components/badge/layout.tsx b/src/app/[locale]/(protected)/components/badge/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/badge/layout.tsx
+++ b/src/app/[locale]/(protected)/components/badge/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/badge/page.tsx b/src/app/[locale]/(protected)/components/badge/page.tsx
index 91c515b1..3327df08 100644
--- a/src/app/[locale]/(protected)/components/badge/page.tsx
+++ b/src/app/[locale]/(protected)/components/badge/page.tsx
@@ -1,15 +1,23 @@
-
 import Card from "@/components/ui/structures/code-snippet";
-import BasicBadge from "./basic-badge";
-import IconBadges from "./icon-badges";
-import BadgesButton from "./badges-button";
-import BadgePositions from "./badges-position";
-import GradientBadges from "./gradient-badges";
-import RoundedBadge from "./rounded-badge";
-import { badgesIcon, badgesInButton, badgesPosition, basicBadges, gradientBadges, iconBadges, roundedBadges } from "./source-code";
-import BadgesIcon from "./badges-icon";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
+import BadgesButton from "./badges-button";
+import BadgesIcon from "./badges-icon";
+import BadgePositions from "./badges-position";
+import BasicBadge from "./basic-badge";
+import GradientBadges from "./gradient-badges";
+import IconBadges from "./icon-badges";
+import RoundedBadge from "./rounded-badge";
+import {
+  badgesIcon,
+  badgesInButton,
+  badgesPosition,
+  basicBadges,
+  gradientBadges,
+  iconBadges,
+  roundedBadges,
+} from "./source-code";
+
 const BadgePage = () => {
   return (
     <div>
diff --git a/src/app/[locale]/(protected)/components/badge/rounded-badge.tsx b/src/app/[locale]/(protected)/components/badge/rounded-badge.tsx
index 7f0ccfef..fc1b4666 100644
--- a/src/app/[locale]/(protected)/components/badge/rounded-badge.tsx
+++ b/src/app/[locale]/(protected)/components/badge/rounded-badge.tsx
@@ -4,11 +4,17 @@ const RoundedBadge = () => {
   return (
     <div className="flex flex-wrap gap-5">
       <Badge rounded="sm">Default</Badge>
-      <Badge color="primary" rounded="md" >Primary</Badge>
-      <Badge color="secondary" rounded="lg">Secondary</Badge>
-      <Badge color="success" rounded="full">Success</Badge>
+      <Badge color="primary" rounded="md">
+        Primary
+      </Badge>
+      <Badge color="secondary" rounded="lg">
+        Secondary
+      </Badge>
+      <Badge color="success" rounded="full">
+        Success
+      </Badge>
     </div>
   );
 };
 
-export default RoundedBadge;
\ No newline at end of file
+export default RoundedBadge;
diff --git a/src/app/[locale]/(protected)/components/badge/source-code.ts b/src/app/[locale]/(protected)/components/badge/source-code.ts
index c3797b32..16716bfe 100644
--- a/src/app/[locale]/(protected)/components/badge/source-code.ts
+++ b/src/app/[locale]/(protected)/components/badge/source-code.ts
@@ -1,4 +1,4 @@
-export const basicBadges=`import { Badge } from "@/components/ui/badge";
+export const basicBadges = `import { Badge } from "@/components/ui/badge";
 const BasicBadge = () => {
   return (
     <div className="flex flex-wrap gap-5">
@@ -13,9 +13,9 @@ const BasicBadge = () => {
   );
 };
 
-export default BasicBadge;`
+export default BasicBadge;`;
 
-export const roundedBadges=`import { Badge } from "@/components/ui/badge";
+export const roundedBadges = `import { Badge } from "@/components/ui/badge";
 
 const RoundedBadge = () => {
   return (
@@ -28,9 +28,9 @@ const RoundedBadge = () => {
   );
 };
 
-export default RoundedBadge;`
+export default RoundedBadge;`;
 
-export const iconBadges=`import { Badge } from "@/components/ui/badge";
+export const iconBadges = `import { Badge } from "@/components/ui/badge";
 import { Star } from "lucide-react";
 
 const IconBadges = () => {
@@ -47,9 +47,9 @@ const IconBadges = () => {
   );
 };
 
-export default IconBadges;`
+export default IconBadges;`;
 
-export const badgesInButton=`import { Badge } from "@/components/ui/badge";
+export const badgesInButton = `import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
 const BadgesButton = () => {
@@ -71,9 +71,9 @@ const BadgesButton = () => {
   );
 };
 
-export default BadgesButton;`
+export default BadgesButton;`;
 
-export const badgesPosition=`import { Badge } from "@/components/ui/badge";
+export const badgesPosition = `import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
 const BadgePositions = () => {
@@ -99,9 +99,9 @@ const BadgePositions = () => {
   );
 };
 
-export default BadgePositions;`
+export default BadgePositions;`;
 
-export const gradientBadges=`import { Badge } from "@/components/ui/badge";
+export const gradientBadges = `import { Badge } from "@/components/ui/badge";
 
 const GradientBadges = () => {
   return (
@@ -116,9 +116,9 @@ const GradientBadges = () => {
   );
 };
 
-export default GradientBadges;`
+export default GradientBadges;`;
 
-export const badgesIcon=`import { Badge } from "@/components/ui/badge";
+export const badgesIcon = `import { Badge } from "@/components/ui/badge";
 import { BellRing, Heart, Mail } from "lucide-react";
 
 const BadgesIcon = () => {
@@ -140,4 +140,4 @@ const BadgesIcon = () => {
   );
 };
 
-export default BadgesIcon;`
\ No newline at end of file
+export default BadgesIcon;`;
diff --git a/src/app/[locale]/(protected)/components/breadcrumb/basic-breadcrumb.tsx b/src/app/[locale]/(protected)/components/breadcrumb/basic-breadcrumb.tsx
index abe43295..19a34525 100644
--- a/src/app/[locale]/(protected)/components/breadcrumb/basic-breadcrumb.tsx
+++ b/src/app/[locale]/(protected)/components/breadcrumb/basic-breadcrumb.tsx
@@ -5,7 +5,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
+} from "@/components/ui/breadcrumb";
 
 const BasicBreadcrumb = () => {
   return (
@@ -27,4 +27,4 @@ const BasicBreadcrumb = () => {
   );
 };
 
-export default BasicBreadcrumb;
\ No newline at end of file
+export default BasicBreadcrumb;
diff --git a/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-collapsed.tsx b/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-collapsed.tsx
index c602fe73..0a308fa7 100644
--- a/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-collapsed.tsx
+++ b/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-collapsed.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link"
+import Link from "next/link";
 
 import {
   Breadcrumb,
@@ -8,7 +8,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
+} from "@/components/ui/breadcrumb";
 
 const BreadcrumbCollapsed = () => {
   return (
@@ -35,6 +35,6 @@ const BreadcrumbCollapsed = () => {
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
-  )
-}
-export default BreadcrumbCollapsed;
\ No newline at end of file
+  );
+};
+export default BreadcrumbCollapsed;
diff --git a/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-dropdown.tsx b/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-dropdown.tsx
index 8fc05611..4d7bbcaa 100644
--- a/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-dropdown.tsx
+++ b/src/app/[locale]/(protected)/components/breadcrumb/breadcrumb-dropdown.tsx
@@ -1,4 +1,4 @@
-
+import { ChevronDown, Slash } from "lucide-react";
 
 import {
   Breadcrumb,
@@ -7,14 +7,14 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
+} from "@/components/ui/breadcrumb";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { ChevronDown, Slash } from "lucide-react";
+} from "@/components/ui/dropdown-menu";
+
 const BreadcrumbDropdown = () => {
   return (
     <Breadcrumb>
@@ -52,4 +52,4 @@ const BreadcrumbDropdown = () => {
   );
 };
 
-export default BreadcrumbDropdown;
\ No newline at end of file
+export default BreadcrumbDropdown;
diff --git a/src/app/[locale]/(protected)/components/breadcrumb/custom-separator.tsx b/src/app/[locale]/(protected)/components/breadcrumb/custom-separator.tsx
index d252f686..9ec3ad7d 100644
--- a/src/app/[locale]/(protected)/components/breadcrumb/custom-separator.tsx
+++ b/src/app/[locale]/(protected)/components/breadcrumb/custom-separator.tsx
@@ -1,4 +1,4 @@
-
+import { Slash } from "lucide-react";
 
 import {
   Breadcrumb,
@@ -7,8 +7,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import { Slash } from "lucide-react";
+} from "@/components/ui/breadcrumb";
 
 const CustomSeparator = () => {
   return (
@@ -34,4 +33,4 @@ const CustomSeparator = () => {
   );
 };
 
-export default CustomSeparator;
\ No newline at end of file
+export default CustomSeparator;
diff --git a/src/app/[locale]/(protected)/components/breadcrumb/layout.tsx b/src/app/[locale]/(protected)/components/breadcrumb/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/breadcrumb/layout.tsx
+++ b/src/app/[locale]/(protected)/components/breadcrumb/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/breadcrumb/page.tsx b/src/app/[locale]/(protected)/components/breadcrumb/page.tsx
index fbe6e06c..c64c05c8 100644
--- a/src/app/[locale]/(protected)/components/breadcrumb/page.tsx
+++ b/src/app/[locale]/(protected)/components/breadcrumb/page.tsx
@@ -1,10 +1,17 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicBreadcrumb from "./basic-breadcrumb";
-import CustomSeparator from "./custom-separator";
-import BreadcrumbDropdown from "./breadcrumb-dropdown";
-import BreadcrumbCollapsed from "./breadcrumb-collapsed";
-import { basicBreadcrumb, breadcrumbCollapsed, breadcrumbDropdown, customSeparator } from "./source-code";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicBreadcrumb from "./basic-breadcrumb";
+import BreadcrumbCollapsed from "./breadcrumb-collapsed";
+import BreadcrumbDropdown from "./breadcrumb-dropdown";
+import CustomSeparator from "./custom-separator";
+import {
+  basicBreadcrumb,
+  breadcrumbCollapsed,
+  breadcrumbDropdown,
+  customSeparator,
+} from "./source-code";
+
 const BreadcrumbPage = () => {
   return (
     <div>
@@ -27,4 +34,4 @@ const BreadcrumbPage = () => {
   );
 };
 
-export default BreadcrumbPage;
\ No newline at end of file
+export default BreadcrumbPage;
diff --git a/src/app/[locale]/(protected)/components/breadcrumb/source-code.ts b/src/app/[locale]/(protected)/components/breadcrumb/source-code.ts
index e32138ae..b4c01e66 100644
--- a/src/app/[locale]/(protected)/components/breadcrumb/source-code.ts
+++ b/src/app/[locale]/(protected)/components/breadcrumb/source-code.ts
@@ -1,4 +1,4 @@
-export const basicBreadcrumb =`import {
+export const basicBreadcrumb = `import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
@@ -27,9 +27,9 @@ const BasicBreadcrumb = () => {
   );
 };
 
-export default BasicBreadcrumb;`
+export default BasicBreadcrumb;`;
 
-export const customSeparator=`
+export const customSeparator = `
 
 import {
   Breadcrumb,
@@ -65,9 +65,9 @@ const CustomSeparator = () => {
   );
 };
 
-export default CustomSeparator;`
+export default CustomSeparator;`;
 
-export const breadcrumbDropdown=`
+export const breadcrumbDropdown = `
 
 import {
   Breadcrumb,
@@ -121,9 +121,9 @@ const BreadcrumbDropdown = () => {
   );
 };
 
-export default BreadcrumbDropdown;`
+export default BreadcrumbDropdown;`;
 
-export const breadcrumbCollapsed=`
+export const breadcrumbCollapsed = `
 import Link from "next/link"
 
 import {
@@ -164,4 +164,4 @@ const BreadcrumbCollapsed = () => {
   )
 }
 export default BreadcrumbCollapsed;
-`
\ No newline at end of file
+`;
diff --git a/src/app/[locale]/(protected)/components/button/basic-button.tsx b/src/app/[locale]/(protected)/components/button/basic-button.tsx
index c57c1493..b493c047 100644
--- a/src/app/[locale]/(protected)/components/button/basic-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/basic-button.tsx
@@ -1,16 +1,17 @@
 import { Button } from "@/components/ui/button";
+
 const BasicButton = () => {
-    return (
-        <div className="flex flex-wrap gap-3">
-            <Button>Default</Button>
-            <Button color="primary">Primary</Button>
-            <Button color="secondary">Secondary</Button>
-            <Button color="success">Success</Button>
-            <Button color="info">Info</Button>
-            <Button color="warning">Warning</Button>
-            <Button color="destructive">Destructive</Button>
-        </div>
-    );
+  return (
+    <div className="flex flex-wrap gap-3">
+      <Button>Default</Button>
+      <Button color="primary">Primary</Button>
+      <Button color="secondary">Secondary</Button>
+      <Button color="success">Success</Button>
+      <Button color="info">Info</Button>
+      <Button color="warning">Warning</Button>
+      <Button color="destructive">Destructive</Button>
+    </div>
+  );
 };
 
-export default BasicButton;
\ No newline at end of file
+export default BasicButton;
diff --git a/src/app/[locale]/(protected)/components/button/block-button.tsx b/src/app/[locale]/(protected)/components/button/block-button.tsx
index 12aa929a..e166a6fe 100644
--- a/src/app/[locale]/(protected)/components/button/block-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/block-button.tsx
@@ -1,5 +1,7 @@
-import { Button } from "@/components/ui/button";
 import { Newspaper } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
 const BlockButton = () => {
   return (
     <div className="space-y-3">
@@ -7,11 +9,13 @@ const BlockButton = () => {
       <Button color="secondary" fullWidth>
         <Newspaper className="w-4 h-4 me-2" /> Left Icon
       </Button>
-      <Button color="success" fullWidth> Right Icon
+      <Button color="success" fullWidth>
+        {" "}
+        Right Icon
         <Newspaper className="w-4 h-4 ms-2" />
       </Button>
     </div>
   );
 };
 
-export default BlockButton;
\ No newline at end of file
+export default BlockButton;
diff --git a/src/app/[locale]/(protected)/components/button/disabled-button.tsx b/src/app/[locale]/(protected)/components/button/disabled-button.tsx
index 043eced4..e241afcb 100644
--- a/src/app/[locale]/(protected)/components/button/disabled-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/disabled-button.tsx
@@ -1,16 +1,29 @@
 import { Button } from "@/components/ui/button";
+
 const DisabledButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
       <Button disabled>Default</Button>
-      <Button color="primary" disabled>Primary</Button>
-      <Button color="secondary" disabled>Secondary</Button>
-      <Button color="success" disabled>Success</Button>
-      <Button color="info" disabled>Info</Button>
-      <Button color="warning" disabled>Warning</Button>
-      <Button color="destructive" disabled>Destructive</Button>
+      <Button color="primary" disabled>
+        Primary
+      </Button>
+      <Button color="secondary" disabled>
+        Secondary
+      </Button>
+      <Button color="success" disabled>
+        Success
+      </Button>
+      <Button color="info" disabled>
+        Info
+      </Button>
+      <Button color="warning" disabled>
+        Warning
+      </Button>
+      <Button color="destructive" disabled>
+        Destructive
+      </Button>
     </div>
   );
 };
 
-export default DisabledButton;
\ No newline at end of file
+export default DisabledButton;
diff --git a/src/app/[locale]/(protected)/components/button/ghost-button.tsx b/src/app/[locale]/(protected)/components/button/ghost-button.tsx
index e1fce8d9..e945882b 100644
--- a/src/app/[locale]/(protected)/components/button/ghost-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/ghost-button.tsx
@@ -1,16 +1,29 @@
 import { Button } from "@/components/ui/button";
+
 const GhostButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
       <Button variant="ghost">Default</Button>
-      <Button color="primary" variant="ghost">Primary</Button>
-      <Button color="secondary" variant="ghost">Secondary</Button>
-      <Button color="success" variant="ghost">Success</Button>
-      <Button color="info" variant="ghost">Info</Button>
-      <Button color="warning" variant="ghost">Warning</Button>
-      <Button color="destructive" variant="ghost">Destructive</Button>
+      <Button color="primary" variant="ghost">
+        Primary
+      </Button>
+      <Button color="secondary" variant="ghost">
+        Secondary
+      </Button>
+      <Button color="success" variant="ghost">
+        Success
+      </Button>
+      <Button color="info" variant="ghost">
+        Info
+      </Button>
+      <Button color="warning" variant="ghost">
+        Warning
+      </Button>
+      <Button color="destructive" variant="ghost">
+        Destructive
+      </Button>
     </div>
   );
 };
 
-export default GhostButton;
\ No newline at end of file
+export default GhostButton;
diff --git a/src/app/[locale]/(protected)/components/button/icon-buttons.tsx b/src/app/[locale]/(protected)/components/button/icon-buttons.tsx
index f4ab0be9..0dcf7489 100644
--- a/src/app/[locale]/(protected)/components/button/icon-buttons.tsx
+++ b/src/app/[locale]/(protected)/components/button/icon-buttons.tsx
@@ -1,6 +1,7 @@
-import { Button } from "@/components/ui/button";
 import { Newspaper } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+
 const IconButtons = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -23,14 +24,14 @@ const IconButtons = () => {
       <Button variant="outline" color="primary" size="icon">
         <Newspaper className="w-5 h-5" />
       </Button>
-      <Button  size="icon">
+      <Button size="icon">
         <Newspaper className="w-5 h-5" />
       </Button>
-      <Button  size="icon" color="primary" variant="soft">
+      <Button size="icon" color="primary" variant="soft">
         <Newspaper className="w-5 h-5" />
       </Button>
     </div>
   );
 };
 
-export default IconButtons;
\ No newline at end of file
+export default IconButtons;
diff --git a/src/app/[locale]/(protected)/components/button/icon-rounded.tsx b/src/app/[locale]/(protected)/components/button/icon-rounded.tsx
index 2dcb701a..5948509f 100644
--- a/src/app/[locale]/(protected)/components/button/icon-rounded.tsx
+++ b/src/app/[locale]/(protected)/components/button/icon-rounded.tsx
@@ -1,6 +1,7 @@
-import { Button } from "@/components/ui/button";
 import { Newspaper } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+
 const IconRounded = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -8,29 +9,29 @@ const IconRounded = () => {
         <Newspaper className="w-4 h-4 me-2" />
         Left Icon
       </Button>
-      <Button color="primary"  rounded="full">
+      <Button color="primary" rounded="full">
         Right Icon
         <Newspaper className="w-4 h-4 ms-2" />
       </Button>
-      <Button color="secondary"  rounded="full">
+      <Button color="secondary" rounded="full">
         <Newspaper className="w-4 h-4 me-2" />
         Left Icon
       </Button>
-      <Button color="success" variant="outline"  rounded="full">
+      <Button color="success" variant="outline" rounded="full">
         Right Icon
         <Newspaper className="w-4 h-4 ms-2" />
       </Button>
-      <Button variant="outline" color="primary" size="icon"  rounded="full">
+      <Button variant="outline" color="primary" size="icon" rounded="full">
         <Newspaper className="w-5 h-5" />
       </Button>
-      <Button  size="icon"  rounded="full">
+      <Button size="icon" rounded="full">
         <Newspaper className="w-5 h-5" />
       </Button>
-      <Button  size="icon" color="primary" variant="soft"  rounded="full">
+      <Button size="icon" color="primary" variant="soft" rounded="full">
         <Newspaper className="w-5 h-5" />
       </Button>
     </div>
   );
 };
 
-export default IconRounded;
\ No newline at end of file
+export default IconRounded;
diff --git a/src/app/[locale]/(protected)/components/button/layout.tsx b/src/app/[locale]/(protected)/components/button/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/button/layout.tsx
+++ b/src/app/[locale]/(protected)/components/button/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/button/link-button.tsx b/src/app/[locale]/(protected)/components/button/link-button.tsx
index 774aef5f..eff3e9ce 100644
--- a/src/app/[locale]/(protected)/components/button/link-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/link-button.tsx
@@ -1,5 +1,7 @@
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/navigation';
+
 const LinkButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -28,4 +30,4 @@ const LinkButton = () => {
   );
 };
 
-export default LinkButton;
\ No newline at end of file
+export default LinkButton;
diff --git a/src/app/[locale]/(protected)/components/button/loading-button.tsx b/src/app/[locale]/(protected)/components/button/loading-button.tsx
index bee72f73..c8f1efcf 100644
--- a/src/app/[locale]/(protected)/components/button/loading-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/loading-button.tsx
@@ -1,5 +1,7 @@
-import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
 const LoadingButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -35,4 +37,4 @@ const LoadingButton = () => {
   );
 };
 
-export default LoadingButton;
\ No newline at end of file
+export default LoadingButton;
diff --git a/src/app/[locale]/(protected)/components/button/outline-button.tsx b/src/app/[locale]/(protected)/components/button/outline-button.tsx
index f7696527..afae0340 100644
--- a/src/app/[locale]/(protected)/components/button/outline-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/outline-button.tsx
@@ -1,16 +1,29 @@
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
+
 const OutlineButton = () => {
   return (
-    <div className='flex flex-wrap gap-3'>
+    <div className="flex flex-wrap gap-3">
       <Button variant="outline">Default</Button>
-      <Button color="primary" variant="outline" >Primary</Button>
-      <Button color="secondary" variant="outline">Secondary</Button>
-      <Button color="success" variant="outline">Success</Button>
-      <Button color="info" variant="outline">Info</Button>
-      <Button color="warning" variant="outline">Warning</Button>
-      <Button color="destructive" variant="outline">Destructive</Button>
+      <Button color="primary" variant="outline">
+        Primary
+      </Button>
+      <Button color="secondary" variant="outline">
+        Secondary
+      </Button>
+      <Button color="success" variant="outline">
+        Success
+      </Button>
+      <Button color="info" variant="outline">
+        Info
+      </Button>
+      <Button color="warning" variant="outline">
+        Warning
+      </Button>
+      <Button color="destructive" variant="outline">
+        Destructive
+      </Button>
     </div>
   );
 };
 
-export default OutlineButton;  
\ No newline at end of file
+export default OutlineButton;
diff --git a/src/app/[locale]/(protected)/components/button/page.tsx b/src/app/[locale]/(protected)/components/button/page.tsx
index 9f3f0d3c..76ae68ad 100644
--- a/src/app/[locale]/(protected)/components/button/page.tsx
+++ b/src/app/[locale]/(protected)/components/button/page.tsx
@@ -1,73 +1,87 @@
-
 import Card from "@/components/ui/structures/code-snippet";
-import BasicButton from "./basic-button";
-import OutlineButton from "./outline-button";
-import SoftButton from "./soft-button";
-import ShadowButton from "./shadow-button";
-import RoundedButton from "./rounded-button";
-import RoundedOutline from "./rounded-outline";
-import IconButtons from "./icon-buttons";
-import IconRounded from "./icon-rounded";
-import SizesButton from "./sizes-button";
-import DisabledButton from "./disabled-button";
-import LoadingButton from "./loading-button";
-import BlockButton from "./block-button";
-import LinkButton from "./link-button";
-import GhostButton from "./ghost-button";
-import { basicButton, blockButton, disabledButton, ghostButton, iconButtons, iconRounded, linkButton, loadingButton, outlineButton, roundedButton, roundedOutline, shadowButton, sizesButton, softButton } from "./source-code";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
+import BasicButton from "./basic-button";
+import BlockButton from "./block-button";
+import DisabledButton from "./disabled-button";
+import GhostButton from "./ghost-button";
+import IconButtons from "./icon-buttons";
+import IconRounded from "./icon-rounded";
+import LinkButton from "./link-button";
+import LoadingButton from "./loading-button";
+import OutlineButton from "./outline-button";
+import RoundedButton from "./rounded-button";
+import RoundedOutline from "./rounded-outline";
+import ShadowButton from "./shadow-button";
+import SizesButton from "./sizes-button";
+import SoftButton from "./soft-button";
+import {
+  basicButton,
+  blockButton,
+  disabledButton,
+  ghostButton,
+  iconButtons,
+  iconRounded,
+  linkButton,
+  loadingButton,
+  outlineButton,
+  roundedButton,
+  roundedOutline,
+  shadowButton,
+  sizesButton,
+  softButton,
+} from "./source-code";
 
 const ButtonPage = () => {
-    return (
-        <>
-            <SiteBreadcrumb />
-            <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
-                <Card title="Basic" code={basicButton}>
-                    <BasicButton />
-                </Card>
-                <Card title="Outline" code={outlineButton}>
-                    <OutlineButton />
-                </Card>
-                <Card title="Soft Color" code={softButton}>
-                    <SoftButton />
-                </Card>
-                <Card title="Shadow Button" code={shadowButton}>
-                    <ShadowButton />
-                </Card>
-                <Card title="Rounded" code={roundedButton}>
-                    <RoundedButton />
-                </Card>
-                <Card title="Rounded Outline" code={roundedOutline}>
-                    <RoundedOutline />
-                </Card>
-                <Card title="Icon Buttons" code={iconButtons}>
-                    <IconButtons />
-                </Card>
-                <Card title="Icon Rounded" code={iconRounded}>
-                    <IconRounded />
-                </Card>
-                <Card title="Size" code={sizesButton}>
-                    <SizesButton />
-                </Card>
-                <Card title="Disabled Button" code={disabledButton}>
-                    <DisabledButton />
-                </Card>
-                <Card title="Loading Button" code={loadingButton}>
-                    <LoadingButton />
-                </Card>
-                <Card title="Block" code={blockButton}>
-                    <BlockButton />
-                </Card>
-                <Card title="Link Button" code={linkButton}>
-                    <LinkButton />
-                </Card>
-                <Card title="Ghost Button" code={ghostButton}>
-                    <GhostButton />
-                </Card>
-            </div>
-        </>
-    );
+  return (
+    <>
+      <SiteBreadcrumb />
+      <div className="grid lg:grid-cols-2 grid-cols-1 gap-6">
+        <Card title="Basic" code={basicButton}>
+          <BasicButton />
+        </Card>
+        <Card title="Outline" code={outlineButton}>
+          <OutlineButton />
+        </Card>
+        <Card title="Soft Color" code={softButton}>
+          <SoftButton />
+        </Card>
+        <Card title="Shadow Button" code={shadowButton}>
+          <ShadowButton />
+        </Card>
+        <Card title="Rounded" code={roundedButton}>
+          <RoundedButton />
+        </Card>
+        <Card title="Rounded Outline" code={roundedOutline}>
+          <RoundedOutline />
+        </Card>
+        <Card title="Icon Buttons" code={iconButtons}>
+          <IconButtons />
+        </Card>
+        <Card title="Icon Rounded" code={iconRounded}>
+          <IconRounded />
+        </Card>
+        <Card title="Size" code={sizesButton}>
+          <SizesButton />
+        </Card>
+        <Card title="Disabled Button" code={disabledButton}>
+          <DisabledButton />
+        </Card>
+        <Card title="Loading Button" code={loadingButton}>
+          <LoadingButton />
+        </Card>
+        <Card title="Block" code={blockButton}>
+          <BlockButton />
+        </Card>
+        <Card title="Link Button" code={linkButton}>
+          <LinkButton />
+        </Card>
+        <Card title="Ghost Button" code={ghostButton}>
+          <GhostButton />
+        </Card>
+      </div>
+    </>
+  );
 };
 
-export default ButtonPage;
\ No newline at end of file
+export default ButtonPage;
diff --git a/src/app/[locale]/(protected)/components/button/rounded-button.tsx b/src/app/[locale]/(protected)/components/button/rounded-button.tsx
index b799e440..835bc6c2 100644
--- a/src/app/[locale]/(protected)/components/button/rounded-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/rounded-button.tsx
@@ -1,14 +1,20 @@
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
 
 const RoundedButton = () => {
   return (
-    <div className='flex flex-wrap gap-3'>
+    <div className="flex flex-wrap gap-3">
       <Button rounded="sm">Default</Button>
-      <Button color="primary" rounded="md" >Primary</Button>
-      <Button color="secondary" rounded="lg" >Scondary</Button>
-      <Button color="warning" rounded="full" >Warning</Button>
+      <Button color="primary" rounded="md">
+        Primary
+      </Button>
+      <Button color="secondary" rounded="lg">
+        Scondary
+      </Button>
+      <Button color="warning" rounded="full">
+        Warning
+      </Button>
     </div>
   );
 };
 
-export default RoundedButton;  
\ No newline at end of file
+export default RoundedButton;
diff --git a/src/app/[locale]/(protected)/components/button/rounded-outline.tsx b/src/app/[locale]/(protected)/components/button/rounded-outline.tsx
index 2ff3af64..1fdf8cf4 100644
--- a/src/app/[locale]/(protected)/components/button/rounded-outline.tsx
+++ b/src/app/[locale]/(protected)/components/button/rounded-outline.tsx
@@ -1,17 +1,31 @@
-import { Button } from '@/components/ui/button';
+import { Button } from "@/components/ui/button";
 
 const RoundedOutline = () => {
   return (
-    <div className='flex flex-wrap gap-3'>
-      <Button variant="outline" rounded="full">Default</Button>
-      <Button color="primary" variant="outline" rounded="full">Primary</Button>
-      <Button color="secondary" variant="outline" rounded="full">Secondary</Button>
-      <Button color="success" variant="outline" rounded="full">Success</Button>
-      <Button color="info" variant="outline" rounded="full">Info</Button>
-      <Button color="warning" variant="outline" rounded="full">Warning</Button>
-      <Button color="destructive" variant="outline" rounded="full">Destructive</Button>
+    <div className="flex flex-wrap gap-3">
+      <Button variant="outline" rounded="full">
+        Default
+      </Button>
+      <Button color="primary" variant="outline" rounded="full">
+        Primary
+      </Button>
+      <Button color="secondary" variant="outline" rounded="full">
+        Secondary
+      </Button>
+      <Button color="success" variant="outline" rounded="full">
+        Success
+      </Button>
+      <Button color="info" variant="outline" rounded="full">
+        Info
+      </Button>
+      <Button color="warning" variant="outline" rounded="full">
+        Warning
+      </Button>
+      <Button color="destructive" variant="outline" rounded="full">
+        Destructive
+      </Button>
     </div>
   );
 };
 
-export default RoundedOutline;  
\ No newline at end of file
+export default RoundedOutline;
diff --git a/src/app/[locale]/(protected)/components/button/shadow-button.tsx b/src/app/[locale]/(protected)/components/button/shadow-button.tsx
index 5810e6f2..3fb00103 100644
--- a/src/app/[locale]/(protected)/components/button/shadow-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/shadow-button.tsx
@@ -1,13 +1,20 @@
 import { Button } from "@/components/ui/button";
+
 const ShadowButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
       <Button shadow="sm">Primary</Button>
-      <Button color="secondary" shadow="md">Secondary</Button>
-      <Button color="success" shadow="lg">Success</Button>
-      <Button color="info" shadow="xl">Info</Button>
+      <Button color="secondary" shadow="md">
+        Secondary
+      </Button>
+      <Button color="success" shadow="lg">
+        Success
+      </Button>
+      <Button color="info" shadow="xl">
+        Info
+      </Button>
     </div>
   );
 };
 
-export default ShadowButton;
\ No newline at end of file
+export default ShadowButton;
diff --git a/src/app/[locale]/(protected)/components/button/sizes-button.tsx b/src/app/[locale]/(protected)/components/button/sizes-button.tsx
index 3f2f7360..3cabdfc4 100644
--- a/src/app/[locale]/(protected)/components/button/sizes-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/sizes-button.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@/components/ui/button";
+
 const SizesButton = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -10,4 +11,4 @@ const SizesButton = () => {
   );
 };
 
-export default SizesButton;
\ No newline at end of file
+export default SizesButton;
diff --git a/src/app/[locale]/(protected)/components/button/soft-button.tsx b/src/app/[locale]/(protected)/components/button/soft-button.tsx
index e783f9cb..ea2eb960 100644
--- a/src/app/[locale]/(protected)/components/button/soft-button.tsx
+++ b/src/app/[locale]/(protected)/components/button/soft-button.tsx
@@ -1,16 +1,29 @@
 import { Button } from "@/components/ui/button";
+
 const SoftButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
       <Button variant="soft">Primary</Button>
-      <Button color="primary" variant="soft" >Primary</Button>
-      <Button color="secondary" variant="soft">Secondary</Button>
-      <Button color="success" variant="soft">Success</Button>
-      <Button color="info" variant="soft">Info</Button>
-      <Button color="warning" variant="soft">Warning</Button>
-      <Button color="destructive" variant="soft">Destructive</Button>
+      <Button color="primary" variant="soft">
+        Primary
+      </Button>
+      <Button color="secondary" variant="soft">
+        Secondary
+      </Button>
+      <Button color="success" variant="soft">
+        Success
+      </Button>
+      <Button color="info" variant="soft">
+        Info
+      </Button>
+      <Button color="warning" variant="soft">
+        Warning
+      </Button>
+      <Button color="destructive" variant="soft">
+        Destructive
+      </Button>
     </div>
-  )
+  );
 };
 
 export default SoftButton;
diff --git a/src/app/[locale]/(protected)/components/button/source-code.ts b/src/app/[locale]/(protected)/components/button/source-code.ts
index 83463c2f..0e0f9ebf 100644
--- a/src/app/[locale]/(protected)/components/button/source-code.ts
+++ b/src/app/[locale]/(protected)/components/button/source-code.ts
@@ -1,4 +1,4 @@
-export const basicButton=`import { Button } from "@/components/ui/button";
+export const basicButton = `import { Button } from "@/components/ui/button";
 const BasicButton = () => {
     return (
         <div className="flex flex-wrap gap-3">
@@ -13,9 +13,9 @@ const BasicButton = () => {
     );
 };
 
-export default BasicButton;`
+export default BasicButton;`;
 
-export const outlineButton=`import { Button } from '@/components/ui/button';
+export const outlineButton = `import { Button } from '@/components/ui/button';
 const OutlineButton = () => {
   return (
     <div className='flex flex-wrap gap-3'>
@@ -30,9 +30,9 @@ const OutlineButton = () => {
   );
 };
 
-export default OutlineButton;`
+export default OutlineButton;`;
 
-export const softButton=`import { Button } from "@/components/ui/button";
+export const softButton = `import { Button } from "@/components/ui/button";
 const SoftButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -48,8 +48,8 @@ const SoftButton = () => {
 };
 
 export default SoftButton;
-`
-export const shadowButton=`import { Button } from "@/components/ui/button";
+`;
+export const shadowButton = `import { Button } from "@/components/ui/button";
 const ShadowButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -61,8 +61,8 @@ const ShadowButton = () => {
   );
 };
 
-export default ShadowButton;`
-export const roundedButton=`import { Button } from '@/components/ui/button';
+export default ShadowButton;`;
+export const roundedButton = `import { Button } from '@/components/ui/button';
 
 const RoundedButton = () => {
   return (
@@ -75,9 +75,9 @@ const RoundedButton = () => {
   );
 };
 
-export default RoundedButton;  `
+export default RoundedButton;  `;
 
-export const roundedOutline=`import { Button } from '@/components/ui/button';
+export const roundedOutline = `import { Button } from '@/components/ui/button';
 
 const RoundedOutline = () => {
   return (
@@ -93,9 +93,9 @@ const RoundedOutline = () => {
   );
 };
 
-export default RoundedOutline;  `
+export default RoundedOutline;  `;
 
-export const iconButtons=`import { Button } from "@/components/ui/button";
+export const iconButtons = `import { Button } from "@/components/ui/button";
 import { Newspaper } from "lucide-react";
 
 const IconButtons = () => {
@@ -130,9 +130,9 @@ const IconButtons = () => {
   );
 };
 
-export default IconButtons;`
+export default IconButtons;`;
 
-export const iconRounded=`import { Button } from "@/components/ui/button";
+export const iconRounded = `import { Button } from "@/components/ui/button";
 import { Newspaper } from "lucide-react";
 
 const IconRounded = () => {
@@ -167,9 +167,9 @@ const IconRounded = () => {
   );
 };
 
-export default IconRounded;`
+export default IconRounded;`;
 
-export const sizesButton=`import { Button } from "@/components/ui/button";
+export const sizesButton = `import { Button } from "@/components/ui/button";
 const SizesButton = () => {
   return (
     <div className="flex flex-wrap items-center gap-3">
@@ -181,9 +181,9 @@ const SizesButton = () => {
   );
 };
 
-export default SizesButton;`
+export default SizesButton;`;
 
-export const disabledButton=`import { Button } from "@/components/ui/button";
+export const disabledButton = `import { Button } from "@/components/ui/button";
 const DisabledButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -198,9 +198,9 @@ const DisabledButton = () => {
   );
 };
 
-export default DisabledButton;`
+export default DisabledButton;`;
 
-export const loadingButton=`import { Button } from "@/components/ui/button";
+export const loadingButton = `import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 const LoadingButton = () => {
   return (
@@ -237,9 +237,9 @@ const LoadingButton = () => {
   );
 };
 
-export default LoadingButton;`
+export default LoadingButton;`;
 
-export const blockButton=`import { Button } from "@/components/ui/button";
+export const blockButton = `import { Button } from "@/components/ui/button";
 import { Newspaper } from "lucide-react";
 const BlockButton = () => {
   return (
@@ -255,9 +255,9 @@ const BlockButton = () => {
   );
 };
 
-export default BlockButton;`
+export default BlockButton;`;
 
-export const linkButton=`import { Button } from "@/components/ui/button";
+export const linkButton = `import { Button } from "@/components/ui/button";
 import {Link} from '@/i18n/navigation';
 const LinkButton = () => {
   return (
@@ -287,9 +287,9 @@ const LinkButton = () => {
   );
 };
 
-export default LinkButton;`
+export default LinkButton;`;
 
-export const ghostButton=`import { Button } from "@/components/ui/button";
+export const ghostButton = `import { Button } from "@/components/ui/button";
 const GhostButton = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -304,4 +304,4 @@ const GhostButton = () => {
   );
 };
 
-export default GhostButton;`
\ No newline at end of file
+export default GhostButton;`;
diff --git a/src/app/[locale]/(protected)/components/calendar/basic-calendar.tsx b/src/app/[locale]/(protected)/components/calendar/basic-calendar.tsx
index 99826df4..18a7a8e0 100644
--- a/src/app/[locale]/(protected)/components/calendar/basic-calendar.tsx
+++ b/src/app/[locale]/(protected)/components/calendar/basic-calendar.tsx
@@ -1,19 +1,15 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Calendar } from "@/components/ui/calendar"
+import { useState } from "react";
+
+import { Calendar } from "@/components/ui/calendar";
 
 const BasicCalendar = () => {
-  const [date, setDate] = useState<Date | undefined>(new Date())
+  const [date, setDate] = useState<Date | undefined>(new Date());
 
   return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      className="rounded-md border"
-    />
-  )
-}
+    <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
+  );
+};
 
-export default BasicCalendar;
\ No newline at end of file
+export default BasicCalendar;
diff --git a/src/app/[locale]/(protected)/components/calendar/layout.tsx b/src/app/[locale]/(protected)/components/calendar/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/calendar/layout.tsx
+++ b/src/app/[locale]/(protected)/components/calendar/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/calendar/page.tsx b/src/app/[locale]/(protected)/components/calendar/page.tsx
index 02fae28a..0d3efad2 100644
--- a/src/app/[locale]/(protected)/components/calendar/page.tsx
+++ b/src/app/[locale]/(protected)/components/calendar/page.tsx
@@ -1,6 +1,7 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicCalendar from "./basic-calendar";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicCalendar from "./basic-calendar";
 import { basicCalendar } from "./soure-code";
 
 const CalendarPage = () => {
@@ -16,4 +17,4 @@ const CalendarPage = () => {
   );
 };
 
-export default CalendarPage;
\ No newline at end of file
+export default CalendarPage;
diff --git a/src/app/[locale]/(protected)/components/calendar/soure-code.ts b/src/app/[locale]/(protected)/components/calendar/soure-code.ts
index b3b0df9a..a596b3a9 100644
--- a/src/app/[locale]/(protected)/components/calendar/soure-code.ts
+++ b/src/app/[locale]/(protected)/components/calendar/soure-code.ts
@@ -1,4 +1,4 @@
-export const basicCalendar =`"use client"
+export const basicCalendar = `"use client"
 
 import { useState } from "react"
 import { Calendar } from "@/components/ui/calendar"
@@ -16,4 +16,4 @@ const BasicCalendar = () => {
   )
 }
 
-export default BasicCalendar;`
\ No newline at end of file
+export default BasicCalendar;`;
diff --git a/src/app/[locale]/(protected)/components/card/basic-card.tsx b/src/app/[locale]/(protected)/components/card/basic-card.tsx
index b0017254..2dcf5254 100644
--- a/src/app/[locale]/(protected)/components/card/basic-card.tsx
+++ b/src/app/[locale]/(protected)/components/card/basic-card.tsx
@@ -1,3 +1,6 @@
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -7,8 +10,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import Image from "next/image";
-import { Link } from '@/i18n/navigation';
 
 const BasicCard = () => {
   return (
@@ -27,8 +28,8 @@ const BasicCard = () => {
             className="w-full h-[140px] object-cover mb-6 rounded-md"
           />
           <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
+            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+            incididun ut .
           </p>
         </CardContent>
         <CardFooter className="gap-6">
@@ -54,8 +55,8 @@ const BasicCard = () => {
         </CardHeader>
         <CardContent>
           <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
+            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+            incididun ut .
           </p>
         </CardContent>
         <CardFooter className="gap-6 mt-6">
@@ -77,17 +78,15 @@ const BasicCard = () => {
         />
         <div className="pt-6 h-max">
           <CardHeader className="p-6 pt-0">
-            <CardTitle className="text-default-foreground dark:text-default">
-              Card Title
-            </CardTitle>
+            <CardTitle className="text-default-foreground dark:text-default">Card Title</CardTitle>
           </CardHeader>
           <CardContent className="mt-16">
             <CardDescription className="text-base text-default-foreground dark:text-default mb-3">
               Card Title
             </CardDescription>
             <p className="text-sm text-default-foreground dark:text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="mt-14">
diff --git a/src/app/[locale]/(protected)/components/card/layout.tsx b/src/app/[locale]/(protected)/components/card/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/card/layout.tsx
+++ b/src/app/[locale]/(protected)/components/card/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/card/marketing-image-card.tsx b/src/app/[locale]/(protected)/components/card/marketing-image-card.tsx
index 1a35d02a..a8667c3b 100644
--- a/src/app/[locale]/(protected)/components/card/marketing-image-card.tsx
+++ b/src/app/[locale]/(protected)/components/card/marketing-image-card.tsx
@@ -1,3 +1,6 @@
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import {
   Card,
   CardContent,
@@ -6,8 +9,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import Image from "next/image";
-import { Link } from '@/i18n/navigation';
 
 const MarketingImageCard = () => {
   return (
@@ -25,8 +26,8 @@ const MarketingImageCard = () => {
         </CardHeader>
         <CardContent>
           <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
+            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+            incididun ut .
           </p>
         </CardContent>
       </Card>
@@ -36,8 +37,8 @@ const MarketingImageCard = () => {
         </CardHeader>
         <CardContent className="text-center ">
           <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
+            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+            incididun ut .
           </p>
         </CardContent>
         <CardContent className="pb-0">
@@ -63,8 +64,8 @@ const MarketingImageCard = () => {
         </CardHeader>
         <CardContent className="text-center pb-0">
           <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
+            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+            incididun ut .
           </p>
         </CardContent>
       </Card>
@@ -74,8 +75,8 @@ const MarketingImageCard = () => {
         </CardHeader>
         <CardContent className="text-center ">
           <p className="text-sm text-muted-foreground">
-            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-            eiusmod tempor incididun ut .
+            Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+            incididun ut .
           </p>
         </CardContent>
         <Image
@@ -87,8 +88,6 @@ const MarketingImageCard = () => {
         />
       </Card>
     </div>
-
-
   );
 };
 
diff --git a/src/app/[locale]/(protected)/components/card/page.tsx b/src/app/[locale]/(protected)/components/card/page.tsx
index e511516d..ad861f50 100644
--- a/src/app/[locale]/(protected)/components/card/page.tsx
+++ b/src/app/[locale]/(protected)/components/card/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicCard from "./basic-card";
 import MarketingImageCard from "./marketing-image-card";
 import SalesAutomationCard from "./sales-automation-card";
diff --git a/src/app/[locale]/(protected)/components/card/sales-automation-card.tsx b/src/app/[locale]/(protected)/components/card/sales-automation-card.tsx
index d54c7a04..96beb0dd 100644
--- a/src/app/[locale]/(protected)/components/card/sales-automation-card.tsx
+++ b/src/app/[locale]/(protected)/components/card/sales-automation-card.tsx
@@ -1,12 +1,7 @@
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Link } from '@/i18n/navigation';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 
 const SalesAutomationCard = () => {
   return (
@@ -18,8 +13,8 @@ const SalesAutomationCard = () => {
           </CardHeader>
           <CardContent>
             <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="gap-6">
@@ -30,21 +25,16 @@ const SalesAutomationCard = () => {
         </Card>
         <Card className="bg-default dark:bg-default-foreground">
           <CardHeader>
-            <CardTitle className="text-default-50 dark:text-default">
-              Sales Automation
-            </CardTitle>
+            <CardTitle className="text-default-50 dark:text-default">Sales Automation</CardTitle>
           </CardHeader>
           <CardContent>
             <p className="text-sm text-default-50 dark:text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="gap-6">
-            <Link
-              href="#"
-              className="text-sm text text-default-50 dark:text-default underline"
-            >
+            <Link href="#" className="text-sm text text-default-50 dark:text-default underline">
               Learn More
             </Link>
           </CardFooter>
@@ -55,8 +45,8 @@ const SalesAutomationCard = () => {
           </CardHeader>
           <CardContent>
             <p className="text-sm text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="gap-6">
@@ -71,8 +61,8 @@ const SalesAutomationCard = () => {
           </CardHeader>
           <CardContent>
             <p className="text-sm text-default">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="gap-6">
@@ -89,8 +79,8 @@ const SalesAutomationCard = () => {
           </CardHeader>
           <CardContent>
             <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="gap-6">
@@ -105,8 +95,8 @@ const SalesAutomationCard = () => {
           </CardHeader>
           <CardContent className="text-center">
             <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="gap-6 justify-center">
@@ -121,8 +111,8 @@ const SalesAutomationCard = () => {
           </CardHeader>
           <CardContent className="text-center">
             <p className="text-sm text-muted-foreground">
-              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do
-              eiusmod tempor incididun ut .
+              Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor
+              incididun ut .
             </p>
           </CardContent>
           <CardFooter className="gap-6 justify-center w-full">
diff --git a/src/app/[locale]/(protected)/components/carousel/autoplay-carousel.tsx b/src/app/[locale]/(protected)/components/carousel/autoplay-carousel.tsx
index 13f891d7..62da9af6 100644
--- a/src/app/[locale]/(protected)/components/carousel/autoplay-carousel.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/autoplay-carousel.tsx
@@ -1,45 +1,44 @@
-"use client"
-import { Card, CardContent } from "@/components/ui/card"
-import Autoplay from "embla-carousel-autoplay"
+"use client";
 
+import { useRef } from "react";
+import Autoplay from "embla-carousel-autoplay";
+
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/components/ui/carousel"
-import { useRef } from "react";
+} from "@/components/ui/carousel";
 
 const AutoplayCarousel = () => {
-  const plugin = useRef(
-    Autoplay({ delay: 2000, stopOnInteraction: true })
-  )
+  const plugin = useRef(Autoplay({ delay: 2000, stopOnInteraction: true }));
 
   return (
-      <Carousel
-        className="w-full max-w-sm mx-auto"
-        plugins={[plugin.current]}
-        onMouseEnter={plugin.current.stop}
-        onMouseLeave={plugin.current.reset}
-      >
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card  className="dark:border-default-300">
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
+    <Carousel
+      className="w-full max-w-sm mx-auto"
+      plugins={[plugin.current]}
+      onMouseEnter={plugin.current.stop}
+      onMouseLeave={plugin.current.reset}
+    >
+      <CarouselContent className="-ml-1">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card className="dark:border-default-300">
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-2xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
   );
 };
 
-export default AutoplayCarousel;
\ No newline at end of file
+export default AutoplayCarousel;
diff --git a/src/app/[locale]/(protected)/components/carousel/basic-carousel.tsx b/src/app/[locale]/(protected)/components/carousel/basic-carousel.tsx
index 27a99811..d520d59d 100644
--- a/src/app/[locale]/(protected)/components/carousel/basic-carousel.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/basic-carousel.tsx
@@ -1,11 +1,11 @@
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/components/ui/carousel"
+} from "@/components/ui/carousel";
 
 const BasicCarousel = () => {
   return (
@@ -22,7 +22,6 @@ const BasicCarousel = () => {
             </div>
           </CarouselItem>
         ))}
-        
       </CarouselContent>
       <CarouselPrevious />
       <CarouselNext />
@@ -30,4 +29,4 @@ const BasicCarousel = () => {
   );
 };
 
-export default BasicCarousel;
\ No newline at end of file
+export default BasicCarousel;
diff --git a/src/app/[locale]/(protected)/components/carousel/custom-carousel.tsx b/src/app/[locale]/(protected)/components/carousel/custom-carousel.tsx
index 42a52c17..8f446094 100644
--- a/src/app/[locale]/(protected)/components/carousel/custom-carousel.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/custom-carousel.tsx
@@ -1,5 +1,8 @@
-"use client"
-import { Card, CardContent } from "@/components/ui/card"
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselApi,
@@ -7,26 +10,25 @@ import {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/components/ui/carousel"
-import { useEffect, useState } from "react"
+} from "@/components/ui/carousel";
 
 const CustomCarousel = () => {
-  const [api, setApi] = useState<CarouselApi | undefined>(undefined)
-  const [current, setCurrent] = useState<number>(0)
-  const [count, setCount] = useState<number>(0)
+  const [api, setApi] = useState<CarouselApi | undefined>(undefined);
+  const [current, setCurrent] = useState<number>(0);
+  const [count, setCount] = useState<number>(0);
 
   useEffect(() => {
     if (!api) {
-      return
+      return;
     }
 
-    setCount(api.scrollSnapList().length)
-    setCurrent(api.selectedScrollSnap() + 1)
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
 
     api.on("select", () => {
-      setCurrent(api.selectedScrollSnap() + 1)
-    })
-  }, [api])
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
 
   return (
     <div className="flex flex-col items-center gap-3">
@@ -34,12 +36,12 @@ const CustomCarousel = () => {
         <CarouselContent>
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem key={index}>
-               <div className="p-1">
-              <Card  className="dark:border-default-300">
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
+              <div className="p-1">
+                <Card className="dark:border-default-300">
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
               </div>
             </CarouselItem>
           ))}
@@ -51,7 +53,7 @@ const CustomCarousel = () => {
         Slide <strong>{current}</strong> of <strong>{count}</strong>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default CustomCarousel
+export default CustomCarousel;
diff --git a/src/app/[locale]/(protected)/components/carousel/layout.tsx b/src/app/[locale]/(protected)/components/carousel/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/carousel/layout.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/carousel/page.tsx b/src/app/[locale]/(protected)/components/carousel/page.tsx
index eac34556..aa426993 100644
--- a/src/app/[locale]/(protected)/components/carousel/page.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/page.tsx
@@ -1,12 +1,21 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import AutoplayCarousel from "./autoplay-carousel";
 import BasicCarousel from "./basic-carousel";
+import CustomCarousel from "./custom-carousel";
 import SizeCarousel from "./size-carousel";
+import {
+  autoplayCarousel,
+  basicCarousel,
+  customCarousel,
+  sizeCarousel,
+  spacingCarousel,
+  verticalCarousel,
+} from "./source-code";
 import SpacingCarousel from "./spacing-carousel";
 import VerticalCarousel from "./vertical-carousel";
-import AutoplayCarousel from "./autoplay-carousel";
-import CustomCarousel from "./custom-carousel";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { basicCarousel, sizeCarousel, spacingCarousel, verticalCarousel, autoplayCarousel, customCarousel } from "./source-code"
+
 const CarouselPage = () => {
   return (
     <div>
@@ -35,4 +44,4 @@ const CarouselPage = () => {
   );
 };
 
-export default CarouselPage;
\ No newline at end of file
+export default CarouselPage;
diff --git a/src/app/[locale]/(protected)/components/carousel/size-carousel.tsx b/src/app/[locale]/(protected)/components/carousel/size-carousel.tsx
index f1443266..a732918d 100644
--- a/src/app/[locale]/(protected)/components/carousel/size-carousel.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/size-carousel.tsx
@@ -1,37 +1,37 @@
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/components/ui/carousel"
+} from "@/components/ui/carousel";
 
 const SizeCarousel = () => {
   return (
-      <Carousel
-        opts={{
-          align: "start",
-        }}
-        className="w-full max-w-sm mx-auto"
-      >
-        <CarouselContent>
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card  className="dark:border-default-300">
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
+    <Carousel
+      opts={{
+        align: "start",
+      }}
+      className="w-full max-w-sm mx-auto"
+    >
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card className="dark:border-default-300">
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-3xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
   );
 };
 
-export default SizeCarousel;
\ No newline at end of file
+export default SizeCarousel;
diff --git a/src/app/[locale]/(protected)/components/carousel/source-code.ts b/src/app/[locale]/(protected)/components/carousel/source-code.ts
index da56fa80..c709d744 100644
--- a/src/app/[locale]/(protected)/components/carousel/source-code.ts
+++ b/src/app/[locale]/(protected)/components/carousel/source-code.ts
@@ -1,4 +1,4 @@
-export const basicCarousel=`import { Card, CardContent } from "@/components/ui/card"
+export const basicCarousel = `import { Card, CardContent } from "@/components/ui/card"
 import {
   Carousel,
   CarouselContent,
@@ -29,9 +29,9 @@ const BasicCarousel = () => {
   );
 };
 
-export default BasicCarousel;`
+export default BasicCarousel;`;
 
-export const sizeCarousel=`import { Card, CardContent } from "@/components/ui/card"
+export const sizeCarousel = `import { Card, CardContent } from "@/components/ui/card"
 import {
   Carousel,
   CarouselContent,
@@ -67,9 +67,9 @@ const SizeCarousel = () => {
   );
 };
 
-export default SizeCarousel;`
+export default SizeCarousel;`;
 
-export const spacingCarousel=`"use client"
+export const spacingCarousel = `"use client"
 
 import { Card, CardContent } from "@/components/ui/card"
 import {
@@ -102,9 +102,9 @@ const SpacingCarousel = () => {
   );
 };
 
-export default SpacingCarousel;`
+export default SpacingCarousel;`;
 
-export const verticalCarousel=`import { Card, CardContent } from "@/components/ui/card"
+export const verticalCarousel = `import { Card, CardContent } from "@/components/ui/card"
 import {
   Carousel,
   CarouselContent,
@@ -143,9 +143,9 @@ const VerticalCarousel = () => {
   );
 };
 
-export default VerticalCarousel;`
+export default VerticalCarousel;`;
 
-export const autoplayCarousel=`"use client"
+export const autoplayCarousel = `"use client"
 import { Card, CardContent } from "@/components/ui/card"
 import Autoplay from "embla-carousel-autoplay"
 
@@ -189,9 +189,9 @@ const AutoplayCarousel = () => {
   );
 };
 
-export default AutoplayCarousel;`
+export default AutoplayCarousel;`;
 
-export const customCarousel=`"use client"
+export const customCarousel = `"use client"
 import { Card, CardContent } from "@/components/ui/card"
 import {
   Carousel,
@@ -246,4 +246,4 @@ const CustomCarousel = () => {
 }
 
 export default CustomCarousel
-`
\ No newline at end of file
+`;
diff --git a/src/app/[locale]/(protected)/components/carousel/spacing-carousel.tsx b/src/app/[locale]/(protected)/components/carousel/spacing-carousel.tsx
index ad5f4b2b..91812140 100644
--- a/src/app/[locale]/(protected)/components/carousel/spacing-carousel.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/spacing-carousel.tsx
@@ -1,34 +1,34 @@
-"use client"
+"use client";
 
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/components/ui/carousel"
+} from "@/components/ui/carousel";
 
 const SpacingCarousel = () => {
   return (
-      <Carousel className="w-full max-w-sm mx-auto">
-        <CarouselContent className="-ml-1">
-          {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
-                <Card  className="dark:border-default-300">
-                  <CardContent className="flex aspect-square items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
+    <Carousel className="w-full max-w-sm mx-auto">
+      <CarouselContent className="-ml-1">
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="pl-1 md:basis-1/2 lg:basis-1/3">
+            <div className="p-1">
+              <Card className="dark:border-default-300">
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-2xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
   );
 };
 
-export default SpacingCarousel;
\ No newline at end of file
+export default SpacingCarousel;
diff --git a/src/app/[locale]/(protected)/components/carousel/vertical-carousel.tsx b/src/app/[locale]/(protected)/components/carousel/vertical-carousel.tsx
index 861108c5..007021f1 100644
--- a/src/app/[locale]/(protected)/components/carousel/vertical-carousel.tsx
+++ b/src/app/[locale]/(protected)/components/carousel/vertical-carousel.tsx
@@ -1,11 +1,11 @@
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from "@/components/ui/carousel"
+} from "@/components/ui/carousel";
 
 const VerticalCarousel = () => {
   return (
@@ -21,7 +21,7 @@ const VerticalCarousel = () => {
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem key={index} className="pt-1 md:basis-1/2">
               <div className="p-1">
-                <Card  className="dark:border-default-300">
+                <Card className="dark:border-default-300">
                   <CardContent className="flex items-center justify-center p-6">
                     <span className="text-3xl font-semibold">{index + 1}</span>
                   </CardContent>
@@ -37,4 +37,4 @@ const VerticalCarousel = () => {
   );
 };
 
-export default VerticalCarousel;
\ No newline at end of file
+export default VerticalCarousel;
diff --git a/src/app/[locale]/(protected)/components/collapsible/basic-collapsible.tsx b/src/app/[locale]/(protected)/components/collapsible/basic-collapsible.tsx
index 0d579336..143889f7 100644
--- a/src/app/[locale]/(protected)/components/collapsible/basic-collapsible.tsx
+++ b/src/app/[locale]/(protected)/components/collapsible/basic-collapsible.tsx
@@ -1,28 +1,18 @@
-"use client"
-import { ChevronsUpDown} from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
+"use client";
 
 import { useState } from "react";
+import { ChevronsUpDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 
 const BasicCollapsible = () => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <div className="flex justify-center">
-      <Collapsible
-        open={isOpen}
-        onOpenChange={setIsOpen}
-        className="w-[350px] space-y-2 "
-      >
+      <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2 ">
         <div className="flex items-center justify-between gap-4">
-          <h4 className="text-sm font-semibold">
-           Collapsible Trigger 
-          </h4>
+          <h4 className="text-sm font-semibold">Collapsible Trigger</h4>
           <CollapsibleTrigger asChild>
             <Button variant="outline" size="icon">
               <ChevronsUpDown className="h-4 w-4" />
@@ -46,4 +36,4 @@ const BasicCollapsible = () => {
   );
 };
 
-export default BasicCollapsible;
\ No newline at end of file
+export default BasicCollapsible;
diff --git a/src/app/[locale]/(protected)/components/collapsible/layout.tsx b/src/app/[locale]/(protected)/components/collapsible/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/collapsible/layout.tsx
+++ b/src/app/[locale]/(protected)/components/collapsible/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/collapsible/page.tsx b/src/app/[locale]/(protected)/components/collapsible/page.tsx
index 7c29cc9c..b40c866d 100644
--- a/src/app/[locale]/(protected)/components/collapsible/page.tsx
+++ b/src/app/[locale]/(protected)/components/collapsible/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicCollapsible from "./basic-collapsible";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import {basicCarousel} from "./source-code"
+
+import BasicCollapsible from "./basic-collapsible";
+import { basicCarousel } from "./source-code";
+
 const CollapsiblePage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const CollapsiblePage = () => {
   );
 };
 
-export default CollapsiblePage;
\ No newline at end of file
+export default CollapsiblePage;
diff --git a/src/app/[locale]/(protected)/components/collapsible/source-code.ts b/src/app/[locale]/(protected)/components/collapsible/source-code.ts
index abc9efcd..8b5761b6 100644
--- a/src/app/[locale]/(protected)/components/collapsible/source-code.ts
+++ b/src/app/[locale]/(protected)/components/collapsible/source-code.ts
@@ -1,4 +1,4 @@
-export const basicCarousel=`"use client"
+export const basicCarousel = `"use client"
 import { ChevronsUpDown} from "lucide-react"
 
 import { Button } from "@/components/ui/button"
@@ -46,4 +46,4 @@ const BasicCollapsible = () => {
   );
 };
 
-export default BasicCollapsible;`
\ No newline at end of file
+export default BasicCollapsible;`;
diff --git a/src/app/[locale]/(protected)/components/colors/layout.tsx b/src/app/[locale]/(protected)/components/colors/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/colors/layout.tsx
+++ b/src/app/[locale]/(protected)/components/colors/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/colors/page.tsx b/src/app/[locale]/(protected)/components/colors/page.tsx
index 9c6a100a..8b830690 100644
--- a/src/app/[locale]/(protected)/components/colors/page.tsx
+++ b/src/app/[locale]/(protected)/components/colors/page.tsx
@@ -1,7 +1,8 @@
-import { CopyButton } from "@/components/ui/structures/copy-button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import React from "react";
 
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CopyButton } from "@/components/ui/structures/copy-button";
+
 const slates = [
   {
     name: "default-50",
@@ -355,9 +356,7 @@ const Colors = () => {
       </CardHeader>
       <CardContent className="space-y-5">
         <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Bases
-          </div>
+          <div className="col-span-2 text-base font-medium text-default-900  mb-6">Bases</div>
           <div className="flex flex-wrap gap-4">
             <div className="group">
               <div className="color-box relative h-[96px] 2xl:w-[107px] w-[96px] bg-default-900 rounded-md flex flex-col text-primary-foreground p-4 transition-all  duration-200 group-hover:shadow-sm group-hover:-translate-y-1">
@@ -370,12 +369,8 @@ const Colors = () => {
                   />
                 </span>
               </div>
-              <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                Dark
-              </div>
-              <div className="flex-0 text-sm text-default-700 flex items-center">
-                #0F172A
-              </div>
+              <div className="flex-1 text-sm my-1 pt-1 text-default-700">Dark</div>
+              <div className="flex-0 text-sm text-default-700 flex items-center">#0F172A</div>
             </div>
             <div className="group">
               <div className="color-box relative h-[96px] 2xl:w-[107px] w-[96px] bg-primary-foreground border-default-500 border rounded-md flex flex-col text-default-900  p-4 transition-all duration-200 group-hover:shadow-sm group-hover:-translate-y-1">
@@ -388,20 +383,14 @@ const Colors = () => {
                   />
                 </span>
               </div>
-              <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                White
-              </div>
-              <div className="flex-0 text-sm text-default-700 flex items-center">
-                #FFFFFF
-              </div>
+              <div className="flex-1 text-sm my-1 pt-1 text-default-700">White</div>
+              <div className="flex-0 text-sm text-default-700 flex items-center">#FFFFFF</div>
             </div>
           </div>
         </div>
 
         <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Slate
-          </div>
+          <div className="col-span-2 text-base font-medium text-default-900  mb-6">Slate</div>
           <div className="flex flex-wrap gap-4">
             {slates?.map((item, i) => (
               <div key={i} className="group ">
@@ -419,9 +408,7 @@ const Colors = () => {
                     />
                   </span>
                 </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
+                <div className="flex-1 text-sm my-1 pt-1 text-default-700">{item.name}</div>
                 <div className="flex-0 text-sm text-default-700 flex items-center">
                   {item.color}
                 </div>
@@ -430,9 +417,7 @@ const Colors = () => {
           </div>
         </div>
         <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Primary
-          </div>
+          <div className="col-span-2 text-base font-medium text-default-900  mb-6">Primary</div>
           <div className="flex flex-wrap gap-4">
             {primary?.map((item, i) => (
               <div key={i} className="group">
@@ -450,9 +435,7 @@ const Colors = () => {
                     />
                   </span>
                 </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
+                <div className="flex-1 text-sm my-1 pt-1 text-default-700">{item.name}</div>
                 <div className="flex-0 text-sm text-default-700 flex items-center">
                   {item.color}
                 </div>
@@ -461,9 +444,7 @@ const Colors = () => {
           </div>
         </div>
         <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Danger
-          </div>
+          <div className="col-span-2 text-base font-medium text-default-900  mb-6">Danger</div>
           <div className="flex flex-wrap gap-4">
             {danger?.map((item, i) => (
               <div key={i} className="group ">
@@ -481,9 +462,7 @@ const Colors = () => {
                     />
                   </span>
                 </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
+                <div className="flex-1 text-sm my-1 pt-1 text-default-700">{item.name}</div>
                 <div className="flex-0 text-sm text-default-700 flex items-center">
                   {item.color}
                 </div>
@@ -492,9 +471,7 @@ const Colors = () => {
           </div>
         </div>
         <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Warning
-          </div>
+          <div className="col-span-2 text-base font-medium text-default-900  mb-6">Warning</div>
           <div className="flex flex-wrap gap-4">
             {warning?.map((item, i) => (
               <div key={i} className="group ">
@@ -511,9 +488,7 @@ const Colors = () => {
                     />
                   </span>
                 </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
+                <div className="flex-1 text-sm my-1 pt-1 text-default-700">{item.name}</div>
                 <div className="flex-0 text-sm text-default-700 flex items-center">
                   {item.color}
                 </div>
@@ -522,9 +497,7 @@ const Colors = () => {
           </div>
         </div>
         <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Info
-          </div>
+          <div className="col-span-2 text-base font-medium text-default-900  mb-6">Info</div>
           <div className="flex flex-wrap gap-4">
             {info?.map((item, i) => (
               <div key={i} className="group">
@@ -541,9 +514,7 @@ const Colors = () => {
                     />
                   </span>
                 </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
+                <div className="flex-1 text-sm my-1 pt-1 text-default-700">{item.name}</div>
                 <div className="flex-0 text-sm text-default-700 flex items-center">
                   {item.color}{" "}
                 </div>
@@ -552,9 +523,7 @@ const Colors = () => {
           </div>
         </div>
         <div>
-          <div className="col-span-2 text-base font-medium text-default-900  mb-6">
-            Success
-          </div>
+          <div className="col-span-2 text-base font-medium text-default-900  mb-6">Success</div>
           <div className="flex flex-wrap gap-4">
             {success?.map((item, i) => (
               <div key={i} className="group">
@@ -570,9 +539,7 @@ const Colors = () => {
                     />
                   </span>
                 </div>
-                <div className="flex-1 text-sm my-1 pt-1 text-default-700">
-                  {item.name}
-                </div>
+                <div className="flex-1 text-sm my-1 pt-1 text-default-700">{item.name}</div>
                 <div className="flex-0 text-sm text-default-700 flex items-center">
                   {item.color}{" "}
                 </div>
diff --git a/src/app/[locale]/(protected)/components/context-menu/basic-contextmenu.tsx b/src/app/[locale]/(protected)/components/context-menu/basic-contextmenu.tsx
index bb4d781b..a4e822b8 100644
--- a/src/app/[locale]/(protected)/components/context-menu/basic-contextmenu.tsx
+++ b/src/app/[locale]/(protected)/components/context-menu/basic-contextmenu.tsx
@@ -57,9 +57,7 @@ const BasicContextMenu = () => {
           <ContextMenuRadioGroup value="pedro">
             <ContextMenuLabel inset>People</ContextMenuLabel>
             <ContextMenuSeparator />
-            <ContextMenuRadioItem value="pedro">
-              Pedro Duarte
-            </ContextMenuRadioItem>
+            <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
             <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
           </ContextMenuRadioGroup>
         </ContextMenuContent>
diff --git a/src/app/[locale]/(protected)/components/context-menu/layout.tsx b/src/app/[locale]/(protected)/components/context-menu/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/context-menu/layout.tsx
+++ b/src/app/[locale]/(protected)/components/context-menu/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/context-menu/page.tsx b/src/app/[locale]/(protected)/components/context-menu/page.tsx
index 2c2791a6..df299ec5 100644
--- a/src/app/[locale]/(protected)/components/context-menu/page.tsx
+++ b/src/app/[locale]/(protected)/components/context-menu/page.tsx
@@ -1,7 +1,8 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicContextMenu from "./basic-contextmenu";
 import { basicContextMenu } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const ConextMenuPage = () => {
   return (
@@ -14,4 +15,4 @@ const ConextMenuPage = () => {
   );
 };
 
-export default ConextMenuPage;
\ No newline at end of file
+export default ConextMenuPage;
diff --git a/src/app/[locale]/(protected)/components/context-menu/source-code.ts b/src/app/[locale]/(protected)/components/context-menu/source-code.ts
index 2b3ce23a..0021319a 100644
--- a/src/app/[locale]/(protected)/components/context-menu/source-code.ts
+++ b/src/app/[locale]/(protected)/components/context-menu/source-code.ts
@@ -1,4 +1,4 @@
-export const basicContextMenu=`import {
+export const basicContextMenu = `import {
   ContextMenu,
   ContextMenuCheckboxItem,
   ContextMenuContent,
@@ -68,4 +68,4 @@ const BasicContextMenu = () => {
   );
 };
 export default BasicContextMenu;
-`
\ No newline at end of file
+`;
diff --git a/src/app/[locale]/(protected)/components/dialog/basic-dialog.tsx b/src/app/[locale]/(protected)/components/dialog/basic-dialog.tsx
index 703534f4..db74ee5d 100644
--- a/src/app/[locale]/(protected)/components/dialog/basic-dialog.tsx
+++ b/src/app/[locale]/(protected)/components/dialog/basic-dialog.tsx
@@ -9,6 +9,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+
 const BasicDialog = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -22,13 +23,20 @@ const BasicDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button>Save</Button>
@@ -38,7 +46,9 @@ const BasicDialog = () => {
       </Dialog>
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline" color="primary">Primary</Button>
+          <Button variant="outline" color="primary">
+            Primary
+          </Button>
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
@@ -46,13 +56,20 @@ const BasicDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button color="primary">Save</Button>
@@ -62,7 +79,9 @@ const BasicDialog = () => {
       </Dialog>
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline" color="secondary">Secondary</Button>
+          <Button variant="outline" color="secondary">
+            Secondary
+          </Button>
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
@@ -70,13 +89,20 @@ const BasicDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button color="secondary">Save</Button>
@@ -86,7 +112,9 @@ const BasicDialog = () => {
       </Dialog>
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline" color="success">Success</Button>
+          <Button variant="outline" color="success">
+            Success
+          </Button>
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
@@ -94,13 +122,20 @@ const BasicDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button color="success">Save</Button>
@@ -110,7 +145,9 @@ const BasicDialog = () => {
       </Dialog>
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline" color="info">Info</Button>
+          <Button variant="outline" color="info">
+            Info
+          </Button>
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
@@ -118,13 +155,20 @@ const BasicDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button color="info">Save</Button>
@@ -134,7 +178,9 @@ const BasicDialog = () => {
       </Dialog>
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline" color="warning">Warning</Button>
+          <Button variant="outline" color="warning">
+            Warning
+          </Button>
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
@@ -142,13 +188,20 @@ const BasicDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button color="warning">Save</Button>
@@ -158,7 +211,9 @@ const BasicDialog = () => {
       </Dialog>
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline" color="destructive">Destructive</Button>
+          <Button variant="outline" color="destructive">
+            Destructive
+          </Button>
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
@@ -166,13 +221,20 @@ const BasicDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button color="destructive">Save</Button>
@@ -180,9 +242,8 @@ const BasicDialog = () => {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-  
     </div>
   );
 };
 
-export default BasicDialog;
\ No newline at end of file
+export default BasicDialog;
diff --git a/src/app/[locale]/(protected)/components/dialog/layout.tsx b/src/app/[locale]/(protected)/components/dialog/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/dialog/layout.tsx
+++ b/src/app/[locale]/(protected)/components/dialog/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/dialog/page.tsx b/src/app/[locale]/(protected)/components/dialog/page.tsx
index d6c2e38f..37cdb6c3 100644
--- a/src/app/[locale]/(protected)/components/dialog/page.tsx
+++ b/src/app/[locale]/(protected)/components/dialog/page.tsx
@@ -1,8 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicDialog from "./basic-dialog";
 import SizesDialog from "./size-dialog";
-import {  basicDialog, sizesDialog } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { basicDialog, sizesDialog } from "./source-code";
 
 const DialogPage = () => {
   return (
@@ -20,4 +21,4 @@ const DialogPage = () => {
   );
 };
 
-export default DialogPage;
\ No newline at end of file
+export default DialogPage;
diff --git a/src/app/[locale]/(protected)/components/dialog/size-dialog.tsx b/src/app/[locale]/(protected)/components/dialog/size-dialog.tsx
index 64f2ca25..60a227d6 100644
--- a/src/app/[locale]/(protected)/components/dialog/size-dialog.tsx
+++ b/src/app/[locale]/(protected)/components/dialog/size-dialog.tsx
@@ -15,9 +15,7 @@ const SizesDialog = () => {
     <div className="flex flex-wrap gap-3">
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline" >
-            Default Dialog
-          </Button>
+          <Button variant="outline">Default Dialog</Button>
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
@@ -25,13 +23,20 @@ const SizesDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button>Save</Button>
@@ -41,25 +46,28 @@ const SizesDialog = () => {
       </Dialog>
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline">
-            Large Dialog
-          </Button>
+          <Button variant="outline">Large Dialog</Button>
         </DialogTrigger>
-        <DialogContent
-          size="lg"
-        >
+        <DialogContent size="lg">
           <DialogHeader>
             <DialogTitle>Large Dialog</DialogTitle>
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter className="gap-4">
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button>Save</Button>
@@ -70,9 +78,7 @@ const SizesDialog = () => {
 
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline">
-            Medium Dialog
-          </Button>
+          <Button variant="outline">Medium Dialog</Button>
         </DialogTrigger>
         <DialogContent size="md">
           <DialogHeader>
@@ -80,13 +86,20 @@ const SizesDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button>Save</Button>
@@ -97,9 +110,7 @@ const SizesDialog = () => {
 
       <Dialog>
         <DialogTrigger asChild>
-          <Button variant="outline">
-            Small Dialog
-          </Button>
+          <Button variant="outline">Small Dialog</Button>
         </DialogTrigger>
         <DialogContent size="sm">
           <DialogHeader>
@@ -107,13 +118,20 @@ const SizesDialog = () => {
           </DialogHeader>
           <DialogDescription className="pb-8">
             <h3 className="text-base font-medium text-default-950 my-2 mt-3">Buy me a coffe.</h3>
-            <p className="text-base text-default-500 mt-2">We  enables fans to financially support their favorite creators through donations.</p>
-            <p className="text-base  text-default-500 mt-2">The platform allows supporters to make one-time or recurring contributions to their favorite creators,
-              enhancing the financial stability and creative freedom of artists, writers, developers, and more.</p>
+            <p className="text-base text-default-500 mt-2">
+              We enables fans to financially support their favorite creators through donations.
+            </p>
+            <p className="text-base  text-default-500 mt-2">
+              The platform allows supporters to make one-time or recurring contributions to their
+              favorite creators, enhancing the financial stability and creative freedom of artists,
+              writers, developers, and more.
+            </p>
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>
-              <Button variant="outline" color="warning">Close</Button>
+              <Button variant="outline" color="warning">
+                Close
+              </Button>
             </DialogClose>
             <DialogClose asChild>
               <Button>Save</Button>
@@ -121,9 +139,8 @@ const SizesDialog = () => {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
     </div>
   );
 };
 
-export default SizesDialog;
\ No newline at end of file
+export default SizesDialog;
diff --git a/src/app/[locale]/(protected)/components/dialog/source-code.ts b/src/app/[locale]/(protected)/components/dialog/source-code.ts
index 30ccf0c9..7ec8ae0d 100644
--- a/src/app/[locale]/(protected)/components/dialog/source-code.ts
+++ b/src/app/[locale]/(protected)/components/dialog/source-code.ts
@@ -1,4 +1,4 @@
-export const basicDialog=`import { Button } from "@/components/ui/button";
+export const basicDialog = `import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogClose,
@@ -184,9 +184,9 @@ const BasicDialog = () => {
   );
 };
 
-export default BasicDialog;`
+export default BasicDialog;`;
 
-export const sizesDialog=`import { Button } from "@/components/ui/button";
+export const sizesDialog = `import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogClose,
@@ -323,5 +323,4 @@ const SizesDialog = () => {
   );
 };
 
-export default SizesDialog;`
-
+export default SizesDialog;`;
diff --git a/src/app/[locale]/(protected)/components/drawer/basic-drawer.tsx b/src/app/[locale]/(protected)/components/drawer/basic-drawer.tsx
index cbaf844e..5133925f 100644
--- a/src/app/[locale]/(protected)/components/drawer/basic-drawer.tsx
+++ b/src/app/[locale]/(protected)/components/drawer/basic-drawer.tsx
@@ -8,28 +8,28 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from "@/components/ui/drawer"
+} from "@/components/ui/drawer";
 
 const BasicDrawer = () => {
   return (
-  <Drawer>
-    <DrawerTrigger asChild >
-      <Button>Open drawer</Button>
-    </DrawerTrigger>
-    <DrawerContent>
-      <DrawerHeader>
-        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
-        <DrawerDescription>This action cannot be undone.</DrawerDescription>
-      </DrawerHeader>
-      <DrawerFooter className="flex-row justify-end">
-        <Button>Submit</Button>
-        <DrawerClose>
-          <Button variant="outline"> Cancel </Button>
-        </DrawerClose>
-      </DrawerFooter>
-    </DrawerContent>
-  </Drawer>
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button>Open drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+          <DrawerDescription>This action cannot be undone.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerFooter className="flex-row justify-end">
+          <Button>Submit</Button>
+          <DrawerClose>
+            <Button variant="outline"> Cancel </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   );
 };
 
-export default BasicDrawer;
\ No newline at end of file
+export default BasicDrawer;
diff --git a/src/app/[locale]/(protected)/components/drawer/layout.tsx b/src/app/[locale]/(protected)/components/drawer/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/drawer/layout.tsx
+++ b/src/app/[locale]/(protected)/components/drawer/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/drawer/page.tsx b/src/app/[locale]/(protected)/components/drawer/page.tsx
index c2de3469..cfe42de8 100644
--- a/src/app/[locale]/(protected)/components/drawer/page.tsx
+++ b/src/app/[locale]/(protected)/components/drawer/page.tsx
@@ -1,7 +1,8 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicDrawer from "./basic-drawer";
 import { basicDrawer } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const Drawer = () => {
   return (
@@ -16,4 +17,4 @@ const Drawer = () => {
   );
 };
 
-export default Drawer;
\ No newline at end of file
+export default Drawer;
diff --git a/src/app/[locale]/(protected)/components/drawer/source-code.ts b/src/app/[locale]/(protected)/components/drawer/source-code.ts
index 04ab7935..0b8b15b9 100644
--- a/src/app/[locale]/(protected)/components/drawer/source-code.ts
+++ b/src/app/[locale]/(protected)/components/drawer/source-code.ts
@@ -1,4 +1,4 @@
-export const basicDrawer=`import { Button } from "@/components/ui/button";
+export const basicDrawer = `import { Button } from "@/components/ui/button";
 import {
   Drawer,
   DrawerClose,
@@ -32,4 +32,4 @@ const BasicDrawer = () => {
   );
 };
 
-export default BasicDrawer;`
\ No newline at end of file
+export default BasicDrawer;`;
diff --git a/src/app/[locale]/(protected)/components/dropdown/basic-dropdown.tsx b/src/app/[locale]/(protected)/components/dropdown/basic-dropdown.tsx
index c86f0a04..fee9927c 100644
--- a/src/app/[locale]/(protected)/components/dropdown/basic-dropdown.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/basic-dropdown.tsx
@@ -1,12 +1,11 @@
-
-import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 
 const BasicDropdown = () => {
   return (
@@ -106,4 +105,4 @@ const BasicDropdown = () => {
   );
 };
 
-export default BasicDropdown;
\ No newline at end of file
+export default BasicDropdown;
diff --git a/src/app/[locale]/(protected)/components/dropdown/dropdown-directions.tsx b/src/app/[locale]/(protected)/components/dropdown/dropdown-directions.tsx
index 3f87e67f..aec3c8e1 100644
--- a/src/app/[locale]/(protected)/components/dropdown/dropdown-directions.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/dropdown-directions.tsx
@@ -1,5 +1,3 @@
-
-import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -8,7 +6,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 
 const DropdownDirections = () => {
   return (
@@ -114,4 +113,4 @@ const DropdownDirections = () => {
   );
 };
 
-export default DropdownDirections;
\ No newline at end of file
+export default DropdownDirections;
diff --git a/src/app/[locale]/(protected)/components/dropdown/dropdown-sizes.tsx b/src/app/[locale]/(protected)/components/dropdown/dropdown-sizes.tsx
index ddc3c981..8d005cdc 100644
--- a/src/app/[locale]/(protected)/components/dropdown/dropdown-sizes.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/dropdown-sizes.tsx
@@ -1,11 +1,11 @@
-import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 
 const DropdownSizes = () => {
   return (
@@ -53,4 +53,4 @@ const DropdownSizes = () => {
   );
 };
 
-export default DropdownSizes;
\ No newline at end of file
+export default DropdownSizes;
diff --git a/src/app/[locale]/(protected)/components/dropdown/flat-dropdown.tsx b/src/app/[locale]/(protected)/components/dropdown/flat-dropdown.tsx
index a03d51bc..0478d30e 100644
--- a/src/app/[locale]/(protected)/components/dropdown/flat-dropdown.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/flat-dropdown.tsx
@@ -1,12 +1,11 @@
-
-import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 
 const FlatDropdown = () => {
   return (
@@ -39,7 +38,7 @@ const FlatDropdown = () => {
       </DropdownMenu>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button color="secondary" variant="ghost" >
+          <Button color="secondary" variant="ghost">
             Secondary
             <Icon icon="heroicons:chevron-right" className="h-5 w-5 ms-2 rtl:rotate-180" />
           </Button>
@@ -52,7 +51,7 @@ const FlatDropdown = () => {
       </DropdownMenu>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button color="success" variant="ghost" >
+          <Button color="success" variant="ghost">
             Success
             <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ms-2 rtl:rotate-180" />
           </Button>
@@ -106,4 +105,4 @@ const FlatDropdown = () => {
   );
 };
 
-export default FlatDropdown;
\ No newline at end of file
+export default FlatDropdown;
diff --git a/src/app/[locale]/(protected)/components/dropdown/layout.tsx b/src/app/[locale]/(protected)/components/dropdown/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/dropdown/layout.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/dropdown/outline-dropdown.tsx b/src/app/[locale]/(protected)/components/dropdown/outline-dropdown.tsx
index ad7e3175..e59ab9e0 100644
--- a/src/app/[locale]/(protected)/components/dropdown/outline-dropdown.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/outline-dropdown.tsx
@@ -1,12 +1,11 @@
-
-import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 
 const OutlineDropdown = () => {
   return (
@@ -106,4 +105,4 @@ const OutlineDropdown = () => {
   );
 };
 
-export default OutlineDropdown;
\ No newline at end of file
+export default OutlineDropdown;
diff --git a/src/app/[locale]/(protected)/components/dropdown/page.tsx b/src/app/[locale]/(protected)/components/dropdown/page.tsx
index 70e98179..bfd05d0a 100644
--- a/src/app/[locale]/(protected)/components/dropdown/page.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/page.tsx
@@ -1,13 +1,22 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicDropdown from "./basic-dropdown";
-import OutlineDropdown from "./outline-dropdown";
-import FlatDropdown from "./flat-dropdown";
+import DropdownDirections from "./dropdown-directions";
 import DropdownSizes from "./dropdown-sizes";
+import FlatDropdown from "./flat-dropdown";
+import OutlineDropdown from "./outline-dropdown";
+import {
+  basicDropdown,
+  dropdownDirections,
+  dropdownSizes,
+  flatDropdown,
+  outlineDropdown,
+  splitDropdown,
+  splitOutlineDropdown,
+} from "./source-code";
 import SplitDropdown from "./split-dropdown";
 import SplitOutline from "./split-outline";
-import DropdownDirections from "./dropdown-directions";
-import { basicDropdown, dropdownDirections, dropdownSizes, flatDropdown, outlineDropdown, splitDropdown, splitOutlineDropdown } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const DropdownPage = () => {
   return (
@@ -40,4 +49,4 @@ const DropdownPage = () => {
   );
 };
 
-export default DropdownPage;
\ No newline at end of file
+export default DropdownPage;
diff --git a/src/app/[locale]/(protected)/components/dropdown/source-code.ts b/src/app/[locale]/(protected)/components/dropdown/source-code.ts
index 4b2877e8..41fc06e1 100644
--- a/src/app/[locale]/(protected)/components/dropdown/source-code.ts
+++ b/src/app/[locale]/(protected)/components/dropdown/source-code.ts
@@ -1,4 +1,4 @@
-export const basicDropdown=`
+export const basicDropdown = `
 import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
@@ -106,9 +106,9 @@ const BasicDropdown = () => {
   );
 };
 
-export default BasicDropdown;`
+export default BasicDropdown;`;
 
-export const outlineDropdown=`
+export const outlineDropdown = `
 import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
@@ -216,9 +216,9 @@ const OutlineDropdown = () => {
   );
 };
 
-export default OutlineDropdown;`
+export default OutlineDropdown;`;
 
-export const flatDropdown=`
+export const flatDropdown = `
 import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
@@ -326,9 +326,9 @@ const FlatDropdown = () => {
   );
 };
 
-export default FlatDropdown;`
+export default FlatDropdown;`;
 
-export const dropdownSizes=`import { Icon } from "@/components/ui/icon";
+export const dropdownSizes = `import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -383,9 +383,9 @@ const DropdownSizes = () => {
   );
 };
 
-export default DropdownSizes;`
+export default DropdownSizes;`;
 
-export const dropdownDirections=`
+export const dropdownDirections = `
 import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
@@ -501,9 +501,9 @@ const DropdownDirections = () => {
   );
 };
 
-export default DropdownDirections;`
+export default DropdownDirections;`;
 
-export const splitDropdown=`
+export const splitDropdown = `
 import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
@@ -646,9 +646,9 @@ const SplitDropdown = () => {
   );
 };
 
-export default SplitDropdown;`
+export default SplitDropdown;`;
 
-export const splitOutlineDropdown=`
+export const splitOutlineDropdown = `
 import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
@@ -818,4 +818,4 @@ const SplitOutline = () => {
   );
 };
 
-export default SplitOutline;`
\ No newline at end of file
+export default SplitOutline;`;
diff --git a/src/app/[locale]/(protected)/components/dropdown/split-dropdown.tsx b/src/app/[locale]/(protected)/components/dropdown/split-dropdown.tsx
index 2a188d3c..cece67a0 100644
--- a/src/app/[locale]/(protected)/components/dropdown/split-dropdown.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/split-dropdown.tsx
@@ -1,18 +1,20 @@
-
-import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 
 const SplitDropdown = () => {
   return (
     <div className="flex flex-wrap gap-3">
       <div className="flex">
-        <Button className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"> Default </Button>
+        <Button className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent">
+          {" "}
+          Default{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-primary-foreground/30  hover:ring-offset-0">
@@ -27,10 +29,19 @@ const SplitDropdown = () => {
         </DropdownMenu>
       </div>
       <div className="flex">
-        <Button color="primary" className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"> Primary </Button>
+        <Button
+          color="primary"
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"
+        >
+          {" "}
+          Primary{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button color="primary" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-primary-foreground/30  hover:ring-offset-0">
+            <Button
+              color="primary"
+              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-primary-foreground/30  hover:ring-offset-0"
+            >
               <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -44,13 +55,16 @@ const SplitDropdown = () => {
       <div className="flex">
         <Button
           color="secondary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"
+        >
           Secondary
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button color="secondary" 
-            className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-secondary-foreground/30  hover:ring-offset-0">
+            <Button
+              color="secondary"
+              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-secondary-foreground/30  hover:ring-offset-0"
+            >
               <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -64,12 +78,16 @@ const SplitDropdown = () => {
       <div className="flex">
         <Button
           color="success"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"
+        >
           Success
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button color="success" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-success-foreground/30  hover:ring-offset-0">
+            <Button
+              color="success"
+              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-success-foreground/30  hover:ring-offset-0"
+            >
               <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -83,12 +101,16 @@ const SplitDropdown = () => {
       <div className="flex">
         <Button
           color="info"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"
+        >
           Info
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button color="info" className="ltr:rounded-l-none rtl:rounded-r-none  hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-info-foreground/30  hover:ring-offset-0">
+            <Button
+              color="info"
+              className="ltr:rounded-l-none rtl:rounded-r-none  hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-info-foreground/30  hover:ring-offset-0"
+            >
               <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -102,12 +124,16 @@ const SplitDropdown = () => {
       <div className="flex">
         <Button
           color="warning"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"
+        >
           Warning
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button color="warning" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-warning-foreground/30  hover:ring-offset-0">
+            <Button
+              color="warning"
+              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-warning-foreground/30  hover:ring-offset-0"
+            >
               <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -121,12 +147,16 @@ const SplitDropdown = () => {
       <div className="flex">
         <Button
           color="destructive"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent" >
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent"
+        >
           Destructive
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button color="destructive" className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-destructive-foreground/30  hover:ring-offset-0">
+            <Button
+              color="destructive"
+              className="ltr:rounded-l-none rtl:rounded-r-none hover:ring-transparent md:px-3 ltr:border-l rtl:border-r border-destructive-foreground/30  hover:ring-offset-0"
+            >
               <Icon icon="heroicons:chevron-down" className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -141,4 +171,4 @@ const SplitDropdown = () => {
   );
 };
 
-export default SplitDropdown;
\ No newline at end of file
+export default SplitDropdown;
diff --git a/src/app/[locale]/(protected)/components/dropdown/split-outline.tsx b/src/app/[locale]/(protected)/components/dropdown/split-outline.tsx
index 567084c7..9b993111 100644
--- a/src/app/[locale]/(protected)/components/dropdown/split-outline.tsx
+++ b/src/app/[locale]/(protected)/components/dropdown/split-outline.tsx
@@ -1,12 +1,11 @@
-
-import { Icon } from "@/components/ui/icon";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
 
 const SplitOutline = () => {
   return (
@@ -14,7 +13,11 @@ const SplitOutline = () => {
       <div className="flex">
         <Button
           variant="outline"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Default </Button>
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"
+        >
+          {" "}
+          Default{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -35,7 +38,11 @@ const SplitOutline = () => {
         <Button
           variant="outline"
           color="primary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Primary </Button>
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"
+        >
+          {" "}
+          Primary{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -58,7 +65,11 @@ const SplitOutline = () => {
         <Button
           variant="outline"
           color="secondary"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Secondary </Button>
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"
+        >
+          {" "}
+          Secondary{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -80,7 +91,11 @@ const SplitOutline = () => {
         <Button
           variant="outline"
           color="success"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Success </Button>
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"
+        >
+          {" "}
+          Success{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -102,7 +117,11 @@ const SplitOutline = () => {
         <Button
           variant="outline"
           color="info"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Info </Button>
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"
+        >
+          {" "}
+          Info{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -124,7 +143,11 @@ const SplitOutline = () => {
         <Button
           variant="outline"
           color="warning"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Warning </Button>
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"
+        >
+          {" "}
+          Warning{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -146,7 +169,11 @@ const SplitOutline = () => {
         <Button
           variant="outline"
           color="destructive"
-          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"> Destructive </Button>
+          className="ltr:rounded-r-none rtl:rounded-l-none hover:ring-transparent ltr:border-r-0 rtl:border-l-0"
+        >
+          {" "}
+          Destructive{" "}
+        </Button>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
@@ -168,4 +195,4 @@ const SplitOutline = () => {
   );
 };
 
-export default SplitOutline;
\ No newline at end of file
+export default SplitOutline;
diff --git a/src/app/[locale]/(protected)/components/hover-card/basic-card.tsx b/src/app/[locale]/(protected)/components/hover-card/basic-card.tsx
index d898cd2b..adac56fd 100644
--- a/src/app/[locale]/(protected)/components/hover-card/basic-card.tsx
+++ b/src/app/[locale]/(protected)/components/hover-card/basic-card.tsx
@@ -1,16 +1,8 @@
-import { CalendarDays } from "lucide-react"
+import { CalendarDays } from "lucide-react";
 
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "@/components/ui/hover-card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 
 const BasicCard = () => {
   return (
@@ -27,14 +19,10 @@ const BasicCard = () => {
             </Avatar>
             <div className="space-y-1">
               <h4 className="text-sm font-semibold">DashCode</h4>
-              <p className="text-sm">
-                Admin UI Kit - DashCode; Next.js, React, and Tailwind CSS
-              </p>
+              <p className="text-sm">Admin UI Kit - DashCode; Next.js, React, and Tailwind CSS</p>
               <div className="flex items-center pt-2">
                 <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
-                <span className="text-xs text-muted-foreground">
-                  Joined December 2021
-                </span>
+                <span className="text-xs text-muted-foreground">Joined December 2021</span>
               </div>
             </div>
           </div>
@@ -44,4 +32,4 @@ const BasicCard = () => {
   );
 };
 
-export default BasicCard;
\ No newline at end of file
+export default BasicCard;
diff --git a/src/app/[locale]/(protected)/components/hover-card/layout.tsx b/src/app/[locale]/(protected)/components/hover-card/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/hover-card/layout.tsx
+++ b/src/app/[locale]/(protected)/components/hover-card/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/hover-card/page.tsx b/src/app/[locale]/(protected)/components/hover-card/page.tsx
index 66ea2ff3..3f2f58ee 100644
--- a/src/app/[locale]/(protected)/components/hover-card/page.tsx
+++ b/src/app/[locale]/(protected)/components/hover-card/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicCard from "./basic-card";
 import { hoverCard } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const HoverCardPage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const HoverCardPage = () => {
   );
 };
 
-export default HoverCardPage;
\ No newline at end of file
+export default HoverCardPage;
diff --git a/src/app/[locale]/(protected)/components/hover-card/source-code.ts b/src/app/[locale]/(protected)/components/hover-card/source-code.ts
index 27f2bc3f..a916ac1b 100644
--- a/src/app/[locale]/(protected)/components/hover-card/source-code.ts
+++ b/src/app/[locale]/(protected)/components/hover-card/source-code.ts
@@ -1,4 +1,4 @@
-export const hoverCard=`import { CalendarDays } from "lucide-react"
+export const hoverCard = `import { CalendarDays } from "lucide-react"
 
 import {
   Avatar,
@@ -44,4 +44,4 @@ const BasicCard = () => {
   );
 };
 
-export default BasicCard;`
\ No newline at end of file
+export default BasicCard;`;
diff --git a/src/app/[locale]/(protected)/components/layout.tsx b/src/app/[locale]/(protected)/components/layout.tsx
index b3db54a9..6b3d348c 100644
--- a/src/app/[locale]/(protected)/components/layout.tsx
+++ b/src/app/[locale]/(protected)/components/layout.tsx
@@ -1,12 +1,8 @@
-import Link from 'next/link';
-import React from 'react';
+import React from "react";
+import Link from "next/link";
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div dir='ltr'>
-      {children}
-    </div>
-  );
+  return <div dir="ltr">{children}</div>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/components/menu-bar/basic-menu.tsx b/src/app/[locale]/(protected)/components/menu-bar/basic-menu.tsx
index d53cef96..7fe7d8d0 100644
--- a/src/app/[locale]/(protected)/components/menu-bar/basic-menu.tsx
+++ b/src/app/[locale]/(protected)/components/menu-bar/basic-menu.tsx
@@ -12,7 +12,8 @@ import {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
-} from "@/components/ui/menubar"
+} from "@/components/ui/menubar";
+
 const BasicMenu = () => {
   return (
     <div className="flex justify-center">
@@ -72,9 +73,7 @@ const BasicMenu = () => {
           <MenubarTrigger>View</MenubarTrigger>
           <MenubarContent>
             <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-            <MenubarCheckboxItem checked>
-              Always Show Full URLs
-            </MenubarCheckboxItem>
+            <MenubarCheckboxItem checked>Always Show Full URLs</MenubarCheckboxItem>
             <MenubarSeparator />
             <MenubarItem inset>
               Reload <MenubarShortcut>⌘R</MenubarShortcut>
@@ -107,4 +106,4 @@ const BasicMenu = () => {
   );
 };
 
-export default BasicMenu;
\ No newline at end of file
+export default BasicMenu;
diff --git a/src/app/[locale]/(protected)/components/menu-bar/layout.tsx b/src/app/[locale]/(protected)/components/menu-bar/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/menu-bar/layout.tsx
+++ b/src/app/[locale]/(protected)/components/menu-bar/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/menu-bar/page.tsx b/src/app/[locale]/(protected)/components/menu-bar/page.tsx
index 23ed04ce..549b6523 100644
--- a/src/app/[locale]/(protected)/components/menu-bar/page.tsx
+++ b/src/app/[locale]/(protected)/components/menu-bar/page.tsx
@@ -1,7 +1,8 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicMenu from "./basic-menu";
 import { basicMenu } from "./souce-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const MenuBarPage = () => {
   return (
@@ -14,4 +15,4 @@ const MenuBarPage = () => {
   );
 };
 
-export default MenuBarPage;
\ No newline at end of file
+export default MenuBarPage;
diff --git a/src/app/[locale]/(protected)/components/menu-bar/souce-code.ts b/src/app/[locale]/(protected)/components/menu-bar/souce-code.ts
index a279a176..aa293d88 100644
--- a/src/app/[locale]/(protected)/components/menu-bar/souce-code.ts
+++ b/src/app/[locale]/(protected)/components/menu-bar/souce-code.ts
@@ -1,4 +1,4 @@
-export const basicMenu=`import {
+export const basicMenu = `import {
   Menubar,
   MenubarCheckboxItem,
   MenubarContent,
@@ -107,4 +107,4 @@ const BasicMenu = () => {
   );
 };
 
-export default BasicMenu;`
\ No newline at end of file
+export default BasicMenu;`;
diff --git a/src/app/[locale]/(protected)/components/navigation-menu/basic-nav.tsx b/src/app/[locale]/(protected)/components/navigation-menu/basic-nav.tsx
index 3338b220..d87d98fd 100644
--- a/src/app/[locale]/(protected)/components/navigation-menu/basic-nav.tsx
+++ b/src/app/[locale]/(protected)/components/navigation-menu/basic-nav.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import Link from "next/link"
-import { cn } from "@/lib/utils/utils"
+import * as React from "react";
+import Link from "next/link";
 
+import { cn } from "@/lib/utils/utils";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -12,7 +12,7 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
+} from "@/components/ui/navigation-menu";
 
 const components: { title: string; href: string; description: string }[] = [
   {
@@ -24,8 +24,7 @@ const components: { title: string; href: string; description: string }[] = [
   {
     title: "Hover Card",
     href: "#",
-    description:
-      "For sighted users to preview content available behind a link.",
+    description: "For sighted users to preview content available behind a link.",
   },
   {
     title: "Progress",
@@ -50,7 +49,7 @@ const components: { title: string; href: string; description: string }[] = [
     description:
       "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
   },
-]
+];
 
 const BasicNav = () => {
   return (
@@ -68,13 +67,10 @@ const BasicNav = () => {
                       href="#"
                     >
                       Admin UI
-                      <div className="mb-2 mt-2 text-sm font-medium">
-                        DashCode Admin Template
-                      </div>
+                      <div className="mb-2 mt-2 text-sm font-medium">DashCode Admin Template</div>
                       <p className="text-sm leading-tight text-muted-foreground">
-                        Beautifully designed components that you can copy and
-                        paste into your apps. Accessible. Customizable. Open
-                        Source.
+                        Beautifully designed components that you can copy and paste into your apps.
+                        Accessible. Customizable. Open Source.
                       </p>
                     </Link>
                   </NavigationMenuLink>
@@ -96,11 +92,7 @@ const BasicNav = () => {
             <NavigationMenuContent>
               <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
                 {components.map((component) => (
-                  <ListItem
-                    key={component.title}
-                    title={component.title}
-                    href={component.href}
-                  >
+                  <ListItem key={component.title} title={component.title} href={component.href}>
                     {component.description}
                   </ListItem>
                 ))}
@@ -124,33 +116,30 @@ const BasicNav = () => {
         </NavigationMenuList>
       </NavigationMenu>
     </div>
-  )
-}
+  );
+};
 
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <a
-          ref={ref}
-          className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className
-          )}
-          {...props}
-        >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  )
-})
-ListItem.displayName = "ListItem"
+const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
+  ({ className, title, children, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              className
+            )}
+            {...props}
+          >
+            <div className="text-sm font-medium leading-none">{title}</div>
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    );
+  }
+);
+ListItem.displayName = "ListItem";
 
-export default BasicNav;
\ No newline at end of file
+export default BasicNav;
diff --git a/src/app/[locale]/(protected)/components/navigation-menu/layout.tsx b/src/app/[locale]/(protected)/components/navigation-menu/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/navigation-menu/layout.tsx
+++ b/src/app/[locale]/(protected)/components/navigation-menu/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/navigation-menu/page.tsx b/src/app/[locale]/(protected)/components/navigation-menu/page.tsx
index 42a87390..2364ca8d 100644
--- a/src/app/[locale]/(protected)/components/navigation-menu/page.tsx
+++ b/src/app/[locale]/(protected)/components/navigation-menu/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicNav from "./basic-nav";
 import { basicNav } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const NavPage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const NavPage = () => {
   );
 };
 
-export default NavPage;
\ No newline at end of file
+export default NavPage;
diff --git a/src/app/[locale]/(protected)/components/navigation-menu/source-code.ts b/src/app/[locale]/(protected)/components/navigation-menu/source-code.ts
index 7f7b8f4e..ffe9f81d 100644
--- a/src/app/[locale]/(protected)/components/navigation-menu/source-code.ts
+++ b/src/app/[locale]/(protected)/components/navigation-menu/source-code.ts
@@ -1,4 +1,4 @@
-export const basicNav=`"use client"
+export const basicNav = `"use client"
 
 import * as React from "react"
 import Link from "next/link"
@@ -153,4 +153,4 @@ const ListItem = React.forwardRef<
 })
 ListItem.displayName = "ListItem"
 
-export default BasicNav;`
\ No newline at end of file
+export default BasicNav;`;
diff --git a/src/app/[locale]/(protected)/components/pagination/basic-pagination.tsx b/src/app/[locale]/(protected)/components/pagination/basic-pagination.tsx
index 8efbbcd8..61f562d5 100644
--- a/src/app/[locale]/(protected)/components/pagination/basic-pagination.tsx
+++ b/src/app/[locale]/(protected)/components/pagination/basic-pagination.tsx
@@ -5,7 +5,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/pagination"
+} from "@/components/ui/pagination";
 
 const BasicPagination = () => {
   return (
@@ -36,7 +36,7 @@ const BasicPagination = () => {
         </PaginationItem>
       </PaginationContent>
     </Pagination>
-  )
-}
+  );
+};
 
-export default BasicPagination;
\ No newline at end of file
+export default BasicPagination;
diff --git a/src/app/[locale]/(protected)/components/pagination/layout.tsx b/src/app/[locale]/(protected)/components/pagination/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/pagination/layout.tsx
+++ b/src/app/[locale]/(protected)/components/pagination/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/pagination/page.tsx b/src/app/[locale]/(protected)/components/pagination/page.tsx
index ec328049..b32462a2 100644
--- a/src/app/[locale]/(protected)/components/pagination/page.tsx
+++ b/src/app/[locale]/(protected)/components/pagination/page.tsx
@@ -1,11 +1,17 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicPagination from "./basic-pagination";
-import PaginationWithElipsis from "./pagination-withelipsis";
-import PaginationWithBg from "./pagination-withbg";
-import PaginationWithText from "./pagination-withtext";
-import { basicPagination, paginationWithBackground, paginationWithElipsis, paginationWithText } from "./source-code";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
+import BasicPagination from "./basic-pagination";
+import PaginationWithBg from "./pagination-withbg";
+import PaginationWithElipsis from "./pagination-withelipsis";
+import PaginationWithText from "./pagination-withtext";
+import {
+  basicPagination,
+  paginationWithBackground,
+  paginationWithElipsis,
+  paginationWithText,
+} from "./source-code";
+
 const PaginationPage = () => {
   return (
     <div>
@@ -20,10 +26,7 @@ const PaginationPage = () => {
         <Card title="Pagination With Text" code={paginationWithText}>
           <PaginationWithText />
         </Card>
-        <Card
-          title="Pagination With Elipsis"
-          code={paginationWithElipsis}
-        >
+        <Card title="Pagination With Elipsis" code={paginationWithElipsis}>
           <PaginationWithElipsis />
         </Card>
       </div>
@@ -31,4 +34,4 @@ const PaginationPage = () => {
   );
 };
 
-export default PaginationPage;
\ No newline at end of file
+export default PaginationPage;
diff --git a/src/app/[locale]/(protected)/components/pagination/pagination-withbg.tsx b/src/app/[locale]/(protected)/components/pagination/pagination-withbg.tsx
index c1554b8b..6244ac5e 100644
--- a/src/app/[locale]/(protected)/components/pagination/pagination-withbg.tsx
+++ b/src/app/[locale]/(protected)/components/pagination/pagination-withbg.tsx
@@ -5,30 +5,32 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/pagination"
+} from "@/components/ui/pagination";
 
 const PaginationWithBg = () => {
   return (
-      <Pagination className="bg-default-200 dark:bg-default-300 px-3 py-2.5 rounded-md  w-fit">
-        <PaginationContent>
-          <PaginationItem>
-            <PaginationPrevious href="#" />
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">1</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#" isActive>2</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationLink href="#">3</PaginationLink>
-          </PaginationItem>
-          <PaginationItem>
-            <PaginationNext href="#" />
-          </PaginationItem>
-        </PaginationContent>
-      </Pagination>
-  )
-}
+    <Pagination className="bg-default-200 dark:bg-default-300 px-3 py-2.5 rounded-md  w-fit">
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+};
 
-export default PaginationWithBg;
\ No newline at end of file
+export default PaginationWithBg;
diff --git a/src/app/[locale]/(protected)/components/pagination/pagination-withelipsis.tsx b/src/app/[locale]/(protected)/components/pagination/pagination-withelipsis.tsx
index 05aea26e..6c8217f8 100644
--- a/src/app/[locale]/(protected)/components/pagination/pagination-withelipsis.tsx
+++ b/src/app/[locale]/(protected)/components/pagination/pagination-withelipsis.tsx
@@ -6,7 +6,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/pagination"
+} from "@/components/ui/pagination";
 
 const PaginationWithElipsis = () => {
   return (
@@ -34,7 +34,7 @@ const PaginationWithElipsis = () => {
         </PaginationItem>
       </PaginationContent>
     </Pagination>
-  )
-}
+  );
+};
 
-export default PaginationWithElipsis;
\ No newline at end of file
+export default PaginationWithElipsis;
diff --git a/src/app/[locale]/(protected)/components/pagination/pagination-withtext.tsx b/src/app/[locale]/(protected)/components/pagination/pagination-withtext.tsx
index 5bb1ceb0..4e31d7cb 100644
--- a/src/app/[locale]/(protected)/components/pagination/pagination-withtext.tsx
+++ b/src/app/[locale]/(protected)/components/pagination/pagination-withtext.tsx
@@ -6,14 +6,14 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/pagination"
+} from "@/components/ui/pagination";
 
 const PaginationWithText = () => {
   return (
     <Pagination>
       <PaginationContent>
         <PaginationItem>
-          <PaginationPrevious  href="#" />
+          <PaginationPrevious href="#" />
         </PaginationItem>
         <PaginationItem>
           <PaginationLink href="#">1</PaginationLink>
@@ -30,11 +30,11 @@ const PaginationWithText = () => {
           <PaginationEllipsis />
         </PaginationItem>
         <PaginationItem>
-          <PaginationNext  href="#" />
+          <PaginationNext href="#" />
         </PaginationItem>
       </PaginationContent>
     </Pagination>
-  )
-}
+  );
+};
 
-export default PaginationWithText;
\ No newline at end of file
+export default PaginationWithText;
diff --git a/src/app/[locale]/(protected)/components/pagination/source-code.ts b/src/app/[locale]/(protected)/components/pagination/source-code.ts
index 2f7f7ad7..f5fcda00 100644
--- a/src/app/[locale]/(protected)/components/pagination/source-code.ts
+++ b/src/app/[locale]/(protected)/components/pagination/source-code.ts
@@ -1,4 +1,4 @@
-export const basicPagination=`import {
+export const basicPagination = `import {
   Pagination,
   PaginationContent,
   PaginationItem,
@@ -39,9 +39,9 @@ const BasicPagination = () => {
   )
 }
 
-export default BasicPagination;`
+export default BasicPagination;`;
 
-export const paginationWithBackground=`import {
+export const paginationWithBackground = `import {
   Pagination,
   PaginationContent,
   PaginationItem,
@@ -74,9 +74,9 @@ const PaginationWithBg = () => {
   )
 }
 
-export default PaginationWithBg;`
+export default PaginationWithBg;`;
 
-export const paginationWithText=`import {
+export const paginationWithText = `import {
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -115,9 +115,9 @@ const PaginationWithText = () => {
   )
 }
 
-export default PaginationWithText;`
+export default PaginationWithText;`;
 
-export const paginationWithElipsis=`import {
+export const paginationWithElipsis = `import {
   Pagination,
   PaginationContent,
   PaginationEllipsis,
@@ -156,4 +156,4 @@ const PaginationWithElipsis = () => {
   )
 }
 
-export default PaginationWithElipsis;`
\ No newline at end of file
+export default PaginationWithElipsis;`;
diff --git a/src/app/[locale]/(protected)/components/popover/basic-popover.tsx b/src/app/[locale]/(protected)/components/popover/basic-popover.tsx
index bba9c2b8..c8c179d8 100644
--- a/src/app/[locale]/(protected)/components/popover/basic-popover.tsx
+++ b/src/app/[locale]/(protected)/components/popover/basic-popover.tsx
@@ -1,11 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
+import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 const BasicPopover = () => {
   return (
@@ -14,16 +9,15 @@ const BasicPopover = () => {
         <PopoverTrigger asChild>
           <Button className="hover:ring-0 hover:ring-transparent">Open Popover</Button>
         </PopoverTrigger>
-        <PopoverContent
-          className="p-0 overflow-hidden bg-transparent shadow-none border-none"
-        >
+        <PopoverContent className="p-0 overflow-hidden bg-transparent shadow-none border-none">
           <Card>
             <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
+              <CardTitle className="text-default-foreground text-base py-0">
+                Create Project
+              </CardTitle>
             </CardHeader>
             <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cumque?
             </CardContent>
           </Card>
         </PopoverContent>
@@ -33,15 +27,12 @@ const BasicPopover = () => {
           <Button className="hover:ring-0 hover:ring-transparent">Open With Arrow</Button>
         </PopoverTrigger>
         <PopoverContent className="p-0 border-none rounded-md">
-          <PopoverArrow className='fill-default w-3' />
-          <div
-            className='p-2.5  bg-default text-default-foreground text-sm  font-medium rounded-t-md'>
+          <PopoverArrow className="fill-default w-3" />
+          <div className="p-2.5  bg-default text-default-foreground text-sm  font-medium rounded-t-md">
             Create Project
           </div>
-          <div
-            className='p-2 text-sm text-default-600'>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-            cumque?
+          <div className="p-2 text-sm text-default-600">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cumque?
           </div>
         </PopoverContent>
       </Popover>
@@ -49,4 +40,4 @@ const BasicPopover = () => {
   );
 };
 
-export default BasicPopover;
\ No newline at end of file
+export default BasicPopover;
diff --git a/src/app/[locale]/(protected)/components/popover/layout.tsx b/src/app/[locale]/(protected)/components/popover/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/popover/layout.tsx
+++ b/src/app/[locale]/(protected)/components/popover/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/popover/page.tsx b/src/app/[locale]/(protected)/components/popover/page.tsx
index a4fa5db6..5365cbde 100644
--- a/src/app/[locale]/(protected)/components/popover/page.tsx
+++ b/src/app/[locale]/(protected)/components/popover/page.tsx
@@ -1,27 +1,24 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicPopover from "./basic-popover";
 import PlacementPopover from "./placement-popover";
 import { basicPopover, placementPopover } from "./souce-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const PopoverPage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-6">
-        <Card
-          title="Basic Popover"
-          code={basicPopover}>
+        <Card title="Basic Popover" code={basicPopover}>
           <BasicPopover />
         </Card>
-        <Card
-          title="Placement Popover"
-          code={placementPopover}>
+        <Card title="Placement Popover" code={placementPopover}>
           <PlacementPopover />
         </Card>
       </div>
-    </div >
+    </div>
   );
 };
 
-export default PopoverPage;
\ No newline at end of file
+export default PopoverPage;
diff --git a/src/app/[locale]/(protected)/components/popover/placement-popover.tsx b/src/app/[locale]/(protected)/components/popover/placement-popover.tsx
index 222eb518..ded73a03 100644
--- a/src/app/[locale]/(protected)/components/popover/placement-popover.tsx
+++ b/src/app/[locale]/(protected)/components/popover/placement-popover.tsx
@@ -1,15 +1,10 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 const PlacementPopover = () => {
   return (
     <div className="flex flex-wrap gap-2">
-
       <Popover>
         <PopoverTrigger asChild>
           <Button>Open Top</Button>
@@ -20,11 +15,12 @@ const PlacementPopover = () => {
         >
           <Card>
             <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
+              <CardTitle className="text-default-foreground text-base py-0">
+                Create Project
+              </CardTitle>
             </CardHeader>
             <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cumque?
             </CardContent>
           </Card>
         </PopoverContent>
@@ -40,11 +36,12 @@ const PlacementPopover = () => {
         >
           <Card>
             <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
+              <CardTitle className="text-default-foreground text-base py-0">
+                Create Project
+              </CardTitle>
             </CardHeader>
             <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cumque?
             </CardContent>
           </Card>
         </PopoverContent>
@@ -60,11 +57,12 @@ const PlacementPopover = () => {
         >
           <Card>
             <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
+              <CardTitle className="text-default-foreground text-base py-0">
+                Create Project
+              </CardTitle>
             </CardHeader>
             <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cumque?
             </CardContent>
           </Card>
         </PopoverContent>
@@ -80,18 +78,18 @@ const PlacementPopover = () => {
         >
           <Card>
             <CardHeader className="bg-default p-2 rounded-t-lg">
-              <CardTitle className="text-default-foreground text-base py-0">Create Project</CardTitle>
+              <CardTitle className="text-default-foreground text-base py-0">
+                Create Project
+              </CardTitle>
             </CardHeader>
             <CardContent className="p-2 text-sm">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias,
-              cumque?
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, cumque?
             </CardContent>
           </Card>
         </PopoverContent>
       </Popover>
-
     </div>
   );
 };
 
-export default PlacementPopover;
\ No newline at end of file
+export default PlacementPopover;
diff --git a/src/app/[locale]/(protected)/components/popover/souce-code.ts b/src/app/[locale]/(protected)/components/popover/souce-code.ts
index c2873a07..aa145d33 100644
--- a/src/app/[locale]/(protected)/components/popover/souce-code.ts
+++ b/src/app/[locale]/(protected)/components/popover/souce-code.ts
@@ -1,4 +1,4 @@
-export const basicPopover=`import { Button } from "@/components/ui/button";
+export const basicPopover = `import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Popover,
@@ -49,9 +49,9 @@ const BasicPopover = () => {
   );
 };
 
-export default BasicPopover;`
+export default BasicPopover;`;
 
-export const placementPopover=`import { Button } from "@/components/ui/button";
+export const placementPopover = `import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Popover,
@@ -147,4 +147,4 @@ const PlacementPopover = () => {
   );
 };
 
-export default PlacementPopover;`
\ No newline at end of file
+export default PlacementPopover;`;
diff --git a/src/app/[locale]/(protected)/components/progress/animate-striped.tsx b/src/app/[locale]/(protected)/components/progress/animate-striped.tsx
index d62fe15f..0251b98b 100644
--- a/src/app/[locale]/(protected)/components/progress/animate-striped.tsx
+++ b/src/app/[locale]/(protected)/components/progress/animate-striped.tsx
@@ -1,12 +1,10 @@
-
 import { Progress } from "@/components/ui/progress";
 
 const AnimatedStriped = () => {
-
   return (
     <div className="space-y-4">
-      <Progress value={30}  isStripe isAnimate/>
-      <Progress value={30} color="primary" isStripe isAnimate/>
+      <Progress value={30} isStripe isAnimate />
+      <Progress value={30} color="primary" isStripe isAnimate />
       <Progress value={40} color="secondary" isStripe isAnimate />
       <Progress value={80} color="destructive" isStripe isAnimate />
       <Progress value={60} color="warning" isStripe isAnimate />
@@ -16,4 +14,4 @@ const AnimatedStriped = () => {
   );
 };
 
-export default AnimatedStriped;
\ No newline at end of file
+export default AnimatedStriped;
diff --git a/src/app/[locale]/(protected)/components/progress/basic-progress.tsx b/src/app/[locale]/(protected)/components/progress/basic-progress.tsx
index 6f4c90a4..69c64775 100644
--- a/src/app/[locale]/(protected)/components/progress/basic-progress.tsx
+++ b/src/app/[locale]/(protected)/components/progress/basic-progress.tsx
@@ -11,4 +11,4 @@ const BasicProgress = () => {
   );
 };
 
-export default BasicProgress;
\ No newline at end of file
+export default BasicProgress;
diff --git a/src/app/[locale]/(protected)/components/progress/color-progress.tsx b/src/app/[locale]/(protected)/components/progress/color-progress.tsx
index 43b1fd71..b8f1f6fa 100644
--- a/src/app/[locale]/(protected)/components/progress/color-progress.tsx
+++ b/src/app/[locale]/(protected)/components/progress/color-progress.tsx
@@ -1,13 +1,11 @@
-
 import { Progress } from "@/components/ui/progress";
 
 const ColorProgress = () => {
-
   return (
     <div className="space-y-4">
-      <Progress value={30}  />
-      <Progress value={40} color="primary"/>
-      <Progress value={40} color="secondary"/>
+      <Progress value={30} />
+      <Progress value={40} color="primary" />
+      <Progress value={40} color="secondary" />
       <Progress value={80} color="destructive" />
       <Progress value={60} color="warning" />
       <Progress value={70} color="info" />
@@ -16,4 +14,4 @@ const ColorProgress = () => {
   );
 };
 
-export default ColorProgress;
\ No newline at end of file
+export default ColorProgress;
diff --git a/src/app/[locale]/(protected)/components/progress/layout.tsx b/src/app/[locale]/(protected)/components/progress/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/progress/layout.tsx
+++ b/src/app/[locale]/(protected)/components/progress/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/progress/page.tsx b/src/app/[locale]/(protected)/components/progress/page.tsx
index 1697cc64..b4566755 100644
--- a/src/app/[locale]/(protected)/components/progress/page.tsx
+++ b/src/app/[locale]/(protected)/components/progress/page.tsx
@@ -1,13 +1,20 @@
-
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import AnimatedStriped from "./animate-striped";
 import BasicProgress from "./basic-progress";
 import ColorProgress from "./color-progress";
-import SizesProgress from "./sizes-progress";
-import StripedProgress from "./striped-progress";
-import AnimatedStriped from "./animate-striped";
 import ProgressWithValue from "./progress-withvalue";
-import { animateStriped, basicProgress, colorProgress, progressWithValue, sizesProgress, stripedProgress } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import SizesProgress from "./sizes-progress";
+import {
+  animateStriped,
+  basicProgress,
+  colorProgress,
+  progressWithValue,
+  sizesProgress,
+  stripedProgress,
+} from "./source-code";
+import StripedProgress from "./striped-progress";
 
 const ProgressPage = () => {
   return (
@@ -37,4 +44,4 @@ const ProgressPage = () => {
   );
 };
 
-export default ProgressPage;
\ No newline at end of file
+export default ProgressPage;
diff --git a/src/app/[locale]/(protected)/components/progress/progress-withvalue.tsx b/src/app/[locale]/(protected)/components/progress/progress-withvalue.tsx
index af546f33..226eb8c2 100644
--- a/src/app/[locale]/(protected)/components/progress/progress-withvalue.tsx
+++ b/src/app/[locale]/(protected)/components/progress/progress-withvalue.tsx
@@ -1,7 +1,9 @@
-"use client"
-import { Progress } from "@/components/ui/progress";
+"use client";
+
 import { useState } from "react";
 
+import { Progress } from "@/components/ui/progress";
+
 const ProgressWithValue = () => {
   const [value1, setValue1] = useState<number>(80);
   const [value2, setValue2] = useState<number>(70);
@@ -20,4 +22,4 @@ const ProgressWithValue = () => {
   );
 };
 
-export default ProgressWithValue;
\ No newline at end of file
+export default ProgressWithValue;
diff --git a/src/app/[locale]/(protected)/components/progress/sizes-progress.tsx b/src/app/[locale]/(protected)/components/progress/sizes-progress.tsx
index c4471a7b..1c63c57c 100644
--- a/src/app/[locale]/(protected)/components/progress/sizes-progress.tsx
+++ b/src/app/[locale]/(protected)/components/progress/sizes-progress.tsx
@@ -11,4 +11,4 @@ const SizesProgress = () => {
   );
 };
 
-export default SizesProgress;
\ No newline at end of file
+export default SizesProgress;
diff --git a/src/app/[locale]/(protected)/components/progress/source-code.ts b/src/app/[locale]/(protected)/components/progress/source-code.ts
index 4c9c3337..2a2560fe 100644
--- a/src/app/[locale]/(protected)/components/progress/source-code.ts
+++ b/src/app/[locale]/(protected)/components/progress/source-code.ts
@@ -1,4 +1,4 @@
-export const basicProgress=`import { Progress } from "@/components/ui/progress";
+export const basicProgress = `import { Progress } from "@/components/ui/progress";
 
 const BasicProgress = () => {
   return (
@@ -11,9 +11,9 @@ const BasicProgress = () => {
   );
 };
 
-export default BasicProgress;`
+export default BasicProgress;`;
 
-export const colorProgress=`
+export const colorProgress = `
 import { Progress } from "@/components/ui/progress";
 
 const ColorProgress = () => {
@@ -31,9 +31,9 @@ const ColorProgress = () => {
   );
 };
 
-export default ColorProgress;`
+export default ColorProgress;`;
 
-export const sizesProgress=`import { Progress } from "@/components/ui/progress";
+export const sizesProgress = `import { Progress } from "@/components/ui/progress";
 
 const SizesProgress = () => {
   return (
@@ -46,9 +46,9 @@ const SizesProgress = () => {
   );
 };
 
-export default SizesProgress;`
+export default SizesProgress;`;
 
-export const stripedProgress=`
+export const stripedProgress = `
 import { Progress } from "@/components/ui/progress";
 
 const StripedProgress = () => {
@@ -66,9 +66,9 @@ const StripedProgress = () => {
   );
 };
 
-export default StripedProgress;`
+export default StripedProgress;`;
 
-export const animateStriped=`
+export const animateStriped = `
 import { Progress } from "@/components/ui/progress";
 
 const AnimatedStriped = () => {
@@ -86,9 +86,9 @@ const AnimatedStriped = () => {
   );
 };
 
-export default AnimatedStriped;`
+export default AnimatedStriped;`;
 
-export const progressWithValue=`"use client"
+export const progressWithValue = `"use client"
 import { Progress } from "@/components/ui/progress";
 import { useState } from "react";
 
@@ -110,4 +110,4 @@ const ProgressWithValue = () => {
   );
 };
 
-export default ProgressWithValue;`
\ No newline at end of file
+export default ProgressWithValue;`;
diff --git a/src/app/[locale]/(protected)/components/progress/striped-progress.tsx b/src/app/[locale]/(protected)/components/progress/striped-progress.tsx
index 1213bd6c..58067a8e 100644
--- a/src/app/[locale]/(protected)/components/progress/striped-progress.tsx
+++ b/src/app/[locale]/(protected)/components/progress/striped-progress.tsx
@@ -1,8 +1,6 @@
-
 import { Progress } from "@/components/ui/progress";
 
 const StripedProgress = () => {
-
   return (
     <div className="space-y-4">
       <Progress value={60} isStripe />
@@ -16,4 +14,4 @@ const StripedProgress = () => {
   );
 };
 
-export default StripedProgress;
\ No newline at end of file
+export default StripedProgress;
diff --git a/src/app/[locale]/(protected)/components/resizable/basic-resizable.tsx b/src/app/[locale]/(protected)/components/resizable/basic-resizable.tsx
index df98d3e7..2e11b821 100644
--- a/src/app/[locale]/(protected)/components/resizable/basic-resizable.tsx
+++ b/src/app/[locale]/(protected)/components/resizable/basic-resizable.tsx
@@ -1,8 +1,4 @@
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable"
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 
 const BasicResizable = () => {
   return (
@@ -16,7 +12,7 @@ const BasicResizable = () => {
             <span className="font-semibold">Sidebar</span>
           </div>
         </ResizablePanel>
-        <ResizableHandle withHandle className="border border-default-200 dark:border-default-300"/>
+        <ResizableHandle withHandle className="border border-default-200 dark:border-default-300" />
         <ResizablePanel defaultSize={75}>
           <div className="flex h-full items-center justify-center p-6">
             <span className="font-semibold">Content</span>
@@ -24,6 +20,6 @@ const BasicResizable = () => {
         </ResizablePanel>
       </ResizablePanelGroup>
     </div>
-  )
-}
-export default BasicResizable;
\ No newline at end of file
+  );
+};
+export default BasicResizable;
diff --git a/src/app/[locale]/(protected)/components/resizable/layout.tsx b/src/app/[locale]/(protected)/components/resizable/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/resizable/layout.tsx
+++ b/src/app/[locale]/(protected)/components/resizable/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/resizable/page.tsx b/src/app/[locale]/(protected)/components/resizable/page.tsx
index 3be8621e..fd606bed 100644
--- a/src/app/[locale]/(protected)/components/resizable/page.tsx
+++ b/src/app/[locale]/(protected)/components/resizable/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicResizable from "./basic-resizable";
 import { basicResizable } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const ResizablePage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const ResizablePage = () => {
   );
 };
 
-export default ResizablePage;
\ No newline at end of file
+export default ResizablePage;
diff --git a/src/app/[locale]/(protected)/components/resizable/source-code.ts b/src/app/[locale]/(protected)/components/resizable/source-code.ts
index 70c3a4a2..d38ae937 100644
--- a/src/app/[locale]/(protected)/components/resizable/source-code.ts
+++ b/src/app/[locale]/(protected)/components/resizable/source-code.ts
@@ -1,4 +1,4 @@
-export const basicResizable=`import {
+export const basicResizable = `import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
@@ -26,4 +26,4 @@ const BasicResizable = () => {
     </div>
   )
 }
-export default BasicResizable;`
\ No newline at end of file
+export default BasicResizable;`;
diff --git a/src/app/[locale]/(protected)/components/scroll-area/basic-scroll.tsx b/src/app/[locale]/(protected)/components/scroll-area/basic-scroll.tsx
index ff0a2e94..ede0e8af 100644
--- a/src/app/[locale]/(protected)/components/scroll-area/basic-scroll.tsx
+++ b/src/app/[locale]/(protected)/components/scroll-area/basic-scroll.tsx
@@ -1,11 +1,9 @@
-import * as React from "react"
+import * as React from "react";
 
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
 
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`
-)
+const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
 
 const BasicScroll = () => {
   return (
@@ -24,7 +22,7 @@ const BasicScroll = () => {
         </div>
       </ScrollArea>
     </div>
-  )
-}
+  );
+};
 
-export default BasicScroll;
\ No newline at end of file
+export default BasicScroll;
diff --git a/src/app/[locale]/(protected)/components/scroll-area/layout.tsx b/src/app/[locale]/(protected)/components/scroll-area/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/scroll-area/layout.tsx
+++ b/src/app/[locale]/(protected)/components/scroll-area/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/scroll-area/page.tsx b/src/app/[locale]/(protected)/components/scroll-area/page.tsx
index 0f59c4ea..88069085 100644
--- a/src/app/[locale]/(protected)/components/scroll-area/page.tsx
+++ b/src/app/[locale]/(protected)/components/scroll-area/page.tsx
@@ -1,7 +1,8 @@
-
 import Card from "@/components/ui/structures/code-snippet";
-import BasicScroll from "./basic-scroll";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicScroll from "./basic-scroll";
+
 const ScrollAreaPage = () => {
   return (
     <div>
@@ -13,4 +14,4 @@ const ScrollAreaPage = () => {
   );
 };
 
-export default ScrollAreaPage;
\ No newline at end of file
+export default ScrollAreaPage;
diff --git a/src/app/[locale]/(protected)/components/separator/basic-separator.tsx b/src/app/[locale]/(protected)/components/separator/basic-separator.tsx
index 549a5329..af0d8714 100644
--- a/src/app/[locale]/(protected)/components/separator/basic-separator.tsx
+++ b/src/app/[locale]/(protected)/components/separator/basic-separator.tsx
@@ -1,13 +1,11 @@
-import { Separator } from "@/components/ui/separator"
+import { Separator } from "@/components/ui/separator";
 
 const BasicSeparator = () => {
   return (
     <div className="max-w-sm mx-auto">
       <div className="space-y-1">
         <h4 className="text-sm font-medium leading-none">Dashcode</h4>
-        <p className="text-sm text-muted-foreground">
-          Reusable Admin Ui Template
-        </p>
+        <p className="text-sm text-muted-foreground">Reusable Admin Ui Template</p>
       </div>
       <Separator className="my-4" />
       <div className="flex h-5 items-center space-x-4 text-sm">
@@ -18,7 +16,7 @@ const BasicSeparator = () => {
         <div>Source</div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default BasicSeparator;
\ No newline at end of file
+export default BasicSeparator;
diff --git a/src/app/[locale]/(protected)/components/separator/layout.tsx b/src/app/[locale]/(protected)/components/separator/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/separator/layout.tsx
+++ b/src/app/[locale]/(protected)/components/separator/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/separator/page.tsx b/src/app/[locale]/(protected)/components/separator/page.tsx
index 6d2ac2f4..98bede60 100644
--- a/src/app/[locale]/(protected)/components/separator/page.tsx
+++ b/src/app/[locale]/(protected)/components/separator/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicSeparator from "./basic-separator";
 import { basicSeparator } from "./souce-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const SeparatorPage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const SeparatorPage = () => {
   );
 };
 
-export default SeparatorPage;
\ No newline at end of file
+export default SeparatorPage;
diff --git a/src/app/[locale]/(protected)/components/separator/souce-code.ts b/src/app/[locale]/(protected)/components/separator/souce-code.ts
index 198cc351..f4d2ed40 100644
--- a/src/app/[locale]/(protected)/components/separator/souce-code.ts
+++ b/src/app/[locale]/(protected)/components/separator/souce-code.ts
@@ -1,4 +1,4 @@
-export const  basicSeparator=`import { Separator } from "@/components/ui/separator"
+export const basicSeparator = `import { Separator } from "@/components/ui/separator"
 
 const BasicSeparator = () => {
   return (
@@ -21,4 +21,4 @@ const BasicSeparator = () => {
   )
 }
 
-export default BasicSeparator;`
\ No newline at end of file
+export default BasicSeparator;`;
diff --git a/src/app/[locale]/(protected)/components/sheet/basic-sheet.tsx b/src/app/[locale]/(protected)/components/sheet/basic-sheet.tsx
index dd84affb..87e032e7 100644
--- a/src/app/[locale]/(protected)/components/sheet/basic-sheet.tsx
+++ b/src/app/[locale]/(protected)/components/sheet/basic-sheet.tsx
@@ -1,6 +1,6 @@
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Sheet,
   SheetClose,
@@ -10,7 +10,8 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from "@/components/ui/sheet"
+} from "@/components/ui/sheet";
+
 const BasicSheet = () => {
   return (
     <Sheet>
@@ -26,12 +27,18 @@ const BasicSheet = () => {
         </SheetHeader>
         <div className="space-y-4 py-4">
           <div className="flex items-center gap-4">
-            <Label htmlFor="name" className="min-w-20"> Name</Label>
+            <Label htmlFor="name" className="min-w-20">
+              {" "}
+              Name
+            </Label>
             <Input id="name" placeholder="Pedro Duarte" />
           </div>
           <div className="flex items-center gap-4">
-          <Label htmlFor="username" className="min-w-20"> Username</Label>
-          <Input id="username" placeholder="@peduarte" />
+            <Label htmlFor="username" className="min-w-20">
+              {" "}
+              Username
+            </Label>
+            <Input id="username" placeholder="@peduarte" />
           </div>
         </div>
         <SheetFooter>
@@ -41,7 +48,7 @@ const BasicSheet = () => {
         </SheetFooter>
       </SheetContent>
     </Sheet>
-  )
-}
+  );
+};
 
-export default BasicSheet;
\ No newline at end of file
+export default BasicSheet;
diff --git a/src/app/[locale]/(protected)/components/sheet/layout.tsx b/src/app/[locale]/(protected)/components/sheet/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/sheet/layout.tsx
+++ b/src/app/[locale]/(protected)/components/sheet/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/sheet/page.tsx b/src/app/[locale]/(protected)/components/sheet/page.tsx
index c16310a1..dc6ab450 100644
--- a/src/app/[locale]/(protected)/components/sheet/page.tsx
+++ b/src/app/[locale]/(protected)/components/sheet/page.tsx
@@ -1,8 +1,10 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicSheet from "./basic-sheet";
 import SheetSide from "./sheet-side";
 import { basicSheet, sheetPosition } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const SheetPage = () => {
   return (
     <div>
@@ -19,4 +21,4 @@ const SheetPage = () => {
   );
 };
 
-export default SheetPage;
\ No newline at end of file
+export default SheetPage;
diff --git a/src/app/[locale]/(protected)/components/sheet/sheet-side.tsx b/src/app/[locale]/(protected)/components/sheet/sheet-side.tsx
index d75eaa24..74c730c0 100644
--- a/src/app/[locale]/(protected)/components/sheet/sheet-side.tsx
+++ b/src/app/[locale]/(protected)/components/sheet/sheet-side.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Sheet,
   SheetClose,
@@ -12,11 +12,11 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from "@/components/ui/sheet"
+} from "@/components/ui/sheet";
 
-const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const;
 
-type SheetSide = (typeof SHEET_SIDES)[number]
+type SheetSide = (typeof SHEET_SIDES)[number];
 
 const SheetSide = () => {
   return (
@@ -24,7 +24,9 @@ const SheetSide = () => {
       {SHEET_SIDES.map((side) => (
         <Sheet key={side}>
           <SheetTrigger asChild>
-            <Button variant="outline" className="capitalize">Open {side}</Button>
+            <Button variant="outline" className="capitalize">
+              Open {side}
+            </Button>
           </SheetTrigger>
           <SheetContent side={side}>
             <SheetHeader>
@@ -35,11 +37,17 @@ const SheetSide = () => {
             </SheetHeader>
             <div className="space-y-4 py-4">
               <div className="flex items-center gap-4">
-                <Label htmlFor="name" className="min-w-20"> Name</Label>
+                <Label htmlFor="name" className="min-w-20">
+                  {" "}
+                  Name
+                </Label>
                 <Input id="name" placeholder="Pedro Duarte" />
               </div>
               <div className="flex items-center gap-4">
-                <Label htmlFor="username" className="min-w-20"> Username</Label>
+                <Label htmlFor="username" className="min-w-20">
+                  {" "}
+                  Username
+                </Label>
                 <Input id="username" placeholder="@peduarte" />
               </div>
             </div>
@@ -52,7 +60,7 @@ const SheetSide = () => {
         </Sheet>
       ))}
     </div>
-  )
-}
+  );
+};
 
-export default SheetSide;
\ No newline at end of file
+export default SheetSide;
diff --git a/src/app/[locale]/(protected)/components/sheet/source-code.ts b/src/app/[locale]/(protected)/components/sheet/source-code.ts
index cf40a3fb..12960caf 100644
--- a/src/app/[locale]/(protected)/components/sheet/source-code.ts
+++ b/src/app/[locale]/(protected)/components/sheet/source-code.ts
@@ -1,4 +1,4 @@
-export const basicSheet=`import { Button } from "@/components/ui/button"
+export const basicSheet = `import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import {
@@ -48,9 +48,9 @@ const BasicSheet = () => {
   )
 }
 
-export default BasicSheet;`
+export default BasicSheet;`;
 
-export const sheetPosition=`"use client"
+export const sheetPosition = `"use client"
 
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -111,4 +111,4 @@ const SheetSide = () => {
   )
 }
 
-export default SheetSide;`
\ No newline at end of file
+export default SheetSide;`;
diff --git a/src/app/[locale]/(protected)/components/skeleton/basic-skeleton.tsx b/src/app/[locale]/(protected)/components/skeleton/basic-skeleton.tsx
index 14512e9d..d3692703 100644
--- a/src/app/[locale]/(protected)/components/skeleton/basic-skeleton.tsx
+++ b/src/app/[locale]/(protected)/components/skeleton/basic-skeleton.tsx
@@ -12,4 +12,4 @@ const BasiSkeleton = () => {
   );
 };
 
-export default BasiSkeleton;
\ No newline at end of file
+export default BasiSkeleton;
diff --git a/src/app/[locale]/(protected)/components/skeleton/layout.tsx b/src/app/[locale]/(protected)/components/skeleton/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/skeleton/layout.tsx
+++ b/src/app/[locale]/(protected)/components/skeleton/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/skeleton/page.tsx b/src/app/[locale]/(protected)/components/skeleton/page.tsx
index 0b7f161a..7579dda8 100644
--- a/src/app/[locale]/(protected)/components/skeleton/page.tsx
+++ b/src/app/[locale]/(protected)/components/skeleton/page.tsx
@@ -1,8 +1,10 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasiSkeleton from "./basic-skeleton";
 import SkeletonCard from "./skeleton-card";
 import { basicSkeleton, skeletonCard } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const SkeletonPage = () => {
   return (
     <div>
@@ -19,4 +21,4 @@ const SkeletonPage = () => {
   );
 };
 
-export default SkeletonPage;
\ No newline at end of file
+export default SkeletonPage;
diff --git a/src/app/[locale]/(protected)/components/skeleton/skeleton-card.tsx b/src/app/[locale]/(protected)/components/skeleton/skeleton-card.tsx
index 68941523..c5db03ce 100644
--- a/src/app/[locale]/(protected)/components/skeleton/skeleton-card.tsx
+++ b/src/app/[locale]/(protected)/components/skeleton/skeleton-card.tsx
@@ -1,4 +1,4 @@
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from "@/components/ui/skeleton";
 
 const SkeletonCard = () => {
   return (
@@ -9,6 +9,6 @@ const SkeletonCard = () => {
         <Skeleton className="h-4 w-[200px]" />
       </div>
     </div>
-  )
-}
-export default SkeletonCard;
\ No newline at end of file
+  );
+};
+export default SkeletonCard;
diff --git a/src/app/[locale]/(protected)/components/skeleton/source-code.ts b/src/app/[locale]/(protected)/components/skeleton/source-code.ts
index 961b39ec..d1d41f99 100644
--- a/src/app/[locale]/(protected)/components/skeleton/source-code.ts
+++ b/src/app/[locale]/(protected)/components/skeleton/source-code.ts
@@ -1,4 +1,4 @@
-export const basicSkeleton=`import { Skeleton } from "@/components/ui/skeleton";
+export const basicSkeleton = `import { Skeleton } from "@/components/ui/skeleton";
 
 const BasiSkeleton = () => {
   return (
@@ -12,9 +12,9 @@ const BasiSkeleton = () => {
   );
 };
 
-export default BasiSkeleton;`
+export default BasiSkeleton;`;
 
-export const skeletonCard=`import { Skeleton } from "@/components/ui/skeleton"
+export const skeletonCard = `import { Skeleton } from "@/components/ui/skeleton"
 
 const SkeletonCard = () => {
   return (
@@ -27,4 +27,4 @@ const SkeletonCard = () => {
     </div>
   )
 }
-export default SkeletonCard;`
\ No newline at end of file
+export default SkeletonCard;`;
diff --git a/src/app/[locale]/(protected)/components/sonner/basic-sonner.tsx b/src/app/[locale]/(protected)/components/sonner/basic-sonner.tsx
index d5b1b306..0aba9991 100644
--- a/src/app/[locale]/(protected)/components/sonner/basic-sonner.tsx
+++ b/src/app/[locale]/(protected)/components/sonner/basic-sonner.tsx
@@ -1,7 +1,8 @@
+"use client";
 
-"use client"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
 
 const BasicSonner = () => {
   return (
@@ -19,7 +20,6 @@ const BasicSonner = () => {
     >
       Show Toast
     </Button>
-  )
-}
+  );
+};
 export default BasicSonner;
-
diff --git a/src/app/[locale]/(protected)/components/sonner/layout.tsx b/src/app/[locale]/(protected)/components/sonner/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/sonner/layout.tsx
+++ b/src/app/[locale]/(protected)/components/sonner/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/sonner/page.tsx b/src/app/[locale]/(protected)/components/sonner/page.tsx
index 322070ad..86bb480e 100644
--- a/src/app/[locale]/(protected)/components/sonner/page.tsx
+++ b/src/app/[locale]/(protected)/components/sonner/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicSonner from "./basic-sonner";
 import { basicSonner } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const SoonerPage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const SoonerPage = () => {
   );
 };
 
-export default SoonerPage;
\ No newline at end of file
+export default SoonerPage;
diff --git a/src/app/[locale]/(protected)/components/sonner/source-code.ts b/src/app/[locale]/(protected)/components/sonner/source-code.ts
index a8003a5f..fe26c71f 100644
--- a/src/app/[locale]/(protected)/components/sonner/source-code.ts
+++ b/src/app/[locale]/(protected)/components/sonner/source-code.ts
@@ -1,4 +1,4 @@
-export const basicSonner=`
+export const basicSonner = `
 "use client"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
@@ -23,4 +23,4 @@ const BasicSonner = () => {
 }
 export default BasicSonner;
 
-`
\ No newline at end of file
+`;
diff --git a/src/app/[locale]/(protected)/components/tabs/basic-tab.tsx b/src/app/[locale]/(protected)/components/tabs/basic-tab.tsx
index a7e05f2e..8fea19a6 100644
--- a/src/app/[locale]/(protected)/components/tabs/basic-tab.tsx
+++ b/src/app/[locale]/(protected)/components/tabs/basic-tab.tsx
@@ -1,10 +1,4 @@
-
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const BasicTab = () => {
   return (
@@ -13,40 +7,47 @@ const BasicTab = () => {
         <TabsTrigger
           value="home"
           className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Home</TabsTrigger>
+        >
+          Home
+        </TabsTrigger>
         <TabsTrigger
           value="profile"
           className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Profile</TabsTrigger>
+        >
+          Profile
+        </TabsTrigger>
         <TabsTrigger
           value="messages"
           className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Messages</TabsTrigger>
+        >
+          Messages
+        </TabsTrigger>
         <TabsTrigger
           value="settings"
           className="relative dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
-        >Settings</TabsTrigger>
+        >
+          Settings
+        </TabsTrigger>
       </TabsList>
       <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt
+        sint deserunt ut voluptate aute id deserunt nisi.
       </TabsContent>
       <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim.
       </TabsContent>
       <TabsContent value="messages">
         Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
       </TabsContent>
       <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt
+        sint deserunt ut voluptate aute id deserunt nisi.
       </TabsContent>
     </Tabs>
-  )
-}
+  );
+};
 
-export default BasicTab;
\ No newline at end of file
+export default BasicTab;
diff --git a/src/app/[locale]/(protected)/components/tabs/justify-tab.tsx b/src/app/[locale]/(protected)/components/tabs/justify-tab.tsx
index edfe560c..715cdb52 100644
--- a/src/app/[locale]/(protected)/components/tabs/justify-tab.tsx
+++ b/src/app/[locale]/(protected)/components/tabs/justify-tab.tsx
@@ -1,10 +1,4 @@
-
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const JustifyTab = () => {
   return (
@@ -13,52 +7,58 @@ const JustifyTab = () => {
         <TabsTrigger
           value="home"
           className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Home</TabsTrigger>
+        >
+          Home
+        </TabsTrigger>
         <TabsTrigger
           value="profile"
           className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Profile</TabsTrigger>
+        >
+          Profile
+        </TabsTrigger>
         <TabsTrigger
           value="messages"
           className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Messages</TabsTrigger>
+        >
+          Messages
+        </TabsTrigger>
         <TabsTrigger
           value="settings"
           className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-        >Settings</TabsTrigger>
+        >
+          Settings
+        </TabsTrigger>
       </TabsList>
       <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt
+        sint deserunt ut voluptate aute id deserunt nisi. Aliqua id fugiat nostrud irure ex duis ea
+        quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor
+        enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id
+        deserunt nisi.
       </TabsContent>
       <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim. Aliqua id fugiat nostrud irure ex duis ea
+        quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor
+        enim.
       </TabsContent>
       <TabsContent value="messages">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui Aliqua id fugiat
+        nostrud irure ex duis ea quis id quis ad et. Sunt qui Aliqua id fugiat nostrud irure ex duis
+        ea quis id quis ad et. Sunt qui Aliqua id fugiat nostrud irure ex duis ea quis id quis ad
+        et. Sunt qui
       </TabsContent>
       <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt
+        sint deserunt ut voluptate aute id deserunt nisi. Aliqua id fugiat nostrud irure ex duis ea
+        quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor
+        enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id
+        deserunt nisi.
       </TabsContent>
     </Tabs>
-  )
-}
+  );
+};
 
-export default JustifyTab;
\ No newline at end of file
+export default JustifyTab;
diff --git a/src/app/[locale]/(protected)/components/tabs/layout.tsx b/src/app/[locale]/(protected)/components/tabs/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/tabs/layout.tsx
+++ b/src/app/[locale]/(protected)/components/tabs/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/tabs/page.tsx b/src/app/[locale]/(protected)/components/tabs/page.tsx
index b505260b..cbc373d8 100644
--- a/src/app/[locale]/(protected)/components/tabs/page.tsx
+++ b/src/app/[locale]/(protected)/components/tabs/page.tsx
@@ -1,11 +1,11 @@
-
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicTab from "./basic-tab";
-import TabsWithIcon from "./tabs-with-icon";
-import VerticalTab from "./vertical-tab";
 import JustifyTab from "./justify-tab";
 import { basicTab, justifyTab, tabsWithIcon, verticalTab } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import TabsWithIcon from "./tabs-with-icon";
+import VerticalTab from "./vertical-tab";
 
 const TabsPage = () => {
   return (
@@ -29,4 +29,4 @@ const TabsPage = () => {
   );
 };
 
-export default TabsPage;
\ No newline at end of file
+export default TabsPage;
diff --git a/src/app/[locale]/(protected)/components/tabs/source-code.ts b/src/app/[locale]/(protected)/components/tabs/source-code.ts
index 03529d9f..3266a17c 100644
--- a/src/app/[locale]/(protected)/components/tabs/source-code.ts
+++ b/src/app/[locale]/(protected)/components/tabs/source-code.ts
@@ -1,4 +1,4 @@
-export const basicTab=`
+export const basicTab = `
 import {
   Tabs,
   TabsContent,
@@ -49,9 +49,9 @@ const BasicTab = () => {
   )
 }
 
-export default BasicTab;`
+export default BasicTab;`;
 
-export const justifyTab=`
+export const justifyTab = `
 import {
   Tabs,
   TabsContent,
@@ -114,9 +114,9 @@ const JustifyTab = () => {
   )
 }
 
-export default JustifyTab;`
+export default JustifyTab;`;
 
-export const tabsWithIcon=`
+export const tabsWithIcon = `
 
 import { Icon } from "@/components/ui/icon";
 import {
@@ -181,9 +181,9 @@ const TabsWithIcon = () => {
   )
 }
 
-export default TabsWithIcon;`
+export default TabsWithIcon;`;
 
-export const verticalTab=`import {
+export const verticalTab = `import {
   Tabs,
   TabsContent,
   TabsList,
@@ -242,4 +242,4 @@ const VerticalTab = () => {
   );
 };
 
-export default VerticalTab;`
\ No newline at end of file
+export default VerticalTab;`;
diff --git a/src/app/[locale]/(protected)/components/tabs/tabs-with-icon.tsx b/src/app/[locale]/(protected)/components/tabs/tabs-with-icon.tsx
index fafe08f2..b3cf04a4 100644
--- a/src/app/[locale]/(protected)/components/tabs/tabs-with-icon.tsx
+++ b/src/app/[locale]/(protected)/components/tabs/tabs-with-icon.tsx
@@ -1,12 +1,5 @@
-
-
 import { Icon } from "@/components/ui/icon";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const TabsWithIcon = () => {
   return (
@@ -42,25 +35,24 @@ const TabsWithIcon = () => {
         </TabsTrigger>
       </TabsList>
       <TabsContent value="home">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt
+        sint deserunt ut voluptate aute id deserunt nisi.
       </TabsContent>
       <TabsContent value="profile">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim.
       </TabsContent>
       <TabsContent value="messages">
         Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
       </TabsContent>
       <TabsContent value="settings">
-        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-        Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-        Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute
-        id deserunt nisi.
+        Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis
+        deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt
+        sint deserunt ut voluptate aute id deserunt nisi.
       </TabsContent>
     </Tabs>
-  )
-}
+  );
+};
 
-export default TabsWithIcon;
\ No newline at end of file
+export default TabsWithIcon;
diff --git a/src/app/[locale]/(protected)/components/tabs/vertical-tab.tsx b/src/app/[locale]/(protected)/components/tabs/vertical-tab.tsx
index d4816c18..3fa0fd63 100644
--- a/src/app/[locale]/(protected)/components/tabs/vertical-tab.tsx
+++ b/src/app/[locale]/(protected)/components/tabs/vertical-tab.tsx
@@ -1,60 +1,60 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const VerticalTab = () => {
   return (
-    <Tabs defaultValue="home" >
+    <Tabs defaultValue="home">
       <div className="grid grid-cols-12 gap-6">
         <div className="lg:col-span-3 md:col-span-5 col-span-12">
           <TabsList className="md:flex-col gap-2 flex-wrap   justify-start">
             <TabsTrigger
               value="home"
               className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Home</TabsTrigger>
+            >
+              Home
+            </TabsTrigger>
             <TabsTrigger
               value="profile"
               className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Profile</TabsTrigger>
+            >
+              Profile
+            </TabsTrigger>
             <TabsTrigger
               value="messages"
               className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Messages</TabsTrigger>
+            >
+              Messages
+            </TabsTrigger>
             <TabsTrigger
               value="settings"
               className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
-            >Settings</TabsTrigger>
+            >
+              Settings
+            </TabsTrigger>
           </TabsList>
         </div>
         <div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
           <TabsContent value="home" className="mt-0">
-            <strong>Home Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. 
-            Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
+            <strong>Home Content</strong> Aliqua id fugiat nostrud irure ex duis ea quis id quis ad
+            et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit
+            aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
           </TabsContent>
-          <TabsContent value="profile" className="mt-0" >
-            <strong>Profile Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-             Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
+          <TabsContent value="profile" className="mt-0">
+            <strong>Profile Content</strong> Aliqua id fugiat nostrud irure ex duis ea quis id quis
+            ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
           </TabsContent>
-          <TabsContent value="messages" className="mt-0" >
-            <strong>Messages Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui
+          <TabsContent value="messages" className="mt-0">
+            <strong>Messages Content</strong> Aliqua id fugiat nostrud irure ex duis ea quis id quis
+            ad et. Sunt qui
           </TabsContent>
           <TabsContent value="settings" className="mt-0">
-            <strong>Settings Content</strong> {" "}
-            Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.
-             Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim.
-             Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
+            <strong>Settings Content</strong> Aliqua id fugiat nostrud irure ex duis ea quis id quis
+            ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit
+            aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
           </TabsContent>
         </div>
       </div>
     </Tabs>
-
   );
 };
 
-export default VerticalTab;
\ No newline at end of file
+export default VerticalTab;
diff --git a/src/app/[locale]/(protected)/components/toast/basic-toast.tsx b/src/app/[locale]/(protected)/components/toast/basic-toast.tsx
index a4eaf824..9a3b0ed5 100644
--- a/src/app/[locale]/(protected)/components/toast/basic-toast.tsx
+++ b/src/app/[locale]/(protected)/components/toast/basic-toast.tsx
@@ -1,11 +1,11 @@
+"use client";
 
-"use client"
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
+import { Button } from "@/components/ui/button";
+import { ToastAction } from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
 
 const BasicToast = () => {
-  const { toast } = useToast()
+  const { toast } = useToast();
   return (
     <Button
       variant="outline"
@@ -13,15 +13,12 @@ const BasicToast = () => {
         toast({
           title: "Scheduled: Catch up ",
           description: "Friday, February 10, 2023 at 5:57 PM",
-          action: (
-            <ToastAction altText="Goto schedule to undo">Undo</ToastAction>
-          ),
-        })
+          action: <ToastAction altText="Goto schedule to undo">Undo</ToastAction>,
+        });
       }}
     >
       Add to calendar
     </Button>
-  )
-}
+  );
+};
 export default BasicToast;
-
diff --git a/src/app/[locale]/(protected)/components/toast/layout.tsx b/src/app/[locale]/(protected)/components/toast/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/toast/layout.tsx
+++ b/src/app/[locale]/(protected)/components/toast/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/toast/page.tsx b/src/app/[locale]/(protected)/components/toast/page.tsx
index 664b90de..a1a5b41d 100644
--- a/src/app/[locale]/(protected)/components/toast/page.tsx
+++ b/src/app/[locale]/(protected)/components/toast/page.tsx
@@ -1,10 +1,12 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicToast from "./basic-toast";
-import ToastWithTitle from "./toast-with-title";
-import ToastWithAction from "./toast-with-action";
-import ToastVariant from "./toast-variant";
-import { basicToast, toastVariant, toastWithAction, toastWithTitle } from "./source-code";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicToast from "./basic-toast";
+import { basicToast, toastVariant, toastWithAction, toastWithTitle } from "./source-code";
+import ToastVariant from "./toast-variant";
+import ToastWithAction from "./toast-with-action";
+import ToastWithTitle from "./toast-with-title";
+
 const ToastPage = () => {
   return (
     <div>
@@ -27,4 +29,4 @@ const ToastPage = () => {
   );
 };
 
-export default ToastPage;
\ No newline at end of file
+export default ToastPage;
diff --git a/src/app/[locale]/(protected)/components/toast/source-code.ts b/src/app/[locale]/(protected)/components/toast/source-code.ts
index 9c7244c0..f549958d 100644
--- a/src/app/[locale]/(protected)/components/toast/source-code.ts
+++ b/src/app/[locale]/(protected)/components/toast/source-code.ts
@@ -1,4 +1,4 @@
-export const basicToast=`
+export const basicToast = `
 "use client"
 import { Button } from "@/components/ui/button"
 import { ToastAction } from "@/components/ui/toast"
@@ -23,9 +23,9 @@ const BasicToast = () => {
     </Button>
   )
 }
-export default BasicToast;`
+export default BasicToast;`;
 
-export const toastWithTitle=`"use client"
+export const toastWithTitle = `"use client"
 
 import { Button } from "@/components/ui/button"
 import { useToast } from "@/components/ui/use-toast"
@@ -48,9 +48,9 @@ const ToastWithTitle = () => {
   )
 }
 
-export default ToastWithTitle;`
+export default ToastWithTitle;`;
 
-export const toastWithAction=`"use client"
+export const toastWithAction = `"use client"
 
 import { Button } from "@/components/ui/button"
 import { ToastAction } from "@/components/ui/toast"
@@ -74,9 +74,9 @@ const ToastWithAction = () => {
     </Button>
   )
 }
-export default ToastWithAction;`
+export default ToastWithAction;`;
 
-export const toastVariant=`"use client"
+export const toastVariant = `"use client"
 
 import { Button } from "@/components/ui/button"
 import { ToastAction } from "@/components/ui/toast"
@@ -102,4 +102,4 @@ const ToastVariant = () => {
   )
 }
 
-export default ToastVariant;`
\ No newline at end of file
+export default ToastVariant;`;
diff --git a/src/app/[locale]/(protected)/components/toast/toast-variant.tsx b/src/app/[locale]/(protected)/components/toast/toast-variant.tsx
index 90db750b..5fccc57f 100644
--- a/src/app/[locale]/(protected)/components/toast/toast-variant.tsx
+++ b/src/app/[locale]/(protected)/components/toast/toast-variant.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
+import { Button } from "@/components/ui/button";
+import { ToastAction } from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
 
 const ToastVariant = () => {
-  const { toast } = useToast()
+  const { toast } = useToast();
 
   return (
     <Button
@@ -16,12 +16,12 @@ const ToastVariant = () => {
           title: "Uh oh! Something went wrong.",
           description: "There was a problem with your request.",
           action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
+        });
       }}
     >
       Show Toast
     </Button>
-  )
-}
+  );
+};
 
-export default ToastVariant;
\ No newline at end of file
+export default ToastVariant;
diff --git a/src/app/[locale]/(protected)/components/toast/toast-with-action.tsx b/src/app/[locale]/(protected)/components/toast/toast-with-action.tsx
index 1315d18c..b0f5426d 100644
--- a/src/app/[locale]/(protected)/components/toast/toast-with-action.tsx
+++ b/src/app/[locale]/(protected)/components/toast/toast-with-action.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
-import { ToastAction } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
+import { Button } from "@/components/ui/button";
+import { ToastAction } from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
 
 const ToastWithAction = () => {
-  const { toast } = useToast()
+  const { toast } = useToast();
 
   return (
     <Button
@@ -15,11 +15,11 @@ const ToastWithAction = () => {
           title: "Uh oh! Something went wrong.",
           description: "There was a problem with your request.",
           action: <ToastAction altText="Try again">Try again</ToastAction>,
-        })
+        });
       }}
     >
       Show Toast
     </Button>
-  )
-}
-export default ToastWithAction;
\ No newline at end of file
+  );
+};
+export default ToastWithAction;
diff --git a/src/app/[locale]/(protected)/components/toast/toast-with-title.tsx b/src/app/[locale]/(protected)/components/toast/toast-with-title.tsx
index 7aedea5f..616eddaa 100644
--- a/src/app/[locale]/(protected)/components/toast/toast-with-title.tsx
+++ b/src/app/[locale]/(protected)/components/toast/toast-with-title.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
-import { useToast } from "@/components/ui/use-toast"
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
 
 const ToastWithTitle = () => {
-  const { toast } = useToast()
+  const { toast } = useToast();
 
   return (
     <Button
@@ -13,12 +13,12 @@ const ToastWithTitle = () => {
         toast({
           title: "Uh oh! Something went wrong.",
           description: "There was a problem with your request.",
-        })
+        });
       }}
     >
       Show Toast
     </Button>
-  )
-}
+  );
+};
 
-export default ToastWithTitle;
\ No newline at end of file
+export default ToastWithTitle;
diff --git a/src/app/[locale]/(protected)/components/toggle/basic-toggle.tsx b/src/app/[locale]/(protected)/components/toggle/basic-toggle.tsx
index 2f7a8fe8..28bef0dd 100644
--- a/src/app/[locale]/(protected)/components/toggle/basic-toggle.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/basic-toggle.tsx
@@ -1,5 +1,6 @@
-import { Bold } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
+import { Bold } from "lucide-react";
+
+import { Toggle } from "@/components/ui/toggle";
 
 const BasicToggle = () => {
   return (
@@ -11,4 +12,4 @@ const BasicToggle = () => {
   );
 };
 
-export default BasicToggle;
\ No newline at end of file
+export default BasicToggle;
diff --git a/src/app/[locale]/(protected)/components/toggle/disabled-toggle.tsx b/src/app/[locale]/(protected)/components/toggle/disabled-toggle.tsx
index 2079059b..2fd5fd43 100644
--- a/src/app/[locale]/(protected)/components/toggle/disabled-toggle.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/disabled-toggle.tsx
@@ -1,5 +1,6 @@
-import { Underline } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
+import { Underline } from "lucide-react";
+
+import { Toggle } from "@/components/ui/toggle";
 
 const DisabledToggle = () => {
   return (
@@ -11,4 +12,4 @@ const DisabledToggle = () => {
   );
 };
 
-export default DisabledToggle;
\ No newline at end of file
+export default DisabledToggle;
diff --git a/src/app/[locale]/(protected)/components/toggle/layout.tsx b/src/app/[locale]/(protected)/components/toggle/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/toggle/layout.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/toggle/outline-toggle.tsx b/src/app/[locale]/(protected)/components/toggle/outline-toggle.tsx
index 0012c539..18e2bf7e 100644
--- a/src/app/[locale]/(protected)/components/toggle/outline-toggle.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/outline-toggle.tsx
@@ -1,5 +1,6 @@
-import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
+import { Italic } from "lucide-react";
+
+import { Toggle } from "@/components/ui/toggle";
 
 const OutlineToggle = () => {
   return (
@@ -11,4 +12,4 @@ const OutlineToggle = () => {
   );
 };
 
-export default OutlineToggle;
\ No newline at end of file
+export default OutlineToggle;
diff --git a/src/app/[locale]/(protected)/components/toggle/page.tsx b/src/app/[locale]/(protected)/components/toggle/page.tsx
index b5216013..5914469e 100644
--- a/src/app/[locale]/(protected)/components/toggle/page.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/page.tsx
@@ -1,12 +1,21 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicToggle from "./basic-toggle";
-import OutlineToggle from './outline-toggle';
-import ToggleWithText from "./toggle-with-text";
-import SizeToggle from "./size-toggle";
-import DisabledToggle from "./disabled-toggle";
-import ToggleGroups from "./toggle-groups";
-import { basicToggle, disabledToggle, outlineToggle, sizeToggle, toggleGroups, toggleWithText } from "./source-code";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicToggle from "./basic-toggle";
+import DisabledToggle from "./disabled-toggle";
+import OutlineToggle from "./outline-toggle";
+import SizeToggle from "./size-toggle";
+import {
+  basicToggle,
+  disabledToggle,
+  outlineToggle,
+  sizeToggle,
+  toggleGroups,
+  toggleWithText,
+} from "./source-code";
+import ToggleGroups from "./toggle-groups";
+import ToggleWithText from "./toggle-with-text";
+
 const TogglePage = () => {
   return (
     <div>
@@ -35,4 +44,4 @@ const TogglePage = () => {
   );
 };
 
-export default TogglePage;
\ No newline at end of file
+export default TogglePage;
diff --git a/src/app/[locale]/(protected)/components/toggle/size-toggle.tsx b/src/app/[locale]/(protected)/components/toggle/size-toggle.tsx
index 45905897..61c7939a 100644
--- a/src/app/[locale]/(protected)/components/toggle/size-toggle.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/size-toggle.tsx
@@ -1,5 +1,7 @@
-import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
+import { Italic } from "lucide-react";
+
+import { Toggle } from "@/components/ui/toggle";
+
 const SizeToggle = () => {
   return (
     <div className="flex gap-5 justify-center">
@@ -16,4 +18,4 @@ const SizeToggle = () => {
   );
 };
 
-export default SizeToggle;
\ No newline at end of file
+export default SizeToggle;
diff --git a/src/app/[locale]/(protected)/components/toggle/source-code.ts b/src/app/[locale]/(protected)/components/toggle/source-code.ts
index 3ce9c4ff..f93da545 100644
--- a/src/app/[locale]/(protected)/components/toggle/source-code.ts
+++ b/src/app/[locale]/(protected)/components/toggle/source-code.ts
@@ -1,4 +1,4 @@
-export const basicToggle=`import { Bold } from "lucide-react"
+export const basicToggle = `import { Bold } from "lucide-react"
 import { Toggle } from "@/components/ui/toggle"
 
 const BasicToggle = () => {
@@ -11,9 +11,9 @@ const BasicToggle = () => {
   );
 };
 
-export default BasicToggle;`
+export default BasicToggle;`;
 
-export const outlineToggle=`import { Italic } from "lucide-react"
+export const outlineToggle = `import { Italic } from "lucide-react"
 import { Toggle } from "@/components/ui/toggle"
 
 const OutlineToggle = () => {
@@ -26,9 +26,9 @@ const OutlineToggle = () => {
   );
 };
 
-export default OutlineToggle;`
+export default OutlineToggle;`;
 
-export const toggleWithText=`import { Italic } from "lucide-react"
+export const toggleWithText = `import { Italic } from "lucide-react"
 import { Toggle } from "@/components/ui/toggle"
 const ToggleWithText = () => {
   return (
@@ -41,9 +41,9 @@ const ToggleWithText = () => {
   );
 };
 
-export default ToggleWithText;`
+export default ToggleWithText;`;
 
-export const sizeToggle=`import { Italic } from "lucide-react"
+export const sizeToggle = `import { Italic } from "lucide-react"
 import { Toggle } from "@/components/ui/toggle"
 const SizeToggle = () => {
   return (
@@ -61,9 +61,9 @@ const SizeToggle = () => {
   );
 };
 
-export default SizeToggle;`
+export default SizeToggle;`;
 
-export const disabledToggle=`import { Underline } from "lucide-react"
+export const disabledToggle = `import { Underline } from "lucide-react"
 import { Toggle } from "@/components/ui/toggle"
 
 const DisabledToggle = () => {
@@ -76,9 +76,9 @@ const DisabledToggle = () => {
   );
 };
 
-export default DisabledToggle;`
+export default DisabledToggle;`;
 
-export const toggleGroups=`import { Bold, Italic, Underline } from "lucide-react"
+export const toggleGroups = `import { Bold, Italic, Underline } from "lucide-react"
 
 import {
   ToggleGroup,
@@ -103,4 +103,4 @@ const ToggleGroups = () => {
   );
 };
 
-export default ToggleGroups;`
\ No newline at end of file
+export default ToggleGroups;`;
diff --git a/src/app/[locale]/(protected)/components/toggle/toggle-groups.tsx b/src/app/[locale]/(protected)/components/toggle/toggle-groups.tsx
index addbb1dd..ad725367 100644
--- a/src/app/[locale]/(protected)/components/toggle/toggle-groups.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/toggle-groups.tsx
@@ -1,9 +1,6 @@
-import { Bold, Italic, Underline } from "lucide-react"
+import { Bold, Italic, Underline } from "lucide-react";
 
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/components/ui/toggle-group"
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
 const ToggleGroups = () => {
   return (
@@ -23,4 +20,4 @@ const ToggleGroups = () => {
   );
 };
 
-export default ToggleGroups;
\ No newline at end of file
+export default ToggleGroups;
diff --git a/src/app/[locale]/(protected)/components/toggle/toggle-with-text.tsx b/src/app/[locale]/(protected)/components/toggle/toggle-with-text.tsx
index 67a4ee79..0641eed7 100644
--- a/src/app/[locale]/(protected)/components/toggle/toggle-with-text.tsx
+++ b/src/app/[locale]/(protected)/components/toggle/toggle-with-text.tsx
@@ -1,5 +1,7 @@
-import { Italic } from "lucide-react"
-import { Toggle } from "@/components/ui/toggle"
+import { Italic } from "lucide-react";
+
+import { Toggle } from "@/components/ui/toggle";
+
 const ToggleWithText = () => {
   return (
     <div className="flex justify-center">
@@ -11,4 +13,4 @@ const ToggleWithText = () => {
   );
 };
 
-export default ToggleWithText;
\ No newline at end of file
+export default ToggleWithText;
diff --git a/src/app/[locale]/(protected)/components/tooltip/basic-tooltip.tsx b/src/app/[locale]/(protected)/components/tooltip/basic-tooltip.tsx
index 39656729..bdb4816c 100644
--- a/src/app/[locale]/(protected)/components/tooltip/basic-tooltip.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/basic-tooltip.tsx
@@ -1,4 +1,4 @@
-
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipArrow,
@@ -6,7 +6,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
 
 const BasicTooltip = () => {
   return (
@@ -24,7 +23,9 @@ const BasicTooltip = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button variant="outline" color="primary">Primary</Button>
+            <Button variant="outline" color="primary">
+              Primary
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="primary">
             <p>Primary Style</p>
@@ -34,7 +35,9 @@ const BasicTooltip = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="secondary" variant="outline">Secondary</Button>
+            <Button color="secondary" variant="outline">
+              Secondary
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="secondary">
             <p>Secondary Style</p>
@@ -44,7 +47,9 @@ const BasicTooltip = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="success" variant="outline">Success</Button>
+            <Button color="success" variant="outline">
+              Success
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="success">
             <p>Success Style</p>
@@ -54,7 +59,9 @@ const BasicTooltip = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="info" variant="outline">Info</Button>
+            <Button color="info" variant="outline">
+              Info
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="info">
             <p>Info Style</p>
@@ -64,7 +71,9 @@ const BasicTooltip = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="warning" variant="outline">Warning</Button>
+            <Button color="warning" variant="outline">
+              Warning
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="warning">
             <p>Warning Style</p>
@@ -74,7 +83,9 @@ const BasicTooltip = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="destructive" variant="outline">Destructive</Button>
+            <Button color="destructive" variant="outline">
+              Destructive
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="destructive">
             <p>Destructive Style</p>
@@ -85,4 +96,4 @@ const BasicTooltip = () => {
   );
 };
 
-export default BasicTooltip;
\ No newline at end of file
+export default BasicTooltip;
diff --git a/src/app/[locale]/(protected)/components/tooltip/control-tooltip.tsx b/src/app/[locale]/(protected)/components/tooltip/control-tooltip.tsx
index 9b0396bb..0cc5ad46 100644
--- a/src/app/[locale]/(protected)/components/tooltip/control-tooltip.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/control-tooltip.tsx
@@ -1,33 +1,29 @@
 "use client";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
 import { useState } from "react";
 
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
 const ControlTooltip = () => {
-    const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   return (
     <div className="space-y-3">
       <TooltipProvider>
         <Tooltip open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
           <TooltipTrigger asChild>
-            <Button color="primary" variant="outline">Hover Me</Button>
+            <Button color="primary" variant="outline">
+              Hover Me
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="primary">
             <p>Tooltip</p>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-      <p className="text-sm text-muted-foreground">
-        Open: {isOpen ? "true" : "false"}
-      </p>
+      <p className="text-sm text-muted-foreground">Open: {isOpen ? "true" : "false"}</p>
     </div>
   );
 };
 
-export default ControlTooltip;
\ No newline at end of file
+export default ControlTooltip;
diff --git a/src/app/[locale]/(protected)/components/tooltip/layout.tsx b/src/app/[locale]/(protected)/components/tooltip/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/tooltip/layout.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/tooltip/page.tsx b/src/app/[locale]/(protected)/components/tooltip/page.tsx
index df57efc8..c5db5cdf 100644
--- a/src/app/[locale]/(protected)/components/tooltip/page.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/page.tsx
@@ -1,12 +1,20 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicTooltip from "./basic-tooltip";
+import ControlTooltip from "./control-tooltip";
+import {
+  basicTooltip,
+  controlTooltip,
+  tooltipPosition,
+  tooltipWithDelay,
+  tooltupWithArrow,
+  variousTrigger,
+} from "./source-code";
 import TooltipPositions from "./tooltip-positions";
+import TooltipWithArrow from "./tooltip-with-arrow";
 import VariousTrigger from "./various-trigger";
 import WithDelay from "./with-delay";
-import ControlTooltip from "./control-tooltip";
-import BasicTooltip from "./basic-tooltip";
-import TooltipWithArrow from "./tooltip-with-arrow";
-import { basicTooltip, controlTooltip, tooltipPosition, tooltipWithDelay, tooltupWithArrow, variousTrigger } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const TooltipPage = () => {
   return (
@@ -36,4 +44,4 @@ const TooltipPage = () => {
   );
 };
 
-export default TooltipPage;
\ No newline at end of file
+export default TooltipPage;
diff --git a/src/app/[locale]/(protected)/components/tooltip/source-code.ts b/src/app/[locale]/(protected)/components/tooltip/source-code.ts
index e18edd07..ffdce0e8 100644
--- a/src/app/[locale]/(protected)/components/tooltip/source-code.ts
+++ b/src/app/[locale]/(protected)/components/tooltip/source-code.ts
@@ -1,4 +1,4 @@
-export const basicTooltip=`
+export const basicTooltip = `
 import {
   Tooltip,
   TooltipArrow,
@@ -85,9 +85,9 @@ const BasicTooltip = () => {
   );
 };
 
-export default BasicTooltip;`
+export default BasicTooltip;`;
 
-export const tooltupWithArrow=`
+export const tooltupWithArrow = `
 import {
   Tooltip,
   TooltipArrow,
@@ -181,9 +181,9 @@ const TooltipWithArrow = () => {
   );
 };
 
-export default TooltipWithArrow;`
+export default TooltipWithArrow;`;
 
-export const tooltipPosition=`
+export const tooltipPosition = `
 import {
   Tooltip,
   TooltipArrow,
@@ -245,9 +245,9 @@ const TooltipPositions = () => {
   );
 };
 
-export default TooltipPositions;`
+export default TooltipPositions;`;
 
-export const variousTrigger=`import {
+export const variousTrigger = `import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -297,9 +297,9 @@ const VariousTrigger = () => {
   );
 };
 
-export default VariousTrigger;`
+export default VariousTrigger;`;
 
-export const tooltipWithDelay=`"use client";
+export const tooltipWithDelay = `"use client";
 import React from "react";
 import {
   Tooltip,
@@ -346,9 +346,9 @@ const WithDelay = () => {
   );
 };
 
-export default WithDelay;`
+export default WithDelay;`;
 
-export const controlTooltip=`"use client";
+export const controlTooltip = `"use client";
 
 import {
   Tooltip,
@@ -380,4 +380,4 @@ const ControlTooltip = () => {
   );
 };
 
-export default ControlTooltip;`
\ No newline at end of file
+export default ControlTooltip;`;
diff --git a/src/app/[locale]/(protected)/components/tooltip/tooltip-positions.tsx b/src/app/[locale]/(protected)/components/tooltip/tooltip-positions.tsx
index 663af95f..5719778b 100644
--- a/src/app/[locale]/(protected)/components/tooltip/tooltip-positions.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/tooltip-positions.tsx
@@ -1,4 +1,4 @@
-
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipArrow,
@@ -6,7 +6,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
 
 const TooltipPositions = () => {
   return (
@@ -55,9 +54,8 @@ const TooltipPositions = () => {
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-
     </div>
   );
 };
 
-export default TooltipPositions;
\ No newline at end of file
+export default TooltipPositions;
diff --git a/src/app/[locale]/(protected)/components/tooltip/tooltip-with-arrow.tsx b/src/app/[locale]/(protected)/components/tooltip/tooltip-with-arrow.tsx
index b65f64e1..8d9a14b2 100644
--- a/src/app/[locale]/(protected)/components/tooltip/tooltip-with-arrow.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/tooltip-with-arrow.tsx
@@ -1,4 +1,4 @@
-
+import { Button } from "@/components/ui/button";
 import {
   Tooltip,
   TooltipArrow,
@@ -6,7 +6,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
 
 const TooltipWithArrow = () => {
   return (
@@ -25,9 +24,11 @@ const TooltipWithArrow = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button variant="outline" color="primary">Primary</Button>
+            <Button variant="outline" color="primary">
+              Primary
+            </Button>
           </TooltipTrigger>
-          <TooltipContent   color="primary">
+          <TooltipContent color="primary">
             <TooltipArrow className="fill-primary w-4 h-2" />
             <p>Primary Style</p>
           </TooltipContent>
@@ -36,7 +37,9 @@ const TooltipWithArrow = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="secondary" variant="outline">Secondary</Button>
+            <Button color="secondary" variant="outline">
+              Secondary
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="secondary">
             <TooltipArrow className="fill-secondary w-4 h-2" />
@@ -47,9 +50,11 @@ const TooltipWithArrow = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="success" variant="outline">Success</Button>
+            <Button color="success" variant="outline">
+              Success
+            </Button>
           </TooltipTrigger>
-          <TooltipContent  color="success">
+          <TooltipContent color="success">
             <TooltipArrow className="fill-success w-4 h-2" />
             <p>Success Style</p>
           </TooltipContent>
@@ -58,9 +63,11 @@ const TooltipWithArrow = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="info" variant="outline">Info</Button>
+            <Button color="info" variant="outline">
+              Info
+            </Button>
           </TooltipTrigger>
-          <TooltipContent  color="info">
+          <TooltipContent color="info">
             <TooltipArrow className="fill-info w-4 h-2" />
             <p>Success Style</p>
           </TooltipContent>
@@ -69,9 +76,11 @@ const TooltipWithArrow = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="warning" variant="outline">Warning</Button>
+            <Button color="warning" variant="outline">
+              Warning
+            </Button>
           </TooltipTrigger>
-          <TooltipContent  color="warning">
+          <TooltipContent color="warning">
             <TooltipArrow className="fill-warning w-4 h-2" />
             <p>Success Style</p>
           </TooltipContent>
@@ -80,9 +89,11 @@ const TooltipWithArrow = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button color="destructive" variant="outline">Destructive</Button>
+            <Button color="destructive" variant="outline">
+              Destructive
+            </Button>
           </TooltipTrigger>
-          <TooltipContent  color="destructive">
+          <TooltipContent color="destructive">
             <TooltipArrow className="fill-destructive w-4 h-2" />
             <p>Success Style</p>
           </TooltipContent>
@@ -92,4 +103,4 @@ const TooltipWithArrow = () => {
   );
 };
 
-export default TooltipWithArrow;
\ No newline at end of file
+export default TooltipWithArrow;
diff --git a/src/app/[locale]/(protected)/components/tooltip/various-trigger.tsx b/src/app/[locale]/(protected)/components/tooltip/various-trigger.tsx
index 6407910e..0128b2d1 100644
--- a/src/app/[locale]/(protected)/components/tooltip/various-trigger.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/various-trigger.tsx
@@ -1,12 +1,8 @@
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Button } from "@/components/ui/button";
 import { Copy, Scan } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
 const VariousTrigger = () => {
   return (
     <div className="flex flex-wrap gap-3">
@@ -23,7 +19,7 @@ const VariousTrigger = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button   variant="outline" size="icon">
+            <Button variant="outline" size="icon">
               <Scan className=" h-6 w-6" />
             </Button>
           </TooltipTrigger>
@@ -35,8 +31,8 @@ const VariousTrigger = () => {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button   variant="outline" size="icon">
-              <Copy  className=" h-6 w-6"/>
+            <Button variant="outline" size="icon">
+              <Copy className=" h-6 w-6" />
             </Button>
           </TooltipTrigger>
           <TooltipContent>
@@ -48,4 +44,4 @@ const VariousTrigger = () => {
   );
 };
 
-export default VariousTrigger;
\ No newline at end of file
+export default VariousTrigger;
diff --git a/src/app/[locale]/(protected)/components/tooltip/with-delay.tsx b/src/app/[locale]/(protected)/components/tooltip/with-delay.tsx
index 75b893c1..9b22587a 100644
--- a/src/app/[locale]/(protected)/components/tooltip/with-delay.tsx
+++ b/src/app/[locale]/(protected)/components/tooltip/with-delay.tsx
@@ -1,12 +1,9 @@
 "use client";
+
 import React from "react";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 const WithDelay = () => {
   return (
@@ -14,7 +11,9 @@ const WithDelay = () => {
       <TooltipProvider delayDuration={2000}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button  variant="outline" color="info" >Delay Open (2000ms)</Button>
+            <Button variant="outline" color="info">
+              Delay Open (2000ms)
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="info">
             <p>Tooltip Delay</p>
@@ -24,17 +23,21 @@ const WithDelay = () => {
       <TooltipProvider delayDuration={1000}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button  variant="outline" color="warning">Hover Me (delay 1000ms)</Button>
+            <Button variant="outline" color="warning">
+              Hover Me (delay 1000ms)
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="warning">
             <p>Tooltip Delay</p>
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
-      <TooltipProvider >
+      <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>
-            <Button  variant="outline" color="destructive">Then Hover me</Button>
+            <Button variant="outline" color="destructive">
+              Then Hover me
+            </Button>
           </TooltipTrigger>
           <TooltipContent color="destructive">
             <p>Tooltip Delay</p>
@@ -45,4 +48,4 @@ const WithDelay = () => {
   );
 };
 
-export default WithDelay;
\ No newline at end of file
+export default WithDelay;
diff --git a/src/app/[locale]/(protected)/components/typography/layout.tsx b/src/app/[locale]/(protected)/components/typography/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/components/typography/layout.tsx
+++ b/src/app/[locale]/(protected)/components/typography/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/components/typography/page.tsx b/src/app/[locale]/(protected)/components/typography/page.tsx
index 12d1e5fb..f8b0782f 100644
--- a/src/app/[locale]/(protected)/components/typography/page.tsx
+++ b/src/app/[locale]/(protected)/components/typography/page.tsx
@@ -1,7 +1,8 @@
-import { Link } from '@/i18n/navigation';
+import React from "react";
+import { Link } from "@/i18n/navigation";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Icon } from "@/components/ui/icon";
-import React from "react";
 
 type Props = {};
 
@@ -25,7 +26,7 @@ const lists = [
     id: 6,
   },
 ];
-const Typography = ({ }: Props) => {
+const Typography = ({}: Props) => {
   return (
     <div>
       {" "}
@@ -37,9 +38,8 @@ const Typography = ({ }: Props) => {
             </CardHeader>
             <CardContent>
               <div className="text-sm text-default-600 ">
-                All HTML headings, are available. .h1 through .h7 classes are
-                also available, for when you want to match the font styling of a
-                heading.
+                All HTML headings, are available. .h1 through .h7 classes are also available, for
+                when you want to match the font styling of a heading.
               </div>
               <div className="bg-default-100  text-xs text-default-600  flex justify-between py-3 px-6 items-center -mx-6 mt-6 mb-6 font-semibold">
                 <span>PREVIEW</span>
@@ -80,8 +80,8 @@ const Typography = ({ }: Props) => {
             </CardHeader>
             <CardContent>
               <div className="text-sm text-default-600 ">
-                All HTML headings are available with light and bold font-weight.
-                Use .font-weight-normal for light heading and .
+                All HTML headings are available with light and bold font-weight. Use
+                .font-weight-normal for light heading and .
               </div>
               <div className="bg-default-100  text-xs text-default-600  flex justify-between py-3 px-6 items-center -mx-6 mt-6 mb-6 font-semibold">
                 <span>LIGHT HEADINGS</span>
@@ -126,19 +126,13 @@ const Typography = ({ }: Props) => {
                   <thead>
                     <tr>
                       <th className="text-xs font-semibold bg-default-100 ">
-                        <span className="px-6 py-5 block text-default-600 ">
-                          Type
-                        </span>
+                        <span className="px-6 py-5 block text-default-600 ">Type</span>
                       </th>
                       <th className="text-xs font-semibold bg-default-100 ">
-                        <span className="px-6 py-5 block text-default-600 ">
-                          Class
-                        </span>
+                        <span className="px-6 py-5 block text-default-600 ">Class</span>
                       </th>
                       <th className="text-xs font-semibold bg-default-100 ">
-                        <span className="px-6 py-5 block text-default-600 ">
-                          Text
-                        </span>
+                        <span className="px-6 py-5 block text-default-600 ">Text</span>
                       </th>
                     </tr>
                   </thead>
@@ -151,10 +145,7 @@ const Typography = ({ }: Props) => {
                         text-lg
                       </td>
                       <td className="text-default-900  text-lg font-medium text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
+                        <div>Cupcake ipsum dolor sit amet fruitcake donut chocolate.</div>
                         <div className="text-xs text-default-500 dark:text-default-400 mt-1">
                           font-size: 18px / line-height: 28px / font-weight: 500
                         </div>
@@ -168,10 +159,7 @@ const Typography = ({ }: Props) => {
                         text-base
                       </td>
                       <td className="text-default-700  text-base font-normal text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
+                        <div>Cupcake ipsum dolor sit amet fruitcake donut chocolate.</div>
                         <div className="text-xs text-default-500 dark:text-default-400 mt-1">
                           font-size: 16px / line-height: 24px / font-weight: 400
                         </div>
@@ -185,10 +173,7 @@ const Typography = ({ }: Props) => {
                         text-sm
                       </td>
                       <td className="text-default-600  text-sm font-normal text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
+                        <div>Cupcake ipsum dolor sit amet fruitcake donut chocolate.</div>
                         <div className="text-xs text-default-500 dark:text-default-400 mt-1">
                           font-size: 14px / line-height: 20px / font-weight: 400
                         </div>
@@ -202,10 +187,7 @@ const Typography = ({ }: Props) => {
                         text-xs
                       </td>
                       <td className="text-default-600  text-xs font-normal text-left px-6 py-4">
-                        <div>
-                          Cupcake ipsum dolor sit amet fruitcake donut
-                          chocolate.
-                        </div>
+                        <div>Cupcake ipsum dolor sit amet fruitcake donut chocolate.</div>
                         <div className="text-xs text-default-500 dark:text-default-400 mt-1">
                           font-size: 12px / line-height: 18px / font-weight: 400
                         </div>
@@ -222,8 +204,7 @@ const Typography = ({ }: Props) => {
             </CardHeader>
             <CardContent>
               <div className="text-sm text-default-600  mb-6">
-                Use the included utility classes to recreate the small
-                secondary-500 heading text.
+                Use the included utility classes to recreate the small secondary-500 heading text.
               </div>
 
               <div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
@@ -252,8 +233,7 @@ const Typography = ({ }: Props) => {
             </CardHeader>
             <CardContent>
               <div className="text-sm text-default-600  mb-6">
-                Use the included utility classes to recreate the small
-                secondary-500 heading text.
+                Use the included utility classes to recreate the small secondary-500 heading text.
               </div>
 
               <div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
@@ -283,10 +263,9 @@ const Typography = ({ }: Props) => {
             </CardHeader>
             <CardContent>
               <div className="text-sm text-default-600  mb-6">
-                Traditional heading elements are designed to work best in the
-                meat of your page content. When you need a heading to stand out,
-                consider using a display heading—a larger, slightly more
-                opinionated heading style.
+                Traditional heading elements are designed to work best in the meat of your page
+                content. When you need a heading to stand out, consider using a display heading—a
+                larger, slightly more opinionated heading style.
               </div>
 
               <div className="text-[60px] md:flex font-medium justify-between items-center mb-3">
@@ -315,20 +294,15 @@ const Typography = ({ }: Props) => {
                     Styling for common inline HTML5 elements.
                   </p>
                   <p className="text-sm font-light text-default-900 ">
-                    <del>
-                      This line of text is meant to be treated as deleted text.
-                    </del>
+                    <del>This line of text is meant to be treated as deleted text.</del>
                   </p>
                   <p className="text-sm font-light text-default-900 ">
                     <Link href="#" className="underline">
-                      This line of text is meant to be treated as an addition to
-                      the document.
+                      This line of text is meant to be treated as an addition to the document.
                     </Link>
                   </p>
                   <p className="text-sm font-light text-default-900 ">
-                    <del>
-                      This line of text is meant to be treated as deleted text.
-                    </del>
+                    <del>This line of text is meant to be treated as deleted text.</del>
                   </p>
                 </div>
               </CardContent>
@@ -350,12 +324,10 @@ const Typography = ({ }: Props) => {
                   Styling for common inline HTML5 elements.
                 </p>
                 <p className="text-sm font-light text-warning">
-                  This is warning text You can archive this adding
-                  .text-warning class
+                  This is warning text You can archive this adding .text-warning class
                 </p>
                 <p className="text-sm font-light text-destructive">
-                  This is danger text You can archive this adding
-                  .text-danger class
+                  This is danger text You can archive this adding .text-danger class
                 </p>
               </CardContent>
             </Card>
@@ -413,28 +385,19 @@ const Typography = ({ }: Props) => {
                     </span>
                     <ul className="space-y-3 p-6 rounded-md bg-default-50  custom-list">
                       <li className="text-sm text-default-900 ">
-                        <span className="font-medium">
-                          {" "}
-                          Lorem ipsum dolor sit amet.
-                        </span>
+                        <span className="font-medium"> Lorem ipsum dolor sit amet.</span>
                         <ul className="lits-by-slash">
                           <li>Lorem ipsum dolor sit amet.</li>
                         </ul>
                       </li>
                       <li className="text-sm text-default-900 ">
-                        <span className="font-medium">
-                          {" "}
-                          Lorem ipsum dolor sit amet.
-                        </span>
+                        <span className="font-medium"> Lorem ipsum dolor sit amet.</span>
                         <ul className="lits-by-slash">
                           <li>Lorem ipsum dolor sit amet.</li>
                         </ul>
                       </li>
                       <li className="text-sm text-default-900 ">
-                        <span className="font-medium">
-                          {" "}
-                          Lorem ipsum dolor sit amet.
-                        </span>
+                        <span className="font-medium"> Lorem ipsum dolor sit amet.</span>
                         <ul className="lits-by-slash">
                           <li>Lorem ipsum dolor sit amet.</li>
                         </ul>
@@ -504,25 +467,22 @@ const Typography = ({ }: Props) => {
               </CardHeader>
               <CardContent className="space-y-5">
                 <blockquote className=" italic text-xl text-default-900 ">
-                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                  Accusamus laudantium omnis fugit ducimus nulla libero
-                  temporibus corrupti non voluptatem harum?
+                  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium
+                  omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum?
                   <span className="text-sm text-default-400 block mt-3">
                     Dashcode Admin Template
                   </span>
                 </blockquote>
                 <blockquote className=" italic text-xl border-primary-500 text-right text-default-900 ">
-                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                  Accusamus laudantium omnis fugit ducimus nulla libero
-                  temporibus corrupti non voluptatem harum?
+                  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium
+                  omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum?
                   <span className="text-sm text-default-400 block mt-3">
                     Dashcode Admin Template
                   </span>
                 </blockquote>
                 <blockquote className=" italic text-xl border-success-500 text-center text-default-900 ">
-                  Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                  Accusamus laudantium omnis fugit ducimus nulla libero
-                  temporibus corrupti non voluptatem harum?
+                  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus laudantium
+                  omnis fugit ducimus nulla libero temporibus corrupti non voluptatem harum?
                   <span className="text-sm text-default-400 block mt-3">
                     Dashcode Admin Template
                   </span>
diff --git a/src/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx b/src/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
index c545bd43..63414ccc 100644
--- a/src/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
+++ b/src/app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
@@ -1,15 +1,14 @@
 "use client";
-import React, { useState, useEffect, act } from "react";
-import FullCalendar from "@fullcalendar/react"; // must go before plugins
+
+import React, { act, useEffect, useState } from "react";
+import { EventContentArg } from "@fullcalendar/core";
 import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import ExternalDraggingevent from "./dragging-events";
-import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import FullCalendar from "@fullcalendar/react"; // must go before plugins
+
+import timeGridPlugin from "@fullcalendar/timegrid";
+import dayjs from "dayjs";
 import {
   Book,
   CheckCheck,
@@ -19,20 +18,15 @@ import {
   Timer,
   TimerIcon,
 } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { EventContentArg } from "@fullcalendar/core";
-import EventModal from "./event-modal";
 import { useTranslations } from "next-intl";
-import { getAgendaSettingsList } from "@/lib/services/agenda-setting/agenda-setting";
-import dayjs from "dayjs";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { CalendarCategory } from "./data";
+
 import { error } from "@/config/swal";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { getAgendaSettingsList } from "@/lib/services/agenda-setting/agenda-setting";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -40,6 +34,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
+import { CalendarCategory } from "./data";
+import ExternalDraggingevent from "./dragging-events";
+import EventModal from "./event-modal";
 
 const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
 interface CalendarViewProps {
@@ -114,9 +114,7 @@ interface APIResponse {
 }
 
 const CalendarView = ({ categories }: CalendarViewProps) => {
-  const [selectedCategory, setSelectedCategory] = useState<string[] | null>(
-    null
-  );
+  const [selectedCategory, setSelectedCategory] = useState<string[] | null>(null);
   const [selectedEventDate, setSelectedEventDate] = useState<Date | null>(null);
   const roleId = Number(getCookiesDecrypt("urie")) || 0;
   const userLevelId = Number(getCookiesDecrypt("ulie")) || 0;
@@ -124,8 +122,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   console.log("userlevel", userLevelId);
   const [apiEvents, setApiEvents] = useState<CalendarEvent[]>([]);
   const [Isloading, setLoading] = useState<boolean>(false);
-  const [draggableInitialized, setDraggableInitialized] =
-    useState<boolean>(false);
+  const [draggableInitialized, setDraggableInitialized] = useState<boolean>(false);
   const t = useTranslations("CalendarApp");
   // event canvas state
   const [sheetOpen, setSheetOpen] = useState<boolean>(false);
@@ -202,11 +199,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
   };
 
   const getYearlyEvents = async () => {
-    const res = await getAgendaSettingsList(
-      selectedMonth?.format("YYYY") || INITIAL_YEAR,
-      "",
-      ""
-    );
+    const res = await getAgendaSettingsList(selectedMonth?.format("YYYY") || INITIAL_YEAR, "", "");
     if (res?.error) {
       error(res.message);
       return false;
@@ -222,8 +215,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     selectedCategory?.includes(event.extendedProps.calendar)
   );
 
-  const displayedEvents =
-    filteredEvents?.length > 1 ? filteredEvents : apiEvents;
+  const displayedEvents = filteredEvents?.length > 1 ? filteredEvents : apiEvents;
 
   useEffect(() => {
     setSelectedCategory(categories?.map((c) => c.value));
@@ -361,9 +353,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
           <p className="ml-1">{title}</p>
         </div>
 
-        <p className="ml-1 text-xs text-start mt-2">
-          Created By : {createdByName}
-        </p>
+        <p className="ml-1 text-xs text-start mt-2">Created By : {createdByName}</p>
       </>
     );
   };
@@ -451,13 +441,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
     wait().then(() => (document.body.style.pointerEvents = "auto"));
   };
 
-  const ListItem: React.FC<ListItemProps> = ({
-    item,
-    text,
-    createdBy,
-    isPublish,
-    bgColor,
-  }) => (
+  const ListItem: React.FC<ListItemProps> = ({ item, text, createdBy, isPublish, bgColor }) => (
     <div
       className={`w-full p-1 mb-2 rounded-md text-white text-sm ${bgColor}`}
       onClick={() => handleClickListItem(item)}
@@ -562,9 +546,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
               <td className="px-4 py-2">{"MIA - 001"}</td>
               <td className="px-4 py-2">{"23/01/2025 13:00"}</td>
               <td className="px-4 py-2">{"Daily Issue 25 Januari 2025 "}</td>
-              <td className="px-4 py-2">
-                {type === "terkirim" ? "Completed" : "Completed"}
-              </td>
+              <td className="px-4 py-2">{type === "terkirim" ? "Completed" : "Completed"}</td>
             </tr>
           </tbody>
         </table>
@@ -663,12 +645,7 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
         <Card className="col-span-12 lg:col-span-8 2xl:col-span-9  pt-5">
           <CardContent className="dashcode-app-calendar">
             <FullCalendar
-              plugins={[
-                dayGridPlugin,
-                timeGridPlugin,
-                interactionPlugin,
-                listPlugin,
-              ]}
+              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
               headerToolbar={{
                 left: "prev,next today",
                 center: "title",
@@ -700,50 +677,32 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
                 handleDateChange(info.view.currentStart, info.view.currentEnd);
                 handleViewChange(info.view.type);
               }}
-              viewClassNames={
-                activeView === "listYear" ? "hide-calendar-grid" : ""
-              }
+              viewClassNames={activeView === "listYear" ? "hide-calendar-grid" : ""}
             />
 
             {activeView === "listYear" && (
               <div className="custom-ui">
                 <div className="flex gap-1 mt-1">
                   {months.slice(0, 3).map((month) => (
-                    <MonthCard
-                      key={month.id}
-                      monthId={month.id}
-                      label={month.label}
-                    />
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
                   ))}
                 </div>
 
                 <div className="flex gap-1 mt-1">
                   {months.slice(3, 6).map((month) => (
-                    <MonthCard
-                      key={month.id}
-                      monthId={month.id}
-                      label={month.label}
-                    />
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
                   ))}
                 </div>
 
                 <div className="flex gap-1 mt-1">
                   {months.slice(6, 9).map((month) => (
-                    <MonthCard
-                      key={month.id}
-                      monthId={month.id}
-                      label={month.label}
-                    />
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
                   ))}
                 </div>
 
                 <div className="flex gap-1 mt-1">
                   {months.slice(9, 12).map((month) => (
-                    <MonthCard
-                      key={month.id}
-                      monthId={month.id}
-                      label={month.label}
-                    />
+                    <MonthCard key={month.id} monthId={month.id} label={month.label} />
                   ))}
                 </div>
               </div>
diff --git a/src/app/[locale]/(protected)/contributor/agenda-setting/data.ts b/src/app/[locale]/(protected)/contributor/agenda-setting/data.ts
index 58b816da..6406264e 100644
--- a/src/app/[locale]/(protected)/contributor/agenda-setting/data.ts
+++ b/src/app/[locale]/(protected)/contributor/agenda-setting/data.ts
@@ -1,7 +1,8 @@
-import { getAgendaSettingsList } from "@/lib/services/agenda-setting/agenda-setting";
 import { faker } from "@faker-js/faker";
 import dayjs from "dayjs";
 
+import { getAgendaSettingsList } from "@/lib/services/agenda-setting/agenda-setting";
+
 const date = new Date();
 const prevDay = new Date().getDate() - 1;
 const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
@@ -119,32 +120,27 @@ export const categories = [
   {
     label: "Nasional",
     value: "mabes",
-    className:
-      "data-[state=checked]:bg-yellow-500 data-[state=checked]:ring-yellow-500",
+    className: "data-[state=checked]:bg-yellow-500 data-[state=checked]:ring-yellow-500",
   },
   {
     label: "Polda",
     value: "polda",
-    className:
-      "data-[state=checked]:bg-blue-400 data-[state=checked]:ring-blue-400",
+    className: "data-[state=checked]:bg-blue-400 data-[state=checked]:ring-blue-400",
   },
   {
     label: "Polres",
     value: "polres",
-    className:
-      "data-[state=checked]:bg-slate-400  data-[state=checked]:ring-slate-400 ",
+    className: "data-[state=checked]:bg-slate-400  data-[state=checked]:ring-slate-400 ",
   },
   {
     label: "Satker",
     value: "satker",
-    className:
-      "data-[state=checked]:bg-warning  data-[state=checked]:ring-warning ",
+    className: "data-[state=checked]:bg-warning  data-[state=checked]:ring-warning ",
   },
   {
     label: "Internasional",
     value: "international",
-    className:
-      "data-[state=checked]:bg-green-500 data-[state=checked]:ring-green-500 ",
+    className: "data-[state=checked]:bg-green-500 data-[state=checked]:ring-green-500 ",
   },
 ];
 
diff --git a/src/app/[locale]/(protected)/contributor/agenda-setting/dragging-events.tsx b/src/app/[locale]/(protected)/contributor/agenda-setting/dragging-events.tsx
index a3ca6fd9..cab70e4a 100644
--- a/src/app/[locale]/(protected)/contributor/agenda-setting/dragging-events.tsx
+++ b/src/app/[locale]/(protected)/contributor/agenda-setting/dragging-events.tsx
@@ -1,4 +1,5 @@
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
+
 const ExternalDraggingevent = ({ event }: any) => {
   const { title, id, tag } = event;
 
@@ -6,7 +7,8 @@ const ExternalDraggingevent = ({ event }: any) => {
     <div
       title={title}
       data-id={id}
-      className="fc-event  px-4 py-1.5 bg-default-100 dark:bg-default-300  rounded text-sm flex  items-center gap-2 shadow-sm  cursor-move" >
+      className="fc-event  px-4 py-1.5 bg-default-100 dark:bg-default-300  rounded text-sm flex  items-center gap-2 shadow-sm  cursor-move"
+    >
       <span
         className={cn("h-2 w-2 rounded-full block", {
           "bg-primary": tag === "business",
diff --git a/src/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx b/src/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
index a5aa2e50..d21c00b0 100644
--- a/src/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
+++ b/src/app/[locale]/(protected)/contributor/agenda-setting/event-modal.tsx
@@ -1,35 +1,36 @@
 // "use client";
-import React, { useState, useEffect, useRef, Fragment } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useForm, Controller } from "react-hook-form";
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
-import { format } from "date-fns";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Calendar } from "@/components/ui/calendar";
+import React, { Fragment, useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import { usePathname, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react";
+import WavesurferPlayer from "@wavesurfer/react";
+import { format } from "date-fns";
+import Cookies from "js-cookie";
+import { CalendarIcon, ChevronDown, ChevronUp, Loader2, Music } from "lucide-react";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { Controller, useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Upload } from "tus-js-client";
+import WaveSurfer from "wavesurfer.js";
 import { z } from "zod";
+
 import {
-  Loader2,
-  CalendarIcon,
-  ChevronUp,
-  ChevronDown,
-  Music,
-} from "lucide-react";
-import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
-import { CalendarCategory } from "./data";
+  deleteAgendaSettings,
+  getAgendaSettingsById,
+  publishAgendaSettings,
+  saveAgendaSettings,
+} from "@/lib/services/agenda-setting/agenda-setting";
+import { getCsrfToken } from "@/lib/services/auth";
+import { postSchedule } from "@/lib/services/schedule/schedule";
+import { getUserLevelForAssignments } from "@/lib/services/task";
+import { error, loading, success } from "@/lib/utils/swal";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -37,38 +38,27 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Textarea } from "@/components/ui/textarea";
-import { error, loading, success } from "@/lib/utils/swal";
-import Cookies from "js-cookie";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { postSchedule } from "@/lib/services/schedule/schedule";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  deleteAgendaSettings,
-  getAgendaSettingsById,
-  publishAgendaSettings,
-  saveAgendaSettings,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { Checkbox } from "@/components/ui/checkbox";
-import { getUserLevelForAssignments } from "@/lib/services/task";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import FileUploader from "@/components/features/form/shared/file-uploader";
-import { Upload } from "tus-js-client";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Icon } from "@iconify/react";
-import Image from "next/image";
-import { UnitMapping } from "./unit-mapping";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import DeleteConfirmationDialog from "@/components/ui/structures/delete-confirmation-dialog";
+import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/components/ui/use-toast";
-import { usePathname, useRouter } from "next/navigation";
-import { Card } from "@/components/ui/card";
-import WavesurferPlayer from "@wavesurfer/react";
-import WaveSurfer from "wavesurfer.js";
+import FileUploader from "@/components/features/form/shared/file-uploader";
+
+import { CalendarCategory } from "./data";
+import { UnitMapping } from "./unit-mapping";
 
 const schema = z.object({
   title: z.string().min(3, { message: "Required" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
 });
 
 interface FileWithPreview extends File {
@@ -115,18 +105,10 @@ const EventModal = ({
   const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
   const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
   const [audioFiles, setAudioFiles] = useState<FileWithPreview[]>([]);
-  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>([]);
+  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>([]);
+  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>([]);
+  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>([]);
   const { toast } = useToast();
   const [isImageUploadFinish, setIsImageUploadFinish] = useState(false);
   const [isVideoUploadFinish, setIsVideoUploadFinish] = useState(false);
@@ -183,18 +165,10 @@ const EventModal = ({
       }
 
       const attachments = detail?.attachments;
-      setImageUploadedFiles(
-        attachments?.filter((file: any) => file.fileTypeId == 1)
-      );
-      setVideoUploadedFiles(
-        attachments?.filter((file: any) => file.fileTypeId == 2)
-      );
-      setTextUploadedFiles(
-        attachments?.filter((file: any) => file.fileTypeId == 3)
-      );
-      setAudioUploadedFiles(
-        attachments?.filter((file: any) => file.fileTypeId == 4)
-      );
+      setImageUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 1));
+      setVideoUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 2));
+      setTextUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 3));
+      setAudioUploadedFiles(attachments?.filter((file: any) => file.fileTypeId == 4));
 
       const agendaType = detail?.agendaType;
       setWilayahPublish({
@@ -379,9 +353,7 @@ const EventModal = ({
       setStartDate(event?.event?.start);
       setEndDate(event?.event?.end);
       const eventCalendar = event?.event?.extendedProps?.calendar;
-      setAgendaType(
-        eventCalendar || (categories?.length > 0 && categories[0].value)
-      );
+      setAgendaType(eventCalendar || (categories?.length > 0 && categories[0].value));
     }
     setValue("title", event?.event?.title || "");
     setValue("description", event?.event?.description || "");
@@ -494,11 +466,7 @@ const EventModal = ({
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -531,20 +499,10 @@ const EventModal = ({
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/agenda-setting");
     }
   }
@@ -644,10 +602,7 @@ const EventModal = ({
         >
           <DialogHeader>
             <DialogTitle>
-              {event?.length > 1
-                ? "Edit Agenda Setting"
-                : "Create Agenda Setting"}{" "}
-              {event?.title}
+              {event?.length > 1 ? "Edit Agenda Setting" : "Create Agenda Setting"} {event?.title}
             </DialogTitle>
           </DialogHeader>
 
@@ -689,11 +644,7 @@ const EventModal = ({
                           !startDate && "text-muted-foreground"
                         )}
                       >
-                        {startDate ? (
-                          format(startDate, "PP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
+                        {startDate ? format(startDate, "PP") : <span>Pick a date</span>}
                         <CalendarIcon className="h-4 w-4" />
                       </Button>
                     </PopoverTrigger>
@@ -725,11 +676,7 @@ const EventModal = ({
                           !endDate && "text-muted-foreground"
                         )}
                       >
-                        {endDate ? (
-                          format(endDate, "PP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
+                        {endDate ? format(endDate, "PP") : <span>Pick a date</span>}
                         <CalendarIcon className="h-4 w-4" />
                       </Button>
                     </PopoverTrigger>
@@ -785,9 +732,7 @@ const EventModal = ({
                         <UnitMapping
                           unit="Polda"
                           isDetail={false}
-                          sendDataToParent={(data: any) =>
-                            setSelectedPolda(data)
-                          }
+                          sendDataToParent={(data: any) => setSelectedPolda(data)}
                         />
                       )}
                     </div>
@@ -804,9 +749,7 @@ const EventModal = ({
                         <UnitMapping
                           isDetail={false}
                           unit="Polres"
-                          sendDataToParent={(data: any) =>
-                            setSelectedPolres(data)
-                          }
+                          sendDataToParent={(data: any) => setSelectedPolres(data)}
                         />
                       )}
                     </div>
@@ -823,9 +766,7 @@ const EventModal = ({
                         <UnitMapping
                           isDetail={false}
                           unit="Satker"
-                          sendDataToParent={(data: any) =>
-                            setSelectedSatker(data)
-                          }
+                          sendDataToParent={(data: any) => setSelectedSatker(data)}
                         />
                       )}
                     </div>
@@ -835,10 +776,7 @@ const EventModal = ({
                         checked={wilayahPublish.international}
                         onCheckedChange={() => toggleWilayah("international")}
                       />
-                      <label
-                        htmlFor="international"
-                        className="ml-2 text-sm mr-2"
-                      >
+                      <label htmlFor="international" className="ml-2 text-sm mr-2">
                         Internasional
                       </label>
                     </div>
@@ -894,9 +832,7 @@ const EventModal = ({
                             className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
                           >
                             <div className="flex gap-3 items-center">
-                              <div className="file-preview">
-                                {renderFilePreview(file.url)}
-                              </div>
+                              <div className="file-preview">{renderFilePreview(file.url)}</div>
                               <div>
                                 <div className=" text-sm  text-card-foreground">
                                   {file.fileName}
@@ -941,9 +877,7 @@ const EventModal = ({
                             className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
                           >
                             <div className="flex gap-3 items-center">
-                              <div className="file-preview">
-                                {renderFilePreview(file.url)}
-                              </div>
+                              <div className="file-preview">{renderFilePreview(file.url)}</div>
                               <div>
                                 <div className=" text-sm  text-card-foreground">
                                   {file.fileName}
@@ -989,9 +923,7 @@ const EventModal = ({
                             className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
                           >
                             <div className="flex gap-3 items-center">
-                              <div className="file-preview">
-                                {renderFilePreview(file.url)}
-                              </div>
+                              <div className="file-preview">{renderFilePreview(file.url)}</div>
                               <div>
                                 <div className=" text-sm  text-card-foreground">
                                   {file.fileName}
@@ -1030,9 +962,7 @@ const EventModal = ({
                         }}
                         maxSize={100}
                         label="Upload file dengan format .mp3 atau .wav."
-                        onDrop={(files) =>
-                          setAudioFiles((prev) => [...prev, ...files])
-                        }
+                        onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                         className="mt-2"
                       />
                       {audioUploadedFiles?.map((file: any, index: number) => (
@@ -1053,18 +983,12 @@ const EventModal = ({
                             onClick={onPlayPause}
                             disabled={isPlaying}
                             className={`flex items-center gap-2 ${
-                              isPlaying
-                                ? "bg-gray-300 cursor-not-allowed"
-                                : "bg-primary text-white"
+                              isPlaying ? "bg-gray-300 cursor-not-allowed" : "bg-primary text-white"
                             } p-2 rounded`}
                           >
                             {isPlaying ? "Pause" : "Play"}
                             <Icon
-                              icon={
-                                isPlaying
-                                  ? "carbon:pause-outline"
-                                  : "famicons:play-sharp"
-                              }
+                              icon={isPlaying ? "carbon:pause-outline" : "famicons:play-sharp"}
                               className="h-5 w-5"
                             />
                           </Button>
@@ -1113,9 +1037,7 @@ const EventModal = ({
                         </Button>
                       </div>
                     )}
-                    {isRecording && (
-                      <p>Recording... {timer} seconds remaining</p>
-                    )}{" "}
+                    {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
                     {/* Display remaining time */}
                   </div>
                 </div>
diff --git a/src/app/[locale]/(protected)/contributor/agenda-setting/page.tsx b/src/app/[locale]/(protected)/contributor/agenda-setting/page.tsx
index a0244b2f..54d36d38 100644
--- a/src/app/[locale]/(protected)/contributor/agenda-setting/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/agenda-setting/page.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import { getEvents, getCategories } from "./utils";
-import { calendarEvents, Category } from "./data";
-import CalendarView from "./calender-view";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { useEffect, useState } from "react";
-import { CalendarCategory } from "./data";
+
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import CalendarView from "./calender-view";
+import { CalendarCategory, calendarEvents, Category } from "./data";
+import { getCategories, getEvents } from "./utils";
 
 const CalenderPage = () => {
-  
   const [categories, setCategories] = useState<CalendarCategory[]>([]);
   const userLevelNumber = Number(getCookiesDecrypt("ulne")) || 0;
   const userLevelId = Number(getCookiesDecrypt("ulie")) || 0;
@@ -20,32 +20,32 @@ const CalenderPage = () => {
     async function initData() {
       const events = await getEvents();
       const categories = await getCategories();
-      let valueShowed : string[] = [];
+      let valueShowed: string[] = [];
       if (userLevelNumber == 1) {
-        valueShowed = ['mabes', 'polda', 'polres', 'satker', 'international'];
+        valueShowed = ["mabes", "polda", "polres", "satker", "international"];
       } else if (userLevelNumber == 2 && userLevelId != 761) {
-        valueShowed = ['polda', 'polres'];
-      } else if ((userLevelNumber == 2 && userLevelId == 761) || (userLevelNumber == 3 && userParentLevelId == 761)) {
-        valueShowed = ['satker'];
+        valueShowed = ["polda", "polres"];
+      } else if (
+        (userLevelNumber == 2 && userLevelId == 761) ||
+        (userLevelNumber == 3 && userParentLevelId == 761)
+      ) {
+        valueShowed = ["satker"];
       } else if (userLevelNumber == 3 && userParentLevelId != 761) {
-        valueShowed = ['polres'];
+        valueShowed = ["polres"];
       }
-      
-      const formattedCategories = categories.filter((category: Category) => valueShowed.includes(category.value))
-      .map((category: Category) => ({
-        ...category,
-        activeClass: "",
-      }));
+
+      const formattedCategories = categories
+        .filter((category: Category) => valueShowed.includes(category.value))
+        .map((category: Category) => ({
+          ...category,
+          activeClass: "",
+        }));
       console.log(formattedCategories);
       setCategories(formattedCategories);
     }
   }, []);
 
-  return (
-    <div>
-      {categories && <CalendarView categories={categories} />}
-    </div>
-  );
+  return <div>{categories && <CalendarView categories={categories} />}</div>;
 };
 
 export default CalenderPage;
diff --git a/src/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx b/src/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx
index 82fc4274..5f5e81e2 100644
--- a/src/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx
+++ b/src/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping.tsx
@@ -1,6 +1,21 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { getUserLevelForAssignments } from "@/lib/services/task";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -10,22 +25,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { useEffect, useState } from "react";
-import { getUserLevelForAssignments } from "@/lib/services/task";
 
 const FormSchema = z.object({
   items: z.array(z.string()).refine((value) => value.some((item) => item), {
@@ -47,12 +48,8 @@ export function UnitMapping(props: {
 }) {
   const { unit, sendDataToParent, isDetail } = props;
   const [unitList, setUnitList] = useState<UnitType[]>([]);
-  const [satkerList, setSatkerList] = useState<{ id: number; name: string }[]>(
-    []
-  );
-  const [polresList, setPolresList] = useState<{ id: number; name: string }[]>(
-    []
-  );
+  const [satkerList, setSatkerList] = useState<{ id: number; name: string }[]>([]);
+  const [polresList, setPolresList] = useState<{ id: number; name: string }[]>([]);
   const [isOpen, setIsOpen] = useState(false);
 
   const form = useForm<z.infer<typeof FormSchema>>({
@@ -74,15 +71,9 @@ export function UnitMapping(props: {
 
   const unitType = form.watch("items");
 
-  const isAllUnitChecked = unitList.every((item) =>
-    unitType?.includes(String(item.id))
-  );
-  const isAllSatkerChecked = satkerList.every((item) =>
-    unitType?.includes(String(item.id))
-  );
-  const isAllPolresChecked = polresList.every((item) =>
-    unitType?.includes(String(item.id))
-  );
+  const isAllUnitChecked = unitList.every((item) => unitType?.includes(String(item.id)));
+  const isAllSatkerChecked = satkerList.every((item) => unitType?.includes(String(item.id)));
+  const isAllPolresChecked = polresList.every((item) => unitType?.includes(String(item.id)));
 
   const setupUnit = (data: UnitType[]) => {
     const temp = data.filter((a) => a.name.includes("POLDA"));
@@ -100,10 +91,7 @@ export function UnitMapping(props: {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <a
-          onClick={() => setIsOpen(true)}
-          className="text-primary cursor-pointer text-xs mr-3"
-        >
+        <a onClick={() => setIsOpen(true)} className="text-primary cursor-pointer text-xs mr-3">
           Pilih {unit}
         </a>
       </DialogTrigger>
@@ -120,8 +108,8 @@ export function UnitMapping(props: {
                   unit === "Polda"
                     ? isAllUnitChecked
                     : unit === "Satker"
-                    ? isAllSatkerChecked
-                    : isAllPolresChecked
+                      ? isAllSatkerChecked
+                      : isAllPolresChecked
                 }
                 disabled={isDetail}
                 onCheckedChange={(checked) => {
@@ -131,8 +119,8 @@ export function UnitMapping(props: {
                       unit === "Polda"
                         ? unitList.map((item) => String(item.id))
                         : unit === "Satker"
-                        ? satkerList.map((item) => String(item.id))
-                        : polresList.map((item) => String(item.id))
+                          ? satkerList.map((item) => String(item.id))
+                          : polresList.map((item) => String(item.id))
                     );
                   } else {
                     form.setValue("items", []);
@@ -152,46 +140,38 @@ export function UnitMapping(props: {
                     unit === "Polda" ? "2" : unit === "Satker" ? "3" : "4"
                   }`}
                 >
-                  {(unit === "Polda"
-                    ? unitList
-                    : unit === "Satker"
-                    ? satkerList
-                    : polresList
-                  )?.map((item: any) => (
-                    <FormField
-                      key={item.id}
-                      control={form.control}
-                      name="items"
-                      render={({ field }) => {
-                        return (
-                          <FormItem
-                            key={String(item.id)}
-                            className="flex flex-row items-center space-x-3 space-y-0"
-                          >
-                            <FormControl>
-                              <Checkbox
-                                disabled={isDetail}
-                                checked={field.value?.includes(String(item.id))}
-                                onCheckedChange={(checked) => {
-                                  return checked
-                                    ? field.onChange([
-                                        ...field.value,
-                                        String(item.id),
-                                      ])
-                                    : field.onChange(
-                                        field.value?.filter(
-                                          (value) => value !== String(item.id)
-                                        )
-                                      );
-                                }}
-                              />
-                            </FormControl>
-                            <p className="text-sm text-black">{item.name}</p>
-                          </FormItem>
-                        );
-                      }}
-                    />
-                  ))}
+                  {(unit === "Polda" ? unitList : unit === "Satker" ? satkerList : polresList)?.map(
+                    (item: any) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="items"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={String(item.id)}
+                              className="flex flex-row items-center space-x-3 space-y-0"
+                            >
+                              <FormControl>
+                                <Checkbox
+                                  disabled={isDetail}
+                                  checked={field.value?.includes(String(item.id))}
+                                  onCheckedChange={(checked) => {
+                                    return checked
+                                      ? field.onChange([...field.value, String(item.id)])
+                                      : field.onChange(
+                                          field.value?.filter((value) => value !== String(item.id))
+                                        );
+                                  }}
+                                />
+                              </FormControl>
+                              <p className="text-sm text-black">{item.name}</p>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    )
+                  )}
                   <FormMessage />
                 </FormItem>
               )}
diff --git a/src/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx b/src/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
index b405f72a..3dc94530 100644
--- a/src/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
@@ -1,39 +1,31 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { ChevronDown, Plus, Search } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { useTranslations } from "next-intl";
+
 import { getBlogCategory, paginationBlog } from "@/lib/services/blog/blog";
+import { listEnableCategory } from "@/lib/services/content/content";
 import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -42,11 +34,20 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { useTranslations } from "next-intl";
-import { CardHeader, CardTitle } from "@/components/ui/card";
-import { Link } from "@/i18n/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const BlogTable = () => {
@@ -56,11 +57,8 @@ const BlogTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -72,9 +70,7 @@ const BlogTable = () => {
   const [limit, setLimit] = React.useState(10);
   const [search, setSearch] = React.useState<string>("");
   const [categories, setCategories] = React.useState<any[]>([]);
-  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
-    []
-  );
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>([]);
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const columns = useTableColumns();
@@ -113,13 +109,7 @@ const BlogTable = () => {
 
   async function fetchData() {
     try {
-      const res = await paginationBlog(
-        showData,
-        page - 1,
-        search,
-        categoryFilter,
-        statusFilter
-      );
+      const res = await paginationBlog(showData, page - 1, search, categoryFilter, statusFilter);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -164,9 +154,7 @@ const BlogTable = () => {
 
   function handleStatusCheckboxChange(value: any) {
     setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status: any) => status !== value) : [...prev, value]
     );
   }
 
@@ -221,22 +209,11 @@ const BlogTable = () => {
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent className="w-56 text-sm">
-                    <DropdownMenuRadioGroup
-                      value={showData}
-                      onValueChange={setShowData}
-                    >
-                      <DropdownMenuRadioItem value="10">
-                        1 - 10 Data
-                      </DropdownMenuRadioItem>
-                      <DropdownMenuRadioItem value="50">
-                        1 - 50 Data
-                      </DropdownMenuRadioItem>
-                      <DropdownMenuRadioItem value="100">
-                        1 - 100 Data
-                      </DropdownMenuRadioItem>
-                      <DropdownMenuRadioItem value="250">
-                        1 - 250 Data
-                      </DropdownMenuRadioItem>
+                    <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                      <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                     </DropdownMenuRadioGroup>
                   </DropdownMenuContent>
                 </DropdownMenu>
@@ -247,20 +224,14 @@ const BlogTable = () => {
                     Filter <ChevronDown />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="end"
-                  className="w-64 h-[200px] overflow-y-auto"
-                >
+                <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                   <div className="flex flex-row justify-between my-1 mx-1">
                     <p>Filter</p>
                   </div>
                   <Label className="ml-2">{t("category")}</Label>
                   {categories.length > 0 ? (
                     categories.map((category) => (
-                      <div
-                        key={category.id}
-                        className="flex items-center px-4 py-1"
-                      >
+                      <div key={category.id} className="flex items-center px-4 py-1">
                         <input
                           type="checkbox"
                           id={`category-${category.id}`}
@@ -268,18 +239,13 @@ const BlogTable = () => {
                           checked={selectedCategories.includes(category.id)}
                           onChange={() => handleCheckboxChange(category.id)}
                         />
-                        <label
-                          htmlFor={`category-${category.id}`}
-                          className="text-sm"
-                        >
+                        <label htmlFor={`category-${category.id}`} className="text-sm">
                           {category.name}
                         </label>
                       </div>
                     ))
                   ) : (
-                    <p className="text-sm text-gray-500 px-4 py-2">
-                      No categories found.
-                    </p>
+                    <p className="text-sm text-gray-500 px-4 py-2">No categories found.</p>
                   )}
                   <Label className="ml-2 mt-2">Status</Label>
                   <div className="flex items-center px-4 py-1">
@@ -350,9 +316,7 @@ const BlogTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -371,10 +335,7 @@ const BlogTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -390,31 +351,21 @@ const BlogTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/contributor/blog/components/columns.tsx b/src/app/[locale]/(protected)/contributor/blog/components/columns.tsx
index f22666bc..61c0a634 100644
--- a/src/app/[locale]/(protected)/contributor/blog/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/blog/components/columns.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteBlog } from "@/lib/services/blog/blog";
+import { error, loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link, useRouter } from "@/i18n/navigation";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { deleteBlog } from "@/lib/services/blog/blog";
-import { error, loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -31,9 +31,7 @@ const useTableColumns = () => {
     {
       accessorKey: "title",
       header: t("title"),
-      cell: ({ row }) => (
-        <span className="whitespace-normal">{row.getValue("title")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-normal">{row.getValue("title")}</span>,
     },
     {
       accessorKey: "categoryName",
@@ -44,10 +42,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -75,8 +70,7 @@ const useTableColumns = () => {
         const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
 
         // Gunakan `statusName` untuk pencocokan
-        const statusStyles =
-          statusColors[statusName] || "bg-gray-100 text-gray-600";
+        const statusStyles = statusColors[statusName] || "bg-gray-100 text-gray-600";
 
         return (
           <Badge className={cn("rounded-full px-5", statusStyles)}>
diff --git a/src/app/[locale]/(protected)/contributor/blog/create/page.tsx b/src/app/[locale]/(protected)/contributor/blog/create/page.tsx
index c7288b3f..5b56700a 100644
--- a/src/app/[locale]/(protected)/contributor/blog/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/blog/create/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormImage from "@/components/features/form/content/image-form";
 import FormBlog from "@/components/features/form/blog/blog-form";
+import FormImage from "@/components/features/form/content/image-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const BlogCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/blog/page.tsx b/src/app/[locale]/(protected)/contributor/blog/page.tsx
index 2d53ebce..f193880c 100644
--- a/src/app/[locale]/(protected)/contributor/blog/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/blog/page.tsx
@@ -1,9 +1,11 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BlogTable from "./components/blog-table";
-import { Plus } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/i18n/navigation";
+import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BlogTable from "./components/blog-table";
 
 const BlogPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx b/src/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
index 3fcd9705..79756b9b 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteMedia } from "@/lib/services/content/content";
+import { error } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import withReactContent from "sweetalert2-react-content";
-import { deleteMedia } from "@/lib/services/content/content";
-import { error } from "@/lib/utils/swal";
-import Swal from "sweetalert2";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -51,20 +51,13 @@ const useTableColumns = () => {
     {
       accessorKey: "categoryName",
       header: t("category-name"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("categoryName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>,
     },
     {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -76,17 +69,13 @@ const useTableColumns = () => {
     {
       accessorKey: "creatorName",
       header: t("creator-group"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>,
     },
     {
       accessorKey: "creatorGroupLevelName",
       header: t("source"),
       cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("creatorGroupLevelName")}
-        </span>
+        <span className="whitespace-nowrap">{row.getValue("creatorGroupLevelName")}</span>
       ),
     },
     {
@@ -126,16 +115,10 @@ const useTableColumns = () => {
         const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
 
         // Gunakan `statusName` untuk pencocokan
-        const statusStyles =
-          statusColors[statusName] || "bg-gray-100 text-gray-600";
+        const statusStyles = statusColors[statusName] || "bg-gray-100 text-gray-600";
 
         return (
-          <Badge
-            className={cn(
-              "rounded-full px-5 w-full whitespace-nowrap",
-              statusStyles
-            )}
-          >
+          <Badge className={cn("rounded-full px-5 w-full whitespace-nowrap", statusStyles)}>
             {status} {/* Tetap tampilkan nilai asli */}
           </Badge>
         );
@@ -204,17 +187,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/content/audio/detail/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/audio/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/contributor/content/audio/update/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/audio/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx b/src/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
index e2459ef4..c83ecc26 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { format } from "date-fns";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +28,19 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import {
+  listDataAudio,
+  listDataImage,
+  listDataVideo,
+  listEnableCategory,
+} from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,20 +52,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-  listEnableCategory,
-} from "@/lib/services/content/content";
 import { Label } from "@/components/ui/label";
-import { format } from "date-fns";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const TableAudio = () => {
@@ -72,11 +73,8 @@ const TableAudio = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -91,9 +89,7 @@ const TableAudio = () => {
   const userLevelId = getCookiesDecrypt("ulie");
 
   const [categories, setCategories] = React.useState<any[]>([]);
-  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
-    []
-  );
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>([]);
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
@@ -135,15 +131,7 @@ const TableAudio = () => {
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("4");
@@ -173,12 +161,8 @@ const TableAudio = () => {
   };
 
   async function fetchData() {
-    const formattedStartDate = startDate
-      ? format(new Date(startDate), "yyyy-MM-dd")
-      : "";
-    const formattedEndDate = endDate
-      ? format(new Date(endDate), "yyyy-MM-dd")
-      : "";
+    const formattedStartDate = startDate ? format(new Date(startDate), "yyyy-MM-dd") : "";
+    const formattedEndDate = endDate ? format(new Date(endDate), "yyyy-MM-dd") : "";
     try {
       const isForSelf = Number(roleId) === 4;
       const res = await listDataAudio(
@@ -216,9 +200,7 @@ const TableAudio = () => {
     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
   };
 
-  const handleSearchFilterBySource = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterBySource = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterBySource(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -226,15 +208,11 @@ const TableAudio = () => {
 
   function handleStatusCheckboxChange(value: any) {
     setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status: any) => status !== value) : [...prev, value]
     );
   }
 
-  const handleSearchFilterByCreator = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterByCreator = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterByCreator(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -267,22 +245,11 @@ const TableAudio = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -293,10 +260,7 @@ const TableAudio = () => {
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                   {/* <p
@@ -309,10 +273,7 @@ const TableAudio = () => {
                 <Label className="ml-2">Kategori</Label>
                 {categories.length > 0 ? (
                   categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
+                    <div key={category.id} className="flex items-center px-4 py-1">
                       <input
                         type="checkbox"
                         id={`category-${category.id}`}
@@ -320,18 +281,13 @@ const TableAudio = () => {
                         checked={selectedCategories.includes(category.id)}
                         onChange={() => handleCheckboxChange(category.id)}
                       />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
+                      <label htmlFor={`category-${category.id}`} className="text-sm">
                         {category.name}
                       </label>
                     </div>
                   ))
                 ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
+                  <p className="text-sm text-gray-500 px-4 py-2">No categories found.</p>
                 )}
                 <div className="mx-2 my-1">
                   <Label>Tanggal Awal</Label>
@@ -439,9 +395,7 @@ const TableAudio = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -460,10 +414,7 @@ const TableAudio = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -493,11 +444,7 @@ const TableAudio = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/create/page.tsx b/src/app/[locale]/(protected)/contributor/content/audio/create/page.tsx
index 53975908..fe6d9661 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/create/page.tsx
@@ -1,5 +1,5 @@
-import FormAudio from "@/components/features/form/content/audio-form";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormAudio from "@/components/features/form/content/audio-form";
 
 const AudioCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/detail/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/content/audio/detail/[id]/page.tsx
index 9ecefc77..54c80b0e 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/detail/[id]/page.tsx
@@ -1,6 +1,6 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormImageDetail from "@/components/features/form/content/image-detail-form";
 import FormAudioDetail from "@/components/features/form/content/audio-detail-form";
+import FormImageDetail from "@/components/features/form/content/image-detail-form";
 
 const AudioDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/layout.tsx b/src/app/[locale]/(protected)/contributor/content/audio/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/layout.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/page.tsx b/src/app/[locale]/(protected)/contributor/content/audio/page.tsx
index 1737f50c..1718fbc3 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/page.tsx
@@ -1,12 +1,15 @@
 "use client";
+
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { UploadIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { UploadIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react/dist/iconify.js";
+
 import TableAudio from "./components/table-audio";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const ReactTableAudioPage = () => {
   const t = useTranslations("AnalyticsDashboard");
@@ -24,9 +27,7 @@ const ReactTableAudioPage = () => {
                 <p>
                   <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">
-                  {t("Hasil_unggah_disetujui_hari_ini")}
-                </p>
+                <p className="text-sm">{t("Hasil_unggah_disetujui_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -57,9 +58,7 @@ const ReactTableAudioPage = () => {
           <CardHeader className="border-b border-solid border-default-200 mb-6">
             <CardTitle>
               <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  {t("audio")}
-                </div>
+                <div className="flex-1 text-xl font-medium text-default-900">{t("audio")}</div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/audio/create"}>
                     <Button color="primary" className="text-white">
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/update-seo/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/content/audio/update-seo/[id]/page.tsx
index b48fc15b..bed2be5a 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/update-seo/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/update-seo/[id]/page.tsx
@@ -1,8 +1,8 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormImageDetail from "@/components/features/form/content/image-detail-form";
-import FormImageUpdate from "@/components/features/form/content/image-update-form";
 import FormAudioUpdate from "@/components/features/form/content/audio-update-form";
 import FormAudioSeo from "@/components/features/form/content/audio-update-seo";
+import FormImageDetail from "@/components/features/form/content/image-detail-form";
+import FormImageUpdate from "@/components/features/form/content/image-update-form";
 
 const AudioUpdatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/audio/update/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/content/audio/update/[id]/page.tsx
index f1622cf8..e016d19c 100644
--- a/src/app/[locale]/(protected)/contributor/content/audio/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/audio/update/[id]/page.tsx
@@ -1,7 +1,7 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormAudioUpdate from "@/components/features/form/content/audio-update-form";
 import FormImageDetail from "@/components/features/form/content/image-detail-form";
 import FormImageUpdate from "@/components/features/form/content/image-update-form";
-import FormAudioUpdate from "@/components/features/form/content/audio-update-form";
 
 const AudioUpdatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/src/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
index 56a610ca..43ee4573 100644
--- a/src/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
@@ -1,26 +1,27 @@
 "use client";
-import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
 
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteMedia } from "@/lib/services/content/content";
+import { error, loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { useRouter } from "next/navigation";
 import { useToast } from "@/components/ui/use-toast";
-import { deleteMedia } from "@/lib/services/content/content";
-import { error, loading } from "@/lib/utils/swal";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -54,20 +55,13 @@ const useTableColumns = () => {
     {
       accessorKey: "categoryName",
       header: t("category-name"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("categoryName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>,
     },
     {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -79,17 +73,13 @@ const useTableColumns = () => {
     {
       accessorKey: "creatorName",
       header: t("creator-group"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>,
     },
     {
       accessorKey: "creatorGroupLevelName",
       header: t("source"),
       cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("creatorGroupLevelName")}
-        </span>
+        <span className="whitespace-nowrap">{row.getValue("creatorGroupLevelName")}</span>
       ),
     },
     {
@@ -127,16 +117,10 @@ const useTableColumns = () => {
 
         const status = row.getValue("statusName") as string;
         const statusName = status?.toLocaleLowerCase();
-        const statusStyles =
-          statusColors[statusName] || "bg-red-200 text-red-600";
+        const statusStyles = statusColors[statusName] || "bg-red-200 text-red-600";
 
         return (
-          <Badge
-            className={cn(
-              "rounded-full px-5 w-full whitespace-nowrap",
-              statusStyles
-            )}
-          >
+          <Badge className={cn("rounded-full px-5 w-full whitespace-nowrap", statusStyles)}>
             {status} {/* Tetap tampilkan nilai asli */}
           </Badge>
         );
@@ -207,17 +191,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/contributor/content/image/update/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/image/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx b/src/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
index 82bb9cdf..7ea893f3 100644
--- a/src/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { format } from "date-fns";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +28,19 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+import { toast } from "sonner";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { loading } from "@/config/swal";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { deleteMedia, listDataImage, listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { error } from "@/lib/utils/swal";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,25 +52,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
 
-import {
-  deleteMedia,
-  listDataImage,
-  listEnableCategory,
-} from "@/lib/services/content/content";
-import { loading } from "@/config/swal";
-
-import { toast } from "sonner";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { error } from "@/lib/utils/swal";
-import { Label } from "@/components/ui/label";
-import { format } from "date-fns";
 import useTableColumns from "./columns";
 
 const TableImage = () => {
@@ -77,11 +72,8 @@ const TableImage = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -95,9 +87,7 @@ const TableImage = () => {
   const userLevelId = getCookiesDecrypt("ulie");
 
   const [categories, setCategories] = React.useState<any[]>([]);
-  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
-    []
-  );
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>([]);
 
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
@@ -140,15 +130,7 @@ const TableImage = () => {
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("1");
@@ -178,12 +160,8 @@ const TableImage = () => {
   };
 
   async function fetchData() {
-    const formattedStartDate = startDate
-      ? format(new Date(startDate), "yyyy-MM-dd")
-      : "";
-    const formattedEndDate = endDate
-      ? format(new Date(endDate), "yyyy-MM-dd")
-      : "";
+    const formattedStartDate = startDate ? format(new Date(startDate), "yyyy-MM-dd") : "";
+    const formattedEndDate = endDate ? format(new Date(endDate), "yyyy-MM-dd") : "";
     try {
       const isForSelf = Number(roleId) === 4;
       const res = await listDataImage(
@@ -221,9 +199,7 @@ const TableImage = () => {
     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
   };
 
-  const handleSearchFilterBySource = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterBySource = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterBySource(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -231,15 +207,11 @@ const TableImage = () => {
 
   function handleStatusCheckboxChange(value: any) {
     setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status: any) => status !== value) : [...prev, value]
     );
   }
 
-  const handleSearchFilterByCreator = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterByCreator = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterByCreator(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -272,22 +244,11 @@ const TableImage = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -298,10 +259,7 @@ const TableImage = () => {
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                   {/* <p
@@ -314,10 +272,7 @@ const TableImage = () => {
                 <Label className="ml-2">Kategori</Label>
                 {categories.length > 0 ? (
                   categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
+                    <div key={category.id} className="flex items-center px-4 py-1">
                       <input
                         type="checkbox"
                         id={`category-${category.id}`}
@@ -325,18 +280,13 @@ const TableImage = () => {
                         checked={selectedCategories.includes(category.id)}
                         onChange={() => handleCheckboxChange(category.id)}
                       />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
+                      <label htmlFor={`category-${category.id}`} className="text-sm">
                         {category.name}
                       </label>
                     </div>
                   ))
                 ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
+                  <p className="text-sm text-gray-500 px-4 py-2">No categories found.</p>
                 )}
                 <div className="mx-2 my-1">
                   <Label>Tanggal Awal</Label>
@@ -444,9 +394,7 @@ const TableImage = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -465,10 +413,7 @@ const TableImage = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -498,11 +443,7 @@ const TableImage = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/content/image/create/page.tsx b/src/app/[locale]/(protected)/contributor/content/image/create/page.tsx
index ce77efc5..b24d5df2 100644
--- a/src/app/[locale]/(protected)/contributor/content/image/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/image/create/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormImage from "@/components/features/form/content/image-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const ImageCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/image/layout.tsx b/src/app/[locale]/(protected)/contributor/content/image/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/contributor/content/image/layout.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/image/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/contributor/content/image/page.tsx b/src/app/[locale]/(protected)/contributor/content/image/page.tsx
index 08494cbb..95315c3a 100644
--- a/src/app/[locale]/(protected)/contributor/content/image/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/image/page.tsx
@@ -1,12 +1,15 @@
 "use client";
+
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { UploadIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import TableImage from "./components/table-image";
-import { UploadIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const ReactTableImagePage = () => {
   const t = useTranslations("AnalyticsDashboard");
@@ -24,9 +27,7 @@ const ReactTableImagePage = () => {
                 <p>
                   <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">
-                  {t("Hasil_unggah_disetujui_hari_ini")}
-                </p>
+                <p className="text-sm">{t("Hasil_unggah_disetujui_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -57,9 +58,7 @@ const ReactTableImagePage = () => {
           <CardHeader className="border-b border-solid border-default-200 mb-6">
             <CardTitle>
               <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  {t("image")}
-                </div>
+                <div className="flex-1 text-xl font-medium text-default-900">{t("image")}</div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/image/create"}>
                     <Button color="primary" className="text-white">
diff --git a/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/columns.tsx b/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/columns.tsx
index e7e8a5f4..bb31af39 100644
--- a/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/columns.tsx
@@ -1,17 +1,17 @@
 import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
 
 interface Category {
   id: number;
@@ -49,25 +49,19 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "contentTag",
     header: "Tag",
-    cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
-    ),
+    cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>,
   },
   {
     accessorKey: "contentType",
     header: "Content Type",
-    cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("contentType")}</span>
-    ),
+    cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("contentType")}</span>,
   },
   {
     accessorKey: "category",
     header: "Kategori",
     cell: ({ row }) => {
       const category = row.original.category; // Akses properti category
-      return (
-        <span className="whitespace-nowrap">{category?.name || "N/A"}</span>
-      );
+      return <span className="whitespace-nowrap">{category?.name || "N/A"}</span>;
     },
   },
   {
diff --git a/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/table-nulis.tsx b/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/table-nulis.tsx
index 95085e3f..21a3f0a0 100644
--- a/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/table-nulis.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/nulis-ai/components/table-nulis.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,14 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataImage, listDataTeks, listNulisAI } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,17 +42,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
 import {
-  listDataImage,
-  listDataTeks,
-  listNulisAI,
-} from "@/lib/services/content/content";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 
 const TableTeks = () => {
   const router = useRouter();
@@ -64,11 +61,8 @@ const TableTeks = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -168,9 +162,7 @@ const TableTeks = () => {
         <div className="flex-none">
           <Input
             placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
+            value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
               table.getColumn("status")?.setFilterValue(event.target.value)
             }
@@ -186,10 +178,7 @@ const TableTeks = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -219,11 +208,7 @@ const TableTeks = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/content/nulis-ai/layout.tsx b/src/app/[locale]/(protected)/contributor/content/nulis-ai/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/contributor/content/nulis-ai/layout.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/nulis-ai/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/contributor/content/nulis-ai/page.tsx b/src/app/[locale]/(protected)/contributor/content/nulis-ai/page.tsx
index 865df042..eb7eb893 100644
--- a/src/app/[locale]/(protected)/contributor/content/nulis-ai/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/nulis-ai/page.tsx
@@ -1,12 +1,15 @@
 "use client";
+
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import TableImage from "./components/table-nulis";
-import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import TableNulis from "./components/table-nulis";
+
 import TableAudio from "../audio/components/table-audio";
+import TableImage from "./components/table-nulis";
+import TableNulis from "./components/table-nulis";
 
 const ReactTableNulisPage = () => {
   return (
@@ -54,9 +57,7 @@ const ReactTableNulisPage = () => {
           <CardHeader className="border-b border-solid border-default-200 mb-6">
             <CardTitle>
               <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  Konten Nulis Ai
-                </div>
+                <div className="flex-1 text-xl font-medium text-default-900">Konten Nulis Ai</div>
                 <div>
                   <Button color="primary" className="text-white ml-3">
                     <UploadIcon />
diff --git a/src/app/[locale]/(protected)/contributor/content/spit/layout.tsx b/src/app/[locale]/(protected)/contributor/content/spit/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/contributor/content/spit/layout.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/spit/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/contributor/content/spit/page.tsx b/src/app/[locale]/(protected)/contributor/content/spit/page.tsx
index d5ab8198..de35ecb0 100644
--- a/src/app/[locale]/(protected)/contributor/content/spit/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/spit/page.tsx
@@ -1,6 +1,8 @@
 "use client";
+
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import TableImage from "./table-spit/table-spit";
 import TableSPIT from "./table-spit/table-spit";
 
@@ -13,9 +15,7 @@ const ReactTableSPITPage = () => {
           <CardHeader className="border-b border-solid border-default-200 mb-6">
             <CardTitle>
               <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  SPIT
-                </div>
+                <div className="flex-1 text-xl font-medium text-default-900">SPIT</div>
               </div>
             </CardTitle>
           </CardHeader>
diff --git a/src/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx b/src/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
index 241fe177..637a1bb3 100644
--- a/src/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
@@ -1,12 +1,13 @@
 "use client";
+
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-import {
-  Eye,
-  MoreVertical,
-  MoveDownRight,
-  SquarePen,
-  Trash2,
-} from "lucide-react";
+import { format } from "date-fns";
+import { Eye, MoreVertical, MoveDownRight, SquarePen, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -14,11 +15,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -52,25 +48,19 @@ const useTableColumns = () => {
     {
       accessorKey: "contentTag",
       header: t("tag"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>,
     },
 
     {
       accessorKey: "contentType",
       header: t("type-content"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("contentType")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("contentType")}</span>,
     },
     {
       accessorKey: "contentCreatedGroupBy",
       header: t("source"),
       cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("contentCreatedGroupBy")}
-        </span>
+        <span className="whitespace-nowrap">{row.getValue("contentCreatedGroupBy")}</span>
       ),
     },
 
@@ -100,10 +90,7 @@ const useTableColumns = () => {
       accessorKey: "contentCreatedDate",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("contentCreatedDate") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("contentCreatedDate") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -135,9 +122,7 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/content/spit/convert/${row.original.contentId}`}
-              >
+              <Link href={`/contributor/content/spit/convert/${row.original.contentId}`}>
                 <DropdownMenuItem
                   className={`p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none ${
                     isDisabled ? "cursor-not-allowed opacity-50" : ""
diff --git a/src/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx b/src/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
index dfa35c1d..967eed03 100644
--- a/src/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
@@ -1,29 +1,22 @@
 "use client";
+
+import { title } from "process";
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { Button } from "@/components/ui/button";
+import { format } from "date-fns";
 import {
   ChevronDown,
   ChevronLeft,
@@ -33,23 +26,31 @@ import {
   Search,
   Trash2,
 } from "lucide-react";
-import { title } from "process";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import TablePagination from "@/components/features/table/table-pagination";
-import { listSPIT } from "@/lib/services/content/content";
+import { useTranslations } from "next-intl";
 
-import { useSearchParams } from "next/navigation";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import columns from "./columns";
+import { listSPIT } from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
-import { useTranslations } from "next-intl";
-import { format } from "date-fns";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 // export type CompanyData = {
@@ -68,8 +69,7 @@ import useTableColumns from "./columns";
 const TableSPIT = () => {
   const searchParams = useSearchParams();
   const [spitTable, setSpitTable] = React.useState<any[]>([]);
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -85,9 +85,7 @@ const TableSPIT = () => {
   const [dateFilter, setDateFilter] = React.useState("");
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
 
   const roleId = getCookiesDecrypt("urie");
@@ -134,18 +132,10 @@ const TableSPIT = () => {
       isPublish = statusFilter.includes(1) ? false : true;
     }
 
-    const formattedStartDate = dateFilter
-      ? format(new Date(dateFilter), "yyyy-MM-dd")
-      : "";
+    const formattedStartDate = dateFilter ? format(new Date(dateFilter), "yyyy-MM-dd") : "";
 
     try {
-      const res = await listSPIT(
-        page - 1,
-        limit,
-        search,
-        formattedStartDate,
-        isPublish
-      );
+      const res = await listSPIT(page - 1, limit, search, formattedStartDate, isPublish);
       const data = res?.data?.data;
       const contentData = data?.content || [];
 
@@ -170,9 +160,7 @@ const TableSPIT = () => {
 
   function handleStatusCheckboxChange(value: any) {
     setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status: any) => status !== value) : [...prev, value]
     );
   }
 
@@ -201,10 +189,7 @@ const TableSPIT = () => {
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[150px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[150px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                 </div>
@@ -262,9 +247,7 @@ const TableSPIT = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -284,10 +267,7 @@ const TableSPIT = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -317,11 +297,7 @@ const TableSPIT = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx b/src/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
index 18430158..64df4fb6 100644
--- a/src/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteMedia } from "@/lib/services/content/content";
+import { error } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { error } from "@/lib/utils/swal";
-import { deleteMedia } from "@/lib/services/content/content";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -51,20 +51,13 @@ const useTableColumns = () => {
     {
       accessorKey: "categoryName",
       header: t("category-name"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("categoryName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>,
     },
     {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -76,17 +69,13 @@ const useTableColumns = () => {
     {
       accessorKey: "creatorName",
       header: t("creator-group"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>,
     },
     {
       accessorKey: "creatorGroupLevelName",
       header: t("source"),
       cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("creatorGroupLevelName")}
-        </span>
+        <span className="whitespace-nowrap">{row.getValue("creatorGroupLevelName")}</span>
       ),
     },
     {
@@ -127,16 +116,10 @@ const useTableColumns = () => {
         const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
 
         // Gunakan `statusName` untuk pencocokan
-        const statusStyles =
-          statusColors[statusName] || "bg-gray-100 text-gray-600";
+        const statusStyles = statusColors[statusName] || "bg-gray-100 text-gray-600";
 
         return (
-          <Badge
-            className={cn(
-              "rounded-full px-5 w-full whitespace-nowrap",
-              statusStyles
-            )}
-          >
+          <Badge className={cn("rounded-full px-5 w-full whitespace-nowrap", statusStyles)}>
             {status} {/* Tetap tampilkan nilai asli */}
           </Badge>
         );
@@ -205,17 +188,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/content/teks/detail/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/teks/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/contributor/content/teks/update/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/teks/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx b/src/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
index 4a6d59ac..5391bf38 100644
--- a/src/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { format } from "date-fns";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +28,14 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataImage, listDataTeks, listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,19 +47,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import {
-  listDataImage,
-  listDataTeks,
-  listEnableCategory,
-} from "@/lib/services/content/content";
 import { Label } from "@/components/ui/label";
-import { format } from "date-fns";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const TableTeks = () => {
@@ -71,11 +68,8 @@ const TableTeks = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -90,9 +84,7 @@ const TableTeks = () => {
   const userLevelId = getCookiesDecrypt("ulie");
 
   const [categories, setCategories] = React.useState<any[]>([]);
-  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
-    []
-  );
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>([]);
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
@@ -134,15 +126,7 @@ const TableTeks = () => {
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("3");
@@ -172,12 +156,8 @@ const TableTeks = () => {
   };
 
   async function fetchData() {
-    const formattedStartDate = startDate
-      ? format(new Date(startDate), "yyyy-MM-dd")
-      : "";
-    const formattedEndDate = endDate
-      ? format(new Date(endDate), "yyyy-MM-dd")
-      : "";
+    const formattedStartDate = startDate ? format(new Date(startDate), "yyyy-MM-dd") : "";
+    const formattedEndDate = endDate ? format(new Date(endDate), "yyyy-MM-dd") : "";
     try {
       const isForSelf = Number(roleId) === 4;
       const res = await listDataTeks(
@@ -215,9 +195,7 @@ const TableTeks = () => {
     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
   };
 
-  const handleSearchFilterBySource = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterBySource = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterBySource(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -225,15 +203,11 @@ const TableTeks = () => {
 
   function handleStatusCheckboxChange(value: any) {
     setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status: any) => status !== value) : [...prev, value]
     );
   }
 
-  const handleSearchFilterByCreator = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterByCreator = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterByCreator(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -266,22 +240,11 @@ const TableTeks = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -292,10 +255,7 @@ const TableTeks = () => {
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                   {/* <p
@@ -308,10 +268,7 @@ const TableTeks = () => {
                 <Label className="ml-2">Kategori</Label>
                 {categories.length > 0 ? (
                   categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
+                    <div key={category.id} className="flex items-center px-4 py-1">
                       <input
                         type="checkbox"
                         id={`category-${category.id}`}
@@ -319,18 +276,13 @@ const TableTeks = () => {
                         checked={selectedCategories.includes(category.id)}
                         onChange={() => handleCheckboxChange(category.id)}
                       />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
+                      <label htmlFor={`category-${category.id}`} className="text-sm">
                         {category.name}
                       </label>
                     </div>
                   ))
                 ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
+                  <p className="text-sm text-gray-500 px-4 py-2">No categories found.</p>
                 )}
                 <div className="mx-2 my-1">
                   <Label>Tanggal Awal</Label>
@@ -438,9 +390,7 @@ const TableTeks = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -459,10 +409,7 @@ const TableTeks = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -492,11 +439,7 @@ const TableTeks = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/content/teks/create/page.tsx b/src/app/[locale]/(protected)/contributor/content/teks/create/page.tsx
index e746d738..075314ce 100644
--- a/src/app/[locale]/(protected)/contributor/content/teks/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/teks/create/page.tsx
@@ -1,6 +1,6 @@
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import FormAudio from "@/components/features/form/content/audio-form";
 import FormTeks from "@/components/features/form/content/teks-form";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const TeksCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/teks/layout.tsx b/src/app/[locale]/(protected)/contributor/content/teks/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/contributor/content/teks/layout.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/teks/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/contributor/content/teks/page.tsx b/src/app/[locale]/(protected)/contributor/content/teks/page.tsx
index 1aed1387..8c1f0359 100644
--- a/src/app/[locale]/(protected)/contributor/content/teks/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/teks/page.tsx
@@ -1,13 +1,16 @@
 "use client";
+
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import TableImage from "./components/table-teks";
-import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import TableTeks from "./components/table-teks";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const ReactTableTeksPage = () => {
   const t = useTranslations("AnalyticsDashboard");
@@ -25,10 +28,7 @@ const ReactTableTeksPage = () => {
                 <p>
                   <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">
-                  {" "}
-                  {t("Hasil_unggah_disetujui_hari_ini")}
-                </p>
+                <p className="text-sm"> {t("Hasil_unggah_disetujui_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -59,9 +59,7 @@ const ReactTableTeksPage = () => {
           <CardHeader className="border-b border-solid border-default-200 mb-6">
             <CardTitle>
               <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  {t("text")}
-                </div>
+                <div className="flex-1 text-xl font-medium text-default-900">{t("text")}</div>
 
                 <div className="flex-none">
                   <Link href={"/contributor/content/teks/create"}>
diff --git a/src/app/[locale]/(protected)/contributor/content/video/components/columns.tsx b/src/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
index 9f50023d..28ab2245 100644
--- a/src/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteMedia } from "@/lib/services/content/content";
+import { error } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { deleteMedia } from "@/lib/services/content/content";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { error } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -52,20 +52,13 @@ const useTableColumns = () => {
     {
       accessorKey: "categoryName",
       header: t("category-name"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("categoryName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>,
     },
     {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -77,17 +70,13 @@ const useTableColumns = () => {
     {
       accessorKey: "creatorName",
       header: t("creator-group"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>,
     },
     {
       accessorKey: "creatorGroupLevelName",
       header: t("source"),
       cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("creatorGroupLevelName")}
-        </span>
+        <span className="whitespace-nowrap">{row.getValue("creatorGroupLevelName")}</span>
       ),
     },
     {
@@ -125,16 +114,10 @@ const useTableColumns = () => {
 
         const status = row.getValue("statusName") as string;
         const statusName = status?.toLocaleLowerCase();
-        const statusStyles =
-          statusColors[statusName] || "bg-red-200 text-red-600";
+        const statusStyles = statusColors[statusName] || "bg-red-200 text-red-600";
 
         return (
-          <Badge
-            className={cn(
-              "rounded-full px-5 w-full whitespace-nowrap",
-              statusStyles
-            )}
-          >
+          <Badge className={cn("rounded-full px-5 w-full whitespace-nowrap", statusStyles)}>
             {status} {/* Tetap tampilkan nilai asli */}
           </Badge>
         );
@@ -203,17 +186,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/content/video/detail/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/video/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/contributor/content/video/update/${row.original.id}`}
-              >
+              <Link href={`/contributor/content/video/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx b/src/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
index 37f02907..fda99f46 100644
--- a/src/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { format } from "date-fns";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +28,14 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataImage, listDataVideo, listEnableCategory } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,19 +47,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import {
-  listDataImage,
-  listDataVideo,
-  listEnableCategory,
-} from "@/lib/services/content/content";
 import { Label } from "@/components/ui/label";
-import { format } from "date-fns";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const TableVideo = () => {
@@ -71,11 +68,8 @@ const TableVideo = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -90,9 +84,7 @@ const TableVideo = () => {
   const userLevelId = getCookiesDecrypt("ulie");
 
   const [categories, setCategories] = React.useState<any[]>([]);
-  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
-    []
-  );
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>([]);
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
   const [startDate, setStartDate] = React.useState("");
@@ -134,16 +126,7 @@ const TableVideo = () => {
   React.useEffect(() => {
     fetchData();
     getCategories();
-  }, [
-    categoryFilter,
-    statusFilter,
-    page,
-    showData,
-    ,
-    search,
-    startDate,
-    endDate,
-  ]);
+  }, [categoryFilter, statusFilter, page, showData, , search, startDate, endDate]);
 
   async function getCategories() {
     const category = await listEnableCategory("2");
@@ -173,12 +156,8 @@ const TableVideo = () => {
   };
 
   async function fetchData() {
-    const formattedStartDate = startDate
-      ? format(new Date(startDate), "yyyy-MM-dd")
-      : "";
-    const formattedEndDate = endDate
-      ? format(new Date(endDate), "yyyy-MM-dd")
-      : "";
+    const formattedStartDate = startDate ? format(new Date(startDate), "yyyy-MM-dd") : "";
+    const formattedEndDate = endDate ? format(new Date(endDate), "yyyy-MM-dd") : "";
     try {
       const isForSelf = Number(roleId) === 4;
       const res = await listDataVideo(
@@ -216,9 +195,7 @@ const TableVideo = () => {
     table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
   };
 
-  const handleSearchFilterBySource = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterBySource = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterBySource(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -226,15 +203,11 @@ const TableVideo = () => {
 
   function handleStatusCheckboxChange(value: any) {
     setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status: any) => status !== value) : [...prev, value]
     );
   }
 
-  const handleSearchFilterByCreator = (
-    e: React.ChangeEvent<HTMLInputElement>
-  ) => {
+  const handleSearchFilterByCreator = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     setFilterByCreator(value); // Perbarui state filter
     fetchData(); // Panggil ulang data dengan filter baru
@@ -268,22 +241,11 @@ const TableVideo = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -294,10 +256,7 @@ const TableVideo = () => {
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                   {/* <p
@@ -310,10 +269,7 @@ const TableVideo = () => {
                 <Label className="ml-2">Kategori</Label>
                 {categories.length > 0 ? (
                   categories.map((category) => (
-                    <div
-                      key={category.id}
-                      className="flex items-center px-4 py-1"
-                    >
+                    <div key={category.id} className="flex items-center px-4 py-1">
                       <input
                         type="checkbox"
                         id={`category-${category.id}`}
@@ -321,18 +277,13 @@ const TableVideo = () => {
                         checked={selectedCategories.includes(category.id)}
                         onChange={() => handleCheckboxChange(category.id)}
                       />
-                      <label
-                        htmlFor={`category-${category.id}`}
-                        className="text-sm"
-                      >
+                      <label htmlFor={`category-${category.id}`} className="text-sm">
                         {category.name}
                       </label>
                     </div>
                   ))
                 ) : (
-                  <p className="text-sm text-gray-500 px-4 py-2">
-                    No categories found.
-                  </p>
+                  <p className="text-sm text-gray-500 px-4 py-2">No categories found.</p>
                 )}
                 <div className="mx-2 my-1">
                   <Label>Tanggal Awal</Label>
@@ -440,9 +391,7 @@ const TableVideo = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -461,10 +410,7 @@ const TableVideo = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -494,11 +440,7 @@ const TableVideo = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/content/video/create/page.tsx b/src/app/[locale]/(protected)/contributor/content/video/create/page.tsx
index 025e9a0a..92b24fc5 100644
--- a/src/app/[locale]/(protected)/contributor/content/video/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/video/create/page.tsx
@@ -1,5 +1,5 @@
-import FormVideo from "@/components/features/form/content/video-form";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormVideo from "@/components/features/form/content/video-form";
 
 const VideoCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/content/video/layout.tsx b/src/app/[locale]/(protected)/contributor/content/video/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/contributor/content/video/layout.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/video/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/contributor/content/video/page.tsx b/src/app/[locale]/(protected)/contributor/content/video/page.tsx
index ff64781c..afef7bbc 100644
--- a/src/app/[locale]/(protected)/contributor/content/video/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/content/video/page.tsx
@@ -1,13 +1,16 @@
 "use client";
+
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { UploadIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import TableImage from "./components/table-video";
-import { UploadIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import TableVideo from "./components/table-video";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const ReactTableVideoPage = () => {
   const t = useTranslations("AnalyticsDashboard");
@@ -25,9 +28,7 @@ const ReactTableVideoPage = () => {
                 <p>
                   <span className="text-red-500">{t("average")} :0</span>
                 </p>
-                <p className="text-sm">
-                  {t("Hasil_unggah_disetujui_hari_ini")}
-                </p>
+                <p className="text-sm">{t("Hasil_unggah_disetujui_hari_ini")}</p>
               </div>
             </div>
             <div className="flex flex-row items-center text-xl font-medium text-default-900 gap-2">
@@ -58,9 +59,7 @@ const ReactTableVideoPage = () => {
           <CardHeader className="border-b border-solid border-default-200 mb-6">
             <CardTitle>
               <div className="flex items-center">
-                <div className="flex-1 text-xl font-medium text-default-900">
-                  {t("video")}
-                </div>
+                <div className="flex-1 text-xl font-medium text-default-900">{t("video")}</div>
                 <div className="flex-none">
                   <Link href={"/contributor/content/video/create"}>
                     <Button color="primary" className="text-white">
diff --git a/src/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx b/src/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx
index ddfc82cb..6f6a3ee5 100644
--- a/src/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -48,10 +48,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -95,9 +92,7 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/planning/mediahub/publish/${row.original.id}`}
-              >
+              <Link href={`/contributor/planning/mediahub/publish/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   Publish
diff --git a/src/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx b/src/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
index 207e0b72..137041df 100644
--- a/src/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +27,16 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { getPlanningSentPagination } from "@/lib/services/planning/planning";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -47,16 +46,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import { getPlanningSentPagination } from "@/lib/services/planning/planning";
 import search from "@/app/[locale]/(protected)/app/chat/components/search";
-import { CardHeader, CardTitle } from "@/components/ui/card";
-import { useTranslations } from "next-intl";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const MediahubTable = () => {
@@ -67,11 +68,8 @@ const MediahubTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -169,9 +167,7 @@ const MediahubTable = () => {
             <div className="w-[150px] md:w-[250px] lg:w-[250px] border border-black rounded-md">
               <Input
                 placeholder="Filter Status..."
-                value={
-                  (table.getColumn("status")?.getFilterValue() as string) ?? ""
-                }
+                value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                   table.getColumn("status")?.setFilterValue(event.target.value)
                 }
@@ -195,9 +191,7 @@ const MediahubTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -216,10 +210,7 @@ const MediahubTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -235,31 +226,21 @@ const MediahubTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx b/src/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx
index 4c15e46a..9fefc843 100644
--- a/src/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/planning/mediahub/page.tsx
@@ -1,8 +1,10 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import MediahubTable from "./components/mediahub-table";
 import { useTranslations } from "next-intl";
 
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import MediahubTable from "./components/mediahub-table";
+
 const MediahubPage = async () => {
   return (
     <div>
diff --git a/src/app/[locale]/(protected)/contributor/planning/mediahub/publish/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/planning/mediahub/publish/[id]/page.tsx
index f35c7840..0c17ec89 100644
--- a/src/app/[locale]/(protected)/contributor/planning/mediahub/publish/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/planning/mediahub/publish/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import PublishMediahub from "@/components/features/form/planning/mediahub-publish";
+import FormTask from "@/components/features/form/task/task-form";
 
 const MediahubPublishPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx b/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx
index c8594b42..4daf3cba 100644
--- a/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -48,10 +48,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -95,9 +92,7 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/planning/medsos-mediahub/publish/${row.original.id}`}
-              >
+              <Link href={`/contributor/planning/medsos-mediahub/publish/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   Publish
diff --git a/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx b/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
index 087a4bfc..9dc9b118 100644
--- a/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +27,16 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { getPlanningSentPagination } from "@/lib/services/planning/planning";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -47,15 +46,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
-import { getPlanningSentPagination } from "@/lib/services/planning/planning";
-import { CardHeader, CardTitle } from "@/components/ui/card";
-import { useTranslations } from "next-intl";
 import useTableColumns from "./columns";
 
 const MedsosTable = () => {
@@ -66,11 +67,8 @@ const MedsosTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -168,9 +166,7 @@ const MedsosTable = () => {
             <div className="w-[150px] md:w-[250px] lg:w-[250px]">
               <Input
                 placeholder="Filter Status..."
-                value={
-                  (table.getColumn("status")?.getFilterValue() as string) ?? ""
-                }
+                value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                   table.getColumn("status")?.setFilterValue(event.target.value)
                 }
@@ -194,9 +190,7 @@ const MedsosTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -215,10 +209,7 @@ const MedsosTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -234,31 +225,21 @@ const MedsosTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx b/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx
index 2387466e..c49c3440 100644
--- a/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/planning/medsos-mediahub/page.tsx
@@ -1,5 +1,6 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import MedsosTable from "./components/medsos-table";
 
 const MedsosMediahubPage = async () => {
diff --git a/src/app/[locale]/(protected)/contributor/report/components/columns.tsx b/src/app/[locale]/(protected)/contributor/report/components/columns.tsx
index 2e4be29a..454d663a 100644
--- a/src/app/[locale]/(protected)/contributor/report/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/report/components/columns.tsx
@@ -1,37 +1,26 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { format } from "date-fns";
+import { Eye, MoreVertical, SquarePen, Trash2, Upload, UploadCloud } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 
-import {
-  Eye,
-  MoreVertical,
-  SquarePen,
-  Trash2,
-  Upload,
-  UploadCloud,
-} from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { deleteBlog } from "@/lib/services/blog/blog";
+import { error, loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link, useRouter } from "@/i18n/navigation";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { deleteBlog } from "@/lib/services/blog/blog";
-import { error, loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import axios from "axios";
 
-const useTableColumns = ({
-  handlePreview,
-}: {
-  handlePreview: (id: string) => void;
-}) => {
+const useTableColumns = ({ handlePreview }: { handlePreview: (id: string) => void }) => {
   const t = useTranslations("Table"); // Panggil di dalam hook
 
   const columns: ColumnDef<any>[] = [
@@ -43,18 +32,13 @@ const useTableColumns = ({
     {
       accessorKey: "title",
       header: t("title"),
-      cell: ({ row }) => (
-        <span className="whitespace-normal">{row.getValue("title")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-normal">{row.getValue("title")}</span>,
     },
     {
       accessorKey: "createdAt",
       header: t("generate-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
diff --git a/src/app/[locale]/(protected)/contributor/report/components/report-table.tsx b/src/app/[locale]/(protected)/contributor/report/components/report-table.tsx
index e8adcc0e..93cac5fe 100644
--- a/src/app/[locale]/(protected)/contributor/report/components/report-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/report/components/report-table.tsx
@@ -1,39 +1,36 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { format } from "date-fns";
 import { ChevronDown, Plus, Search } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
 import { getBlogCategory, paginationBlog } from "@/lib/services/blog/blog";
+import { listEnableCategory } from "@/lib/services/content/content";
+import { getPreviewById, paginationReport, saveReport } from "@/lib/services/report/report";
 import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -42,26 +39,21 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
-import Swal from "sweetalert2";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { useTranslations } from "next-intl";
-import { CardHeader, CardTitle } from "@/components/ui/card";
-import { Link } from "@/i18n/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
-import {
-  getPreviewById,
-  paginationReport,
-  saveReport,
-} from "@/lib/services/report/report";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { format } from "date-fns";
-import withReactContent from "sweetalert2-react-content";
 
 type PreviewApiResponse = {
   error: boolean;
@@ -82,11 +74,8 @@ const ReportTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -98,9 +87,7 @@ const ReportTable = () => {
   const [limit, setLimit] = React.useState(10);
   const [search, setSearch] = React.useState<string>("");
   const [categories, setCategories] = React.useState<any[]>([]);
-  const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
-    []
-  );
+  const [selectedCategories, setSelectedCategories] = React.useState<number[]>([]);
   const [categoryFilter, setCategoryFilter] = React.useState<string>("");
   const [dateFilter, setDateFilter] = React.useState("");
   const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
@@ -149,13 +136,7 @@ const ReportTable = () => {
 
   async function fetchData() {
     try {
-      const res = await paginationReport(
-        showData,
-        page - 1,
-        search,
-        categoryFilter,
-        statusFilter
-      );
+      const res = await paginationReport(showData, page - 1, search, categoryFilter, statusFilter);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -199,9 +180,7 @@ const ReportTable = () => {
 
   function handleStatusCheckboxChange(value: any) {
     setStatusFilter((prev: any) =>
-      prev.includes(value)
-        ? prev.filter((status: any) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status: any) => status !== value) : [...prev, value]
     );
   }
 
@@ -223,11 +202,7 @@ const ReportTable = () => {
       const response = await saveReport(requestData);
 
       if (response?.error) {
-        MySwal.fire(
-          "Error",
-          response?.message || "Gagal menyimpan laporan",
-          "error"
-        );
+        MySwal.fire("Error", response?.message || "Gagal menyimpan laporan", "error");
         return;
       }
 
@@ -255,10 +230,7 @@ const ReportTable = () => {
           </DialogHeader>
           <div className="h-full w-[1000px] overflow-auto">
             {previewData ? (
-              <iframe
-                src={previewData.url}
-                className="w-full h-[calc(100vh-100px)]"
-              />
+              <iframe src={previewData.url} className="w-full h-[calc(100vh-100px)]" />
             ) : (
               <div className="p-4">Loading preview...</div>
             )}
@@ -306,40 +278,22 @@ const ReportTable = () => {
                     </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent className="w-56 text-sm">
-                    <DropdownMenuRadioGroup
-                      value={showData}
-                      onValueChange={setShowData}
-                    >
-                      <DropdownMenuRadioItem value="10">
-                        1 - 10 Data
-                      </DropdownMenuRadioItem>
-                      <DropdownMenuRadioItem value="50">
-                        1 - 50 Data
-                      </DropdownMenuRadioItem>
-                      <DropdownMenuRadioItem value="100">
-                        1 - 100 Data
-                      </DropdownMenuRadioItem>
-                      <DropdownMenuRadioItem value="250">
-                        1 - 250 Data
-                      </DropdownMenuRadioItem>
+                    <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                      <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                      <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                     </DropdownMenuRadioGroup>
                   </DropdownMenuContent>
                 </DropdownMenu>
               </div>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="outline"
-                    className="ml-auto w-full sm:w-[100px]"
-                    size="md"
-                  >
+                  <Button variant="outline" className="ml-auto w-full sm:w-[100px]" size="md">
                     Filter <ChevronDown />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="end"
-                  className="w-64 h-[200px] overflow-y-auto"
-                >
+                <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                   <div className="flex flex-row justify-between my-1 mx-1">
                     <p>Filter</p>
                   </div>
@@ -406,9 +360,7 @@ const ReportTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -427,10 +379,7 @@ const ReportTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -446,31 +395,21 @@ const ReportTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/contributor/report/page.tsx b/src/app/[locale]/(protected)/contributor/report/page.tsx
index fc61534c..c6f6d6cf 100644
--- a/src/app/[locale]/(protected)/contributor/report/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/report/page.tsx
@@ -1,9 +1,11 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import BlogTable from "./components/report-table";
-import { Plus } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/i18n/navigation";
+import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BlogTable from "./components/report-table";
 import ReportTable from "./components/report-table";
 
 const ReportPage = async () => {
diff --git a/src/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx b/src/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx
index 40bc3c4a..88d5117a 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -47,16 +47,12 @@ const useTableColumns = () => {
     {
       accessorKey: "startDate",
       header: t("start-date"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("startDate")}</span>,
     },
     {
       accessorKey: "endDate",
       header: t("end-date"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("endDate")}</span>,
     },
     {
       accessorKey: "time",
@@ -97,13 +93,10 @@ const useTableColumns = () => {
         const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
 
         // Gunakan `statusName` untuk pencocokan
-        const statusStyles =
-          statusColors[statusName] || "bg-gray-100 text-gray-600";
+        const statusStyles = statusColors[statusName] || "bg-gray-100 text-gray-600";
 
         return (
-          <Badge
-            className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
-          >
+          <Badge className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}>
             {status} {/* Tetap tampilkan nilai asli */}
           </Badge>
         );
@@ -125,11 +118,7 @@ const useTableColumns = () => {
     {
       accessorKey: "uploaderName",
       header: t("source"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("uploaderName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>,
     },
 
     {
@@ -150,17 +139,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/schedule/event/detail/${row.original.id}`}
-              >
+              <Link href={`/contributor/schedule/event/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/contributor/schedule/event/update/${row.original.id}`}
-              >
+              <Link href={`/contributor/schedule/event/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx b/src/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
index b8a739f9..03971870 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
@@ -1,39 +1,27 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { ChevronDown, Search, UploadIcon } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import { paginationSchedule } from "@/lib/services/schedule/schedule";
 import { useTranslations } from "next-intl";
-import { CardHeader, CardTitle } from "@/components/ui/card";
-import { Link } from "@/i18n/navigation";
+
+import { paginationSchedule } from "@/lib/services/schedule/schedule";
 import { Button } from "@/components/ui/button";
-import useTableColumns from "./columns";
+import { CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -42,7 +30,21 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
+import useTableColumns from "./columns";
 
 const EventTable = () => {
   const router = useRouter();
@@ -51,11 +53,8 @@ const EventTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -102,13 +101,7 @@ const EventTable = () => {
 
   async function fetchData() {
     try {
-      const res = await paginationSchedule(
-        showData,
-        page - 1,
-        2,
-        search,
-        statusFilter
-      );
+      const res = await paginationSchedule(showData, page - 1, 2, search, statusFilter);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -143,9 +136,7 @@ const EventTable = () => {
       <CardHeader className="border-b border-solid border-default-200 mb-6">
         <CardTitle>
           <div className="flex items-center">
-            <div className="flex-1 text-xl font-medium text-default-900">
-              Event {t("schedule")}
-            </div>
+            <div className="flex-1 text-xl font-medium text-default-900">Event {t("schedule")}</div>
             <div className="flex-none">
               <Link href={"/contributor/schedule/event/create"}>
                 <Button color="primary" className="text-white">
@@ -182,22 +173,11 @@ const EventTable = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      1 - 10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      1 - 50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      1 - 100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      1 - 250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -209,10 +189,7 @@ const EventTable = () => {
                     Filter <ChevronDown />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="end"
-                  className="w-64 h-[150px] overflow-y-auto"
-                >
+                <DropdownMenuContent align="end" className="w-64 h-[150px] overflow-y-auto">
                   <div className="flex flex-row justify-between my-1 mx-1">
                     <p>Filter</p>
                   </div>
@@ -262,9 +239,7 @@ const EventTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -283,10 +258,7 @@ const EventTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -302,31 +274,21 @@ const EventTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/contributor/schedule/event/create/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/event/create/page.tsx
index bf9f9d8d..d2365036 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/event/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/event/create/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormPressConference from "@/components/features/form/schedule/press-conference-form";
 import FormEvent from "@/components/features/form/schedule/event-form";
+import FormPressConference from "@/components/features/form/schedule/press-conference-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const EventCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/event/detail/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/event/detail/[id]/page.tsx
index 01146d3a..01705c3e 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/event/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/event/detail/[id]/page.tsx
@@ -1,12 +1,14 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormPressConference from "@/components/features/form/schedule/press-conference-form";
-import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
+
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import FormEventDetail from "@/components/features/form/schedule/event-detail-form";
+import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+import FormPressConference from "@/components/features/form/schedule/press-conference-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const EventDetailPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/event/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/event/page.tsx
index a50472a9..e3fe5b3e 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/event/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/event/page.tsx
@@ -1,10 +1,12 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Link } from "@/i18n/navigation";
+import { UploadIcon } from "lucide-react";
+
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { UploadIcon } from "lucide-react";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import PressConferenceTable from "../press-conference/components/presscon-table";
 import EventTable from "./components/event-table";
-import { Link } from "@/i18n/navigation";
 
 const EventPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/event/update/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/event/update/[id]/page.tsx
index f13bbf42..f768f331 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/event/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/event/update/[id]/page.tsx
@@ -1,13 +1,15 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormPressConference from "@/components/features/form/schedule/press-conference-form";
-import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
-import FormUpdatePressConference from "@/components/features/form/schedule/press-conference-update-form";
+
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import FormEventUpdate from "@/components/features/form/schedule/event-update-form";
+import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+import FormPressConference from "@/components/features/form/schedule/press-conference-form";
+import FormUpdatePressConference from "@/components/features/form/schedule/press-conference-update-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const EventUpdatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/media/audio/create/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/media/audio/create/page.tsx
index 59c4767d..eb77709f 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/media/audio/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/media/audio/create/page.tsx
@@ -1,5 +1,5 @@
-import FormAudio from "@/components/features/form/content/audio-form";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormAudio from "@/components/features/form/content/audio-form";
 
 const AudioScheduleCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/media/image/create/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/media/image/create/page.tsx
index a3ce3cd1..18e7d681 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/media/image/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/media/image/create/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormImage from "@/components/features/form/content/image-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const ImageScheduleCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/media/text/create/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/media/text/create/page.tsx
index 31c7712a..618273dd 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/media/text/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/media/text/create/page.tsx
@@ -1,6 +1,6 @@
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import FormAudio from "@/components/features/form/content/audio-form";
 import FormTeks from "@/components/features/form/content/teks-form";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const TeksScheduleCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/media/video/create/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/media/video/create/page.tsx
index 96362c95..154273d3 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/media/video/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/media/video/create/page.tsx
@@ -1,5 +1,5 @@
-import FormVideo from "@/components/features/form/content/video-form";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormVideo from "@/components/features/form/content/video-form";
 
 const VideoScheduleCreatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx
index aab54626..e31af362 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -47,16 +47,12 @@ const useTableColumns = () => {
     {
       accessorKey: "startDate",
       header: t("start-date"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("startDate")}</span>,
     },
     {
       accessorKey: "endDate",
       header: t("end-date"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("endDate")}</span>,
     },
     {
       accessorKey: "time",
@@ -97,13 +93,10 @@ const useTableColumns = () => {
         const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
 
         // Gunakan `statusName` untuk pencocokan
-        const statusStyles =
-          statusColors[statusName] || "bg-gray-100 text-gray-600";
+        const statusStyles = statusColors[statusName] || "bg-gray-100 text-gray-600";
 
         return (
-          <Badge
-            className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
-          >
+          <Badge className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}>
             {status} {/* Tetap tampilkan nilai asli */}
           </Badge>
         );
@@ -125,11 +118,7 @@ const useTableColumns = () => {
     {
       accessorKey: "uploaderName",
       header: t("source"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("uploaderName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>,
     },
 
     {
@@ -150,17 +139,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/schedule/press-conference/detail/${row.original.id}`}
-              >
+              <Link href={`/contributor/schedule/press-conference/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   Detail
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/contributor/schedule/press-conference/update/${row.original.id}`}
-              >
+              <Link href={`/contributor/schedule/press-conference/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
index 8d7fc55d..a852360c 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -38,16 +29,12 @@ import {
   TrendingUp,
   UploadIcon,
 } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import { paginationSchedule } from "@/lib/services/schedule/schedule";
-import { CardHeader, CardTitle } from "@/components/ui/card";
-import { Link } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
-import useTableColumns from "./columns";
+
+import { paginationSchedule } from "@/lib/services/schedule/schedule";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { CardHeader, CardTitle } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -56,7 +43,21 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
+import useTableColumns from "./columns";
 
 const PressConferenceTable = () => {
   const router = useRouter();
@@ -65,11 +66,8 @@ const PressConferenceTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -116,13 +114,7 @@ const PressConferenceTable = () => {
 
   async function fetchData() {
     try {
-      const res = await paginationSchedule(
-        showData,
-        page - 1,
-        1,
-        search,
-        statusFilter
-      );
+      const res = await paginationSchedule(showData, page - 1, 1, search, statusFilter);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -196,22 +188,11 @@ const PressConferenceTable = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      1 - 10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      1 - 50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      1 - 100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      1 - 250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -223,10 +204,7 @@ const PressConferenceTable = () => {
                     Filter <ChevronDown />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="end"
-                  className="w-64 h-[150px] overflow-y-auto"
-                >
+                <DropdownMenuContent align="end" className="w-64 h-[150px] overflow-y-auto">
                   <div className="flex flex-row justify-between my-1 mx-1">
                     <p>Filter</p>
                   </div>
@@ -276,9 +254,7 @@ const PressConferenceTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -297,10 +273,7 @@ const PressConferenceTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -316,31 +289,21 @@ const PressConferenceTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-conference/create/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-conference/create/page.tsx
index dacde745..e0252518 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-conference/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-conference/create/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormPressConference from "@/components/features/form/schedule/press-conference-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const PressConCreatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-conference/detail/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-conference/detail/[id]/page.tsx
index c4b6f789..8d052586 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-conference/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-conference/detail/[id]/page.tsx
@@ -1,12 +1,14 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormPressConference from "@/components/features/form/schedule/press-conference-form";
-import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
 
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+import FormPressConference from "@/components/features/form/schedule/press-conference-form";
+import FormTask from "@/components/features/form/task/task-form";
+
 const PressConDetailPage = () => {
   return (
     <div>
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-conference/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-conference/page.tsx
index 8283a3b9..23ed85cd 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-conference/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-conference/page.tsx
@@ -1,6 +1,7 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import PressConferenceTable from "./components/presscon-table";
 
 const PressConferencePage = async () => {
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-conference/update/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-conference/update/[id]/page.tsx
index 57132016..0653734c 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-conference/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-conference/update/[id]/page.tsx
@@ -1,12 +1,14 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormPressConference from "@/components/features/form/schedule/press-conference-form";
-import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
+
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+import FormPressConference from "@/components/features/form/schedule/press-conference-form";
 import FormUpdatePressConference from "@/components/features/form/schedule/press-conference-update-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const PressConUpdatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx
index 20afb760..d44a3c79 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -47,16 +47,12 @@ const useTableColumns = () => {
     {
       accessorKey: "startDate",
       header: t("start-date"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("startDate")}</span>,
     },
     {
       accessorKey: "endDate",
       header: t("end-date"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("endDate")}</span>,
     },
     {
       accessorKey: "time",
@@ -97,13 +93,10 @@ const useTableColumns = () => {
         const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
 
         // Gunakan `statusName` untuk pencocokan
-        const statusStyles =
-          statusColors[statusName] || "bg-gray-100 text-gray-600";
+        const statusStyles = statusColors[statusName] || "bg-gray-100 text-gray-600";
 
         return (
-          <Badge
-            className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
-          >
+          <Badge className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}>
             {status} {/* Tetap tampilkan nilai asli */}
           </Badge>
         );
@@ -125,11 +118,7 @@ const useTableColumns = () => {
     {
       accessorKey: "uploaderName",
       header: t("source"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("uploaderName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>,
     },
 
     {
@@ -150,17 +139,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/contributor/schedule/press-release/detail/${row.original.id}`}
-              >
+              <Link href={`/contributor/schedule/press-release/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/contributor/schedule/press-release/update/${row.original.id}`}
-              >
+              <Link href={`/contributor/schedule/press-release/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
index b1a1f525..09c48531 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -38,17 +29,13 @@ import {
   TrendingUp,
   UploadIcon,
 } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import { paginationSchedule } from "@/lib/services/schedule/schedule";
 import { useTranslations } from "next-intl";
+
+import { paginationSchedule } from "@/lib/services/schedule/schedule";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import { CardHeader, CardTitle } from "@/components/ui/card";
-import { Link } from "@/i18n/navigation";
-import useTableColumns from "./columns";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -57,7 +44,21 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
+import useTableColumns from "./columns";
 
 const PressReleaseTable = () => {
   const router = useRouter();
@@ -66,11 +67,8 @@ const PressReleaseTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -117,13 +115,7 @@ const PressReleaseTable = () => {
 
   async function fetchData() {
     try {
-      const res = await paginationSchedule(
-        showData,
-        page - 1,
-        3,
-        search,
-        statusFilter
-      );
+      const res = await paginationSchedule(showData, page - 1, 3, search, statusFilter);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -197,22 +189,11 @@ const PressReleaseTable = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      1 - 10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      1 - 50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      1 - 100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      1 - 250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -224,10 +205,7 @@ const PressReleaseTable = () => {
                     Filter <ChevronDown />
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent
-                  align="end"
-                  className="w-64 h-[150px] overflow-y-auto"
-                >
+                <DropdownMenuContent align="end" className="w-64 h-[150px] overflow-y-auto">
                   <div className="flex flex-row justify-between my-1 mx-1">
                     <p>Filter</p>
                   </div>
@@ -277,9 +255,7 @@ const PressReleaseTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -298,10 +274,7 @@ const PressReleaseTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -317,31 +290,21 @@ const PressReleaseTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-release/create/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-release/create/page.tsx
index 61f24171..2cce5d5a 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-release/create/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-release/create/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormPressConference from "@/components/features/form/schedule/press-conference-form";
 import FormPressRelease from "@/components/features/form/schedule/pers-release-form";
+import FormPressConference from "@/components/features/form/schedule/press-conference-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const PressReleaseCreatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-release/detail/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-release/detail/[id]/page.tsx
index 9e37eea5..faad8390 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-release/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-release/detail/[id]/page.tsx
@@ -1,7 +1,8 @@
 "use client";
+
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
 import FormDetailPressRillis from "@/components/features/form/schedule/pers-release--detail-form";
+import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
 
 const PressRilisDetailPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-release/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-release/page.tsx
index 42ecb666..086a2767 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-release/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-release/page.tsx
@@ -1,8 +1,10 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Link } from "@/i18n/navigation";
+import { UploadIcon } from "lucide-react";
+
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { UploadIcon } from "lucide-react";
-import { Link } from "@/i18n/navigation";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import PressReleaseTable from "./components/pressrilis-table";
 
 const PressReleasePage = async () => {
diff --git a/src/app/[locale]/(protected)/contributor/schedule/press-release/update/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/schedule/press-release/update/[id]/page.tsx
index 14ac5a20..6aa88c2c 100644
--- a/src/app/[locale]/(protected)/contributor/schedule/press-release/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/schedule/press-release/update/[id]/page.tsx
@@ -1,13 +1,15 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormPressConference from "@/components/features/form/schedule/press-conference-form";
-import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+
 import { useParams } from "next/navigation";
 import { id } from "date-fns/locale";
-import FormUpdatePressConference from "@/components/features/form/schedule/press-conference-update-form";
+
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import FormUpdatePressRelease from "@/components/features/form/schedule/pers-release--update-form";
+import FormDetailPressConference from "@/components/features/form/schedule/press-conference-detail-form";
+import FormPressConference from "@/components/features/form/schedule/press-conference-form";
+import FormUpdatePressConference from "@/components/features/form/schedule/press-conference-update-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const PressRilisUpdatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx b/src/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
index 0958efc0..66a8a603 100644
--- a/src/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/task-ta/components/columns.tsx
@@ -1,26 +1,26 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2, Upload } from "lucide-react";
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 import { useRouter } from "next/navigation";
-import { useToast } from "@/components/ui/use-toast";
+import { Link } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
+import { Eye, MoreVertical, SquarePen, Trash2, Upload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
 import { deleteCategory } from "@/lib/services/settings/settings";
 import { deleteTaskTa } from "@/lib/services/task";
 import { error, loading } from "@/lib/utils/swal";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { useTranslations } from "next-intl";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useToast } from "@/components/ui/use-toast";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -37,12 +37,7 @@ const useTableColumns = () => {
         <div>
           <span>{row.getValue("title")}</span>
           {row.original.isForward && (
-            <Button
-              variant={"outline"}
-              color="primary"
-              size="sm"
-              className="ml-3 rounded-xl"
-            >
+            <Button variant={"outline"} color="primary" size="sm" className="ml-3 rounded-xl">
               Forward
             </Button>
           )}
@@ -54,10 +49,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -90,11 +82,7 @@ const useTableColumns = () => {
 
         const statusStyles = statusColors[statusText] || "default";
 
-        return (
-          <Badge className={cn("rounded-full px-5", statusStyles)}>
-            {statusText}
-          </Badge>
-        );
+        return <Badge className={cn("rounded-full px-5", statusStyles)}>{statusText}</Badge>;
       },
     },
     {
@@ -176,9 +164,7 @@ const useTableColumns = () => {
                 </Link>
               )}
               {roleId == 12 && (
-                <Link
-                  href={`/contributor/task-ta/upload-task/${row.original.id}`}
-                >
+                <Link href={`/contributor/task-ta/upload-task/${row.original.id}`}>
                   <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                     <Upload className="w-4 h-4 me-1.5" />
                     Upload Tugas
diff --git a/src/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx b/src/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx
index 0476e83d..542e2742 100644
--- a/src/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/task-ta/components/task-ta-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { format } from "date-fns";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +28,15 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listTask, listTaskTa } from "@/lib/services/task";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,16 +47,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import { listTask, listTaskTa } from "@/lib/services/task";
 import { Label } from "@/components/ui/label";
-import { format } from "date-fns";
-import { useTranslations } from "next-intl";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const TaskTaTable = () => {
@@ -67,11 +68,8 @@ const TaskTaTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -118,20 +116,10 @@ const TaskTaTable = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [
-    page,
-    showData,
-    isSpecificAttention,
-    search,
-    dateFilter,
-    filterByCode,
-    statusFilter,
-  ]);
+  }, [page, showData, isSpecificAttention, search, dateFilter, filterByCode, statusFilter]);
 
   async function fetchData() {
-    const formattedStartDate = dateFilter
-      ? format(new Date(dateFilter), "yyyy-MM-dd")
-      : "";
+    const formattedStartDate = dateFilter ? format(new Date(dateFilter), "yyyy-MM-dd") : "";
     try {
       const res = await listTaskTa(
         page - 1,
@@ -177,9 +165,7 @@ const TaskTaTable = () => {
 
   function handleStatusCheckboxChange(value: number) {
     setStatusFilter((prev) =>
-      prev.includes(value)
-        ? prev.filter((status) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status) => status !== value) : [...prev, value]
     );
   }
 
@@ -255,40 +241,22 @@ const TaskTaTable = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      1 - 10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      1 - 50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      1 - 100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      1 - 250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="ml-auto w-full sm:w-[100px]"
-                  size="md"
-                >
+                <Button variant="outline" className="ml-auto w-full sm:w-[100px]" size="md">
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                 </div>
@@ -360,10 +328,7 @@ const TaskTaTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -393,11 +358,7 @@ const TaskTaTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/task-ta/detail/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/task-ta/detail/[id]/page.tsx
index 6ff75266..ac1244d9 100644
--- a/src/app/[locale]/(protected)/contributor/task-ta/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/task-ta/detail/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormTaskTaDetail from "@/components/features/form/task-ta/task-ta-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const TaskTaDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/task-ta/page.tsx b/src/app/[locale]/(protected)/contributor/task-ta/page.tsx
index d14e6cf9..41301237 100644
--- a/src/app/[locale]/(protected)/contributor/task-ta/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/task-ta/page.tsx
@@ -1,17 +1,16 @@
 "use client";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TaskTable from "./components/task-ta-table";
-import { Button } from "@/components/ui/button";
-import { UploadIcon } from "lucide-react";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Link } from "@/i18n/navigation";
-import {
-  checkAuthorization,
-  checkLoginSession,
-  getCookiesDecrypt,
-} from "@/lib/utils/utils";
+
 import React, { useEffect } from "react";
+import { Link } from "@/i18n/navigation";
+import { UploadIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
+
+import { checkAuthorization, checkLoginSession, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import TaskTable from "./components/task-ta-table";
 import TaskTaTable from "./components/task-ta-table";
 
 const TaskTaPage = () => {
diff --git a/src/app/[locale]/(protected)/contributor/task-ta/update/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/task-ta/update/[id]/page.tsx
index 524bb03b..45b7419d 100644
--- a/src/app/[locale]/(protected)/contributor/task-ta/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/task-ta/update/[id]/page.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
+import FormTaskTaEdit from "@/components/features/form/task-ta/task-ta-edit-form";
 import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormTaskEdit from "@/components/features/form/task/task-edit-form";
-import FormTaskTaEdit from "@/components/features/form/task-ta/task-ta-edit-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const TaskTaDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/task/components/columns.tsx b/src/app/[locale]/(protected)/contributor/task/components/columns.tsx
index 0dbe2b0b..6a7b9a5e 100644
--- a/src/app/[locale]/(protected)/contributor/task/components/columns.tsx
+++ b/src/app/[locale]/(protected)/contributor/task/components/columns.tsx
@@ -1,26 +1,26 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 import { useRouter } from "next/navigation";
-import { useToast } from "@/components/ui/use-toast";
+import { Link } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { format } from "date-fns";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
 import { deleteCategory } from "@/lib/services/settings/settings";
 import { deleteTask } from "@/lib/services/task";
 import { error, loading } from "@/lib/utils/swal";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { useTranslations } from "next-intl";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useToast } from "@/components/ui/use-toast";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -37,12 +37,7 @@ const useTableColumns = () => {
         <div>
           <span>{row.getValue("title")}</span>
           {row.original.isForward && (
-            <Button
-              variant={"outline"}
-              color="primary"
-              size="sm"
-              className="ml-3 rounded-xl"
-            >
+            <Button variant={"outline"} color="primary" size="sm" className="ml-3 rounded-xl">
               Forward
             </Button>
           )}
@@ -76,10 +71,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("upload-date"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -112,11 +104,7 @@ const useTableColumns = () => {
 
         const statusStyles = statusColors[statusText] || "default";
 
-        return (
-          <Badge className={cn("rounded-full px-5", statusStyles)}>
-            {statusText}
-          </Badge>
-        );
+        return <Badge className={cn("rounded-full px-5", statusStyles)}>{statusText}</Badge>;
       },
     },
     {
diff --git a/src/app/[locale]/(protected)/contributor/task/components/task-table.tsx b/src/app/[locale]/(protected)/contributor/task/components/task-table.tsx
index bf91f690..91c4c46f 100644
--- a/src/app/[locale]/(protected)/contributor/task/components/task-table.tsx
+++ b/src/app/[locale]/(protected)/contributor/task/components/task-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { format } from "date-fns";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +28,15 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listTask } from "@/lib/services/task";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,16 +48,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import { listTask } from "@/lib/services/task";
 import { Label } from "@/components/ui/label";
-import { format } from "date-fns";
-import { useTranslations } from "next-intl";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const TaskTable = () => {
@@ -68,11 +69,8 @@ const TaskTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -119,20 +117,10 @@ const TaskTable = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [
-    page,
-    showData,
-    isSpecificAttention,
-    search,
-    dateFilter,
-    filterByCode,
-    statusFilter,
-  ]);
+  }, [page, showData, isSpecificAttention, search, dateFilter, filterByCode, statusFilter]);
 
   async function fetchData() {
-    const formattedStartDate = dateFilter
-      ? format(new Date(dateFilter), "yyyy-MM-dd")
-      : "";
+    const formattedStartDate = dateFilter ? format(new Date(dateFilter), "yyyy-MM-dd") : "";
     try {
       const res = await listTask(
         page - 1,
@@ -178,9 +166,7 @@ const TaskTable = () => {
 
   function handleStatusCheckboxChange(value: number) {
     setStatusFilter((prev) =>
-      prev.includes(value)
-        ? prev.filter((status) => status !== value)
-        : [...prev, value]
+      prev.includes(value) ? prev.filter((status) => status !== value) : [...prev, value]
     );
   }
 
@@ -256,40 +242,22 @@ const TaskTable = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      1 - 10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      1 - 50 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="100">
-                      1 - 100 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="250">
-                      1 - 250 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  className="ml-auto w-full sm:w-[100px]"
-                  size="md"
-                >
+                <Button variant="outline" className="ml-auto w-full sm:w-[100px]" size="md">
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[200px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[200px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                 </div>
@@ -357,9 +325,7 @@ const TaskTable = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -390,10 +356,7 @@ const TaskTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -423,11 +386,7 @@ const TaskTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/contributor/task/detail/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/task/detail/[id]/page.tsx
index bcefbe1d..0a2bc4af 100644
--- a/src/app/[locale]/(protected)/contributor/task/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/task/detail/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const TaskDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/contributor/task/forward/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/task/forward/[id]/page.tsx
index d0813864..443c31d8 100644
--- a/src/app/[locale]/(protected)/contributor/task/forward/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/task/forward/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 import FormTaskForward from "@/components/features/form/task/task-forward-form";
 
 const TaskForwardPage = async () => {
diff --git a/src/app/[locale]/(protected)/contributor/task/page.tsx b/src/app/[locale]/(protected)/contributor/task/page.tsx
index e901a073..5a506a85 100644
--- a/src/app/[locale]/(protected)/contributor/task/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/task/page.tsx
@@ -1,14 +1,17 @@
 "use client";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TaskTable from "./components/task-table";
-import { Button } from "@/components/ui/button";
-import { UploadIcon } from "lucide-react";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Link } from "@/i18n/navigation";
-import { checkAuthorization, checkLoginSession } from "@/lib/utils/utils";
+
 import React, { useEffect } from "react";
+import { Link } from "@/i18n/navigation";
+import { UploadIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 
+import { checkAuthorization, checkLoginSession } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import TaskTable from "./components/task-table";
+
 const TaskPage = () => {
   const t = useTranslations("AnalyticsDashboard");
   useEffect(() => {
diff --git a/src/app/[locale]/(protected)/contributor/task/update/[id]/page.tsx b/src/app/[locale]/(protected)/contributor/task/update/[id]/page.tsx
index 74e9d403..ebd9f77c 100644
--- a/src/app/[locale]/(protected)/contributor/task/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/contributor/task/update/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormTaskEdit from "@/components/features/form/task/task-edit-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const TaskDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/curator/feedback/page.tsx b/src/app/[locale]/(protected)/curator/feedback/page.tsx
index 6cba971b..d49f79d4 100644
--- a/src/app/[locale]/(protected)/curator/feedback/page.tsx
+++ b/src/app/[locale]/(protected)/curator/feedback/page.tsx
@@ -1,10 +1,12 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Progress } from "@/components/ui/progress";
-import { getUserFeedbacks } from "@/lib/services/master/faq";
-import { Icon } from "@iconify/react/dist/iconify.js";
+
 import { stringify } from "querystring";
 import { useEffect, useState } from "react";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { getUserFeedbacks } from "@/lib/services/master/faq";
+import { Progress } from "@/components/ui/progress";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 export default function UserFeedback() {
   const [listData, setListData] = useState<any>([]);
@@ -41,10 +43,7 @@ export default function UserFeedback() {
           {listData?.map(
             (list: any) =>
               list?.avgScore !== "NaN" && (
-                <div
-                  key={list?.id}
-                  className="flex flex-col gap-2 bg-gray-100 rounded-md p-5"
-                >
+                <div key={list?.id} className="flex flex-col gap-2 bg-gray-100 rounded-md p-5">
                   <div className="flex flex-row gap-3 items-center">
                     <p className="text-3xl">{parseInt(list?.avgScore)}</p>
                     {renderStar(parseInt(list?.avgScore))}
@@ -52,38 +51,23 @@ export default function UserFeedback() {
                   <p className="font-semibold">{list?.question}</p>
                   <div className="flex flex-row gap-3 items-center">
                     <p className="w-[120px]">Penilaian 5</p>
-                    <Progress
-                      value={parseInt(list?.score5)}
-                      className="w-[70%]"
-                    />
+                    <Progress value={parseInt(list?.score5)} className="w-[70%]" />
                   </div>
                   <div className="flex flex-row gap-3 items-center">
                     <p className="w-[120px]">Penilaian 4</p>
-                    <Progress
-                      value={parseInt(list?.score4)}
-                      className="w-[70%]"
-                    />
+                    <Progress value={parseInt(list?.score4)} className="w-[70%]" />
                   </div>
                   <div className="flex flex-row gap-3 items-center">
                     <p className="w-[120px]">Penilaian 3</p>
-                    <Progress
-                      value={parseInt(list?.score3)}
-                      className="w-[70%]"
-                    />
+                    <Progress value={parseInt(list?.score3)} className="w-[70%]" />
                   </div>
                   <div className="flex flex-row gap-3 items-center">
                     <p className="w-[120px]">Penilaian 2</p>
-                    <Progress
-                      value={parseInt(list?.score2)}
-                      className="w-[70%]"
-                    />
+                    <Progress value={parseInt(list?.score2)} className="w-[70%]" />
                   </div>
                   <div className="flex flex-row gap-3 items-center">
                     <p className="w-[120px]">Penilaian 1</p>
-                    <Progress
-                      value={parseInt(list?.score1)}
-                      className="w-[70%]"
-                    />
+                    <Progress value={parseInt(list?.score1)} className="w-[70%]" />
                   </div>
                 </div>
               )
diff --git a/src/app/[locale]/(protected)/curator/media-tracking/component/column.tsx b/src/app/[locale]/(protected)/curator/media-tracking/component/column.tsx
index b60d3a6f..9a839252 100644
--- a/src/app/[locale]/(protected)/curator/media-tracking/component/column.tsx
+++ b/src/app/[locale]/(protected)/curator/media-tracking/component/column.tsx
@@ -1,24 +1,18 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { htmlToString } from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -26,6 +20,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
diff --git a/src/app/[locale]/(protected)/curator/media-tracking/component/table.tsx b/src/app/[locale]/(protected)/curator/media-tracking/component/table.tsx
index 253e9a42..185321a1 100644
--- a/src/app/[locale]/(protected)/curator/media-tracking/component/table.tsx
+++ b/src/app/[locale]/(protected)/curator/media-tracking/component/table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,15 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { getMediaTrackingMonitoring } from "@/lib/services/media-tracking/media-tracking";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,14 +43,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
-import { getMediaTrackingMonitoring } from "@/lib/services/media-tracking/media-tracking";
 
 const MediaTrackingTable = () => {
   const router = useRouter();
@@ -61,11 +62,8 @@ const MediaTrackingTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -135,10 +133,7 @@ const MediaTrackingTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -168,11 +163,7 @@ const MediaTrackingTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/curator/media-tracking/page.tsx b/src/app/[locale]/(protected)/curator/media-tracking/page.tsx
index 1541c320..1b82b2dd 100644
--- a/src/app/[locale]/(protected)/curator/media-tracking/page.tsx
+++ b/src/app/[locale]/(protected)/curator/media-tracking/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import MediaTrackingTable from "./component/table";
 
 export default function MediaTracking() {
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx
index 67817c11..6bb9cbbc 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { htmlToString } from "@/lib/utils/globals";
-import { Link, useRouter } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -59,16 +59,12 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/curator/task-plan/mediahub/create-daily/detail/${row.original.id}`}
-              >
+              <Link href={`/curator/task-plan/mediahub/create-daily/detail/${row.original.id}`}>
                 Detail
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/curator/task-plan/mediahub/create-daily/edit/${row.original.id}`}
-              >
+              <Link href={`/curator/task-plan/mediahub/create-daily/edit/${row.original.id}`}>
                 Edit
               </Link>
             </DropdownMenuItem>
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx
index fc36d0f1..9359f8a0 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,13 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,18 +41,19 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
 
-const TaskPlanMediahubTable = (props: {
-  data: any;
-  totalPage: number;
-  totalData: number;
-}) => {
+const TaskPlanMediahubTable = (props: { data: any; totalPage: number; totalData: number }) => {
   const { data, totalPage, totalData } = props;
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -64,11 +61,8 @@ const TaskPlanMediahubTable = (props: {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   // const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -138,10 +132,7 @@ const TaskPlanMediahubTable = (props: {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -171,11 +162,7 @@ const TaskPlanMediahubTable = (props: {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx
index 8f9baff7..e807f1ac 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx
@@ -1,19 +1,42 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { id } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { list } from "postcss";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getWeeklyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getUserLevelForAssignments } from "@/lib/services/task";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -23,30 +46,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { getUserLevelForAssignments } from "@/lib/services/task";
-import { list } from "postcss";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { close, error, loading } from "@/config/swal";
-import { id } from "date-fns/locale";
 import {
   Select,
   SelectContent,
@@ -54,14 +56,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  getWeeklyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { getOnlyDate } from "@/lib/utils/globals";
-import { useParams } from "next/navigation";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -299,10 +294,7 @@ export default function DetailDaily() {
   };
 
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
-    form.setValue(
-      "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
-    );
+    form.setValue("output", checked ? [...output, id] : output.filter((value) => value !== id));
   };
 
   const handleAllUnitCheckedChange = (checked: boolean | string) => {
@@ -416,9 +408,7 @@ export default function DetailDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllCheckedChange(checked)}
                           disabled
                         />
                         <label htmlFor="all" className="text-sm">
@@ -446,9 +436,7 @@ export default function DetailDaily() {
                                     disabled
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -472,9 +460,7 @@ export default function DetailDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllUnitChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllUnitCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllUnitCheckedChange(checked)}
                           disabled
                         />
                         <label htmlFor="all" className="text-sm">
@@ -505,9 +491,7 @@ export default function DetailDaily() {
                                     disabled
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -515,40 +499,23 @@ export default function DetailDaily() {
                       ))}
                       <Dialog>
                         <DialogTrigger disabled>
-                          <a className="text-primary cursor-pointer text-sm">
-                            {`[Kustom]`}
-                          </a>
+                          <a className="text-primary cursor-pointer text-sm">{`[Kustom]`}</a>
                         </DialogTrigger>
                         <DialogContent size="md">
                           <DialogHeader>
-                            <DialogTitle>
-                              Daftar Wilayah Polda dan Polres
-                            </DialogTitle>
+                            <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                           </DialogHeader>
                           <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
                             {listDest?.map((list: any) => (
                               <div key={list.id}>
-                                <Accordion
-                                  type="single"
-                                  collapsible
-                                  className="h-fit border-none"
-                                >
-                                  <AccordionItem
-                                    value={list.name}
-                                    className="border-none"
-                                  >
+                                <Accordion type="single" collapsible className="h-fit border-none">
+                                  <AccordionItem value={list.name} className="border-none">
                                     <div className="flex items-center space-x-2">
                                       <Checkbox
                                         id={list.id}
                                         name={`all${list.id}`}
-                                        checked={
-                                          unit.includes("2")
-                                            ? true
-                                            : !!selected[list.id]
-                                        }
-                                        onCheckedChange={() =>
-                                          handleParentChange(list.id)
-                                        }
+                                        checked={unit.includes("2") ? true : !!selected[list.id]}
+                                        onCheckedChange={() => handleParentChange(list.id)}
                                         disabled={unit.includes("2")}
                                       />
                                       <label
@@ -564,15 +531,10 @@ export default function DetailDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
-                                                ? true
-                                                : !!selectAll[list.id]
+                                              unit.includes("3") ? true : !!selectAll[list.id]
                                             }
                                             onCheckedChange={(e) =>
-                                              handleSelectAllPolres(
-                                                list.id,
-                                                Boolean(e)
-                                              )
+                                              handleSelectAllPolres(list.id, Boolean(e))
                                             }
                                             disabled={unit.includes("3")}
                                           />
@@ -583,37 +545,31 @@ export default function DetailDaily() {
                                             Pilih Semua Polres
                                           </label>
                                         </div>
-                                        {list.subDestination.map(
-                                          (subDes: any) => (
-                                            <div
-                                              key={subDes.id}
-                                              className="flex items-center space-x-2"
+                                        {list.subDestination.map((subDes: any) => (
+                                          <div
+                                            key={subDes.id}
+                                            className="flex items-center space-x-2"
+                                          >
+                                            <Checkbox
+                                              id={`${list.id}${subDes.id}`}
+                                              checked={
+                                                unit.includes("3")
+                                                  ? true
+                                                  : !!selected[`${list.id}${subDes.id}`]
+                                              }
+                                              onCheckedChange={() =>
+                                                handleChildChange(`${list.id}${subDes.id}`)
+                                              }
+                                              disabled={unit.includes("3")}
+                                            />
+                                            <label
+                                              htmlFor={`${list.id}${subDes.id}`}
+                                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                             >
-                                              <Checkbox
-                                                id={`${list.id}${subDes.id}`}
-                                                checked={
-                                                  unit.includes("3")
-                                                    ? true
-                                                    : !!selected[
-                                                        `${list.id}${subDes.id}`
-                                                      ]
-                                                }
-                                                onCheckedChange={() =>
-                                                  handleChildChange(
-                                                    `${list.id}${subDes.id}`
-                                                  )
-                                                }
-                                                disabled={unit.includes("3")}
-                                              />
-                                              <label
-                                                htmlFor={`${list.id}${subDes.id}`}
-                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                              >
-                                                {subDes.name}
-                                              </label>
-                                            </div>
-                                          )
-                                        )}
+                                              {subDes.name}
+                                            </label>
+                                          </div>
+                                        ))}
                                       </div>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -645,17 +601,13 @@ export default function DetailDaily() {
                           <FormControl>
                             <RadioGroupItem value="1" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Publikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Publikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
                             <RadioGroupItem value="2" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Amplifikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Amplifikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
@@ -686,11 +638,7 @@ export default function DetailDaily() {
                           disabled
                         >
                           <CalendarIcon className="mr-2 h-4 w-4" />
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Masukkan Tanggal</span>
-                          )}
+                          {field.value ? format(field.value, "PPP") : <span>Masukkan Tanggal</span>}
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent className="w-auto p-0">
@@ -712,11 +660,7 @@ export default function DetailDaily() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Perencanaan Mingguan</FormLabel>
-                    <Select
-                      value={field.value}
-                      onValueChange={field.onChange}
-                      disabled
-                    >
+                    <Select value={field.value} onValueChange={field.onChange} disabled>
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue />
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx
index 005094a3..f8fbb0da 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx
@@ -1,19 +1,42 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { id, te } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { list } from "postcss";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getWeeklyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getUserLevelForAssignments } from "@/lib/services/task";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -23,30 +46,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { getUserLevelForAssignments } from "@/lib/services/task";
-import { list } from "postcss";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { close, error, loading } from "@/config/swal";
-import { id, te } from "date-fns/locale";
 import {
   Select,
   SelectContent,
@@ -54,14 +56,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  getWeeklyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { getOnlyDate } from "@/lib/utils/globals";
-import { useParams } from "next/navigation";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -312,10 +307,7 @@ export default function EditDaily() {
   };
 
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
-    form.setValue(
-      "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
-    );
+    form.setValue("output", checked ? [...output, id] : output.filter((value) => value !== id));
   };
 
   const handleAllUnitCheckedChange = (checked: boolean | string) => {
@@ -428,9 +420,7 @@ export default function EditDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllCheckedChange(checked)}
                         />
                         <label htmlFor="all" className="text-sm">
                           Semua
@@ -456,9 +446,7 @@ export default function EditDaily() {
                                     }
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -482,9 +470,7 @@ export default function EditDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllUnitChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllUnitCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllUnitCheckedChange(checked)}
                         />
                         <label htmlFor="all" className="text-sm">
                           Semua
@@ -505,17 +491,13 @@ export default function EditDaily() {
                                 <FormControl>
                                   <Checkbox
                                     checked={unit?.includes(item.id)}
-                                    disabled={
-                                      item.id === "3" && !unit.includes("2")
-                                    }
+                                    disabled={item.id === "3" && !unit.includes("2")}
                                     onCheckedChange={(checked) =>
                                       handleUnitCheckedChange(item.id, checked)
                                     }
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -523,40 +505,23 @@ export default function EditDaily() {
                       ))}
                       <Dialog>
                         <DialogTrigger>
-                          <a className="text-primary cursor-pointer text-sm">
-                            {`[Kustom]`}
-                          </a>
+                          <a className="text-primary cursor-pointer text-sm">{`[Kustom]`}</a>
                         </DialogTrigger>
                         <DialogContent size="md">
                           <DialogHeader>
-                            <DialogTitle>
-                              Daftar Wilayah Polda dan Polres
-                            </DialogTitle>
+                            <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                           </DialogHeader>
                           <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
                             {listDest?.map((list: any) => (
                               <div key={list.id}>
-                                <Accordion
-                                  type="single"
-                                  collapsible
-                                  className="h-fit border-none"
-                                >
-                                  <AccordionItem
-                                    value={list.name}
-                                    className="border-none"
-                                  >
+                                <Accordion type="single" collapsible className="h-fit border-none">
+                                  <AccordionItem value={list.name} className="border-none">
                                     <div className="flex items-center space-x-2">
                                       <Checkbox
                                         id={list.id}
                                         name={`all${list.id}`}
-                                        checked={
-                                          unit.includes("2")
-                                            ? true
-                                            : !!selected[list.id]
-                                        }
-                                        onCheckedChange={() =>
-                                          handleParentChange(list.id)
-                                        }
+                                        checked={unit.includes("2") ? true : !!selected[list.id]}
+                                        onCheckedChange={() => handleParentChange(list.id)}
                                         disabled={unit.includes("2")}
                                       />
                                       <label
@@ -572,15 +537,10 @@ export default function EditDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
-                                                ? true
-                                                : !!selectAll[list.id]
+                                              unit.includes("3") ? true : !!selectAll[list.id]
                                             }
                                             onCheckedChange={(e) =>
-                                              handleSelectAllPolres(
-                                                list.id,
-                                                Boolean(e)
-                                              )
+                                              handleSelectAllPolres(list.id, Boolean(e))
                                             }
                                             disabled={unit.includes("3")}
                                           />
@@ -591,37 +551,31 @@ export default function EditDaily() {
                                             Pilih Semua Polres
                                           </label>
                                         </div>
-                                        {list.subDestination.map(
-                                          (subDes: any) => (
-                                            <div
-                                              key={subDes.id}
-                                              className="flex items-center space-x-2"
+                                        {list.subDestination.map((subDes: any) => (
+                                          <div
+                                            key={subDes.id}
+                                            className="flex items-center space-x-2"
+                                          >
+                                            <Checkbox
+                                              id={`${list.id}${subDes.id}`}
+                                              checked={
+                                                unit.includes("3")
+                                                  ? true
+                                                  : !!selected[`${list.id}${subDes.id}`]
+                                              }
+                                              onCheckedChange={() =>
+                                                handleChildChange(`${list.id}${subDes.id}`)
+                                              }
+                                              disabled={unit.includes("3")}
+                                            />
+                                            <label
+                                              htmlFor={`${list.id}${subDes.id}`}
+                                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                             >
-                                              <Checkbox
-                                                id={`${list.id}${subDes.id}`}
-                                                checked={
-                                                  unit.includes("3")
-                                                    ? true
-                                                    : !!selected[
-                                                        `${list.id}${subDes.id}`
-                                                      ]
-                                                }
-                                                onCheckedChange={() =>
-                                                  handleChildChange(
-                                                    `${list.id}${subDes.id}`
-                                                  )
-                                                }
-                                                disabled={unit.includes("3")}
-                                              />
-                                              <label
-                                                htmlFor={`${list.id}${subDes.id}`}
-                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                              >
-                                                {subDes.name}
-                                              </label>
-                                            </div>
-                                          )
-                                        )}
+                                              {subDes.name}
+                                            </label>
+                                          </div>
+                                        ))}
                                       </div>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -652,17 +606,13 @@ export default function EditDaily() {
                           <FormControl>
                             <RadioGroupItem value="1" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Publikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Publikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
                             <RadioGroupItem value="2" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Amplifikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Amplifikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
@@ -692,11 +642,7 @@ export default function EditDaily() {
                           )}
                         >
                           <CalendarIcon className="mr-2 h-4 w-4" />
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Masukkan Tanggal</span>
-                          )}
+                          {field.value ? format(field.value, "PPP") : <span>Masukkan Tanggal</span>}
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent className="w-auto p-0">
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx
index fa61693d..7bd04e8e 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx
@@ -1,19 +1,40 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { id } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { list } from "postcss";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getWeeklyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getUserLevelForAssignments } from "@/lib/services/task";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -23,30 +44,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { getUserLevelForAssignments } from "@/lib/services/task";
-import { list } from "postcss";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { close, error, loading } from "@/config/swal";
-import { id } from "date-fns/locale";
 import {
   Select,
   SelectContent,
@@ -54,12 +54,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  getWeeklyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { getOnlyDate } from "@/lib/utils/globals";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -260,10 +255,7 @@ export default function CreateDaily() {
   };
 
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
-    form.setValue(
-      "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
-    );
+    form.setValue("output", checked ? [...output, id] : output.filter((value) => value !== id));
   };
 
   const handleAllUnitCheckedChange = (checked: boolean | string) => {
@@ -356,9 +348,7 @@ export default function CreateDaily() {
             Mingguan
           </Link>
 
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Harian
-          </div>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">Harian</div>
         </div>
         <div className="flex flex-col bg-white gap-2 p-6">
           <p className="text-lg">Perencanaan MediaHub</p>
@@ -394,9 +384,7 @@ export default function CreateDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllCheckedChange(checked)}
                         />
                         <label htmlFor="all" className="text-sm">
                           Semua
@@ -422,9 +410,7 @@ export default function CreateDaily() {
                                     }
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -448,9 +434,7 @@ export default function CreateDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllUnitChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllUnitCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllUnitCheckedChange(checked)}
                         />
                         <label htmlFor="all" className="text-sm">
                           Semua
@@ -471,17 +455,13 @@ export default function CreateDaily() {
                                 <FormControl>
                                   <Checkbox
                                     checked={unit?.includes(item.id)}
-                                    disabled={
-                                      item.id === "3" && !unit.includes("2")
-                                    }
+                                    disabled={item.id === "3" && !unit.includes("2")}
                                     onCheckedChange={(checked) =>
                                       handleUnitCheckedChange(item.id, checked)
                                     }
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -489,40 +469,23 @@ export default function CreateDaily() {
                       ))}
                       <Dialog>
                         <DialogTrigger asChild>
-                          <a className="text-primary cursor-pointer text-sm">
-                            {`[Kustom]`}
-                          </a>
+                          <a className="text-primary cursor-pointer text-sm">{`[Kustom]`}</a>
                         </DialogTrigger>
                         <DialogContent size="md">
                           <DialogHeader>
-                            <DialogTitle>
-                              Daftar Wilayah Polda dan Polres
-                            </DialogTitle>
+                            <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                           </DialogHeader>
                           <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
                             {listDest?.map((list: any) => (
                               <div key={list.id}>
-                                <Accordion
-                                  type="single"
-                                  collapsible
-                                  className="h-fit border-none"
-                                >
-                                  <AccordionItem
-                                    value={list.name}
-                                    className="border-none"
-                                  >
+                                <Accordion type="single" collapsible className="h-fit border-none">
+                                  <AccordionItem value={list.name} className="border-none">
                                     <div className="flex items-center space-x-2">
                                       <Checkbox
                                         id={list.id}
                                         name={`all${list.id}`}
-                                        checked={
-                                          unit.includes("2")
-                                            ? true
-                                            : !!selected[list.id]
-                                        }
-                                        onCheckedChange={() =>
-                                          handleParentChange(list.id)
-                                        }
+                                        checked={unit.includes("2") ? true : !!selected[list.id]}
+                                        onCheckedChange={() => handleParentChange(list.id)}
                                         disabled={unit.includes("2")}
                                       />
                                       <label
@@ -538,15 +501,10 @@ export default function CreateDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
-                                                ? true
-                                                : !!selectAll[list.id]
+                                              unit.includes("3") ? true : !!selectAll[list.id]
                                             }
                                             onCheckedChange={(e) =>
-                                              handleSelectAllPolres(
-                                                list.id,
-                                                Boolean(e)
-                                              )
+                                              handleSelectAllPolres(list.id, Boolean(e))
                                             }
                                             disabled={unit.includes("3")}
                                           />
@@ -557,37 +515,31 @@ export default function CreateDaily() {
                                             Pilih Semua Polres
                                           </label>
                                         </div>
-                                        {list.subDestination.map(
-                                          (subDes: any) => (
-                                            <div
-                                              key={subDes.id}
-                                              className="flex items-center space-x-2"
+                                        {list.subDestination.map((subDes: any) => (
+                                          <div
+                                            key={subDes.id}
+                                            className="flex items-center space-x-2"
+                                          >
+                                            <Checkbox
+                                              id={`${list.id}${subDes.id}`}
+                                              checked={
+                                                unit.includes("3")
+                                                  ? true
+                                                  : !!selected[`${list.id}${subDes.id}`]
+                                              }
+                                              onCheckedChange={() =>
+                                                handleChildChange(`${list.id}${subDes.id}`)
+                                              }
+                                              disabled={unit.includes("3")}
+                                            />
+                                            <label
+                                              htmlFor={`${list.id}${subDes.id}`}
+                                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                             >
-                                              <Checkbox
-                                                id={`${list.id}${subDes.id}`}
-                                                checked={
-                                                  unit.includes("3")
-                                                    ? true
-                                                    : !!selected[
-                                                        `${list.id}${subDes.id}`
-                                                      ]
-                                                }
-                                                onCheckedChange={() =>
-                                                  handleChildChange(
-                                                    `${list.id}${subDes.id}`
-                                                  )
-                                                }
-                                                disabled={unit.includes("3")}
-                                              />
-                                              <label
-                                                htmlFor={`${list.id}${subDes.id}`}
-                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                              >
-                                                {subDes.name}
-                                              </label>
-                                            </div>
-                                          )
-                                        )}
+                                              {subDes.name}
+                                            </label>
+                                          </div>
+                                        ))}
                                       </div>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -618,17 +570,13 @@ export default function CreateDaily() {
                           <FormControl>
                             <RadioGroupItem value="1" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Publikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Publikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
                             <RadioGroupItem value="2" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Amplifikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Amplifikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
@@ -658,11 +606,7 @@ export default function CreateDaily() {
                           )}
                         >
                           <CalendarIcon className="mr-2 h-4 w-4" />
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Masukkan Tanggal</span>
-                          )}
+                          {field.value ? format(field.value, "PPP") : <span>Masukkan Tanggal</span>}
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent className="w-auto p-0">
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/detail/[id]/page.tsx
index 2a9404ed..a797a6ec 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/detail/[id]/page.tsx
@@ -1,19 +1,24 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -23,16 +28,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   month: z.date({
@@ -81,10 +79,7 @@ export default function DetailMonthly() {
           form.setValue("detail", data.description);
           const date = parseDate(data.date);
           console.log("date", date);
-          form.setValue(
-            "month",
-            new Date(date.getFullYear(), date.getMonth(), 1)
-          );
+          form.setValue("month", new Date(date.getFullYear(), date.getMonth(), 1));
         }
       }
     }
@@ -122,9 +117,7 @@ export default function DetailMonthly() {
       time: "3",
       description: data.detail,
       username: "",
-      date: `${new Date(data.month).getMonth() + 1}/${new Date(
-        data.month
-      ).getFullYear()}`,
+      date: `${new Date(data.month).getMonth() + 1}/${new Date(data.month).getFullYear()}`,
       status: "Open",
     };
     console.log("req", reqData, data.month);
@@ -149,11 +142,7 @@ export default function DetailMonthly() {
 
   const handleMonthSelect = (selectedDate: Date | undefined) => {
     if (!selectedDate) return;
-    const newDate = new Date(
-      selectedDate.getFullYear(),
-      selectedDate.getMonth(),
-      1
-    );
+    const newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
     console.log("newDate", newDate, selectedDate);
     form.setValue("month", newDate);
   };
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx
index 6b95338f..f4f47b8b 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx
@@ -1,19 +1,24 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -23,16 +28,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   month: z.date({
@@ -82,10 +80,7 @@ export default function EditMonthly() {
           form.setValue("detail", data.description);
           const date = parseDate(data.date);
           console.log("date", date);
-          form.setValue(
-            "month",
-            new Date(date.getFullYear(), date.getMonth(), 1)
-          );
+          form.setValue("month", new Date(date.getFullYear(), date.getMonth(), 1));
         }
       }
     }
@@ -151,11 +146,7 @@ export default function EditMonthly() {
 
   const handleMonthSelect = (selectedDate: Date | undefined) => {
     if (!selectedDate) return;
-    const newDate = new Date(
-      selectedDate.getFullYear(),
-      selectedDate.getMonth(),
-      1
-    );
+    const newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
     console.log("newDate", newDate, selectedDate);
     form.setValue("month", newDate);
   };
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx
index c2ace4da..6e93c793 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx
@@ -1,19 +1,24 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import dynamic from "next/dynamic";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import month from "react-datepicker/dist/month";
+import year from "react-datepicker/dist/year";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -23,16 +28,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { error } from "@/config/swal";
-import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
-import month from "react-datepicker/dist/month";
-import year from "react-datepicker/dist/year";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   month: z.date({
@@ -120,11 +118,7 @@ export default function CreateMonthly() {
   const handleMonthSelect = (selectedDate: Date | undefined) => {
     if (!selectedDate) return;
     // Set ke tanggal 1 agar tidak ada hari yang diambil
-    const newDate = new Date(
-      selectedDate.getFullYear(),
-      selectedDate.getMonth(),
-      1
-    );
+    const newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
     form.setValue("month", newDate);
   };
   return (
@@ -132,9 +126,7 @@ export default function CreateMonthly() {
       <SiteBreadcrumb />
       <div className="flex flex-col gap-4">
         <div className="flex flex-row justify-center gap-5 mt-10">
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Bulanan
-          </div>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">Bulanan</div>
           <Link
             href="/curator/task-plan/mediahub/create-weekly"
             className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/detail/[id]/page.tsx
index 29229b00..ce1cb5bc 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/detail/[id]/page.tsx
@@ -1,19 +1,26 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import dayjs from "dayjs";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getMonthlyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
 import {
   Form,
   FormControl,
@@ -23,17 +30,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMonthlyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -41,10 +39,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import dayjs from "dayjs";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   week: z.object({
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/edit/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/edit/[id]/page.tsx
index ffb4b6b1..5ccf376a 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/edit/[id]/page.tsx
@@ -1,19 +1,26 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import dayjs from "dayjs";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getMonthlyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
 import {
   Form,
   FormControl,
@@ -23,17 +30,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMonthlyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -41,10 +39,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import dayjs from "dayjs";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   week: z.object({
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx
index 155b0c78..a1e2ac76 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx
@@ -1,19 +1,24 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import dayjs from "dayjs";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import { getMonthlyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
 import {
   Form,
   FormControl,
@@ -23,17 +28,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { error } from "@/config/swal";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMonthlyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -41,8 +37,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import dayjs from "dayjs";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const CustomEditor = dynamic(
   () => {
@@ -165,9 +160,7 @@ export default function CreateMonthly() {
           >
             Bulanan
           </Link>
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Mingguan
-          </div>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">Mingguan</div>
 
           <Link
             href="/curator/task-plan/mediahub/create-daily"
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx
index 9f7910b3..918a7bf4 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx
@@ -1,15 +1,17 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+import dayjs from "dayjs";
+import JoditEditor from "jodit-react";
+
+import { close, loading } from "@/config/swal";
+import { getWeeklyPlanList } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { close, loading } from "@/config/swal";
-import { getWeeklyPlanList } from "@/lib/services/agenda-setting/agenda-setting";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dayjs from "dayjs";
-import { useEffect, useRef, useState } from "react";
 import {
   Select,
   SelectContent,
@@ -18,7 +20,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import JoditEditor from "jodit-react";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 export default function DetailTaskPlanMediahub() {
   const params = useParams();
@@ -128,10 +130,7 @@ export default function DetailTaskPlanMediahub() {
         <p className="text-sm">Output Tugas</p>
         <div className="flex flex-row gap-3">
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.length == 4 : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.length == 4 : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -140,10 +139,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(2) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(2) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -152,10 +148,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(4) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(4) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -164,10 +157,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(1) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(1) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -176,10 +166,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(3) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(3) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -191,10 +178,7 @@ export default function DetailTaskPlanMediahub() {
         <p className="text-sm">Pelaksana Tugas</p>
         <div className="flex flex-row gap-3">
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(0) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(0) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -203,10 +187,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(1) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(1) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -215,10 +196,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(2) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(2) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -227,10 +205,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(3) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(3) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
diff --git a/src/app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx
index 84ab0987..5d112c65 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx
@@ -1,10 +1,12 @@
 "use client";
+
+import { useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+
+import { Button } from "@/components/ui/button";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import ListViewTable from "@/components/features/table/task-plan/list-view-table";
 import SingleViewTable from "@/components/features/table/task-plan/single-view-table";
-import { Button } from "@/components/ui/button";
-import { useRouter } from "@/i18n/navigation";
-import { useState } from "react";
 
 export default function TaskPlanMediaHub() {
   const router = useRouter();
@@ -14,18 +16,12 @@ export default function TaskPlanMediaHub() {
       <SiteBreadcrumb />
       <div className="flex flex-col gap-4">
         <div className="flex justify-between">
-          <Button
-            onClick={() =>
-              view === "single" ? setView("list") : setView("single")
-            }
-          >
+          <Button onClick={() => (view === "single" ? setView("list") : setView("single"))}>
             {view == "single" ? "List" : "Single"} View
           </Button>
           <Button
             color="primary"
-            onClick={() =>
-              router.push("/curator/task-plan/mediahub/create-monthly")
-            }
+            onClick={() => router.push("/curator/task-plan/mediahub/create-monthly")}
           >
             Buat Perencaan
           </Button>
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/columns.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/columns.tsx
index f0fcfd06..587ea0e3 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/columns.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { htmlToString } from "@/lib/utils/globals";
-import { Link, useRouter } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -59,11 +59,7 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/curator/task-plan/mediahub/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/curator/task-plan/mediahub/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
               <Link
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/table.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/table.tsx
index fc36d0f1..9359f8a0 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/table.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/components/table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,13 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,18 +41,19 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
 
-const TaskPlanMediahubTable = (props: {
-  data: any;
-  totalPage: number;
-  totalData: number;
-}) => {
+const TaskPlanMediahubTable = (props: { data: any; totalPage: number; totalData: number }) => {
   const { data, totalPage, totalData } = props;
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -64,11 +61,8 @@ const TaskPlanMediahubTable = (props: {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   // const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -138,10 +132,7 @@ const TaskPlanMediahubTable = (props: {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -171,11 +162,7 @@ const TaskPlanMediahubTable = (props: {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx
index d6153996..5a8346a9 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/detail/[id]/page.tsx
@@ -1,19 +1,42 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { id } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { list } from "postcss";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getWeeklyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getUserLevelForAssignments } from "@/lib/services/task";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -23,30 +46,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { getUserLevelForAssignments } from "@/lib/services/task";
-import { list } from "postcss";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { close, error, loading } from "@/config/swal";
-import { id } from "date-fns/locale";
 import {
   Select,
   SelectContent,
@@ -54,14 +56,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  getWeeklyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { getOnlyDate } from "@/lib/utils/globals";
-import { useParams } from "next/navigation";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -299,10 +294,7 @@ export default function DetailDaily() {
   };
 
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
-    form.setValue(
-      "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
-    );
+    form.setValue("output", checked ? [...output, id] : output.filter((value) => value !== id));
   };
 
   const handleAllUnitCheckedChange = (checked: boolean | string) => {
@@ -416,9 +408,7 @@ export default function DetailDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllCheckedChange(checked)}
                           disabled
                         />
                         <label htmlFor="all" className="text-sm">
@@ -446,9 +436,7 @@ export default function DetailDaily() {
                                     disabled
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -472,9 +460,7 @@ export default function DetailDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllUnitChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllUnitCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllUnitCheckedChange(checked)}
                           disabled
                         />
                         <label htmlFor="all" className="text-sm">
@@ -505,9 +491,7 @@ export default function DetailDaily() {
                                     disabled
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -515,40 +499,23 @@ export default function DetailDaily() {
                       ))}
                       <Dialog>
                         <DialogTrigger disabled>
-                          <a className="text-primary cursor-pointer text-sm">
-                            {`[Kustom]`}
-                          </a>
+                          <a className="text-primary cursor-pointer text-sm">{`[Kustom]`}</a>
                         </DialogTrigger>
                         <DialogContent size="md">
                           <DialogHeader>
-                            <DialogTitle>
-                              Daftar Wilayah Polda dan Polres
-                            </DialogTitle>
+                            <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                           </DialogHeader>
                           <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
                             {listDest?.map((list: any) => (
                               <div key={list.id}>
-                                <Accordion
-                                  type="single"
-                                  collapsible
-                                  className="h-fit border-none"
-                                >
-                                  <AccordionItem
-                                    value={list.name}
-                                    className="border-none"
-                                  >
+                                <Accordion type="single" collapsible className="h-fit border-none">
+                                  <AccordionItem value={list.name} className="border-none">
                                     <div className="flex items-center space-x-2">
                                       <Checkbox
                                         id={list.id}
                                         name={`all${list.id}`}
-                                        checked={
-                                          unit.includes("2")
-                                            ? true
-                                            : !!selected[list.id]
-                                        }
-                                        onCheckedChange={() =>
-                                          handleParentChange(list.id)
-                                        }
+                                        checked={unit.includes("2") ? true : !!selected[list.id]}
+                                        onCheckedChange={() => handleParentChange(list.id)}
                                         disabled={unit.includes("2")}
                                       />
                                       <label
@@ -564,15 +531,10 @@ export default function DetailDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
-                                                ? true
-                                                : !!selectAll[list.id]
+                                              unit.includes("3") ? true : !!selectAll[list.id]
                                             }
                                             onCheckedChange={(e) =>
-                                              handleSelectAllPolres(
-                                                list.id,
-                                                Boolean(e)
-                                              )
+                                              handleSelectAllPolres(list.id, Boolean(e))
                                             }
                                             disabled={unit.includes("3")}
                                           />
@@ -583,37 +545,31 @@ export default function DetailDaily() {
                                             Pilih Semua Polres
                                           </label>
                                         </div>
-                                        {list.subDestination.map(
-                                          (subDes: any) => (
-                                            <div
-                                              key={subDes.id}
-                                              className="flex items-center space-x-2"
+                                        {list.subDestination.map((subDes: any) => (
+                                          <div
+                                            key={subDes.id}
+                                            className="flex items-center space-x-2"
+                                          >
+                                            <Checkbox
+                                              id={`${list.id}${subDes.id}`}
+                                              checked={
+                                                unit.includes("3")
+                                                  ? true
+                                                  : !!selected[`${list.id}${subDes.id}`]
+                                              }
+                                              onCheckedChange={() =>
+                                                handleChildChange(`${list.id}${subDes.id}`)
+                                              }
+                                              disabled={unit.includes("3")}
+                                            />
+                                            <label
+                                              htmlFor={`${list.id}${subDes.id}`}
+                                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                             >
-                                              <Checkbox
-                                                id={`${list.id}${subDes.id}`}
-                                                checked={
-                                                  unit.includes("3")
-                                                    ? true
-                                                    : !!selected[
-                                                        `${list.id}${subDes.id}`
-                                                      ]
-                                                }
-                                                onCheckedChange={() =>
-                                                  handleChildChange(
-                                                    `${list.id}${subDes.id}`
-                                                  )
-                                                }
-                                                disabled={unit.includes("3")}
-                                              />
-                                              <label
-                                                htmlFor={`${list.id}${subDes.id}`}
-                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                              >
-                                                {subDes.name}
-                                              </label>
-                                            </div>
-                                          )
-                                        )}
+                                              {subDes.name}
+                                            </label>
+                                          </div>
+                                        ))}
                                       </div>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -645,17 +601,13 @@ export default function DetailDaily() {
                           <FormControl>
                             <RadioGroupItem value="1" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Publikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Publikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
                             <RadioGroupItem value="2" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Amplifikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Amplifikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
@@ -686,11 +638,7 @@ export default function DetailDaily() {
                           disabled
                         >
                           <CalendarIcon className="mr-2 h-4 w-4" />
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Masukkan Tanggal</span>
-                          )}
+                          {field.value ? format(field.value, "PPP") : <span>Masukkan Tanggal</span>}
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent className="w-auto p-0">
@@ -712,11 +660,7 @@ export default function DetailDaily() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Perencanaan Mingguan</FormLabel>
-                    <Select
-                      value={field.value}
-                      onValueChange={field.onChange}
-                      disabled
-                    >
+                    <Select value={field.value} onValueChange={field.onChange} disabled>
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue />
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx
index af1859f5..8de3ecde 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/edit/[id]/page.tsx
@@ -1,19 +1,42 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { id, te } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { list } from "postcss";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getWeeklyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getUserLevelForAssignments } from "@/lib/services/task";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -23,30 +46,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { getUserLevelForAssignments } from "@/lib/services/task";
-import { list } from "postcss";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { close, error, loading } from "@/config/swal";
-import { id, te } from "date-fns/locale";
 import {
   Select,
   SelectContent,
@@ -54,14 +56,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  getWeeklyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { getOnlyDate } from "@/lib/utils/globals";
-import { useParams } from "next/navigation";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -312,10 +307,7 @@ export default function EditDaily() {
   };
 
   const handleItemCheckedChange = (id: string, checked: boolean | string) => {
-    form.setValue(
-      "output",
-      checked ? [...output, id] : output.filter((value) => value !== id)
-    );
+    form.setValue("output", checked ? [...output, id] : output.filter((value) => value !== id));
   };
 
   const handleAllUnitCheckedChange = (checked: boolean | string) => {
@@ -428,9 +420,7 @@ export default function EditDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllCheckedChange(checked)}
                         />
                         <label htmlFor="all" className="text-sm">
                           Semua
@@ -456,9 +446,7 @@ export default function EditDaily() {
                                     }
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -482,9 +470,7 @@ export default function EditDaily() {
                         <Checkbox
                           id="all"
                           checked={isAllUnitChecked}
-                          onCheckedChange={(checked) =>
-                            handleAllUnitCheckedChange(checked)
-                          }
+                          onCheckedChange={(checked) => handleAllUnitCheckedChange(checked)}
                         />
                         <label htmlFor="all" className="text-sm">
                           Semua
@@ -505,17 +491,13 @@ export default function EditDaily() {
                                 <FormControl>
                                   <Checkbox
                                     checked={unit?.includes(item.id)}
-                                    disabled={
-                                      item.id === "3" && !unit.includes("2")
-                                    }
+                                    disabled={item.id === "3" && !unit.includes("2")}
                                     onCheckedChange={(checked) =>
                                       handleUnitCheckedChange(item.id, checked)
                                     }
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -523,40 +505,23 @@ export default function EditDaily() {
                       ))}
                       <Dialog>
                         <DialogTrigger>
-                          <a className="text-primary cursor-pointer text-sm">
-                            {`[Kustom]`}
-                          </a>
+                          <a className="text-primary cursor-pointer text-sm">{`[Kustom]`}</a>
                         </DialogTrigger>
                         <DialogContent size="md">
                           <DialogHeader>
-                            <DialogTitle>
-                              Daftar Wilayah Polda dan Polres
-                            </DialogTitle>
+                            <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                           </DialogHeader>
                           <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
                             {listDest?.map((list: any) => (
                               <div key={list.id}>
-                                <Accordion
-                                  type="single"
-                                  collapsible
-                                  className="h-fit border-none"
-                                >
-                                  <AccordionItem
-                                    value={list.name}
-                                    className="border-none"
-                                  >
+                                <Accordion type="single" collapsible className="h-fit border-none">
+                                  <AccordionItem value={list.name} className="border-none">
                                     <div className="flex items-center space-x-2">
                                       <Checkbox
                                         id={list.id}
                                         name={`all${list.id}`}
-                                        checked={
-                                          unit.includes("2")
-                                            ? true
-                                            : !!selected[list.id]
-                                        }
-                                        onCheckedChange={() =>
-                                          handleParentChange(list.id)
-                                        }
+                                        checked={unit.includes("2") ? true : !!selected[list.id]}
+                                        onCheckedChange={() => handleParentChange(list.id)}
                                         disabled={unit.includes("2")}
                                       />
                                       <label
@@ -572,15 +537,10 @@ export default function EditDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
-                                                ? true
-                                                : !!selectAll[list.id]
+                                              unit.includes("3") ? true : !!selectAll[list.id]
                                             }
                                             onCheckedChange={(e) =>
-                                              handleSelectAllPolres(
-                                                list.id,
-                                                Boolean(e)
-                                              )
+                                              handleSelectAllPolres(list.id, Boolean(e))
                                             }
                                             disabled={unit.includes("3")}
                                           />
@@ -591,37 +551,31 @@ export default function EditDaily() {
                                             Pilih Semua Polres
                                           </label>
                                         </div>
-                                        {list.subDestination.map(
-                                          (subDes: any) => (
-                                            <div
-                                              key={subDes.id}
-                                              className="flex items-center space-x-2"
+                                        {list.subDestination.map((subDes: any) => (
+                                          <div
+                                            key={subDes.id}
+                                            className="flex items-center space-x-2"
+                                          >
+                                            <Checkbox
+                                              id={`${list.id}${subDes.id}`}
+                                              checked={
+                                                unit.includes("3")
+                                                  ? true
+                                                  : !!selected[`${list.id}${subDes.id}`]
+                                              }
+                                              onCheckedChange={() =>
+                                                handleChildChange(`${list.id}${subDes.id}`)
+                                              }
+                                              disabled={unit.includes("3")}
+                                            />
+                                            <label
+                                              htmlFor={`${list.id}${subDes.id}`}
+                                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                             >
-                                              <Checkbox
-                                                id={`${list.id}${subDes.id}`}
-                                                checked={
-                                                  unit.includes("3")
-                                                    ? true
-                                                    : !!selected[
-                                                        `${list.id}${subDes.id}`
-                                                      ]
-                                                }
-                                                onCheckedChange={() =>
-                                                  handleChildChange(
-                                                    `${list.id}${subDes.id}`
-                                                  )
-                                                }
-                                                disabled={unit.includes("3")}
-                                              />
-                                              <label
-                                                htmlFor={`${list.id}${subDes.id}`}
-                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                              >
-                                                {subDes.name}
-                                              </label>
-                                            </div>
-                                          )
-                                        )}
+                                              {subDes.name}
+                                            </label>
+                                          </div>
+                                        ))}
                                       </div>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -652,17 +606,13 @@ export default function EditDaily() {
                           <FormControl>
                             <RadioGroupItem value="1" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Publikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Publikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
                             <RadioGroupItem value="2" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Amplifikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Amplifikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
@@ -692,11 +642,7 @@ export default function EditDaily() {
                           )}
                         >
                           <CalendarIcon className="mr-2 h-4 w-4" />
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Masukkan Tanggal</span>
-                          )}
+                          {field.value ? format(field.value, "PPP") : <span>Masukkan Tanggal</span>}
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent className="w-auto p-0">
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx
index a71f15e8..d755d58f 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx
@@ -1,19 +1,39 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { id } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getWeeklyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getUserLevelForAssignments } from "@/lib/services/task";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -23,12 +43,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
@@ -37,28 +53,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  getWeeklyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { id } from "date-fns/locale";
-import { close, error, loading } from "@/config/swal";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { getUserLevelForAssignments } from "@/lib/services/task";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   date: z.date({
@@ -326,9 +321,7 @@ export default function CreateDaily() {
             Mingguan
           </Link>
 
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Harian
-          </div>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">Harian</div>
         </div>
         <div className="flex flex-col bg-white gap-2 p-6">
           <p className="text-lg">Perencanaan MediaHub</p>
@@ -399,16 +392,12 @@ export default function CreateDaily() {
                                         "output",
                                         checked
                                           ? [...output, item.id]
-                                          : output.filter(
-                                              (value) => value !== item.id
-                                            )
+                                          : output.filter((value) => value !== item.id)
                                       );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -462,25 +451,18 @@ export default function CreateDaily() {
                                 <FormControl>
                                   <Checkbox
                                     checked={unit?.includes(item.id)}
-                                    disabled={
-                                      item.id === "polres" &&
-                                      !unit.includes("polda")
-                                    }
+                                    disabled={item.id === "polres" && !unit.includes("polda")}
                                     onCheckedChange={(checked) => {
                                       form.setValue(
                                         "unit",
                                         checked
                                           ? [...unit, item.id]
-                                          : unit.filter(
-                                              (value) => value !== item.id
-                                            )
+                                          : unit.filter((value) => value !== item.id)
                                       );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -488,40 +470,23 @@ export default function CreateDaily() {
                       ))}
                       <Dialog>
                         <DialogTrigger asChild>
-                          <a className="text-primary cursor-pointer text-sm">
-                            {`[Kustom]`}
-                          </a>
+                          <a className="text-primary cursor-pointer text-sm">{`[Kustom]`}</a>
                         </DialogTrigger>
                         <DialogContent size="md">
                           <DialogHeader>
-                            <DialogTitle>
-                              Daftar Wilayah Polda dan Polres
-                            </DialogTitle>
+                            <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                           </DialogHeader>
                           <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
                             {listDest?.map((list: any) => (
                               <div key={list.id}>
-                                <Accordion
-                                  type="single"
-                                  collapsible
-                                  className="h-fit border-none"
-                                >
-                                  <AccordionItem
-                                    value={list.name}
-                                    className="border-none"
-                                  >
+                                <Accordion type="single" collapsible className="h-fit border-none">
+                                  <AccordionItem value={list.name} className="border-none">
                                     <div className="flex items-center space-x-2">
                                       <Checkbox
                                         id={list.id}
                                         name={`all${list.id}`}
-                                        checked={
-                                          unit.includes("2")
-                                            ? true
-                                            : !!selected[list.id]
-                                        }
-                                        onCheckedChange={() =>
-                                          handleParentChange(list.id)
-                                        }
+                                        checked={unit.includes("2") ? true : !!selected[list.id]}
+                                        onCheckedChange={() => handleParentChange(list.id)}
                                         disabled={unit.includes("2")}
                                       />
                                       <label
@@ -537,15 +502,10 @@ export default function CreateDaily() {
                                         <div className="flex items-center space-x-2">
                                           <Checkbox
                                             checked={
-                                              unit.includes("3")
-                                                ? true
-                                                : !!selectAll[list.id]
+                                              unit.includes("3") ? true : !!selectAll[list.id]
                                             }
                                             onCheckedChange={(e) =>
-                                              handleSelectAllPolres(
-                                                list.id,
-                                                Boolean(e)
-                                              )
+                                              handleSelectAllPolres(list.id, Boolean(e))
                                             }
                                             disabled={unit.includes("3")}
                                           />
@@ -556,37 +516,31 @@ export default function CreateDaily() {
                                             Pilih Semua Polres
                                           </label>
                                         </div>
-                                        {list.subDestination.map(
-                                          (subDes: any) => (
-                                            <div
-                                              key={subDes.id}
-                                              className="flex items-center space-x-2"
+                                        {list.subDestination.map((subDes: any) => (
+                                          <div
+                                            key={subDes.id}
+                                            className="flex items-center space-x-2"
+                                          >
+                                            <Checkbox
+                                              id={`${list.id}${subDes.id}`}
+                                              checked={
+                                                unit.includes("3")
+                                                  ? true
+                                                  : !!selected[`${list.id}${subDes.id}`]
+                                              }
+                                              onCheckedChange={() =>
+                                                handleChildChange(`${list.id}${subDes.id}`)
+                                              }
+                                              disabled={unit.includes("3")}
+                                            />
+                                            <label
+                                              htmlFor={`${list.id}${subDes.id}`}
+                                              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                             >
-                                              <Checkbox
-                                                id={`${list.id}${subDes.id}`}
-                                                checked={
-                                                  unit.includes("3")
-                                                    ? true
-                                                    : !!selected[
-                                                        `${list.id}${subDes.id}`
-                                                      ]
-                                                }
-                                                onCheckedChange={() =>
-                                                  handleChildChange(
-                                                    `${list.id}${subDes.id}`
-                                                  )
-                                                }
-                                                disabled={unit.includes("3")}
-                                              />
-                                              <label
-                                                htmlFor={`${list.id}${subDes.id}`}
-                                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                                              >
-                                                {subDes.name}
-                                              </label>
-                                            </div>
-                                          )
-                                        )}
+                                              {subDes.name}
+                                            </label>
+                                          </div>
+                                        ))}
                                       </div>
                                     </AccordionContent>
                                   </AccordionItem>
@@ -649,16 +603,12 @@ export default function CreateDaily() {
                                         "media",
                                         checked
                                           ? [...media, item.id]
-                                          : media.filter(
-                                              (value) => value !== item.id
-                                            )
+                                          : media.filter((value) => value !== item.id)
                                       );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
-                                  {item.label}
-                                </FormLabel>
+                                <FormLabel className="font-normal">{item.label}</FormLabel>
                               </FormItem>
                             );
                           }}
@@ -685,17 +635,13 @@ export default function CreateDaily() {
                           <FormControl>
                             <RadioGroupItem value="1" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Publikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Publikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
                             <RadioGroupItem value="2" />
                           </FormControl>
-                          <FormLabel className="font-normal">
-                            Amplifikasi
-                          </FormLabel>
+                          <FormLabel className="font-normal">Amplifikasi</FormLabel>
                         </FormItem>
                         <FormItem className="flex items-center space-x-3 space-y-0">
                           <FormControl>
@@ -750,11 +696,7 @@ export default function CreateDaily() {
                           )}
                         >
                           <CalendarIcon className="mr-2 h-4 w-4" />
-                          {field.value ? (
-                            format(field.value, "PPP")
-                          ) : (
-                            <span>Masukkan Tanggal</span>
-                          )}
+                          {field.value ? format(field.value, "PPP") : <span>Masukkan Tanggal</span>}
                         </Button>
                       </PopoverTrigger>
                       <PopoverContent className="w-auto p-0">
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/detail/[id]/page.tsx
index 22ac075e..88dc125f 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/detail/[id]/page.tsx
@@ -1,19 +1,24 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -23,16 +28,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   month: z.date({
@@ -81,10 +79,7 @@ export default function DetailMonthly() {
           form.setValue("detail", data.description);
           const date = parseDate(data.date);
           console.log("date", date);
-          form.setValue(
-            "month",
-            new Date(date.getFullYear(), date.getMonth(), 1)
-          );
+          form.setValue("month", new Date(date.getFullYear(), date.getMonth(), 1));
         }
       }
     }
@@ -149,11 +144,7 @@ export default function DetailMonthly() {
 
   const handleMonthSelect = (selectedDate: Date | undefined) => {
     if (!selectedDate) return;
-    const newDate = new Date(
-      selectedDate.getFullYear(),
-      selectedDate.getMonth(),
-      1
-    );
+    const newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
     console.log("newDate", newDate, selectedDate);
     form.setValue("month", newDate);
   };
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/edit/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/edit/[id]/page.tsx
index 45db7c16..8a0da4cf 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/edit/[id]/page.tsx
@@ -1,19 +1,24 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -23,16 +28,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   month: z.date({
@@ -81,10 +79,7 @@ export default function EditMonthly() {
           form.setValue("detail", data.description);
           const date = parseDate(data.date);
           console.log("date", date);
-          form.setValue(
-            "month",
-            new Date(date.getFullYear(), date.getMonth(), 1)
-          );
+          form.setValue("month", new Date(date.getFullYear(), date.getMonth(), 1));
         }
       }
     }
@@ -150,11 +145,7 @@ export default function EditMonthly() {
 
   const handleMonthSelect = (selectedDate: Date | undefined) => {
     if (!selectedDate) return;
-    const newDate = new Date(
-      selectedDate.getFullYear(),
-      selectedDate.getMonth(),
-      1
-    );
+    const newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
     console.log("newDate", newDate, selectedDate);
     form.setValue("month", newDate);
   };
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/page.tsx
index c17708d0..cc8e6f70 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-monthly/page.tsx
@@ -1,19 +1,22 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import dynamic from "next/dynamic";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -23,14 +26,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { error } from "@/config/swal";
-import { savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   month: z.date({
@@ -117,11 +115,7 @@ export default function CreateMonthly() {
 
   const handleMonthSelect = (selectedDate: Date | undefined) => {
     if (!selectedDate) return;
-    const newDate = new Date(
-      selectedDate.getFullYear(),
-      selectedDate.getMonth(),
-      1
-    );
+    const newDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
     form.setValue("month", newDate);
   };
   return (
@@ -129,9 +123,7 @@ export default function CreateMonthly() {
       <SiteBreadcrumb />
       <div className="flex flex-col gap-4">
         <div className="flex flex-row justify-center gap-5 mt-10">
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Bulanan
-          </div>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">Bulanan</div>
           <Link
             href="/curator/task-plan/medsos-mediahub/create-weekly"
             className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/detail/[id]/page.tsx
index 29229b00..ce1cb5bc 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/detail/[id]/page.tsx
@@ -1,19 +1,26 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import dayjs from "dayjs";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getMonthlyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
 import {
   Form,
   FormControl,
@@ -23,17 +30,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMonthlyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -41,10 +39,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import dayjs from "dayjs";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   week: z.object({
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/edit/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/edit/[id]/page.tsx
index 0511c0c9..90b48fe6 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/edit/[id]/page.tsx
@@ -1,19 +1,26 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import React, { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import { useParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import dayjs from "dayjs";
+import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getMonthlyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import JoditEditor from "jodit-react";
 import {
   Form,
   FormControl,
@@ -23,17 +30,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { close, error, loading } from "@/config/swal";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMonthlyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -41,10 +39,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import dayjs from "dayjs";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   week: z.object({
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/page.tsx
index 6347f998..3a995596 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-weekly/page.tsx
@@ -1,19 +1,23 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import dynamic from "next/dynamic";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { format } from "date-fns";
 import JoditEditor from "jodit-react";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { error } from "@/config/swal";
+import { getMonthlyPlanList, savePlanning } from "@/lib/services/agenda-setting/agenda-setting";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Form,
   FormControl,
@@ -23,17 +27,8 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { error } from "@/config/swal";
-import { getOnlyDate } from "@/lib/utils/globals";
-import {
-  getMonthlyPlanList,
-  savePlanning,
-} from "@/lib/services/agenda-setting/agenda-setting";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -41,7 +36,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import dynamic from "next/dynamic";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   week: z.object({
@@ -165,9 +160,7 @@ export default function CreateMonthly() {
           >
             Bulanan
           </Link>
-          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
-            Mingguan
-          </div>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">Mingguan</div>
 
           <Link
             href="/curator/task-plan/medsos-mediahub/create-daily"
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/detail/[id]/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/detail/[id]/page.tsx
index 9f7910b3..918a7bf4 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/detail/[id]/page.tsx
@@ -1,15 +1,17 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+import dayjs from "dayjs";
+import JoditEditor from "jodit-react";
+
+import { close, loading } from "@/config/swal";
+import { getWeeklyPlanList } from "@/lib/services/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/lib/services/planning/planning";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { close, loading } from "@/config/swal";
-import { getWeeklyPlanList } from "@/lib/services/agenda-setting/agenda-setting";
-import { getPlanningById } from "@/lib/services/planning/planning";
-import { useParams } from "next/navigation";
-import dayjs from "dayjs";
-import { useEffect, useRef, useState } from "react";
 import {
   Select,
   SelectContent,
@@ -18,7 +20,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import JoditEditor from "jodit-react";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 export default function DetailTaskPlanMediahub() {
   const params = useParams();
@@ -128,10 +130,7 @@ export default function DetailTaskPlanMediahub() {
         <p className="text-sm">Output Tugas</p>
         <div className="flex flex-row gap-3">
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.length == 4 : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.length == 4 : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -140,10 +139,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(2) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(2) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -152,10 +148,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(4) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(4) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -164,10 +157,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(1) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(1) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -176,10 +166,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={taskOutput ? taskOutput.includes(3) : false}
-            />
+            <Checkbox id="all" checked={taskOutput ? taskOutput.includes(3) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -191,10 +178,7 @@ export default function DetailTaskPlanMediahub() {
         <p className="text-sm">Pelaksana Tugas</p>
         <div className="flex flex-row gap-3">
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(0) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(0) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -203,10 +187,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(1) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(1) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -215,10 +196,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(2) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(2) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -227,10 +205,7 @@ export default function DetailTaskPlanMediahub() {
             </label>
           </div>
           <div className="flex items-center space-x-2">
-            <Checkbox
-              id="all"
-              checked={topDestination ? topDestination.includes(3) : false}
-            />
+            <Checkbox id="all" checked={topDestination ? topDestination.includes(3) : false} />
             <label
               htmlFor="all"
               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
diff --git a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx
index fbb41cee..5305a9af 100644
--- a/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx
+++ b/src/app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx
@@ -1,10 +1,12 @@
 "use client";
+
+import { useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+
+import { Button } from "@/components/ui/button";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import ListViewSocialMediaTable from "@/components/features/table/task-plan/list-view-social-media-table";
 import SingleViewSocialMediaTable from "@/components/features/table/task-plan/single-view-social-media-table";
-import { Button } from "@/components/ui/button";
-import { useRouter } from "@/i18n/navigation";
-import { useState } from "react";
 
 export default function TaskPlanSocialMediaMediaHub() {
   const router = useRouter();
@@ -14,27 +16,17 @@ export default function TaskPlanSocialMediaMediaHub() {
       <SiteBreadcrumb />
       <div className="flex flex-col gap-4">
         <div className="flex justify-between">
-          <Button
-            onClick={() =>
-              view === "single" ? setView("list") : setView("single")
-            }
-          >
+          <Button onClick={() => (view === "single" ? setView("list") : setView("single"))}>
             {view == "single" ? "List" : "Single"} View
           </Button>
           <Button
             color="primary"
-            onClick={() =>
-              router.push("/curator/task-plan/medsos-mediahub/create-monthly")
-            }
+            onClick={() => router.push("/curator/task-plan/medsos-mediahub/create-monthly")}
           >
             Buat Perencaan
           </Button>
         </div>
-        {view == "single" ? (
-          <SingleViewSocialMediaTable />
-        ) : (
-          <ListViewSocialMediaTable />
-        )}
+        {view == "single" ? <SingleViewSocialMediaTable /> : <ListViewSocialMediaTable />}
       </div>
     </>
   );
diff --git a/src/app/[locale]/(protected)/dashboard/executive/page.tsx b/src/app/[locale]/(protected)/dashboard/executive/page.tsx
index 313e5e58..b7172e9d 100644
--- a/src/app/[locale]/(protected)/dashboard/executive/page.tsx
+++ b/src/app/[locale]/(protected)/dashboard/executive/page.tsx
@@ -1,5 +1,11 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { LucideBoxSelect } from "lucide-react";
+
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import {
@@ -13,11 +19,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { LucideBoxSelect } from "lucide-react";
-import { useEffect, useState } from "react";
-import Cookies from "js-cookie";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 export default function ExecutiveDashboard() {
   const [startDate, setStartDate] = useState<any>(new Date());
@@ -48,8 +50,8 @@ export default function ExecutiveDashboard() {
         ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?"
         : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`
-      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`;
+        ? `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`
+        : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`;
 
   const view2 =
     levelName == "MABES POLRI"
@@ -57,8 +59,8 @@ export default function ExecutiveDashboard() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`;
 
   const view3 =
     levelName == "MABES POLRI"
@@ -66,8 +68,8 @@ export default function ExecutiveDashboard() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`;
 
   const view4 =
     levelName == "MABES POLRI"
@@ -75,8 +77,8 @@ export default function ExecutiveDashboard() {
         ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?polda-selected=${state}&`;
 
   const view5 =
     levelName == "MABES POLRI"
@@ -84,8 +86,8 @@ export default function ExecutiveDashboard() {
         ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`;
 
   const view6 =
     levelName == "MABES POLRI"
@@ -93,8 +95,8 @@ export default function ExecutiveDashboard() {
         ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`;
 
   const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
 
@@ -143,15 +145,9 @@ export default function ExecutiveDashboard() {
       <div className="mt-3 flex gap-2 flex-row justify-center">
         {/* Polda */}
         {(levelNumber === "1" || levelNumber === "2") && (
-          <Card
-            className={`rounded-sm p-3 ${
-              levelNumber === "2" ? "w-6/12" : "w-4/12"
-            }`}
-          >
+          <Card className={`rounded-sm p-3 ${levelNumber === "2" ? "w-6/12" : "w-4/12"}`}>
             <div className="flex flex-row justify-between">
-              <p className="text-base font-semibold">
-                Upload konten hari ini Polda
-              </p>
+              <p className="text-base font-semibold">Upload konten hari ini Polda</p>
             </div>
             <div className="my-5">
               {ticket1 == "" ? (
@@ -175,15 +171,9 @@ export default function ExecutiveDashboard() {
 
         {/* Satker */}
         {(levelNumber === "1" || levelNumber === "3") && (
-          <Card
-            className={`rounded-sm p-3 ${
-              levelNumber === "3" ? "w-full" : "w-4/12"
-            }`}
-          >
+          <Card className={`rounded-sm p-3 ${levelNumber === "3" ? "w-full" : "w-4/12"}`}>
             <div className="flex flex-row justify-between">
-              <p className="text-base font-semibold">
-                Upload konten hari ini Satker
-              </p>
+              <p className="text-base font-semibold">Upload konten hari ini Satker</p>
             </div>
             <div className="my-5">
               {ticket2 == "" ? (
@@ -207,15 +197,9 @@ export default function ExecutiveDashboard() {
 
         {/* Polres */}
         {(levelNumber === "1" || levelNumber === "2") && (
-          <Card
-            className={`rounded-sm p-3 ${
-              levelNumber === "2" ? "w-6/12" : "w-4/12"
-            }`}
-          >
+          <Card className={`rounded-sm p-3 ${levelNumber === "2" ? "w-6/12" : "w-4/12"}`}>
             <div className="flex flex-row justify-between">
-              <p className="text-base font-semibold">
-                Upload konten hari ini Polres
-              </p>
+              <p className="text-base font-semibold">Upload konten hari ini Polres</p>
             </div>
             <div className="my-5">
               {ticket3 == "" ? (
@@ -264,9 +248,7 @@ export default function ExecutiveDashboard() {
       <div className="w-full mt-3">
         <Card className="rounded-sm p-3 h-[750px]">
           <div className="flex flex-row justify-between mx-3">
-            <p className="text-base font-semibold">
-              Heatmap Konten dan Kategori dengan Interaksi
-            </p>
+            <p className="text-base font-semibold">Heatmap Konten dan Kategori dengan Interaksi</p>
           </div>
           <div className="my-5">
             {ticket5 == "" ? (
diff --git a/src/app/[locale]/(protected)/dashboard/layout.tsx b/src/app/[locale]/(protected)/dashboard/layout.tsx
index 2a0618ff..dc76124a 100644
--- a/src/app/[locale]/(protected)/dashboard/layout.tsx
+++ b/src/app/[locale]/(protected)/dashboard/layout.tsx
@@ -1,15 +1,19 @@
-import PageTitle from "@/components/page-title";
 import { Metadata } from "next";
 
+import PageTitle from "@/components/ui/structures/page-title";
+
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return <>
+  return (
+    <>
       <PageTitle className="mb-6" />
       {children}
-  </>
+    </>
+  );
 };
 
 export default Layout;
diff --git a/src/app/[locale]/(protected)/dashboard/page.tsx b/src/app/[locale]/(protected)/dashboard/page.tsx
index dd3294aa..6a707034 100644
--- a/src/app/[locale]/(protected)/dashboard/page.tsx
+++ b/src/app/[locale]/(protected)/dashboard/page.tsx
@@ -1,25 +1,26 @@
 "use client";
 
-import { StatisticsBlock } from "@/components/features/blocks/statistics-block";
+import { useEffect } from "react";
+import { Link } from "@/i18n/navigation";
+import Cookies from "js-cookie";
+import { UploadIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import DashboardDropdown from "@/components/ui/structures/dashboard-dropdown";
-import { useTranslations } from "next-intl";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { UploadIcon } from "lucide-react";
-
-import Cookies from "js-cookie";
-import { useEffect } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import DashboardVisualization from "@/components/features/visualization/dashboard-viz";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import TaskTable from "../contributor/task/components/task-table";
-import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { StatisticsBlock } from "@/components/features/blocks/statistics-block";
+import DashboardVisualization from "@/components/features/visualization/dashboard-viz";
+
 import BlogTable from "../contributor/blog/components/blog-table";
+import ReportTable from "../contributor/report/components/report-table";
+import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table";
+import TaskTable from "../contributor/task/components/task-table";
 import ContentTable from "./routine-task/components/content-table";
 import RecentActivity from "./routine-task/components/recent-activity";
-import { Link } from "@/i18n/navigation";
-import ReportTable from "../contributor/report/components/report-table";
 
 const DashboardPage = () => {
   const t = useTranslations("AnalyticsDashboard");
diff --git a/src/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx b/src/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
index 9d49f6ec..d95a54ed 100644
--- a/src/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
+++ b/src/app/[locale]/(protected)/dashboard/routine-task/components/columns.tsx
@@ -1,17 +1,17 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -32,21 +32,14 @@ const columns: ColumnDef<any>[] = [
     header: "Title",
     cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
       const title: string = row.getValue("title");
-      return (
-        <span className="">
-          {title.length > 50 ? `${title.slice(0, 10)}...` : title}
-        </span>
-      );
+      return <span className="">{title.length > 50 ? `${title.slice(0, 10)}...` : title}</span>;
     },
   },
   {
     accessorKey: "createdAt",
     header: "Upload Date",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -121,16 +114,11 @@ const columns: ColumnDef<any>[] = [
       };
 
       // Mendapatkan kelas warna dari mapping, default ke abu-abu jika tidak ditemukan
-      const buttonClass =
-        colorMapping[statusName] || "text-gray-500 border-gray-500";
+      const buttonClass = colorMapping[statusName] || "text-gray-500 border-gray-500";
 
       return (
         <div>
-          <Button
-            size="sm"
-            variant="outline"
-            className={`btn btn-sm pill-btn ml-1 ${buttonClass}`}
-          >
+          <Button size="sm" variant="outline" className={`btn btn-sm pill-btn ml-1 ${buttonClass}`}>
             {statusName || "Tidak Diketahui"}
           </Button>
         </div>
diff --git a/src/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx b/src/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
index 7320fef5..84ab7c01 100644
--- a/src/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
+++ b/src/app/[locale]/(protected)/dashboard/routine-task/components/content-table.tsx
@@ -1,28 +1,21 @@
 "use client";
+
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -34,7 +27,14 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listDataAll, listDataImage } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -43,14 +43,6 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
-import { listDataAll, listDataImage } from "@/lib/services/content/content";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import {
   Select,
   SelectContent,
@@ -60,6 +52,17 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 
 type StatusFilter = string[];
 
@@ -70,11 +73,8 @@ const ContentTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -233,10 +233,7 @@ const ContentTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -266,11 +263,7 @@ const ContentTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/dashboard/routine-task/components/most-sales.tsx b/src/app/[locale]/(protected)/dashboard/routine-task/components/most-sales.tsx
index a126ecf2..dceaa6ba 100644
--- a/src/app/[locale]/(protected)/dashboard/routine-task/components/most-sales.tsx
+++ b/src/app/[locale]/(protected)/dashboard/routine-task/components/most-sales.tsx
@@ -1,11 +1,13 @@
 "use client";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+import { useState } from "react";
 // import world from "./world-map.json";
 import { VectorMap } from "@south-paw/react-vector-maps";
-import { useState } from "react";
-import { cn } from "@/lib/utils/utils"
 import { useTranslations } from "next-intl";
 
+import { cn } from "@/lib/utils/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
 const sales = [
   {
     title: "Nevada",
@@ -80,25 +82,17 @@ const MostSales = () => {
               {t("total_earning_map_desc")}
             </h4>
             {filterMap === "usa" && (
-              <div className="text-lg font-medium mb-1.5  text-default-900">
-                $12,65,64787.00
-              </div>
+              <div className="text-lg font-medium mb-1.5  text-default-900">$12,65,64787.00</div>
             )}
             {filterMap === "global" && (
-              <div className="text-lg font-medium mb-1.5  text-default-900">
-                $12,65.00
-              </div>
+              <div className="text-lg font-medium mb-1.5  text-default-900">$12,65.00</div>
             )}
             <div className="text-xs font-light">
-              <span className="text-primary">+08%</span>{" "}
-              {t("total_earning_map_desc_2")}
+              <span className="text-primary">+08%</span> {t("total_earning_map_desc_2")}
             </div>
             <ul className="bg-default-50 rounded p-4 min-w-[184px] space-y-5 mt-4">
               {sales.map((item, i) => (
-                <li
-                  key={i}
-                  className="flex justify-between text-xs text-default-600"
-                >
+                <li key={i} className="flex justify-between text-xs text-default-600">
                   <span className="flex gap-2 items-center">
                     <span
                       className={` inline-flex h-1.5 w-1.5 bg-primary-500 ring-opacity-25 rounded-full ring-4
diff --git a/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-chart.tsx b/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-chart.tsx
index 9f921b8b..2f254799 100644
--- a/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-chart.tsx
+++ b/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-chart.tsx
@@ -1,27 +1,28 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { colors } from "@/lib/colors";
 import { useTheme } from "next-themes";
+
+import { colors } from "@/lib/colors";
 import { useConfig } from "@/lib/hooks/use-config";
 
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 interface OverviewChartProps {
   height?: number;
   series?: number[];
   chartType?: "donut" | "pie" | "radialBar";
-  labels?: string[]
+  labels?: string[];
 }
 const OverviewChart = ({
   height = 373,
   series = [44, 55, 67, 83],
   chartType = "radialBar",
-  labels = ["A", "B", "C", "D"]
-
+  labels = ["A", "B", "C", "D"],
 }: OverviewChartProps) => {
   const [config] = useConfig();
   const { theme: mode } = useTheme();
 
-
   const options: any = {
     chart: {
       toolbar: {
@@ -34,7 +35,6 @@ const OverviewChart = ({
     },
     plotOptions: {
       radialBar: {
-
         dataLabels: {
           name: {
             fontSize: "22px",
@@ -42,25 +42,20 @@ const OverviewChart = ({
           value: {
             fontSize: "16px",
             fontWeight: 700,
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
           total: {
             show: true,
             label: "Total",
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
             formatter: function (w: any) {
               return 249;
-            }
-          }
-        }
-      }
+            },
+          },
+        },
+      },
     },
-    colors: [
-      colors.primary,
-      colors.info,
-      colors.success,
-      colors.warning
-    ],
+    colors: [colors.primary, colors.info, colors.success, colors.warning],
     labels: labels,
     tooltip: {
       theme: mode === "dark" ? "dark" : "light",
@@ -73,13 +68,7 @@ const OverviewChart = ({
     },
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type={chartType}
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type={chartType} height={height} width={"100%"} />
   );
 };
 
diff --git a/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-radial.tsx b/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-radial.tsx
index 36ec14d6..b1645a90 100644
--- a/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-radial.tsx
+++ b/src/app/[locale]/(protected)/dashboard/routine-task/components/overview-radial.tsx
@@ -1,8 +1,10 @@
-"use client"
+"use client";
 
 import { useTheme } from "next-themes";
 import Chart from "react-apexcharts";
+
 import { colors } from "@/lib/colors";
+
 interface OverviewRadialChartProps {
   height?: number;
   series?: number[];
@@ -14,12 +16,11 @@ const OverviewRadialChart = ({
   height = 320,
   series = [67],
   chartType = "radialBar",
-  chartColor=["#2563eb"],
+  chartColor = ["#2563eb"],
 }: OverviewRadialChartProps) => {
+  const { theme: mode } = useTheme();
 
-  const {theme:mode} = useTheme();
-
-  const options:any = {
+  const options: any = {
     chart: {
       toolbar: {
         show: false,
@@ -32,22 +33,22 @@ const OverviewRadialChart = ({
         dataLabels: {
           name: {
             fontSize: "22px",
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"]
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
           value: {
             fontSize: "16px",
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"]
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
           },
           total: {
             show: true,
             label: "Total",
-            color: mode === 'light' ? colors["default-600"] : colors["default-300"],
+            color: mode === "light" ? colors["default-600"] : colors["default-300"],
             formatter: function () {
               return 249;
-            }
-          }
-        }
-      }
+            },
+          },
+        },
+      },
     },
     fill: {
       type: "gradient",
diff --git a/src/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx b/src/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
index dee5a0c4..e69d426d 100644
--- a/src/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
+++ b/src/app/[locale]/(protected)/dashboard/routine-task/components/recent-activity.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { listDataAll } from "@/lib/services/content/content";
+import React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnFiltersState,
   PaginationState,
@@ -9,11 +9,13 @@ import {
   VisibilityState,
 } from "@tanstack/react-table";
 import { DockIcon, ImageIcon, MicIcon, YoutubeIcon } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
-import React from "react";
-import search from "../../../app/chat/components/search";
 import { useTranslations } from "next-intl";
 
+import { listDataAll } from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import search from "../../../app/chat/components/search";
+
 type StatusFilter = string[];
 
 interface Counts {
@@ -31,11 +33,8 @@ const RecentActivity: React.FC = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/add-product/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/add-product/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/add-product/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/add-product/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/add-product/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/add-product/page.tsx
index dc2496ef..b2ee13b2 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/add-product/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/add-product/page.tsx
@@ -71,11 +71,7 @@ const AddProduct = () => {
               <Label className="w-[150px] flex-none" htmlFor="unit">
                 Unit
               </Label>
-              <Input
-                id="unit"
-                type="text"
-                placeholder="Unit (e.g. KG, Pc etc)"
-              />
+              <Input id="unit" type="text" placeholder="Unit (e.g. KG, Pc etc)" />
             </div>
 
             <div className="flex items-center flex-wrap">
@@ -96,11 +92,7 @@ const AddProduct = () => {
               <Label className="w-[150px] flex-none" htmlFor="tags">
                 Tags
               </Label>
-              <Input
-                id="tags"
-                type="text"
-                placeholder="Type & hit enter to add a tag"
-              />
+              <Input id="tags" type="text" placeholder="Type & hit enter to add a tag" />
             </div>
 
             <div className="flex items-center flex-wrap">
@@ -123,25 +115,15 @@ const AddProduct = () => {
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Gallery Images (600 X 600)
-              </Label>
+              <Label className="inline-flex text-sm font-normal ">Gallery Images (600 X 600)</Label>
               <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
+                <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
               </div>
             </div>
             <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Thumb Images (600 X 600)
-              </Label>
+              <Label className="inline-flex text-sm font-normal ">Thumb Images (600 X 600)</Label>
               <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
+                <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
               </div>
             </div>
           </CardContent>
@@ -224,14 +206,9 @@ const AddProduct = () => {
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center space-x-10 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal">
-                Add PDF File
-              </Label>
+              <Label className="inline-flex text-sm font-normal">Add PDF File</Label>
               <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
+                <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
               </div>
             </div>
           </CardContent>
@@ -248,17 +225,11 @@ const AddProduct = () => {
 
             <div className="flex">
               <Label className="w-[130px]">Description</Label>
-              <Textarea
-                id="pn4"
-                placeholder="Write something for your product seo"
-              />
+              <Textarea id="pn4" placeholder="Write something for your product seo" />
             </div>
             <div className="flex items-center ">
               <Label className="flex-none w-[130px] ">Meta Image</Label>
-              <Input
-                className="read-only:leading-0 py-1.5 h-full ps-0"
-                type="file"
-              />
+              <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
             </div>
           </CardContent>
         </Card>
@@ -310,9 +281,7 @@ const AddProduct = () => {
               </div>
             </div>
             <div className="flex justify-between">
-              <Label className="text-sm font-normal">
-                Show Stock With Text Only
-              </Label>
+              <Label className="text-sm font-normal">Show Stock With Text Only</Label>
               <div>
                 <Switch color="success" />
               </div>
@@ -429,12 +398,7 @@ const AddProduct = () => {
             <div className="flex gap-4">
               <div className="flex items-center">
                 <Label className="flex-none w-10">VAT</Label>
-                <Input
-                  className="inline-flex"
-                  id="vat"
-                  type="text"
-                  placeholder="00"
-                />
+                <Input className="inline-flex" id="vat" type="text" placeholder="00" />
               </div>
               <div className="flex-1">
                 <Select>
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/page.tsx
index b9983288..4eb24fc8 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/page.tsx
@@ -1,4 +1,5 @@
-import { Card } from "@/components/ui/card"
+import { Card } from "@/components/ui/card";
+
 import TransactionsTable from "./transactions";
 
 const CustomerList = () => {
@@ -10,6 +11,6 @@ const CustomerList = () => {
       </Card>
     </div>
   );
-}
+};
 
-export default CustomerList
\ No newline at end of file
+export default CustomerList;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/columns.tsx b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/columns.tsx
index a9dabf61..7c26b9a7 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/columns.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/columns.tsx
@@ -1,9 +1,10 @@
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
 import { SquarePen, Trash2, TriangleAlert } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from '@/i18n/navigation';
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 
 export type DataProps = {
   id: string | number;
@@ -24,8 +25,7 @@ export const columns: ColumnDef<DataProps>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/data.ts b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/data.ts
index 02a0c9f8..20543fd1 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/data.ts
+++ b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/data.ts
@@ -1,4 +1,5 @@
 import { DataProps } from "./columns";
+
 export const data: DataProps[] = [
   {
     id: 1,
@@ -6,9 +7,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "3/26/2022",
     rating: 4.5,
     action: null,
@@ -19,9 +20,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "2/6/2022",
     rating: 4.5,
     action: null,
@@ -32,11 +33,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "9/6/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -45,9 +46,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "11/7/2021",
     rating: 4.5,
     action: null,
@@ -58,9 +59,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "5/6/2022",
     rating: 4.5,
     action: null,
@@ -71,9 +72,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "2/14/2022",
     rating: 4.5,
     action: null,
@@ -84,11 +85,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "7/30/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -97,11 +98,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "6/30/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -110,11 +111,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "8/9/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -123,9 +124,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "8/4/2022",
     rating: 4.5,
     action: null,
@@ -136,11 +137,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "4/5/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -149,11 +150,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "8/9/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -162,9 +163,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "2/10/2022",
     rating: 4.5,
     action: null,
@@ -175,11 +176,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "2/10/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -188,11 +189,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "5/20/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -201,9 +202,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "5/3/2022",
     rating: 4.5,
     action: null,
@@ -214,9 +215,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "10/31/2021",
     rating: 4.5,
     action: null,
@@ -227,11 +228,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "1/13/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -240,11 +241,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "6/14/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -253,11 +254,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "10/8/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -266,11 +267,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "11/17/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -279,11 +280,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "4/4/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -292,11 +293,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "3/21/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -305,9 +306,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "6/18/2022",
     rating: 4.5,
     action: null,
@@ -318,11 +319,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "8/15/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -331,11 +332,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "4/28/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -344,11 +345,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "9/6/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -357,11 +358,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "9/11/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -370,11 +371,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "1/27/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -383,11 +384,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "9/16/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -396,11 +397,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "1/8/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -409,11 +410,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "11/18/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -422,9 +423,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "3/30/2022",
     rating: 4.5,
     action: null,
@@ -435,11 +436,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "11/13/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -448,9 +449,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "12/7/2021",
     rating: 4.5,
     action: null,
@@ -461,9 +462,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "9/9/2021",
     rating: 4.5,
     action: null,
@@ -474,11 +475,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "2/12/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -487,11 +488,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "3/6/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -500,9 +501,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "7/25/2022",
     rating: 4.5,
     action: null,
@@ -513,11 +514,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "3/2/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -526,11 +527,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "12/8/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -539,9 +540,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "11/22/2021",
     rating: 4.5,
     action: null,
@@ -552,11 +553,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "4/6/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -565,11 +566,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "2/4/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -578,9 +579,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "3/30/2022",
     rating: 4.5,
     action: null,
@@ -591,11 +592,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "11/20/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -604,9 +605,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "10/24/2021",
     rating: 4.5,
     action: null,
@@ -617,9 +618,9 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "6/30/2022",
     rating: 4.5,
     action: null,
@@ -630,11 +631,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "11/16/2021",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
   {
@@ -643,11 +644,11 @@ export const data: DataProps[] = [
       name: "Jenny Wilson",
       image: "/images/all-img/customer_1.png",
     },
-    phone: '+12345876',
-    amount: '$1590',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    amount: "$1590",
+    email: "hello@example.com",
     date: "8/15/2022",
-    rating:4.5,
+    rating: 4.5,
     action: null,
   },
 ];
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/index.tsx b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/index.tsx
index 1794ae32..ade58f5c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/index.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/index.tsx
@@ -1,41 +1,24 @@
 "use client";
 
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
 import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/navigation';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -45,14 +28,24 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+
+import { columns } from "./columns";
+import { data } from "./data";
+import TablePagination from "./table-pagination";
 
 const TransactionsTable = () => {
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
@@ -78,8 +71,6 @@ const TransactionsTable = () => {
     <div className="w-full">
       <div className="flex items-center py-4 px-5">
         <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-
-
           <Select>
             <SelectTrigger className=" w-[150px]">
               <SelectValue placeholder="Bulk Action" />
@@ -113,12 +104,8 @@ const TransactionsTable = () => {
             </Select>
             <Input
               placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
+              value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
+              onChange={(event) => table.getColumn("status")?.setFilterValue(event.target.value)}
               className="w-full "
             />
           </div>
@@ -136,10 +123,7 @@ const TransactionsTable = () => {
                       <TableHead className="last:text-start" key={header.id}>
                         {header.isPlaceholder
                           ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                          : flexRender(header.column.columnDef.header, header.getContext())}
                       </TableHead>
                     );
                   })}
@@ -149,26 +133,17 @@ const TransactionsTable = () => {
             <TableBody>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
+                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/table-pagination.tsx b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/table-pagination.tsx
index fab9b075..1e0d5cd5 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/customer-list/transactions/table-pagination.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -19,33 +20,32 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
             key={`basic-data-table-${pageIndex}`}
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
+            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? "bg-default" : "bg-default-300 text-default"}`}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/edit-product/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/edit-product/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/edit-product/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/edit-product/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/edit-product/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/edit-product/page.tsx
index 97982b81..257f0f78 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/edit-product/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/edit-product/page.tsx
@@ -71,11 +71,7 @@ const EditProduct = () => {
               <Label className="w-[150px] flex-none" htmlFor="unit">
                 Unit
               </Label>
-              <Input
-                id="unit"
-                type="text"
-                placeholder="Unit (e.g. KG, Pc etc)"
-              />
+              <Input id="unit" type="text" placeholder="Unit (e.g. KG, Pc etc)" />
             </div>
 
             <div className="flex items-center flex-wrap">
@@ -96,11 +92,7 @@ const EditProduct = () => {
               <Label className="w-[150px] flex-none" htmlFor="tags">
                 Tags
               </Label>
-              <Input
-                id="tags"
-                type="text"
-                placeholder="Type & hit enter to add a tag"
-              />
+              <Input id="tags" type="text" placeholder="Type & hit enter to add a tag" />
             </div>
 
             <div className="flex items-center flex-wrap">
@@ -123,25 +115,15 @@ const EditProduct = () => {
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Gallery Images (600 X 600)
-              </Label>
+              <Label className="inline-flex text-sm font-normal ">Gallery Images (600 X 600)</Label>
               <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
+                <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
               </div>
             </div>
             <div className="flex items-center space-x-6 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal ">
-                Thumb Images (600 X 600)
-              </Label>
+              <Label className="inline-flex text-sm font-normal ">Thumb Images (600 X 600)</Label>
               <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
+                <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
               </div>
             </div>
           </CardContent>
@@ -224,14 +206,9 @@ const EditProduct = () => {
           </CardHeader>
           <CardContent className="space-y-4">
             <div className="flex items-center space-x-10 rtl:space-x-reverse">
-              <Label className="inline-flex text-sm font-normal">
-                Add PDF File
-              </Label>
+              <Label className="inline-flex text-sm font-normal">Add PDF File</Label>
               <div className="flex-1">
-                <Input
-                  className="read-only:leading-0 py-1.5 h-full ps-0"
-                  type="file"
-                />
+                <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
               </div>
             </div>
           </CardContent>
@@ -248,17 +225,11 @@ const EditProduct = () => {
 
             <div className="flex">
               <Label className="w-[130px]">Description</Label>
-              <Textarea
-                id="pn4"
-                placeholder="Write something for your product seo"
-              />
+              <Textarea id="pn4" placeholder="Write something for your product seo" />
             </div>
             <div className="flex items-center ">
               <Label className="flex-none w-[130px] ">Meta Image</Label>
-              <Input
-                className="read-only:leading-0 py-1.5 h-full ps-0"
-                type="file"
-              />
+              <Input className="read-only:leading-0 py-1.5 h-full ps-0" type="file" />
             </div>
           </CardContent>
         </Card>
@@ -310,9 +281,7 @@ const EditProduct = () => {
               </div>
             </div>
             <div className="flex justify-between">
-              <Label className="text-sm font-normal">
-                Show Stock With Text Only
-              </Label>
+              <Label className="text-sm font-normal">Show Stock With Text Only</Label>
               <div>
                 <Switch color="success" />
               </div>
@@ -429,12 +398,7 @@ const EditProduct = () => {
             <div className="flex gap-4">
               <div className="flex items-center">
                 <Label className="flex-none w-10">VAT</Label>
-                <Input
-                  className="inline-flex"
-                  id="vat"
-                  type="text"
-                  placeholder="00"
-                />
+                <Input className="inline-flex" id="vat" type="text" placeholder="00" />
               </div>
               <div className="flex-1">
                 <Select>
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/invoice/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/invoice/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/invoice/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/invoice/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-details/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-details/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-details/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-details/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-details/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-details/page.tsx
index 2869635b..f0cc4d6b 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-details/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-details/page.tsx
@@ -1,4 +1,6 @@
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
 import { Label } from "@/components/ui/label";
 import {
   Select,
@@ -9,10 +11,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import TotalTable from "./totaltable";
 import Logo from "@/components/logo";
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
+
+import TotalTable from "./totaltable";
 
 const OrderDetails = () => {
   return (
@@ -99,9 +100,7 @@ const OrderDetails = () => {
       <CardHeader className="border-0">
         <div className="flex justify-between  flex-wrap gap-4 items-center">
           <div>
-            <span className="block text-default-900 font-medium leading-5 text-xl">
-              Bill to:
-            </span>
+            <span className="block text-default-900 font-medium leading-5 text-xl">Bill to:</span>
 
             <div className="text-default-500 font-normal leading-5 mt-4 text-sm">
               Annette black-500 <br />
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-details/totaltable.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-details/totaltable.tsx
index e9df500f..140514ee 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-details/totaltable.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-details/totaltable.tsx
@@ -2,7 +2,7 @@ const rows = [
   {
     item: "Headphone",
     tax: "$0.00",
-    delivery:"home delivery",
+    delivery: "home delivery",
     qty: 2,
     price: "$600.25",
     total: "$1200.50",
@@ -10,7 +10,7 @@ const rows = [
   {
     item: "Headphone",
     tax: "$0.00",
-    delivery:"home delivery",
+    delivery: "home delivery",
     qty: 2,
     price: "$600.25",
     total: "$1200.50",
@@ -18,7 +18,7 @@ const rows = [
   {
     item: "Headphone",
     tax: "$0.00",
-    delivery:"home delivery",
+    delivery: "home delivery",
     qty: 2,
     price: "$600.25",
     total: "$1200.50",
@@ -26,7 +26,7 @@ const rows = [
   {
     item: "Headphone",
     tax: "$0.00",
-    delivery:"home delivery",
+    delivery: "home delivery",
     qty: 2,
     price: "$600.25",
     total: "$1200.50",
@@ -46,9 +46,7 @@ const TotalTable = () => {
               <span className="block px-6 py-5 font-semibold">ITEM</span>
             </th>
             <th className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
-              <span className="block px-6 py-5 font-semibold">
-                Delivery Type
-              </span>
+              <span className="block px-6 py-5 font-semibold">Delivery Type</span>
             </th>
             <th className="bg-default-50  text-xs  font-medium leading-4 uppercase text-default-600 text-left last:text-right ">
               <span className="block px-6 py-5 font-semibold">Quantity</span>
@@ -66,10 +64,7 @@ const TotalTable = () => {
         </thead>
         <tbody>
           {rows.map((data, index) => (
-            <tr
-              key={index}
-              className="border-b border-default-100 border-solid  border-0"
-            >
+            <tr key={index} className="border-b border-default-100 border-solid  border-0">
               <td
                 colSpan={3}
                 className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4"
@@ -97,27 +92,20 @@ const TotalTable = () => {
       </table>
       <div className="md:flex px-6 py-6 items-center">
         <div className="flex-1 text-default-500  text-sm">
-          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
-          sint. Velit <br />
+          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit <br />
           officia consequat duis enim velit mollit.
         </div>
         <div className="flex-none min-w-[270px] space-y-3 ">
           <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Subtotal:
-            </span>
+            <span className="font-medium text-default-600 text-xs  uppercase">Subtotal:</span>
             <span className="text-default-900 ">$3601.50</span>
           </div>
           <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Tax (3.5%):
-            </span>
+            <span className="font-medium text-default-600 text-xs  uppercase">Tax (3.5%):</span>
             <span className="text-default-900 ">$20.50</span>
           </div>
           <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Shipping:
-            </span>
+            <span className="font-medium text-default-600 text-xs  uppercase">Shipping:</span>
             <span className="text-default-900 ">$20.50</span>
           </div>
           <div className="flex justify-between">
@@ -127,9 +115,7 @@ const TotalTable = () => {
             <span className="text-default-900 ">$20.50</span>
           </div>
           <div className="flex justify-between border-solid border-t border-default-200 pt-3">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Invoice total:
-            </span>
+            <span className="font-medium text-default-600 text-xs  uppercase">Invoice total:</span>
             <span className="text-default-900  font-bold">$3622.00</span>
           </div>
         </div>
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-list/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-list/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-list/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-list/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-list/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-list/page.tsx
index b2cf49ba..022772a4 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-list/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-list/page.tsx
@@ -1,4 +1,5 @@
 import { Card } from "@/components/ui/card";
+
 import TransactionsTable from "./transactions";
 
 const OrderList = () => {
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/columns.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/columns.tsx
index a25bda3c..26469d24 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/columns.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/columns.tsx
@@ -1,14 +1,11 @@
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-import {
-  Download,
-  Eye,
-  Trash2,
-} from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Download, Eye, Trash2 } from "lucide-react";
+
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils/utils"
-import { Link } from '@/i18n/navigation';
+import { Checkbox } from "@/components/ui/checkbox";
 
 export type DataProps = {
   id: string | number;
@@ -30,8 +27,7 @@ export const columns: ColumnDef<DataProps>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
@@ -66,11 +62,7 @@ export const columns: ColumnDef<DataProps>[] = [
         <div className="font-medium text-card-foreground/80">
           <div className="flex gap-3 items-center">
             <Avatar className="rounded-full w-8 h-8">
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
+              {user?.image ? <AvatarImage src={user.image} /> : <AvatarFallback>AB</AvatarFallback>}
             </Avatar>
             <span className="text-sm text-default-600 whitespace-nowrap">
               {user?.name ?? "Unknown User"}
@@ -98,9 +90,7 @@ export const columns: ColumnDef<DataProps>[] = [
     accessorKey: "method",
     header: "Payment Method",
     cell: ({ row }) => {
-
       return <span> {row.getValue("method")}</span>;
-
     },
   },
   {
@@ -114,11 +104,7 @@ export const columns: ColumnDef<DataProps>[] = [
       };
       const status = row.getValue<string>("status");
       const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge className={cn("rounded-full px-5", statusStyles)}>
-          {status}{" "}
-        </Badge>
-      );
+      return <Badge className={cn("rounded-full px-5", statusStyles)}>{status} </Badge>;
     },
   },
   {
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/data.ts b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/data.ts
index 931245f0..40259097 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/data.ts
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/data.ts
@@ -1,4 +1,5 @@
 import { DataProps } from "./columns";
+
 export const data: DataProps[] = [
   {
     id: 1,
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/index.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/index.tsx
index 6ce07c04..fe9aeae3 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/index.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/index.tsx
@@ -1,41 +1,24 @@
 "use client";
 
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
 import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/navigation';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -45,14 +28,24 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+
+import { columns } from "./columns";
+import { data } from "./data";
+import TablePagination from "./table-pagination";
 
 const TransactionsTable = () => {
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
@@ -154,12 +147,8 @@ const TransactionsTable = () => {
             </Select>
             <Input
               placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
+              value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
+              onChange={(event) => table.getColumn("status")?.setFilterValue(event.target.value)}
               className="w-full "
             />
           </div>
@@ -177,10 +166,7 @@ const TransactionsTable = () => {
                       <TableHead className="last:text-start" key={header.id}>
                         {header.isPlaceholder
                           ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                          : flexRender(header.column.columnDef.header, header.getContext())}
                       </TableHead>
                     );
                   })}
@@ -190,26 +176,17 @@ const TransactionsTable = () => {
             <TableBody>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
+                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/table-pagination.tsx b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/table-pagination.tsx
index fab9b075..1e0d5cd5 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/order-list/transactions/table-pagination.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -19,33 +20,32 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
             key={`basic-data-table-${pageIndex}`}
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
+            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? "bg-default" : "bg-default-300 text-default"}`}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/page.tsx
index 5bc48643..ab2680cb 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/page.tsx
@@ -1,5 +1,7 @@
 "use client";
+
 import { redirect } from "@/i18n/navigation";
+
 const Backend = () => {
   redirect("/ecommerce/backend/add-product");
   return null;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/page.tsx
index 516fc447..be976164 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/page.tsx
@@ -1,4 +1,5 @@
 import { Card } from "@/components/ui/card";
+
 import TransactionsTable from "./transactions";
 
 const PurchaseList = () => {
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/columns.tsx b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/columns.tsx
index c3aa6f6c..cb4e33db 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/columns.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/columns.tsx
@@ -1,11 +1,12 @@
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
 import { SquarePen, Trash2, TriangleAlert } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from '@/i18n/navigation';
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Switch } from "@/components/ui/switch";
-import Image from "next/image";
 
 export type DataProps = {
   id: string | number;
@@ -30,8 +31,7 @@ export const columns: ColumnDef<DataProps>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
@@ -60,17 +60,9 @@ export const columns: ColumnDef<DataProps>[] = [
       return (
         <div className="font-medium text-card-foreground/80">
           <div className="flex gap-3 items-center">
-            <Image
-              src={product.image}
-              alt=""
-              height={32}
-              width={32}
-              className=" w-8 h-8"
-            />
+            <Image src={product.image} alt="" height={32} width={32} className=" w-8 h-8" />
 
-            <span className="text-sm text-default-600">
-              {product?.name ?? "Unknown User"}
-            </span>
+            <span className="text-sm text-default-600">{product?.name ?? "Unknown User"}</span>
           </div>
         </div>
       );
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/data.ts b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/data.ts
index 96ccb6fd..275218fe 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/data.ts
+++ b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/data.ts
@@ -1,21 +1,21 @@
 import { DataProps } from "./columns";
+
 export const data: DataProps[] = [
   {
     id: 1,
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -23,17 +23,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -41,17 +40,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -59,17 +57,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -77,17 +74,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -95,17 +91,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -113,17 +108,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -131,17 +125,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -149,17 +142,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -167,17 +159,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -185,17 +176,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -203,17 +193,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -221,17 +210,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -239,17 +227,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -257,17 +244,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -275,17 +261,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -293,17 +278,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -311,17 +295,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -329,17 +312,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -347,17 +329,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -365,17 +346,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -383,17 +363,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -401,17 +380,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -419,17 +397,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -437,17 +414,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -455,17 +431,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -473,17 +448,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -491,17 +465,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -509,17 +482,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -527,17 +499,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -545,17 +516,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -563,17 +533,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -581,17 +550,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -599,17 +567,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -617,17 +584,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -635,17 +601,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -653,17 +618,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -671,17 +635,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -689,17 +652,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -707,17 +669,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -725,17 +686,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -743,17 +703,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -761,17 +720,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -779,17 +737,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -797,17 +754,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -815,17 +771,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -833,17 +788,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -851,17 +805,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -869,17 +822,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
   {
@@ -887,17 +839,16 @@ export const data: DataProps[] = [
     product: {
       name: "Classical Black Export Quality Fabrics Half Hand T-Shirt for Man",
       image: "/images/e-commerce/product-card/classical-black-tshirt.png",
-      
     },
-    seller: 'Codeshaper.ltd',
-    category:'clothing',
-    info:{
+    seller: "Codeshaper.ltd",
+    category: "clothing",
+    info: {
       soldItems: 25,
-      basePrice:"$145.00",
-      ratings:5
+      basePrice: "$145.00",
+      ratings: 5,
     },
     stock: 1590,
-    published:true,
+    published: true,
     action: null,
   },
 ];
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/index.tsx b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/index.tsx
index 618c7d0b..71f55d05 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/index.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/index.tsx
@@ -3,31 +3,18 @@
 import * as React from "react";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
 
 import { CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -37,14 +24,23 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { columns } from "./columns";
+import { data } from "./data";
+import TablePagination from "./table-pagination";
 
 const TransactionsTable = () => {
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
@@ -69,9 +65,7 @@ const TransactionsTable = () => {
   return (
     <div className="w-full">
       <div className="flex items-center py-4 px-6 border-b border-solid border-default-200">
-        <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-          Products List
-        </div>
+        <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">Products List</div>
         <div className="flex-none">
           <div className="flex items-center gap-4 flex-wrap">
             <Select>
@@ -104,12 +98,8 @@ const TransactionsTable = () => {
             </Select>
             <Input
               placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
+              value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
+              onChange={(event) => table.getColumn("status")?.setFilterValue(event.target.value)}
               className="w-full "
             />
           </div>
@@ -127,10 +117,7 @@ const TransactionsTable = () => {
                       <TableHead className="last:text-start" key={header.id}>
                         {header.isPlaceholder
                           ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext()
-                            )}
+                          : flexRender(header.column.columnDef.header, header.getContext())}
                       </TableHead>
                     );
                   })}
@@ -140,26 +127,17 @@ const TransactionsTable = () => {
             <TableBody>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
+                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/table-pagination.tsx b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/table-pagination.tsx
index fab9b075..1e0d5cd5 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/purchase-list/transactions/table-pagination.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -19,33 +20,32 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
             key={`basic-data-table-${pageIndex}`}
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
+            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? "bg-default" : "bg-default-300 text-default"}`}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/sellers/layout.tsx b/src/app/[locale]/(protected)/ecommerce/backend/sellers/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/sellers/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/sellers/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/sellers/page.tsx b/src/app/[locale]/(protected)/ecommerce/backend/sellers/page.tsx
index bc52d622..6a93f7e9 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/sellers/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/sellers/page.tsx
@@ -1,4 +1,5 @@
 import { Card } from "@/components/ui/card";
+
 import TransactionsTable from "./transactions";
 
 const Sellers = () => {
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/columns.tsx b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/columns.tsx
index 4207b895..c077163c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/columns.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/columns.tsx
@@ -1,7 +1,8 @@
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
 import { SquarePen, Trash2, TriangleAlert } from "lucide-react";
+
 import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from '@/i18n/navigation';
 
 export type DataProps = {
   id: string | number;
@@ -19,8 +20,7 @@ export const columns: ColumnDef<DataProps>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/data.ts b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/data.ts
index bcbc43d0..119b9166 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/data.ts
+++ b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/data.ts
@@ -1,502 +1,503 @@
 import { DataProps } from "./columns";
+
 export const data: DataProps[] = [
   {
     id: 1,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "3/26/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 13,
     action: null,
   },
   {
     id: 2,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "2/6/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 13,
     action: null,
   },
   {
     id: 3,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "9/6/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 1,
     action: null,
   },
   {
     id: 4,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "11/7/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 13,
     action: null,
   },
   {
     id: 5,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "5/6/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 12,
     action: null,
   },
   {
     id: 6,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "2/14/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 12,
     action: null,
   },
   {
     id: 7,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "7/30/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 6,
     action: null,
   },
   {
     id: 8,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "6/30/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 9,
     action: null,
   },
   {
     id: 9,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "8/9/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 8,
     action: null,
   },
   {
     id: 10,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "8/4/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 12,
     action: null,
   },
   {
     id: 11,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "4/5/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 8,
     action: null,
   },
   {
     id: 12,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "8/9/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 2,
     action: null,
   },
   {
     id: 13,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "2/10/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 11,
     action: null,
   },
   {
     id: 14,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "2/10/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 2,
     action: null,
   },
   {
     id: 15,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "5/20/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 4,
     action: null,
   },
   {
     id: 16,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "5/3/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 15,
     action: null,
   },
   {
     id: 17,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "10/31/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 11,
     action: null,
   },
   {
     id: 18,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "1/13/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 5,
     action: null,
   },
   {
     id: 19,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "6/14/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 5,
     action: null,
   },
   {
     id: 20,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "10/8/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 4,
     action: null,
   },
   {
     id: 21,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "11/17/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 9,
     action: null,
   },
   {
     id: 22,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "4/4/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 9,
     action: null,
   },
   {
     id: 23,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "3/21/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 5,
     action: null,
   },
   {
     id: 24,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "6/18/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 12,
     action: null,
   },
   {
     id: 25,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "8/15/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 8,
     action: null,
   },
   {
     id: 26,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "4/28/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 8,
     action: null,
   },
   {
     id: 27,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "9/6/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 7,
     action: null,
   },
   {
     id: 28,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "9/11/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 4,
     action: null,
   },
   {
     id: 29,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "1/27/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 5,
     action: null,
   },
   {
     id: 30,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "9/16/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 6,
     action: null,
   },
   {
     id: 31,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "1/8/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 1,
     action: null,
   },
   {
     id: 32,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "11/18/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 1,
     action: null,
   },
   {
     id: 33,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "3/30/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 13,
     action: null,
   },
   {
     id: 34,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "11/13/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 5,
     action: null,
   },
   {
     id: 35,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "12/7/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 11,
     action: null,
   },
   {
     id: 36,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "9/9/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 15,
     action: null,
   },
   {
     id: 37,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "2/12/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 5,
     action: null,
   },
   {
     id: 38,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "3/6/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 5,
     action: null,
   },
   {
     id: 39,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "7/25/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 14,
     action: null,
   },
   {
     id: 40,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "3/2/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 8,
     action: null,
   },
   {
     id: 41,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "12/8/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 8,
     action: null,
   },
   {
     id: 42,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "11/22/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 11,
     action: null,
   },
   {
     id: 43,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "4/6/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 1,
     action: null,
   },
   {
     id: 44,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "2/4/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 4,
     action: null,
   },
   {
     id: 45,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "3/30/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 15,
     action: null,
   },
   {
     id: 46,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "11/20/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 2,
     action: null,
   },
   {
     id: 47,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "10/24/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 11,
     action: null,
   },
   {
     id: 48,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "6/30/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 10,
     action: null,
   },
   {
     id: 49,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "11/16/2021",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 4,
     action: null,
   },
   {
     id: 50,
     seller: "Jenny Wilson",
-    phone: '+12345876',
-    email: 'hello@example.com',
+    phone: "+12345876",
+    email: "hello@example.com",
     date: "8/15/2022",
-    store: 'Codeshaper',
+    store: "Codeshaper",
     quantity: 6,
     action: null,
   },
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/index.tsx b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/index.tsx
index 1794ae32..ade58f5c 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/index.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/index.tsx
@@ -1,41 +1,24 @@
 "use client";
 
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
 import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/navigation';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -45,14 +28,24 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+
+import { columns } from "./columns";
+import { data } from "./data";
+import TablePagination from "./table-pagination";
 
 const TransactionsTable = () => {
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
@@ -78,8 +71,6 @@ const TransactionsTable = () => {
     <div className="w-full">
       <div className="flex items-center py-4 px-5">
         <div className="flex-1 text-xl flex gap-4 font-medium text-default-900">
-
-
           <Select>
             <SelectTrigger className=" w-[150px]">
               <SelectValue placeholder="Bulk Action" />
@@ -113,12 +104,8 @@ const TransactionsTable = () => {
             </Select>
             <Input
               placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
+              value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
+              onChange={(event) => table.getColumn("status")?.setFilterValue(event.target.value)}
               className="w-full "
             />
           </div>
@@ -136,10 +123,7 @@ const TransactionsTable = () => {
                       <TableHead className="last:text-start" key={header.id}>
                         {header.isPlaceholder
                           ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                          : flexRender(header.column.columnDef.header, header.getContext())}
                       </TableHead>
                     );
                   })}
@@ -149,26 +133,17 @@ const TransactionsTable = () => {
             <TableBody>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
+                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>
diff --git a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/table-pagination.tsx b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/table-pagination.tsx
index fab9b075..1e0d5cd5 100644
--- a/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/backend/sellers/transactions/table-pagination.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -19,33 +20,32 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
             key={`basic-data-table-${pageIndex}`}
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
+            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? "bg-default" : "bg-default-300 text-default"}`}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/color-filter.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/color-filter.tsx
index afb71eb8..42db457a 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/color-filter.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/color-filter.tsx
@@ -1,12 +1,14 @@
 "use client";
+
 import React, { useState } from "react";
-  const colors = [
-    { code: "Black" },
-    { code: "Pink" },
-    { code: "Orange" },
-    { code: "Red" },
-    { code: "Yellow" },
-  ];
+
+const colors = [
+  { code: "Black" },
+  { code: "Pink" },
+  { code: "Orange" },
+  { code: "Red" },
+  { code: "Yellow" },
+];
 const ColorFilter = () => {
   const [color, setColor] = useState("Black");
   return (
@@ -14,12 +16,8 @@ const ColorFilter = () => {
       {" "}
       <div className="mb-4">
         <div className="pb-2 flex items-center space-x-2 rtl:space-x-reverse mb-3">
-          <p className="font-normal text-sm lg:text-base text-default-500 ">
-            Color:
-          </p>
-          <p className="font-medium text-sm lg:text-base text-default-900 ">
-            {color}
-          </p>
+          <p className="font-normal text-sm lg:text-base text-default-500 ">Color:</p>
+          <p className="font-medium text-sm lg:text-base text-default-900 ">{color}</p>
         </div>
         <div className="flex space-x-4 rtl:space-x-reverse h-6 ">
           {colors.map((innerColor, i) => {
@@ -35,9 +33,7 @@ const ColorFilter = () => {
                 <div
                   style={{ backgroundColor: innerColor.code }}
                   className={`h-7 w-7 ${
-                    innerColor.code === color
-                      ? "ring-default-900 "
-                      : "ring-default-300"
+                    innerColor.code === color ? "ring-default-900 " : "ring-default-300"
                   } ring-1 ring-default-400 ring-offset-2 ring-offset-default-50 cursor-pointer rounded-sm`}
                 />
               </label>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/page.tsx
index 12c951f2..9cf953b1 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/page.tsx
@@ -1,28 +1,24 @@
-import { Alert } from "@/components/ui/alert";
-import { getProductById } from "../data";
-
-import { Icon } from "@/components/ui/icon";
-import { Badge } from "@/components/ui/badge";
-import CounterButton from "../counter-button";
-import { Button } from "@/components/ui/button";
 import Image from "next/image";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import ColorFilter from "./color-filter";
-import SizeFilter from "./size-filter";
+
+import { Alert } from "@/components/ui/alert";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import ThumbSliderCom from "./thumb-slider";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import ProductCounterButton from "@/components/features/ecommarce/product-counter-button";
 
-const ProductDetails = async ({
-  params: { id },
-}: {
-  params: { id: string };
-}) => {
+import CounterButton from "../counter-button";
+import { getProductById } from "../data";
+import ColorFilter from "./color-filter";
+import SizeFilter from "./size-filter";
+import ThumbSliderCom from "./thumb-slider";
+
+const ProductDetails = async ({ params: { id } }: { params: { id: string } }) => {
   const product = await getProductById(id);
 
-  if (!product)
-    return <Alert color="destructive"> project id is not valid</Alert>;
+  if (!product) return <Alert color="destructive"> project id is not valid</Alert>;
 
   const lists = [
     {
@@ -114,38 +110,26 @@ const ProductDetails = async ({
           </div>
           <div className="col-span-12 md:col-span-7 lg:col-span-8 space-y-2 ">
             <div className="space-y-2">
-              <h1 className="text-default-900 text-xl lg:text-2xl font-medium ">
-                {product?.name}
-              </h1>
+              <h1 className="text-default-900 text-xl lg:text-2xl font-medium ">{product?.name}</h1>
               <p className="flex items-center text-default-900  font-normal text-sm lg:text-base gap-1.5">
                 <Icon icon="ph:star-fill" className="text-yellow-400" />
                 <Icon icon="ph:star-fill" className="text-yellow-400" />
                 <Icon icon="ph:star-fill" className="text-yellow-400" />
                 <Icon icon="ph:star-fill" className="text-yellow-400" />
                 <Icon icon="ph:star-fill" className="text-default-300/80" />
-                <span className="ltr:pl-2 rtl:pr-2 text-default-500 ">
-                  (789 reviews)
-                </span>
+                <span className="ltr:pl-2 rtl:pr-2 text-default-500 ">(789 reviews)</span>
               </p>
               <div className="flex items-center gap-2">
-                <p className="font-normal text-sm lg:text-base text-default-500  ">
-                  Brand:
-                </p>
+                <p className="font-normal text-sm lg:text-base text-default-500  ">Brand:</p>
                 <p className="font-medium text-sm lg:text-base text-default-900 ">
                   {product.brand}
                 </p>
               </div>
               <div className="flex items-center gap-2">
-                <p className="font-normal text-sm lg:text-base text-default-500  ">
-                  Available:
-                </p>
-                <p className="font-medium text-sm lg:text-base text-default-900 ">
-                  In Stock
-                </p>
+                <p className="font-normal text-sm lg:text-base text-default-500  ">Available:</p>
+                <p className="font-medium text-sm lg:text-base text-default-900 ">In Stock</p>
               </div>
-              <p className="font-normal text-sm lg:text-base text-default-500 ">
-                {product?.desc}
-              </p>
+              <p className="font-normal text-sm lg:text-base text-default-500 ">{product?.desc}</p>
             </div>
             <div className="pb-1">
               <ColorFilter />
@@ -208,22 +192,14 @@ const ProductDetails = async ({
                 Buy Now
               </Button>
               <Button size="md" variant="outline">
-                <Icon
-                  icon="octicon:heart-16"
-                  className="w-4 h-4 text-sm leading-none"
-                />
+                <Icon icon="octicon:heart-16" className="w-4 h-4 text-sm leading-none" />
               </Button>
               <Button size="md">
-                <Icon
-                  icon="eva:repeat-fill"
-                  className="w-4 h-4 text-sm leading-none"
-                />
+                <Icon icon="eva:repeat-fill" className="w-4 h-4 text-sm leading-none" />
               </Button>
             </div>
             <div className="flex gap-3 ">
-              <p className="font-normal text-sm lg:text-base text-default-500 ">
-                Share to:
-              </p>
+              <p className="font-normal text-sm lg:text-base text-default-500 ">Share to:</p>
               <div className="flex items-center gap-3 ">
                 <button
                   type="button"
@@ -313,13 +289,11 @@ const ProductDetails = async ({
                 <TabsContent value="description">
                   <div className="text-default-600  text-sm lg:text-base font-normal">
                     <p>
-                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                      sed diam nonumy eirmod tempor invidunt ut labore et dolore
-                      magna. Lorem ipsum dolor sit amet, consetetur sadipscing
-                      elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-                      dolore magna. Lorem ipsum dolor sit amet, consetetur
-                      sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                      ut labore et dolore magna.
+                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                      eirmod tempor invidunt ut labore et dolore magna. Lorem ipsum dolor sit amet,
+                      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+                      et dolore magna. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                      diam nonumy eirmod tempor invidunt ut labore et dolore magna.
                     </p>
                     <ul className="space-y-3 p-6 lg:ml-28 ml-14 rounded-md bg-default-white ">
                       {lists.map((item, i) => (
@@ -333,13 +307,11 @@ const ProductDetails = async ({
                       ))}
                     </ul>
                     <p className="text-default-600  text-sm lg:text-base font-normal">
-                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                      sed diam nonumy eirmod tempor invidunt ut labore et dolore
-                      magna. Lorem ipsum dolor sit amet, consetetur sadipscing
-                      elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-                      dolore magna. Lorem ipsum dolor sit amet, consetetur
-                      sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                      ut labore et dolore magna.
+                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                      eirmod tempor invidunt ut labore et dolore magna. Lorem ipsum dolor sit amet,
+                      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+                      et dolore magna. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                      diam nonumy eirmod tempor invidunt ut labore et dolore magna.
                     </p>
                   </div>
                 </TabsContent>
@@ -370,13 +342,11 @@ const ProductDetails = async ({
                       </ul>
                     </div>
                     <p className="text-default-600  text-sm lg:text-base font-normal">
-                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                      sed diam nonumy eirmod tempor invidunt ut labore et dolore
-                      magna. Lorem ipsum dolor sit amet, consetetur sadipscing
-                      elitr, sed diam nonumy eirmod tempor invidunt ut labore et
-                      dolore magna. Lorem ipsum dolor sit amet, consetetur
-                      sadipscing elitr, sed diam nonumy eirmod tempor invidunt
-                      ut labore et dolore magna.
+                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                      eirmod tempor invidunt ut labore et dolore magna. Lorem ipsum dolor sit amet,
+                      consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
+                      et dolore magna. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                      diam nonumy eirmod tempor invidunt ut labore et dolore magna.
                     </p>
                   </div>
                 </TabsContent>
@@ -385,9 +355,7 @@ const ProductDetails = async ({
           </Card>
         </div>
         <div className="border border-solid border-1  rounded p-6">
-          <h6 className="text-default-900 pb-6 text-lg lg:text-xl">
-            Reviews & Ratings
-          </h6>
+          <h6 className="text-default-900 pb-6 text-lg lg:text-xl">Reviews & Ratings</h6>
           <div className="space-y-12">
             <div className="bg-default-200  p-6 rounded grid grid-cols-12 	">
               <div className="col-span-12 items-center md:col-span-6 flex gap-3 justify-center md:justify-start  order-2 md:order-1 mt-3 md:mt-0">
@@ -425,9 +393,7 @@ const ProductDetails = async ({
                   <p className="text-default-900  font-medium text-sm lg:text-base pb-1">
                     Devied Beakhum
                   </p>
-                  <p className="text-default-500  font-normal text-xs  pb-1">
-                    08-03-2023
-                  </p>
+                  <p className="text-default-500  font-normal text-xs  pb-1">08-03-2023</p>
                   <p className="flex items-center text-default-900  font-normal text-sm lg:text-base gap-1.5 pb-3">
                     <Icon icon="ph:star-fill" className="text-yellow-400" />
                     <Icon icon="ph:star-fill" className="text-yellow-400" />
@@ -436,15 +402,12 @@ const ProductDetails = async ({
                     <Icon icon="ph:star-fill" className="text-yellow-400" />
                   </p>
                   <p className="pb-4 text-sm  lg:text-base text-default-500 ">
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                    diam nonumy eirmod tempor invidunt ut labore et dolore
-                    magna. Lori ipsum dolor sit amet, consetetur sadipscing
-                    elitr, sed diam nonumy eirmod tempor invidunt.
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                    tempor invidunt ut labore et dolore magna. Lori ipsum dolor sit amet, consetetur
+                    sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
                   </p>
                   <div className="flex gap-2 pb-3">
-                    <p className="font-normal text-sm lg:text-base text-default-500 ">
-                      Info:
-                    </p>
+                    <p className="font-normal text-sm lg:text-base text-default-500 ">Info:</p>
                     <p className="font-medium text-sm lg:text-base text-success ">
                       Verified Purchase
                     </p>
@@ -478,9 +441,7 @@ const ProductDetails = async ({
                   <p className="text-default-900  font-medium text-sm lg:text-base pb-1">
                     Devied Beakhum
                   </p>
-                  <p className="text-default-500  font-normal text-xs  pb-1">
-                    08-03-2023
-                  </p>
+                  <p className="text-default-500  font-normal text-xs  pb-1">08-03-2023</p>
                   <p className="flex items-center text-default-900  font-normal text-sm lg:text-base gap-1.5 pb-3">
                     <Icon icon="ph:star-fill" className="text-yellow-400" />
                     <Icon icon="ph:star-fill" className="text-yellow-400" />
@@ -489,15 +450,12 @@ const ProductDetails = async ({
                     <Icon icon="ph:star-fill" className="text-yellow-400" />
                   </p>
                   <p className="pb-4 text-sm lg:text-base text-default-500 ">
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                    diam nonumy eirmod tempor invidunt ut labore et dolore
-                    magna. Lori ipsum dolor sit amet, consetetur sadipscing
-                    elitr, sed diam nonumy eirmod tempor invidunt.
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+                    tempor invidunt ut labore et dolore magna. Lori ipsum dolor sit amet, consetetur
+                    sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
                   </p>
                   <div className="flex gap-3 pb-3">
-                    <p className="font-normal text-sm lg:text-base text-default-500 ">
-                      Info:
-                    </p>
+                    <p className="font-normal text-sm lg:text-base text-default-500 ">Info:</p>
                     <p className="font-medium text-sm lg:text-base text-success ">
                       Verified Purchase
                     </p>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/size-filter.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/size-filter.tsx
index 1f2ca565..ab6b25f0 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/size-filter.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/size-filter.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { useState } from "react";
 
 const sizes = [{ code: "S" }, { code: "M" }, { code: "L" }, { code: "XL" }];
@@ -10,12 +11,8 @@ const SizeFilter = () => {
       {" "}
       <div>
         <div className="pb-2 flex items-center space-x-2 rtl:space-x-reverse mb-3">
-          <p className="font-normal text-sm lg:text-base text-default-500 ">
-            Size:
-          </p>
-          <p className="font-medium text-base text-default-900">
-            {size}
-          </p>
+          <p className="font-normal text-sm lg:text-base text-default-500 ">Size:</p>
+          <p className="font-medium text-base text-default-900">{size}</p>
         </div>
         <div className="flex items-center space-x-4 rtl:space-x-reverse mb-4 h-6 ">
           {sizes.map((list, i) => {
@@ -31,9 +28,7 @@ const SizeFilter = () => {
                 <div
                   style={{ backgroundColor: list.code }}
                   className={`h-7 w-7 ${
-                    list.code === size
-                      ? "ring-default-900"
-                      : ""
+                    list.code === size ? "ring-default-900" : ""
                   } ring-1 ring-default-400 ring-offset-2 flex justify-center items-center ring-offset-default-50 cursor-pointer rounded-sm`}
                 >
                   {list.code}
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/thumb-slider.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/thumb-slider.tsx
index 32aceaa4..906a2199 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/[id]/thumb-slider.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/[id]/thumb-slider.tsx
@@ -1,7 +1,8 @@
 "use client";
-import { useState } from "react";
 
+import { useState } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
+
 import { product } from "../data";
 
 import "swiper/css";
@@ -14,7 +15,6 @@ import { FreeMode, Navigation, Thumbs } from "swiper/modules";
 import { Swiper as SwiperType } from "swiper/types";
 
 const ThumbSliderCom = ({ product }: { product: product }) => {
-
   const images = [
     "/images/e-commerce/product-card/classical-black-tshirt.png",
     "/images/e-commerce/product-card/black-t-shirt.png",
@@ -25,11 +25,10 @@ const ThumbSliderCom = ({ product }: { product: product }) => {
     "/images/e-commerce/product-card/red-t-shirt.png",
     "/images/e-commerce/product-card/yellow-frok.png",
     "/images/e-commerce/product-card/yellow-jumper.png",
-  ]
+  ];
 
   const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
 
-
   return (
     <>
       <Swiper
@@ -53,7 +52,6 @@ const ThumbSliderCom = ({ product }: { product: product }) => {
                 src={image}
                 alt="."
               />
-
             </SwiperSlide>
           );
         })}
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/cart/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/cart/page.tsx
index f23eae8e..c10e2ba2 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/cart/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/cart/page.tsx
@@ -1,9 +1,12 @@
 import React from "react";
-import { Icon } from "@/components/ui/icon";
-import { getProducts } from "../../data";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/navigation';
+import { Icon } from "@/components/ui/icon";
+
+import { getProducts } from "../../data";
+
 const CartPage = async () => {
   const products = await getProducts();
   const items = products.slice(0, 4);
@@ -52,9 +55,7 @@ const CartPage = async () => {
                               {item.name}
                             </p>
                             <p className="text-default-900  md:text-base text-sm font-medium">
-                              <span className="text-default-500  font-normal mr-1">
-                                Brand:
-                              </span>
+                              <span className="text-default-500  font-normal mr-1">Brand:</span>
                               {item.brand}
                             </p>
                           </div>
@@ -98,9 +99,7 @@ const CartPage = async () => {
                       </p>
                     </td>
                     <td className=" px-6 py-3 text-right">
-                      <p className="md:text-base text-sm font-medium text-default-900 ">
-                        $200
-                      </p>
+                      <p className="md:text-base text-sm font-medium text-default-900 ">$200</p>
                     </td>
                   </tr>
                 </tfoot>
@@ -111,8 +110,7 @@ const CartPage = async () => {
       </div>
       <div className="flex flex-wrap gap-2 md:mt-16 md:pb-14">
         <div className="flex-1">
-          <Button asChild
-            variant="outline">
+          <Button asChild variant="outline">
             <Link href="/ecommerce/frontend">
               <Icon icon="ion:arrow-back-outline" className="me-1" />
               Add New Product
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/checkout-header.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/checkout-header.tsx
index 5f0c9055..50a767e5 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/checkout-header.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/checkout-header.tsx
@@ -1,7 +1,9 @@
 "use client";
+
 import { usePathname } from "@/i18n/navigation";
+
+import { cn } from "@/lib/utils/utils";
 import { Icon } from "@/components/ui/icon";
-import { cn } from "@/lib/utils/utils"
 
 const CheckoutHeader = () => {
   const pathname = usePathname();
@@ -46,7 +48,6 @@ const CheckoutHeader = () => {
 
   return (
     <div>
-
       <ul className="flex gap-4">
         {stepsArray.map(({ step, active, icon, title }, index) => {
           const isCurrentStep = active;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/confirmation/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/confirmation/page.tsx
index 519551e0..2c12ae13 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/confirmation/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/confirmation/page.tsx
@@ -1,23 +1,21 @@
 import Image from "next/image";
-import { getProducts } from "../../data";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/navigation';
 import { Icon } from "@/components/ui/icon";
 
+import { getProducts } from "../../data";
+
 const Confirmation = async () => {
   const products = await getProducts();
   const items = products.slice(0, 4);
   return (
     <div className="p-6">
       <div className="text-center mb-8">
-        <h4 className="text-default-900  text-2xl font-medium pb-4">
-          Thank You for Your Order!
-        </h4>
+        <h4 className="text-default-900  text-2xl font-medium pb-4">Thank You for Your Order!</h4>
         <p className="text-default-900  text-base font-normal">
           A copy or your order summary has been sent to
-          <span className="  text-base font-medium ml-1 cursor-pointer">
-            customer@example.com
-          </span>
+          <span className="  text-base font-medium ml-1 cursor-pointer">customer@example.com</span>
         </p>
       </div>
       <div className="border border-solid border-default-300 p-3 lg:p-6 rounded">
@@ -37,10 +35,7 @@ const Confirmation = async () => {
                 <p>23-07-2023 09:53 AM</p>
                 <p>Prantik Chakraborty</p>
                 <p>customer.example@gmail.com</p>
-                <p>
-                  3947 West Side Avenue Hackensack, NJ 07601, College, United
-                  States
-                </p>
+                <p>3947 West Side Avenue Hackensack, NJ 07601, College, United States</p>
               </div>
             </div>
           </div>
@@ -63,15 +58,10 @@ const Confirmation = async () => {
         </div>
       </div>
       <div className="py-12 text-center lg:text-2xl text-xl font-normal text-default-900 ">
-        Order Code:{" "}
-        <span className="lg:text-2xl text-xl font-medium">
-          20230723-09532646
-        </span>
+        Order Code: <span className="lg:text-2xl text-xl font-medium">20230723-09532646</span>
       </div>
       <div className="p-3 md:p-6 rounded">
-        <p className="text-default-900  text-base font-medium pb-3">
-          Order Details
-        </p>
+        <p className="text-default-900  text-base font-medium pb-3">Order Details</p>
         <div className="bg-trasparent  space-y-7">
           <div className="overflow-x-auto border-0">
             <div className="inline-block min-w-full align-middle">
@@ -178,9 +168,7 @@ const Confirmation = async () => {
                         <span className="font-medium text-default-900 text-xs lg:text-sm ">
                           Total:
                         </span>
-                        <span className="text-default-900  text-xs lg:text-sm">
-                          $total
-                        </span>
+                        <span className="text-default-900  text-xs lg:text-sm">$total</span>
                       </div>
                     </div>
                   </div>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/data.ts b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/data.ts
index b386900e..428d76f5 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/data.ts
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/data.ts
@@ -76,4 +76,4 @@ export const payments = [
     img: vougepay,
     value: "vougepay",
   },
-];
\ No newline at end of file
+];
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/delivery-info/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/delivery-info/page.tsx
index fcbb5eb2..f2078a76 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/delivery-info/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/delivery-info/page.tsx
@@ -1,32 +1,46 @@
 import React from "react";
-import { getProducts } from "../../data";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+import { RadioItem } from "@radix-ui/react-dropdown-menu";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/navigation';
-import { Icon } from "@/components/ui/icon";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import { RadioItem } from "@radix-ui/react-dropdown-menu";
+
+import { getProducts } from "../../data";
 
 const page = async () => {
   const products = await getProducts();
   const items = products.slice(0, 3);
   return (
     <div className="card   rounded-sm p-5">
-      <h3 className="text-default-800  font-semibold  text-base uppercase pb-3">
-        Your Orders
-      </h3>
+      <h3 className="text-default-800  font-semibold  text-base uppercase pb-3">Your Orders</h3>
       <div className=" border border-default-300 border-solid   rounded-sm p-5 space-y-4">
         {items?.map((item, i) => (
-          <div
-            className="flex sm:flex-col md:flex-row gap-3 items-center "
-            key={i}
-          >
+          <div className="flex sm:flex-col md:flex-row gap-3 items-center " key={i}>
             <div className="md:p-4 p-2 flex-none bg-default-200 dark:bg-default-900 rounded md:h-20 md:w-20 w-16 h-16 rtl:ml-3">
               <Image
                 className="w-full h-full object-contain"
@@ -41,9 +55,7 @@ const page = async () => {
                 {item.name}
               </p>
               <p className="text-default-900   font-medium">
-                <span className="text-default-500   font-normal mr-1">
-                  Brand:
-                </span>
+                <span className="text-default-500   font-normal mr-1">Brand:</span>
                 {item.brand}
               </p>
             </div>
@@ -60,11 +72,7 @@ const page = async () => {
           className="md:space-x-5 md:space-y-0 space-y-3 rtl:space-x-reverse md:flex  justify-start lg:justify-end flex-1 md:text-base text-sm "
         >
           <Label className="inline-flex gap-2 items-center border border-default-900 dark:border-default-300  rounded py-3 lg:px-10 px-5 md:w-auto w-[200px] cursor-pointer ">
-            <RadioGroupItem
-              defaultChecked
-              id="home-delivery"
-              value="home-delivery"
-            />
+            <RadioGroupItem defaultChecked id="home-delivery" value="home-delivery" />
             <span className=" text-default-900 ">Home Delivery</span>
           </Label>
           <Label className="inline-flex gap-2 items-center border-solid border border-default-900 dark:border-default-300  rounded py-3 lg:px-10 px-5 md:w-auto w-[200px] cursor-pointer">
@@ -84,27 +92,15 @@ const page = async () => {
                   <RadioGroup className="space-y-3">
                     <div className="card border dark:border-default-700 rounded-lg p-5">
                       <Label className="flex gap-1 items-center cursor-pointer">
-                        <RadioGroupItem
-
-                          value="B"
-                          defaultChecked
-                        />
+                        <RadioGroupItem value="B" defaultChecked />
                         <div className="space-y-1">
-                          <p className="font-medium text-base rtl:text-right">
-                            Mohakhali DOHS
+                          <p className="font-medium text-base rtl:text-right">Mohakhali DOHS</p>
+                          <p className="font-normal text-sm text-default-500 flex items-center">
+                            <Icon icon="mi:location" className="mr-1 rtl:ml-1" /> House 395, Road
+                            29, New Area
                           </p>
                           <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="mi:location"
-                              className="mr-1 rtl:ml-1"
-                            />{" "}
-                            House 395, Road 29, New Area
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="solar:phone-outline"
-                              className="mr-1 rtl:ml-1"
-                            />
+                            <Icon icon="solar:phone-outline" className="mr-1 rtl:ml-1" />
                             +880123456789
                           </p>
                         </div>
@@ -112,26 +108,15 @@ const page = async () => {
                     </div>
                     <div className="card border dark:border-default-700 rounded-lg p-5">
                       <Label className="flex gap-1 items-center cursor-pointer">
-                        <RadioGroupItem
-
-                          value="A"
-                        />
+                        <RadioGroupItem value="A" />
                         <div className="space-y-1">
-                          <p className="font-medium text-base rtl:text-right">
-                            Mohakhali DOHS
+                          <p className="font-medium text-base rtl:text-right">Mohakhali DOHS</p>
+                          <p className="font-normal text-sm text-default-500 flex items-center">
+                            <Icon icon="mi:location" className="mr-1 rtl:ml-1" /> House 395, Road
+                            29, New Area
                           </p>
                           <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="mi:location"
-                              className="mr-1 rtl:ml-1"
-                            />{" "}
-                            House 395, Road 29, New Area
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="solar:phone-outline"
-                              className="mr-1 rtl:ml-1"
-                            />
+                            <Icon icon="solar:phone-outline" className="mr-1 rtl:ml-1" />
                             +880123456789
                           </p>
                         </div>
@@ -139,25 +124,15 @@ const page = async () => {
                     </div>
                     <div className="card border dark:border-default-700 rounded-lg p-5">
                       <Label className="flex gap-1 items-center cursor-pointer">
-                        <RadioGroupItem
-                          value="C"
-                        />
+                        <RadioGroupItem value="C" />
                         <div className="space-y-1">
-                          <p className="font-medium text-base rtl:text-right">
-                            Mohakhali DOHS
+                          <p className="font-medium text-base rtl:text-right">Mohakhali DOHS</p>
+                          <p className="font-normal text-sm text-default-500 flex items-center">
+                            <Icon icon="mi:location" className="mr-1 rtl:ml-1" /> House 395, Road
+                            29, New Area
                           </p>
                           <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="mi:location"
-                              className="mr-1 rtl:ml-1"
-                            />{" "}
-                            House 395, Road 29, New Area
-                          </p>
-                          <p className="font-normal text-sm text-default-500 flex items-center">
-                            <Icon
-                              icon="solar:phone-outline"
-                              className="mr-1 rtl:ml-1"
-                            />
+                            <Icon icon="solar:phone-outline" className="mr-1 rtl:ml-1" />
                             +880123456789
                           </p>
                         </div>
@@ -181,17 +156,12 @@ const page = async () => {
         </div>
         <div className="flex-none">
           <Button asChild disabled>
-            <Link href="/ecommerce/frontend/checkout/shipping-info">
-              Go Back
-            </Link>
+            <Link href="/ecommerce/frontend/checkout/shipping-info">Go Back</Link>
           </Button>
         </div>
         <div className="flex-none">
           <Button asChild>
-            <Link href="/ecommerce/frontend/checkout/payment">
-              {" "}
-              Continue to shipping
-            </Link>
+            <Link href="/ecommerce/frontend/checkout/payment"> Continue to shipping</Link>
           </Button>
         </div>
       </div>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/layout.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/layout.tsx
index 175b9b4c..defad66c 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/layout.tsx
@@ -1,20 +1,17 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import CheckoutHeader from "./checkout-header";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
+import CheckoutHeader from "./checkout-header";
+
 const layout = ({ children }: { children: React.ReactNode }) => {
-
   return (
-
     <div>
       <SiteBreadcrumb />
       <Card>
         <CardHeader>
           <CheckoutHeader />
         </CardHeader>
-        <CardContent>
-          {children}
-        </CardContent>
+        <CardContent>{children}</CardContent>
       </Card>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/page.tsx
index 9ca7e0aa..7e4f82df 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/page.tsx
@@ -1,13 +1,16 @@
 import React from "react";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/navigation';
-import { Icon } from "@/components/ui/icon";
 import { Card } from "@/components/ui/card";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import PaymentCard from "./payment-card";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
+
+import PaymentCard from "./payment-card";
+
 const page = () => {
   return (
     <div className="card  rounded-sm p-5">
@@ -34,9 +37,7 @@ const page = () => {
           </div>
         </div>
         <div className="lg:col-span-5 col-span-12">
-          <h3 className="text-default-900  font-medium  text-base  pb-3">
-            Summary
-          </h3>
+          <h3 className="text-default-900  font-medium  text-base  pb-3">Summary</h3>
           <div className="card border border-solid border-default-400 rounded-sm p-4">
             <div>
               <ul className="divide-y divide-default-300 pb-8">
@@ -50,12 +51,8 @@ const page = () => {
                   <div className="flex justify-between gap-3 pb-1">
                     <p>
                       Black Tshirt
-                      <span className=" text-default-800    font-medium px-2">
-                        x
-                      </span>
-                      <span className=" text-default-800    font-medium">
-                        3
-                      </span>
+                      <span className=" text-default-800    font-medium px-2">x</span>
+                      <span className=" text-default-800    font-medium">3</span>
                     </p>
                     <p className=" text-default-800    font-medium">$300</p>
                   </div>
@@ -69,10 +66,7 @@ const page = () => {
                 </li>
               </ul>
               <InputGroup>
-                <Input
-                  type="text"
-                  placeholder="Have coupon code? Apply here "
-                />
+                <Input type="text" placeholder="Have coupon code? Apply here " />
                 <InputGroupButton>
                   <Button size="md">Apply</Button>
                 </InputGroupButton>
@@ -92,9 +86,7 @@ const page = () => {
         </div>
         <div className="flex-none">
           <Button asChild disabled>
-            <Link href="/ecommerce/frontend/checkout/delivery-info">
-              Go Back
-            </Link>
+            <Link href="/ecommerce/frontend/checkout/delivery-info">Go Back</Link>
           </Button>
         </div>
         <div className="flex-none">
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/payment-card.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/payment-card.tsx
index 9f19cb35..3274424b 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/payment-card.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/payment/payment-card.tsx
@@ -1,10 +1,13 @@
 "use client";
-import Image from "next/image";
-import { payments } from "../data";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Label } from "@/components/ui/label";
+
 import { useState } from "react";
-import { cn } from "@/lib/utils/utils"
+import Image from "next/image";
+
+import { cn } from "@/lib/utils/utils";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+import { payments } from "../data";
 
 const PaymentCard = () => {
   const [selected, setSelected] = useState("bkash");
@@ -27,11 +30,7 @@ const PaymentCard = () => {
             )}
             key={item.value}
           >
-            <RadioGroupItem
-              hidden
-              id={"radio-" + item.value}
-              value={item.value}
-            />
+            <RadioGroupItem hidden id={"radio-" + item.value} value={item.value} />
             <Image
               className="w-full h-full object-contain group-hover:scale-105 transition-all duration-300"
               src={item.img}
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/shipping-info/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/shipping-info/page.tsx
index f18014bd..a09a8fb6 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/checkout/shipping-info/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/checkout/shipping-info/page.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Icon } from "@/components/ui/icon";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Link } from "@/i18n/navigation";
+
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogClose,
@@ -11,9 +12,11 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
   SelectContent,
@@ -23,9 +26,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Input } from "@/components/ui/input";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Link } from '@/i18n/navigation';
+import { Textarea } from "@/components/ui/textarea";
+
 const page = () => {
   return (
     <div>
@@ -154,11 +156,7 @@ const page = () => {
                   </div>
                   <div className="space-y-2">
                     <Label htmlFor="h_Fullname">Full Name</Label>
-                    <Input
-                      id="h_Fullname"
-                      type="text"
-                      placeholder="Your Postal Code"
-                    />
+                    <Input id="h_Fullname" type="text" placeholder="Your Postal Code" />
                   </div>
                   <div className="space-y-2">
                     <Label htmlFor="phone">Phone No</Label>
@@ -196,10 +194,7 @@ const page = () => {
         </div>
         <div className="flex-none">
           <Button asChild>
-            <Link href="/ecommerce/frontend/checkout/delivery-info">
-              {" "}
-              Continue to shipping
-            </Link>
+            <Link href="/ecommerce/frontend/checkout/delivery-info"> Continue to shipping</Link>
           </Button>
         </div>
       </div>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/counter-button.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/counter-button.tsx
index 7c121e76..ce22bd77 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/counter-button.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/counter-button.tsx
@@ -1,36 +1,31 @@
-'use client'
-import React from 'react'
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
+"use client";
+
+import React from "react";
 import { useTranslations } from "next-intl";
+
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+
 const CounterButton = () => {
   const t = useTranslations("EcommerceApp");
-  const [count, setCount] = React.useState<number>(1)
-  const [show, setShow] = React.useState<boolean>(false)
+  const [count, setCount] = React.useState<number>(1);
+  const [show, setShow] = React.useState<boolean>(false);
 
   const handleIncreaseQuantity = () => {
-
     if (count < 10) {
-      setCount(count + 1)
+      setCount(count + 1);
     }
-
-  }
+  };
   const handleDecreaseQuantity = () => {
-
     if (count > 0) {
-      setCount(count - 1)
-
+      setCount(count - 1);
     }
-
-  }
+  };
   return (
     <>
       {!show && (
         <Button variant="outline" fullWidth size="md" onClick={() => setShow(true)}>
-          <Icon
-            icon="heroicons:shopping-cart"
-            className="w-4 h-4 me-2 text-sm leading-none"
-          />
+          <Icon icon="heroicons:shopping-cart" className="w-4 h-4 me-2 text-sm leading-none" />
           {t("add_to_cart")}
         </Button>
       )}
@@ -49,7 +44,6 @@ const CounterButton = () => {
               {count}
             </div>
             <button
-
               onClick={handleIncreaseQuantity}
               type="button"
               className="flex-none px-2 disabled:cursor-not-allowed disabled:opacity-50 text-default-900 hover:bg-default-900 hover:text-white dark:text-white dark:hover:bg-default-700 rtl:dark:hover:rounded-l ltr:dark:hover:rounded-r"
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/data.ts b/src/app/[locale]/(protected)/ecommerce/frontend/data.ts
index 4ce0ec12..54c81900 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/data.ts
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/data.ts
@@ -1,4 +1,5 @@
 import { faker } from "@faker-js/faker";
+
 export const products = [
   {
     id: "c06d48bf-7f35-4789-b71e-d80fee5b430t",
@@ -128,7 +129,6 @@ export const getProductById = async (id: string) => {
   return products.find((product) => product.id === id);
 };
 
-
 //
 export const categories = [
   { label: "All", value: "all", count: "9724" },
@@ -223,16 +223,16 @@ export type selectOption = (typeof selectOptions)[number];
 export const selectCategories = [
   {
     value: "option1",
-    label: "Top Rated"
+    label: "Top Rated",
   },
   {
     value: "option2",
-    label: "Option 2"
+    label: "Option 2",
   },
   {
     value: "option3",
-    label: "Option 3"
-  }
+    label: "Option 3",
+  },
 ];
 export type selectCategory = (typeof selectCategories)[number];
 //
@@ -302,26 +302,25 @@ export const payments = [
 export type payment = (typeof payments)[number];
 
 export type EcommerceNav = {
-  label: string
-  href: string
-  active: boolean
-  icon: string
-}
+  label: string;
+  href: string;
+  active: boolean;
+  icon: string;
+};
 
 export function getEcommerceNav(pathname: string): EcommerceNav[] {
   return [
     {
-      label: 'grid view',
+      label: "grid view",
       href: "/ecommerce/frontend",
       icon: "heroicons:view-columns",
       active: pathname === "/ecommerce/frontend",
     },
     {
-      label: 'list view',
+      label: "list view",
       href: "/ecommerce/frontend/list",
       icon: "heroicons:list-bullet",
       active: pathname === "/ecommerce/frontend/list",
-    }
-  ]
+    },
+  ];
 }
-
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/empty.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/empty.tsx
index e70f7e10..c308a5c3 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/empty.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/empty.tsx
@@ -3,10 +3,7 @@ import { Rabbit } from "lucide-react";
 const EmptyProject = () => {
   return (
     <div className=" flex flex-col items-center justify-center">
-      <Rabbit
-        className=" h-[200px]  w-[200px] text-default-400 "
-        strokeWidth={1}
-      />
+      <Rabbit className=" h-[200px]  w-[200px] text-default-400 " strokeWidth={1} />
       <div className=" text-sm text-default-500 text-center">No Products</div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/frontend-wrapper.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/frontend-wrapper.tsx
index def60594..606e3bc2 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/frontend-wrapper.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/frontend-wrapper.tsx
@@ -1,15 +1,25 @@
-"use client"
-import { Icon } from "@/components/ui/icon";
-import Sidebar from "./sidebar";
-import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { selectOptions, selectCategories, getEcommerceNav } from "./data";
+"use client";
+
 import { Link, usePathname } from "@/i18n/navigation";
+
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { getEcommerceNav, selectCategories, selectOptions } from "./data";
+import Sidebar from "./sidebar";
+
 const FrontendWrapper = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname();
-  const menus = getEcommerceNav(pathname)
+  const menus = getEcommerceNav(pathname);
   return (
     <div>
       <div className="grid grid-cols-12  gap-5">
@@ -21,11 +31,15 @@ const FrontendWrapper = ({ children }: { children: React.ReactNode }) => {
             <div className="flex-1 flex  items-center gap-3">
               {menus?.map(({ href, active, icon }, index) => (
                 <Button
-                  key={`view-button-${index}`} asChild
+                  key={`view-button-${index}`}
+                  asChild
                   size="icon"
                   variant="outline"
-                  className={cn("border border-default-400 text-default-400 hover:bg-transparent hover:text-default-400 h-11 w-11",
-                    { "text-default border-default hover:text-default hover:border-default": active }
+                  className={cn(
+                    "border border-default-400 text-default-400 hover:bg-transparent hover:text-default-400 h-11 w-11",
+                    {
+                      "text-default border-default hover:text-default hover:border-default": active,
+                    }
                   )}
                 >
                   <Link href={href}>
@@ -33,11 +47,13 @@ const FrontendWrapper = ({ children }: { children: React.ReactNode }) => {
                   </Link>
                 </Button>
               ))}
-
             </div>
             <div className="flex-none sm:flex items-center gap-4 sm:space-y-0 space-y-2">
               <div className=" flex gap-2  items-center">
-                <Label htmlFor="select" className="text-sm font-normal"> Show: </Label>
+                <Label htmlFor="select" className="text-sm font-normal">
+                  {" "}
+                  Show:{" "}
+                </Label>
                 <Select defaultValue={selectOptions[0].value}>
                   <SelectTrigger className="bg-transparent w-[110px] border-default-200 h-10">
                     <SelectValue placeholder="Select Option" />
@@ -52,7 +68,9 @@ const FrontendWrapper = ({ children }: { children: React.ReactNode }) => {
                 </Select>
               </div>
               <div className="flex gap-2 items-center">
-                <Label htmlFor="select" className="text-sm font-normal whitespace-nowrap">Sort by:</Label>
+                <Label htmlFor="select" className="text-sm font-normal whitespace-nowrap">
+                  Sort by:
+                </Label>
                 <Select>
                   <SelectTrigger className="bg-transparent w-[110px] border-default-200 h-10">
                     <SelectValue placeholder="Filters" />
@@ -68,13 +86,11 @@ const FrontendWrapper = ({ children }: { children: React.ReactNode }) => {
               </div>
             </div>
           </div>
-          <div>
-            {children}
-          </div>
+          <div>{children}</div>
         </div>
       </div>
     </div>
   );
 };
 
-export default FrontendWrapper;
\ No newline at end of file
+export default FrontendWrapper;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/layout.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/list/layout.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/list/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/list/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/list/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/list/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/list/page.tsx
index 83198d72..be69f844 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/list/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/list/page.tsx
@@ -19,4 +19,4 @@ const ListPage = async () => {
   );
 };
 
-export default ListPage;
\ No newline at end of file
+export default ListPage;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/list/product-list.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/list/product-list.tsx
index 4b728a09..b3e55227 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/list/product-list.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/list/product-list.tsx
@@ -1,11 +1,14 @@
-import { Button } from "@/components/ui/button";
-import { product as ProductProps } from "../data";
-import { Icon } from "@/components/ui/icon";
 import Image from "next/image";
-import { Link } from '@/i18n/navigation';
-import { Card } from "@/components/ui/card";
+import { Link } from "@/i18n/navigation";
+
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+
 import CounterButton from "../counter-button";
+import { product as ProductProps } from "../data";
+
 const ProductList = ({ product }: { product: ProductProps }) => {
   return (
     <Card className="p-3 rounded-md 2xl:flex lg:flex md:flex-none sm:flex-none group">
@@ -60,19 +63,13 @@ const ProductList = ({ product }: { product: ProductProps }) => {
       </Link>
 
       <div>
-        <p className="text-xs	text-default-900  font-normal uppercase pb-2">
-          {product.category}
-        </p>
+        <p className="text-xs	text-default-900  font-normal uppercase pb-2">{product.category}</p>
         <h6 className="text-default-900  text-lg	font-medium	pb-2 w-full truncate">
           <Link href={`/ecommerce/frontend/${product.id}`}>{product.name}</Link>
         </h6>
         <p className="pb-2 space-x-2 rtl:space-x-reverse">
-          <span className="text-default-900  text-lg	font-semibold ">
-            ${product.price}
-          </span>
-          <del className="text-default-500 font-semibold text-lg">
-            {product.oldPrice}
-          </del>
+          <span className="text-default-900  text-lg	font-semibold ">${product.price}</span>
+          <del className="text-default-500 font-semibold text-lg">{product.oldPrice}</del>
         </p>
         {product.rating && (
           <span className="flex items-center text-default-900   font-normal text-xs space-x-[4px] rtl:space-x-reverse pb-3">
@@ -83,13 +80,9 @@ const ProductList = ({ product }: { product: ProductProps }) => {
             <span className="ltr:pl-2 rtl:pr-2">{product.rating}</span>
           </span>
         )}
-        <p className="text-default-500  text-sm  font-normal pb-4">
-          {product.desc}
-        </p>
+        <p className="text-default-500  text-sm  font-normal pb-4">{product.desc}</p>
         <div className="flex gap-4 max-w-[370px]">
           <CounterButton />
-
-
         </div>
       </div>
     </Card>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/page.tsx
index 2281cec6..a3ba0c0a 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/page.tsx
@@ -1,19 +1,18 @@
 import { getProducts } from "./data";
 import EmptyProject from "./empty";
-import ProductBox from "./product-box";
 import FrontendWrapper from "./frontend-wrapper";
+import ProductBox from "./product-box";
+
 const EcommercePage = async () => {
   const products = await getProducts();
   if (products.length === 0) return <EmptyProject />;
   return (
     <FrontendWrapper>
-    <div className="grid 2xl:grid-cols-3 xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 h-max">
-      {products?.map((product, i) => (
-        <ProductBox key={`grid_key_${i}`} product={product} />
-      ))}
-    </div>
+      <div className="grid 2xl:grid-cols-3 xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 h-max">
+        {products?.map((product, i) => <ProductBox key={`grid_key_${i}`} product={product} />)}
+      </div>
     </FrontendWrapper>
   );
 };
 
-export default EcommercePage;
\ No newline at end of file
+export default EcommercePage;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/product-box.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/product-box.tsx
index b04bfafe..99ae5255 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/product-box.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/product-box.tsx
@@ -1,13 +1,15 @@
-import CounterButton from "./counter-button";
-import { Link } from '@/i18n/navigation';
 import Image from "next/image";
-import { Card } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import { product as ProductProps } from "./data";
+import { Link } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+
+import CounterButton from "./counter-button";
+import { product as ProductProps } from "./data";
+
 const ProductBox = ({ product }: { product: ProductProps }) => {
   const t = useTranslations("EcommerceApp");
   return (
@@ -23,10 +25,7 @@ const ProductBox = ({ product }: { product: ProductProps }) => {
               alt={product.name}
             />
             {product.percent && (
-              <Badge
-                color="destructive"
-                className=" absolute ltr:left-2 rtl:right-2 top-3"
-              >
+              <Badge color="destructive" className=" absolute ltr:left-2 rtl:right-2 top-3">
                 {product.percent}
               </Badge>
             )}
@@ -67,9 +66,7 @@ const ProductBox = ({ product }: { product: ProductProps }) => {
 
       <div>
         <div className="flex justify-between items-center ">
-          <p className="text-xs	text-default-900 uppercase font-normal">
-            {product.category}
-          </p>
+          <p className="text-xs	text-default-900 uppercase font-normal">{product.category}</p>
           {product.rating && (
             <span className="flex items-center text-default-900  font-normal text-xs space-x-1  rtl:space-x-reverse ">
               <Icon icon="ph:star-fill" className="text-yellow-400" />
@@ -80,16 +77,10 @@ const ProductBox = ({ product }: { product: ProductProps }) => {
         <h6 className="text-default-900 text-base	font-medium	mt-2 truncate	">
           <Link href={`/ecommerce/frontend/${product.id}`}>{product.name}</Link>
         </h6>
-        <p className="text-default-500  text-xs  font-normal mt-1.5">
-          {product.subtitle}
-        </p>
+        <p className="text-default-500  text-xs  font-normal mt-1.5">{product.subtitle}</p>
         <p className="pb-4  mt-2">
-          <span className="text-default-900 text-base	font-medium	 me-2 ">
-            ${product.price}
-          </span>
-          <del className="text-default-500  font-normal text-base		">
-            {product.oldPrice}
-          </del>
+          <span className="text-default-900 text-base	font-medium	 me-2 ">${product.price}</span>
+          <del className="text-default-500  font-normal text-base		">{product.oldPrice}</del>
         </p>
 
         <CounterButton />
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/layout.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/layout.tsx
index 232ab4e2..1470327c 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: 'Ecommerce',
-  description: 'Ecommerce Page'
-}
+  title: "Ecommerce",
+  description: "Ecommerce Page",
+};
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/page.tsx
index 413bd45b..02955f2a 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/page.tsx
@@ -1,5 +1,6 @@
-import { Card } from "@/components/ui/card"
-import TransactionsTable from "./transactions"
+import { Card } from "@/components/ui/card";
+
+import TransactionsTable from "./transactions";
 
 const PurchaseHistory = () => {
   return (
@@ -10,6 +11,6 @@ const PurchaseHistory = () => {
       </Card>
     </div>
   );
-}
+};
 
-export default PurchaseHistory
\ No newline at end of file
+export default PurchaseHistory;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/columns.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/columns.tsx
index a55ad308..25b3bb56 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/columns.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/columns.tsx
@@ -1,14 +1,11 @@
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-import {
-  Download,
-  Eye,
-  Trash2,
-} from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
+import { Download, Eye, Trash2 } from "lucide-react";
+
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils/utils"
-import { Link } from '@/i18n/navigation';
+import { Checkbox } from "@/components/ui/checkbox";
 
 export type DataProps = {
   id: string | number;
@@ -26,8 +23,7 @@ export const columns: ColumnDef<DataProps>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
@@ -71,9 +67,7 @@ export const columns: ColumnDef<DataProps>[] = [
     accessorKey: "delivery",
     header: "Delivery Status",
     cell: ({ row }) => {
-
       return <span> {row.getValue("delivery")}</span>;
-
     },
   },
   {
@@ -87,11 +81,7 @@ export const columns: ColumnDef<DataProps>[] = [
       };
       const status = row.getValue<string>("status");
       const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge className={cn("rounded-full px-5", statusStyles)}>
-          {status}{" "}
-        </Badge>
-      );
+      return <Badge className={cn("rounded-full px-5", statusStyles)}>{status} </Badge>;
     },
   },
   {
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/data.ts b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/data.ts
index 60dc62ac..9f8b6796 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/data.ts
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/data.ts
@@ -1,4 +1,5 @@
 import { DataProps } from "./columns";
+
 export const data: DataProps[] = [
   {
     id: 1,
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/index.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/index.tsx
index 6ce07c04..fe9aeae3 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/index.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/index.tsx
@@ -1,41 +1,24 @@
 "use client";
 
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { data } from "./data";
-import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
 import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/navigation';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
-import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -45,14 +28,24 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import BasicCalendar from "@/app/[locale]/(protected)/components/calendar/basic-calendar";
+
+import { columns } from "./columns";
+import { data } from "./data";
+import TablePagination from "./table-pagination";
 
 const TransactionsTable = () => {
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
@@ -154,12 +147,8 @@ const TransactionsTable = () => {
             </Select>
             <Input
               placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
+              value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
+              onChange={(event) => table.getColumn("status")?.setFilterValue(event.target.value)}
               className="w-full "
             />
           </div>
@@ -177,10 +166,7 @@ const TransactionsTable = () => {
                       <TableHead className="last:text-start" key={header.id}>
                         {header.isPlaceholder
                           ? null
-                          : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                          : flexRender(header.column.columnDef.header, header.getContext())}
                       </TableHead>
                     );
                   })}
@@ -190,26 +176,17 @@ const TransactionsTable = () => {
             <TableBody>
               {table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
+                  <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id} className="h-[75px]">
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/table-pagination.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/table-pagination.tsx
index fab9b075..1e0d5cd5 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/purchase-history/transactions/table-pagination.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -19,33 +20,32 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
             key={`basic-data-table-${pageIndex}`}
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
+            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? "bg-default" : "bg-default-300 text-default"}`}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/sidebar.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/sidebar.tsx
index d0f1c04a..8298e729 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/sidebar.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/sidebar.tsx
@@ -1,3 +1,5 @@
+import { useTranslations } from "next-intl";
+
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -6,8 +8,8 @@ import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
 
-import { categories, brands, prices, ratings } from "./data";
-import { useTranslations } from "next-intl";
+import { brands, categories, prices, ratings } from "./data";
+
 const Sidebar = () => {
   const t = useTranslations("EcommerceApp");
   return (
@@ -18,12 +20,7 @@ const Sidebar = () => {
             icon="heroicons:magnifying-glass"
             className="absolute start-2 top-1/2 -translate-y-1/2 text-default-500"
           />
-          <Input
-            type="text"
-            placeholder="Search.."
-            className="ps-7"
-            size="md"
-          />
+          <Input type="text" placeholder="Search.." className="ps-7" size="md" />
         </div>
       </CardHeader>
       <CardContent className="space-y-6  divide-y divide-default-200  ">
@@ -32,69 +29,45 @@ const Sidebar = () => {
             {t("categories")}
           </div>
           {categories.map((category, i) => (
-            <div
-              key={`category_key_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
+            <div key={`category_key_${i}`} className="flex justify-between items-center space-y-1">
               <div className="flex gap-3 items-center">
                 <Checkbox id={`category_key_${i}`} />
-                <Label
-                  className="text-default-800 font-normal"
-                  htmlFor={`category_key_${i}`}
-                >
+                <Label className="text-default-800 font-normal" htmlFor={`category_key_${i}`}>
                   {category.label}
                 </Label>
               </div>
-              <span className="text-default-500 font-semibold text-xs">
-                {category.count}
-              </span>
+              <span className="text-default-500 font-semibold text-xs">{category.count}</span>
             </div>
           ))}
 
-          <button className="text-xs font-medium text-default-900 pt-1">
-            {t("view_less")}
-          </button>
+          <button className="text-xs font-medium text-default-900 pt-1">{t("view_less")}</button>
         </div>
         <div className="space-y-2 ltr:-ml-6 ltr:pl-6 rtl:-mr-6 rtl:pr-6">
           <div className="text-default-800 font-semibold text-xs uppercase pt-5 pb-2">
             {t("brands")}
           </div>
           {brands.map((brand, i) => (
-            <div
-              key={`brand_key_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
+            <div key={`brand_key_${i}`} className="flex justify-between items-center space-y-1">
               <div className="flex gap-3 items-center">
                 <Checkbox id={`brand_key_${i}`} />
-                <Label
-                  className="text-default-800 font-normal"
-                  htmlFor={`brand_key_${i}`}
-                >
+                <Label className="text-default-800 font-normal" htmlFor={`brand_key_${i}`}>
                   {brand.label}
                 </Label>
               </div>
               <span className="text-default-500  text-xs">{brand.count}</span>
             </div>
           ))}
-          <button className="text-xs font-medium text-default-900 pt-1">
-            {t("view_less")}
-          </button>
+          <button className="text-xs font-medium text-default-900 pt-1">{t("view_less")}</button>
         </div>
         <div className="space-y-2 ltr:-ml-6 ltr:pl-6 rtl:-mr-6 rtl:pr-6">
           <div className="text-default-800 font-semibold text-xs uppercase pt-5 pb-2">
             {t("price")}
           </div>
           {prices.map((price, i) => (
-            <div
-              key={`price_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
+            <div key={`price_${i}`} className="flex justify-between items-center space-y-1">
               <div className="flex gap-3 items-center">
                 <Checkbox id={`price_${i}`} />
-                <Label
-                  className="text-default-800 font-normal"
-                  htmlFor={`price_${i}`}
-                >
+                <Label className="text-default-800 font-normal" htmlFor={`price_${i}`}>
                   {price.label}
                 </Label>
               </div>
@@ -107,16 +80,10 @@ const Sidebar = () => {
             {t("ratings")}
           </div>
           {ratings.map((rating, i) => (
-            <div
-              key={`rating_${i}`}
-              className="flex justify-between items-center space-y-1"
-            >
+            <div key={`rating_${i}`} className="flex justify-between items-center space-y-1">
               <div className="flex gap-3 items-center">
                 <Checkbox id={`rating_${i}`} />
-                <Icon
-                  icon="heroicons:star-solid"
-                  className="w-4 h-4 text-warning"
-                />
+                <Icon icon="heroicons:star-solid" className="w-4 h-4 text-warning" />
                 <span>{rating.name}</span>
               </div>
               <span className="text-default-500  text-xs">{rating.count}</span>
diff --git a/src/app/[locale]/(protected)/ecommerce/frontend/wishlist/page.tsx b/src/app/[locale]/(protected)/ecommerce/frontend/wishlist/page.tsx
index 9c3a6359..3bc16a1c 100644
--- a/src/app/[locale]/(protected)/ecommerce/frontend/wishlist/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/frontend/wishlist/page.tsx
@@ -2,16 +2,13 @@ import { getProducts } from "../data";
 import EmptyProject from "../empty";
 import ProductBox from "../product-box";
 
-
 const WishList = async () => {
   const products = await getProducts();
   if (products.length === 0) return <EmptyProject />;
   return (
     <div>
       <div className="grid 2xl:grid-cols-4 xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-3 h-max">
-        {products?.map((product, i) => (
-          <ProductBox key={`grid_key_${i}`} product={product} />
-        ))}
+        {products?.map((product, i) => <ProductBox key={`grid_key_${i}`} product={product} />)}
       </div>
     </div>
   );
diff --git a/src/app/[locale]/(protected)/ecommerce/layout.tsx b/src/app/[locale]/(protected)/ecommerce/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/ecommerce/layout.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/ecommerce/page.tsx b/src/app/[locale]/(protected)/ecommerce/page.tsx
index b13a969b..ac764331 100644
--- a/src/app/[locale]/(protected)/ecommerce/page.tsx
+++ b/src/app/[locale]/(protected)/ecommerce/page.tsx
@@ -1,5 +1,7 @@
 "use client";
+
 import { redirect } from "@/i18n/navigation";
+
 const Backend = () => {
   redirect("/ecommerce/frontend");
   return null;
diff --git a/src/app/[locale]/(protected)/error.tsx b/src/app/[locale]/(protected)/error.tsx
index d2e5230b..884dc17a 100644
--- a/src/app/[locale]/(protected)/error.tsx
+++ b/src/app/[locale]/(protected)/error.tsx
@@ -1,24 +1,28 @@
-"use client"; // Error components must be Client Components
+"use client";
 
+// Error components must be Client Components
 import { useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Info } from "lucide-react";
 
-export default function Error({ error, reset }: {
-    error: Error & { digest?: string }
-    reset: () => void
-}) {
-    return (
-        <div className="space-y-4">
-            <Alert color="destructive" variant="soft">
-                <Info className="h-5 w-5" />
-                <AlertDescription>Something went wrong!</AlertDescription>
-            </Alert>
-            <Button onClick={() => reset()} color="destructive" size="sm">
-                Try again
-            </Button>
-        </div>
-    );
-}
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <Alert color="destructive" variant="soft">
+        <Info className="h-5 w-5" />
+        <AlertDescription>Something went wrong!</AlertDescription>
+      </Alert>
+      <Button onClick={() => reset()} color="destructive" size="sm">
+        Try again
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(protected)/forms/checkbox/basic-checkbox.tsx b/src/app/[locale]/(protected)/forms/checkbox/basic-checkbox.tsx
index 28dfc284..a47c916f 100644
--- a/src/app/[locale]/(protected)/forms/checkbox/basic-checkbox.tsx
+++ b/src/app/[locale]/(protected)/forms/checkbox/basic-checkbox.tsx
@@ -24,4 +24,4 @@ const BasicCheckbox = () => {
   );
 };
 
-export default BasicCheckbox;
\ No newline at end of file
+export default BasicCheckbox;
diff --git a/src/app/[locale]/(protected)/forms/checkbox/color-checkbox.tsx b/src/app/[locale]/(protected)/forms/checkbox/color-checkbox.tsx
index 4b5b4462..dcce8e4b 100644
--- a/src/app/[locale]/(protected)/forms/checkbox/color-checkbox.tsx
+++ b/src/app/[locale]/(protected)/forms/checkbox/color-checkbox.tsx
@@ -6,35 +6,34 @@ const ColorCheckbox = () => {
     <div className="flex items-center gap-6 flex-wrap">
       <div className="flex items-center gap-3">
         <Checkbox id="default" defaultChecked />
-        <Label htmlFor="default" >Default</Label>
+        <Label htmlFor="default">Default</Label>
       </div>
       <div className="flex items-center gap-3">
         <Checkbox defaultChecked id="primary" color="primary" />
-        <Label htmlFor="primary" >Primary</Label>
+        <Label htmlFor="primary">Primary</Label>
       </div>
       <div className="flex items-center gap-3">
         <Checkbox defaultChecked id="secondary" color="secondary" />
-        <Label htmlFor="secondary" >Secondary</Label>
+        <Label htmlFor="secondary">Secondary</Label>
       </div>
       <div className="flex items-center gap-3">
         <Checkbox defaultChecked id="info" color="info" />
-        <Label htmlFor="info" >Info </Label>
+        <Label htmlFor="info">Info </Label>
       </div>
       <div className="flex items-center gap-3">
         <Checkbox defaultChecked id="success" color="success" />
-        <Label htmlFor="success" >Success </Label>
+        <Label htmlFor="success">Success </Label>
       </div>
       <div className="flex items-center gap-3">
         <Checkbox defaultChecked id="warning" color="warning" />
-        <Label htmlFor="warning" >Warning </Label>
+        <Label htmlFor="warning">Warning </Label>
       </div>
       <div className="flex items-center gap-3">
         <Checkbox defaultChecked id="destructive" color="destructive" />
-        <Label htmlFor="destructive"  >Destructive </Label>
+        <Label htmlFor="destructive">Destructive </Label>
       </div>
-
     </div>
   );
 };
 
-export default ColorCheckbox;
\ No newline at end of file
+export default ColorCheckbox;
diff --git a/src/app/[locale]/(protected)/forms/checkbox/layout.tsx b/src/app/[locale]/(protected)/forms/checkbox/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/checkbox/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/checkbox/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/checkbox/options-array.tsx b/src/app/[locale]/(protected)/forms/checkbox/options-array.tsx
index 04572de3..7b87ef9d 100644
--- a/src/app/[locale]/(protected)/forms/checkbox/options-array.tsx
+++ b/src/app/[locale]/(protected)/forms/checkbox/options-array.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { useState } from "react";
+
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
-import { useState } from "react";
+
 interface Option {
   value: string;
   label: string;
@@ -39,21 +41,17 @@ const OptionArrayCheckbox = () => {
                 }
               }}
               id={option.value}
-            >
-
-            </Checkbox>
+            ></Checkbox>
             <Label htmlFor={option.value}> {option.label}</Label>
           </div>
         ))}
       </div>
 
       {selected.length > 0 && (
-        <div className="text-muted-foreground ">
-          Selected: [{selected.join(", ")}]
-        </div>
+        <div className="text-muted-foreground ">Selected: [{selected.join(", ")}]</div>
       )}
     </div>
   );
 };
 
-export default OptionArrayCheckbox;
\ No newline at end of file
+export default OptionArrayCheckbox;
diff --git a/src/app/[locale]/(protected)/forms/checkbox/page.tsx b/src/app/[locale]/(protected)/forms/checkbox/page.tsx
index 55da7fcb..cf13cd0e 100644
--- a/src/app/[locale]/(protected)/forms/checkbox/page.tsx
+++ b/src/app/[locale]/(protected)/forms/checkbox/page.tsx
@@ -1,9 +1,11 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicCheckbox from "./basic-checkbox";
 import ColorCheckbox from "./color-checkbox";
 import OptionsArrayCheckbox from "./options-array";
 import { basicCheckbox, colorCheckbox, optionsArrayCheckbox } from "./soure-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const CheckboxPage = () => {
   return (
     <div>
@@ -23,4 +25,4 @@ const CheckboxPage = () => {
   );
 };
 
-export default CheckboxPage;
\ No newline at end of file
+export default CheckboxPage;
diff --git a/src/app/[locale]/(protected)/forms/checkbox/soure-code.ts b/src/app/[locale]/(protected)/forms/checkbox/soure-code.ts
index e17bad97..88b85033 100644
--- a/src/app/[locale]/(protected)/forms/checkbox/soure-code.ts
+++ b/src/app/[locale]/(protected)/forms/checkbox/soure-code.ts
@@ -1,4 +1,4 @@
-export const basicCheckbox=`import { Checkbox } from "@/components/ui/checkbox";
+export const basicCheckbox = `import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 
 const BasicCheckbox = () => {
@@ -24,9 +24,9 @@ const BasicCheckbox = () => {
   );
 };
 
-export default BasicCheckbox;`
+export default BasicCheckbox;`;
 
-export const colorCheckbox=`import { Checkbox } from "@/components/ui/checkbox";
+export const colorCheckbox = `import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 
 const ColorCheckbox = () => {
@@ -65,9 +65,9 @@ const ColorCheckbox = () => {
   );
 };
 
-export default ColorCheckbox;`
+export default ColorCheckbox;`;
 
-export const optionsArrayCheckbox=`"use client";
+export const optionsArrayCheckbox = `"use client";
 
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
@@ -125,4 +125,4 @@ const OptionArrayCheckbox = () => {
   );
 };
 
-export default OptionArrayCheckbox;`
\ No newline at end of file
+export default OptionArrayCheckbox;`;
diff --git a/src/app/[locale]/(protected)/forms/combobox/basic-combobox.tsx b/src/app/[locale]/(protected)/forms/combobox/basic-combobox.tsx
index 0c83eae4..a7a26414 100644
--- a/src/app/[locale]/(protected)/forms/combobox/basic-combobox.tsx
+++ b/src/app/[locale]/(protected)/forms/combobox/basic-combobox.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Check, ChevronsUpDown } from "lucide-react"
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandEmpty,
@@ -12,12 +12,8 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/components/ui/command"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 const frameworks = [
   {
@@ -40,11 +36,11 @@ const frameworks = [
     value: "astro",
     label: "Astro",
   },
-]
+];
 
 const BasicCombobox = () => {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState("")
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState("");
 
   return (
     <div className="flex justify-center">
@@ -73,8 +69,8 @@ const BasicCombobox = () => {
                     key={framework.value}
                     value={framework.value}
                     onSelect={(currentValue) => {
-                      setValue(currentValue === value ? "" : currentValue)
-                      setOpen(false)
+                      setValue(currentValue === value ? "" : currentValue);
+                      setOpen(false);
                     }}
                   >
                     <Check
@@ -92,7 +88,7 @@ const BasicCombobox = () => {
         </PopoverContent>
       </Popover>
     </div>
-  )
-}
+  );
+};
 
-export default BasicCombobox;
\ No newline at end of file
+export default BasicCombobox;
diff --git a/src/app/[locale]/(protected)/forms/combobox/layout.tsx b/src/app/[locale]/(protected)/forms/combobox/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/combobox/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/combobox/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/combobox/page.tsx b/src/app/[locale]/(protected)/forms/combobox/page.tsx
index 4beff1f7..7b9f575a 100644
--- a/src/app/[locale]/(protected)/forms/combobox/page.tsx
+++ b/src/app/[locale]/(protected)/forms/combobox/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicCombobox from "./basic-combobox";
-import { basicCombobox } from "./soure-code"
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicCombobox from "./basic-combobox";
+import { basicCombobox } from "./soure-code";
+
 const ComboboxPage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const ComboboxPage = () => {
   );
 };
 
-export default ComboboxPage;
\ No newline at end of file
+export default ComboboxPage;
diff --git a/src/app/[locale]/(protected)/forms/combobox/soure-code.ts b/src/app/[locale]/(protected)/forms/combobox/soure-code.ts
index 3c5f9799..2b2f18c4 100644
--- a/src/app/[locale]/(protected)/forms/combobox/soure-code.ts
+++ b/src/app/[locale]/(protected)/forms/combobox/soure-code.ts
@@ -1,4 +1,4 @@
-export const basicCombobox=`"use client"
+export const basicCombobox = `"use client"
 
 import * as React from "react"
 import { Check, ChevronsUpDown } from "lucide-react"
@@ -95,4 +95,4 @@ const BasicCombobox = () => {
   )
 }
 
-export default BasicCombobox;`
\ No newline at end of file
+export default BasicCombobox;`;
diff --git a/src/app/[locale]/(protected)/forms/command/basic-command.tsx b/src/app/[locale]/(protected)/forms/command/basic-command.tsx
index 5301c1bc..bc693723 100644
--- a/src/app/[locale]/(protected)/forms/command/basic-command.tsx
+++ b/src/app/[locale]/(protected)/forms/command/basic-command.tsx
@@ -1,11 +1,4 @@
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from "lucide-react"
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";
 
 import {
   Command,
@@ -16,7 +9,8 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from "@/components/ui/command"
+} from "@/components/ui/command";
+
 const BasicCommand = () => {
   return (
     <div className="max-w-lg mx-auto">
@@ -62,4 +56,4 @@ const BasicCommand = () => {
   );
 };
 
-export default BasicCommand;
\ No newline at end of file
+export default BasicCommand;
diff --git a/src/app/[locale]/(protected)/forms/command/layout.tsx b/src/app/[locale]/(protected)/forms/command/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/command/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/command/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/command/page.tsx b/src/app/[locale]/(protected)/forms/command/page.tsx
index 620196f3..17d7ce77 100644
--- a/src/app/[locale]/(protected)/forms/command/page.tsx
+++ b/src/app/[locale]/(protected)/forms/command/page.tsx
@@ -1,7 +1,8 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicCommand from "./basic-command";
 import { basicCommand } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const CommandPage = () => {
   return (
@@ -14,4 +15,4 @@ const CommandPage = () => {
   );
 };
 
-export default CommandPage;
\ No newline at end of file
+export default CommandPage;
diff --git a/src/app/[locale]/(protected)/forms/command/source-code.ts b/src/app/[locale]/(protected)/forms/command/source-code.ts
index 8ba14642..07161b6a 100644
--- a/src/app/[locale]/(protected)/forms/command/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/command/source-code.ts
@@ -1,4 +1,4 @@
-export const basicCommand=`import {
+export const basicCommand = `import {
   Calculator,
   Calendar,
   CreditCard,
@@ -62,4 +62,4 @@ const BasicCommand = () => {
   );
 };
 
-export default BasicCommand;`
\ No newline at end of file
+export default BasicCommand;`;
diff --git a/src/app/[locale]/(protected)/forms/form-validation/layout.tsx b/src/app/[locale]/(protected)/forms/form-validation/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/form-validation/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/form-validation/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/form-validation/multiple-types.tsx b/src/app/[locale]/(protected)/forms/form-validation/multiple-types.tsx
index 8014d504..3057ada8 100644
--- a/src/app/[locale]/(protected)/forms/form-validation/multiple-types.tsx
+++ b/src/app/[locale]/(protected)/forms/form-validation/multiple-types.tsx
@@ -1,12 +1,14 @@
 "use client";
-import { useForm } from "react-hook-form";
+
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
 const schema = z.object({
@@ -19,9 +21,7 @@ const schema = z.object({
   }),
   city: z.string().min(3, { message: "Enter minimum 3 charecters" }),
   web: z.string().url({ message: "Enter valid web address" }),
-  inputMessage: z
-    .string()
-    .max(30, { message: "Message should not be exceed 30 charecters." }),
+  inputMessage: z.string().max(30, { message: "Message should not be exceed 30 charecters." }),
 });
 
 const MultipleTypes = () => {
@@ -84,9 +84,7 @@ const MultipleTypes = () => {
               "border-destructive focus:border-destructive": errors.phone,
             })}
           />
-          {errors.phone && (
-            <p className="text-xs text-destructive">{errors.phone.message}</p>
-          )}
+          {errors.phone && <p className="text-xs text-destructive">{errors.phone.message}</p>}
         </div>
         <div className="flex flex-col gap-2 col-span-2 lg:col-span-1">
           <Label
@@ -105,9 +103,7 @@ const MultipleTypes = () => {
               "border-destructive": errors.city,
             })}
           />
-          {errors.city && (
-            <p className="text-xs text-destructive">{errors.city.message}</p>
-          )}
+          {errors.city && <p className="text-xs text-destructive">{errors.city.message}</p>}
         </div>
 
         <div className="flex flex-col gap-2 col-span-2 lg:col-span-1">
@@ -127,9 +123,7 @@ const MultipleTypes = () => {
               "border-destructive focus:border-destructive": errors.web,
             })}
           />
-          {errors.web && (
-            <p className="text-xs text-destructive">{errors.web.message}</p>
-          )}
+          {errors.web && <p className="text-xs text-destructive">{errors.web.message}</p>}
         </div>
         <div className="flex flex-col gap-2 col-span-2">
           <Label
@@ -145,14 +139,11 @@ const MultipleTypes = () => {
             placeholder="type here... maximum 30 charecters"
             id="inputMessage"
             className={cn("", {
-              "border-destructive focus:border-destructive":
-                errors.inputMessage,
+              "border-destructive focus:border-destructive": errors.inputMessage,
             })}
           />
           {errors.inputMessage && (
-            <p className="text-xs text-destructive">
-              {errors.inputMessage.message}
-            </p>
+            <p className="text-xs text-destructive">{errors.inputMessage.message}</p>
           )}
         </div>
       </div>
diff --git a/src/app/[locale]/(protected)/forms/form-validation/page.tsx b/src/app/[locale]/(protected)/forms/form-validation/page.tsx
index 060ad1fb..c54b14b7 100644
--- a/src/app/[locale]/(protected)/forms/form-validation/page.tsx
+++ b/src/app/[locale]/(protected)/forms/form-validation/page.tsx
@@ -1,10 +1,11 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import SimpleFormValidation from "./simple-form";
-import ValidateWithTooltip from "./validate-with-tooltip";
-import ValidateRadio from "./validate-radio";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import MultipleTypes from "./multiple-types";
 import PasswordValidation from "./passoword-validation";
+import SimpleFormValidation from "./simple-form";
+import ValidateRadio from "./validate-radio";
+import ValidateWithTooltip from "./validate-with-tooltip";
 
 const FormValidation = () => {
   return (
@@ -17,7 +18,7 @@ const FormValidation = () => {
               <CardTitle> Simple Form Validation</CardTitle>
             </CardHeader>
             <CardContent>
-              <SimpleFormValidation/>
+              <SimpleFormValidation />
             </CardContent>
           </Card>
         </div>
@@ -27,7 +28,7 @@ const FormValidation = () => {
               <CardTitle> Simple Form Validation With Tooltip</CardTitle>
             </CardHeader>
             <CardContent>
-              <ValidateWithTooltip/>
+              <ValidateWithTooltip />
             </CardContent>
           </Card>
         </div>
@@ -37,7 +38,7 @@ const FormValidation = () => {
               <CardTitle> Validate Radio Group</CardTitle>
             </CardHeader>
             <CardContent>
-              <ValidateRadio/>
+              <ValidateRadio />
             </CardContent>
           </Card>
         </div>
@@ -47,18 +48,18 @@ const FormValidation = () => {
               <CardTitle>Validate Password</CardTitle>
             </CardHeader>
             <CardContent>
-              <PasswordValidation/>
+              <PasswordValidation />
             </CardContent>
           </Card>
         </div>
-    
+
         <div className="col-span-2">
           <Card>
             <CardHeader>
               <CardTitle>Multiple Types</CardTitle>
             </CardHeader>
             <CardContent>
-              <MultipleTypes/>
+              <MultipleTypes />
             </CardContent>
           </Card>
         </div>
@@ -67,4 +68,4 @@ const FormValidation = () => {
   );
 };
 
-export default FormValidation;
\ No newline at end of file
+export default FormValidation;
diff --git a/src/app/[locale]/(protected)/forms/form-validation/passoword-validation.tsx b/src/app/[locale]/(protected)/forms/form-validation/passoword-validation.tsx
index c05801b7..b445cc5b 100644
--- a/src/app/[locale]/(protected)/forms/form-validation/passoword-validation.tsx
+++ b/src/app/[locale]/(protected)/forms/form-validation/passoword-validation.tsx
@@ -1,19 +1,19 @@
 "use client";
-import { useForm } from "react-hook-form";
+
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 const schema = z
   .object({
     password: z.string().min(4, { message: "Password is more than 4 characters." }),
-    confirmPassword: z
-      .string()
-      .min(6, { message: "Passwords didn't match." }),
+    confirmPassword: z.string().min(6, { message: "Passwords didn't match." }),
   })
   .refine((data) => data.password === data.confirmPassword, {
     message: "Passwords do not match.",
@@ -52,11 +52,7 @@ const PasswordValidation = () => {
             "border-destructive focus:border-destructive": errors.password,
           })}
         />
-        {errors.password && (
-          <p className="text-xs text-destructive">
-            {errors.password.message}
-          </p>
-        )}
+        {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
       </div>
       <div className="flex flex-col gap-2">
         <Label
@@ -76,9 +72,7 @@ const PasswordValidation = () => {
           })}
         />
         {errors.confirmPassword && (
-          <p className="text-xs text-destructive">
-            {errors.confirmPassword.message}
-          </p>
+          <p className="text-xs text-destructive">{errors.confirmPassword.message}</p>
         )}
       </div>
       <div className="mt-2">
diff --git a/src/app/[locale]/(protected)/forms/form-validation/simple-form.tsx b/src/app/[locale]/(protected)/forms/form-validation/simple-form.tsx
index 5d4e427e..e5e09e8a 100644
--- a/src/app/[locale]/(protected)/forms/form-validation/simple-form.tsx
+++ b/src/app/[locale]/(protected)/forms/form-validation/simple-form.tsx
@@ -1,18 +1,18 @@
 "use client";
-import { useForm } from "react-hook-form";
+
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 const schema = z.object({
   email: z.string().email({ message: "Your email is invalid." }),
-  password: z
-    .string()
-    .min(6, { message: "Password must be at least 6 characters." }),
+  password: z.string().min(6, { message: "Password must be at least 6 characters." }),
 });
 
 const SimpleFormValidation = () => {
@@ -24,7 +24,7 @@ const SimpleFormValidation = () => {
     resolver: zodResolver(schema),
   });
 
-  function onSubmit(data:z.infer<typeof schema>) {
+  function onSubmit(data: z.infer<typeof schema>) {
     toast.message(JSON.stringify(data, null, 2));
   }
   return (
@@ -73,9 +73,7 @@ const SimpleFormValidation = () => {
             "border-destructive focus:border-destructive": errors.password,
           })}
         />
-        {errors.password && (
-          <p className="text-xs text-destructive">{errors.password.message}</p>
-        )}
+        {errors.password && <p className="text-xs text-destructive">{errors.password.message}</p>}
       </div>
       <div className="mt-2">
         <Button type="submit">Submit</Button>
diff --git a/src/app/[locale]/(protected)/forms/form-validation/validate-radio.tsx b/src/app/[locale]/(protected)/forms/form-validation/validate-radio.tsx
index c8c7a6e5..dba56f39 100644
--- a/src/app/[locale]/(protected)/forms/form-validation/validate-radio.tsx
+++ b/src/app/[locale]/(protected)/forms/form-validation/validate-radio.tsx
@@ -1,16 +1,16 @@
 "use client";
-import { useForm } from "react-hook-form";
+
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Button } from "@/components/ui/button";
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
 const schema = z.object({
-  message: z
-    .string()
-    .min(1, { message: "Please select a subject to display." }),
+  message: z.string().min(1, { message: "Please select a subject to display." }),
 });
 
 const ValidateRadio = () => {
@@ -27,9 +27,7 @@ const ValidateRadio = () => {
   }
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <p className="text-sm mb-4 font-medium text-default-600">
-        Notify me about...
-      </p>
+      <p className="text-sm mb-4 font-medium text-default-600">Notify me about...</p>
       <RadioGroup {...register("message")} className="gap-4 rtl:justify-end">
         <div className="flex gap-2 items-center">
           <RadioGroupItem value="rad_1" id="rad_1" />
@@ -47,7 +45,9 @@ const ValidateRadio = () => {
       </RadioGroup>
       {errors.message && <p className="text-destructive">{errors.message.message}</p>}
       <div>
-        <Button type="submit" className="mt-2">Submit</Button>
+        <Button type="submit" className="mt-2">
+          Submit
+        </Button>
       </div>
     </form>
   );
diff --git a/src/app/[locale]/(protected)/forms/form-validation/validate-with-tooltip.tsx b/src/app/[locale]/(protected)/forms/form-validation/validate-with-tooltip.tsx
index 5fc2e4f1..e629b787 100644
--- a/src/app/[locale]/(protected)/forms/form-validation/validate-with-tooltip.tsx
+++ b/src/app/[locale]/(protected)/forms/form-validation/validate-with-tooltip.tsx
@@ -1,20 +1,18 @@
 "use client";
-import { useForm } from "react-hook-form";
+
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils/utils"
+import { useForm } from "react-hook-form";
 import { toast } from "sonner";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 const schema = z.object({
-  username: z
-    .string()
-    .min(5, { message: "Username must be at least 5 characters." }),
-  password: z
-    .string()
-    .min(6, { message: "Password must be at least 6 characters." }),
+  username: z.string().min(5, { message: "Username must be at least 5 characters." }),
+  password: z.string().min(6, { message: "Password must be at least 6 characters." }),
 });
 
 const ValidateWithTooltip = () => {
diff --git a/src/app/[locale]/(protected)/forms/input-file/basic-file-uploader.tsx b/src/app/[locale]/(protected)/forms/input-file/basic-file-uploader.tsx
index 587d530f..cbd3ab58 100644
--- a/src/app/[locale]/(protected)/forms/input-file/basic-file-uploader.tsx
+++ b/src/app/[locale]/(protected)/forms/input-file/basic-file-uploader.tsx
@@ -1,12 +1,13 @@
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+
 const BasicFileUploader = () => {
   return (
     <div className="flex flex-col gap-3">
       <Label htmlFor="file">Upload File</Label>
-      <Input type="file" id="file"/>
+      <Input type="file" id="file" />
     </div>
   );
 };
 
-export default BasicFileUploader;
\ No newline at end of file
+export default BasicFileUploader;
diff --git a/src/app/[locale]/(protected)/forms/input-file/file-uploader-multiple.tsx b/src/app/[locale]/(protected)/forms/input-file/file-uploader-multiple.tsx
index f74c1821..914bde60 100644
--- a/src/app/[locale]/(protected)/forms/input-file/file-uploader-multiple.tsx
+++ b/src/app/[locale]/(protected)/forms/input-file/file-uploader-multiple.tsx
@@ -1,10 +1,12 @@
 "use client";
+
 import { Fragment, useState } from "react";
-import { Icon } from "@iconify/react";
-import { useDropzone } from "react-dropzone";
-import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import { Icon } from "@iconify/react";
 import { CloudUpload } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+
+import { Button } from "@/components/ui/button";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -41,10 +43,7 @@ const FileUploaderMultiple = () => {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -86,8 +85,7 @@ const FileUploaderMultiple = () => {
             Drop files here or click to upload.
           </h4>
           <div className=" text-xs text-muted-foreground">
-            ( This is just a demo drop zone. Selected files are not actually
-            uploaded.)
+            ( This is just a demo drop zone. Selected files are not actually uploaded.)
           </div>
         </div>
       </div>
diff --git a/src/app/[locale]/(protected)/forms/input-file/file-uploader-restrictions.tsx b/src/app/[locale]/(protected)/forms/input-file/file-uploader-restrictions.tsx
index fe9654d6..d0c9d66d 100644
--- a/src/app/[locale]/(protected)/forms/input-file/file-uploader-restrictions.tsx
+++ b/src/app/[locale]/(protected)/forms/input-file/file-uploader-restrictions.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import { Fragment, useState } from "react";
-import { Icon } from "@iconify/react";
-import { useToast } from "@/components/ui/use-toast";
-import { useDropzone } from "react-dropzone";
-import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import { Icon } from "@iconify/react";
 import { CloudUpload } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/components/ui/use-toast";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -55,10 +56,7 @@ const FileUploaderRestrictions = () => {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -100,8 +98,7 @@ const FileUploaderRestrictions = () => {
             Drop files here or click to upload.
           </h4>
           <div className=" text-xs text-muted-foreground">
-            ( This is just a demo drop zone. Selected files are not actually
-            uploaded.)
+            ( This is just a demo drop zone. Selected files are not actually uploaded.)
           </div>
         </div>
       </div>
diff --git a/src/app/[locale]/(protected)/forms/input-file/layout.tsx b/src/app/[locale]/(protected)/forms/input-file/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/input-file/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/input-file/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/input-file/multiple-files.tsx b/src/app/[locale]/(protected)/forms/input-file/multiple-files.tsx
index 95d89bd5..578e565f 100644
--- a/src/app/[locale]/(protected)/forms/input-file/multiple-files.tsx
+++ b/src/app/[locale]/(protected)/forms/input-file/multiple-files.tsx
@@ -1,12 +1,13 @@
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+
 const MultipleFiles = () => {
   return (
     <div className="flex flex-col gap-3">
       <Label htmlFor="multiple">Upload File</Label>
-      <Input type="file" id="multiple" multiple/>
+      <Input type="file" id="multiple" multiple />
     </div>
   );
 };
 
-export default MultipleFiles;
\ No newline at end of file
+export default MultipleFiles;
diff --git a/src/app/[locale]/(protected)/forms/input-file/page.tsx b/src/app/[locale]/(protected)/forms/input-file/page.tsx
index 23fc1f3b..e8c037f8 100644
--- a/src/app/[locale]/(protected)/forms/input-file/page.tsx
+++ b/src/app/[locale]/(protected)/forms/input-file/page.tsx
@@ -1,10 +1,11 @@
 import Card from "@/components/ui/structures/code-snippet";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicFileUploader from "./basic-file-uploader";
-import MultipleFiles from "./multiple-files";
-import UploadSingleFile from "./upload-single-file";
 import FileUploaderMultiple from "./file-uploader-multiple";
 import FileUploaderRestrictions from "./file-uploader-restrictions";
+import MultipleFiles from "./multiple-files";
+import UploadSingleFile from "./upload-single-file";
 
 const FileUploaderPage = () => {
   return (
@@ -41,4 +42,4 @@ const FileUploaderPage = () => {
   );
 };
 
-export default FileUploaderPage;
\ No newline at end of file
+export default FileUploaderPage;
diff --git a/src/app/[locale]/(protected)/forms/input-file/upload-single-file.tsx b/src/app/[locale]/(protected)/forms/input-file/upload-single-file.tsx
index a22e154f..06d19385 100644
--- a/src/app/[locale]/(protected)/forms/input-file/upload-single-file.tsx
+++ b/src/app/[locale]/(protected)/forms/input-file/upload-single-file.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import { Icon } from "@iconify/react";
-import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import { Icon } from "@iconify/react";
+import { CloudUpload } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+
+import { Button } from "@/components/ui/button";
+
 interface FileWithPreview extends File {
   preview: string;
 }
@@ -62,8 +64,7 @@ const UploadSingleFile = () => {
               Drop files here or click to upload.
             </h4>
             <div className="text-xs text-muted-foreground">
-              (This is just a demo drop zone. Selected files are not actually
-              uploaded.)
+              (This is just a demo drop zone. Selected files are not actually uploaded.)
             </div>
           </div>
         </div>
diff --git a/src/app/[locale]/(protected)/forms/input-group/basic-input-group.tsx b/src/app/[locale]/(protected)/forms/input-group/basic-input-group.tsx
index 42f79434..d55e52ad 100644
--- a/src/app/[locale]/(protected)/forms/input-group/basic-input-group.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/basic-input-group.tsx
@@ -1,13 +1,11 @@
 "use client";
+
+import { Icon } from "@iconify/react";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
+import { InputGroup, InputGroupButton, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
-import { Icon } from "@iconify/react";
 
 const BasicInputGroup = () => {
   return (
@@ -26,21 +24,11 @@ const BasicInputGroup = () => {
       </InputGroup>
       <InputGroup>
         <InputGroupButton>
-          <Button
-            disabled
-            variant="outline"
-            size="md"
-            className="border-default-200 border-r-0"
-          >
+          <Button disabled variant="outline" size="md" className="border-default-200 border-r-0">
             <Icon icon="heroicons:at-symbol" />
           </Button>
         </InputGroupButton>
-        <Input
-          disabled
-          type="text"
-          placeholder="Search.."
-          className="border-l-0"
-        />
+        <Input disabled type="text" placeholder="Search.." className="border-l-0" />
       </InputGroup>
       <InputGroup>
         <InputGroupText>
@@ -53,12 +41,7 @@ const BasicInputGroup = () => {
           Password
         </Label>
         <InputGroup>
-          <Input
-            type="password"
-            placeholder="Password"
-            id="username5"
-            required
-          />
+          <Input type="password" placeholder="Password" id="username5" required />
         </InputGroup>
       </div>
       <InputGroup>
diff --git a/src/app/[locale]/(protected)/forms/input-group/checkbox-radio-group.tsx b/src/app/[locale]/(protected)/forms/input-group/checkbox-radio-group.tsx
index 13691275..b60983db 100644
--- a/src/app/[locale]/(protected)/forms/input-group/checkbox-radio-group.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/checkbox-radio-group.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Checkbox } from "@/components/ui/checkbox";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
 const CheckboxRadioGroup = () => {
@@ -13,11 +13,7 @@ const CheckboxRadioGroup = () => {
           <Checkbox color="secondary" />
         </InputGroupText>
 
-        <Input
-          type="text"
-          placeholder="Small Radius"
-          className="h-8"
-        />
+        <Input type="text" placeholder="Small Radius" className="h-8" />
       </InputGroup>
       <InputGroup>
         <InputGroupText>
@@ -26,11 +22,7 @@ const CheckboxRadioGroup = () => {
           </RadioGroup>
         </InputGroupText>
 
-        <Input
-          type="text"
-          placeholder="Small Radius"
-          className="h-8"
-        />
+        <Input type="text" placeholder="Small Radius" className="h-8" />
       </InputGroup>
     </>
   );
diff --git a/src/app/[locale]/(protected)/forms/input-group/input-button-with-dropdown.tsx b/src/app/[locale]/(protected)/forms/input-group/input-button-with-dropdown.tsx
index 33ae485d..ebe9e508 100644
--- a/src/app/[locale]/(protected)/forms/input-group/input-button-with-dropdown.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/input-button-with-dropdown.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
+import { Icon } from "@iconify/react";
+
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,8 +11,8 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
 
 const InputButtonWithDropdown = () => {
   return (
@@ -26,10 +27,7 @@ const InputButtonWithDropdown = () => {
                 className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0"
               >
                 Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
+                <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ml-2" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-[196px]" align="start">
@@ -55,10 +53,7 @@ const InputButtonWithDropdown = () => {
                 className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-l-0"
               >
                 Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
+                <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ml-2" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-[196px]" align="start">
@@ -82,10 +77,7 @@ const InputButtonWithDropdown = () => {
                 className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0"
               >
                 Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
+                <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ml-2" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-[196px]" align="start">
@@ -108,10 +100,7 @@ const InputButtonWithDropdown = () => {
                 className=" hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-l-0"
               >
                 Success
-                <Icon
-                  icon="heroicons:chevron-right"
-                  className=" h-5 w-5 ml-2"
-                />
+                <Icon icon="heroicons:chevron-right" className=" h-5 w-5 ml-2" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-[196px]" align="start">
diff --git a/src/app/[locale]/(protected)/forms/input-group/input-group-radius.tsx b/src/app/[locale]/(protected)/forms/input-group/input-group-radius.tsx
index 9f10aa73..245f5804 100644
--- a/src/app/[locale]/(protected)/forms/input-group/input-group-radius.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/input-group-radius.tsx
@@ -1,10 +1,10 @@
 "use client";
 
+import { Icon } from "@iconify/react";
+
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 
-import { Icon } from "@iconify/react";
-
 const InputGroupRadius = () => {
   return (
     <>
@@ -12,12 +12,7 @@ const InputGroupRadius = () => {
         <InputGroupText className="h-8">
           <Icon icon="heroicons:magnifying-glass" />
         </InputGroupText>
-        <Input
-          type="text"
-
-          placeholder="Small Radius"
-          className="h-8"
-        />
+        <Input type="text" placeholder="Small Radius" className="h-8" />
       </InputGroup>
 
       <InputGroup>
@@ -30,11 +25,7 @@ const InputGroupRadius = () => {
         <InputGroupText>
           <Icon icon="heroicons:magnifying-glass" />
         </InputGroupText>
-        <Input
-          type="text"
-          placeholder="Large Radius"
-          className="h-14"
-        />
+        <Input type="text" placeholder="Large Radius" className="h-14" />
       </InputGroup>
     </>
   );
diff --git a/src/app/[locale]/(protected)/forms/input-group/input-group-size.tsx b/src/app/[locale]/(protected)/forms/input-group/input-group-size.tsx
index 6a17e1ea..48d6b6d7 100644
--- a/src/app/[locale]/(protected)/forms/input-group/input-group-size.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/input-group-size.tsx
@@ -1,10 +1,11 @@
 "use client";
+
 import React from "react";
+import { Icon } from "@iconify/react";
+
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 
-import { Icon } from "@iconify/react";
-
 const InputGroupSize = () => {
   return (
     <>
diff --git a/src/app/[locale]/(protected)/forms/input-group/input-group-unmerged.tsx b/src/app/[locale]/(protected)/forms/input-group/input-group-unmerged.tsx
index 729ff6cf..bb89405a 100644
--- a/src/app/[locale]/(protected)/forms/input-group/input-group-unmerged.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/input-group-unmerged.tsx
@@ -1,8 +1,9 @@
 "use client";
 
+import { Icon } from "@iconify/react";
+
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Icon } from "@iconify/react";
 
 const InputGroupUnmerged = () => {
   return (
diff --git a/src/app/[locale]/(protected)/forms/input-group/input-groups-button.tsx b/src/app/[locale]/(protected)/forms/input-group/input-groups-button.tsx
index 590576c3..89d3ed59 100644
--- a/src/app/[locale]/(protected)/forms/input-group/input-groups-button.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/input-groups-button.tsx
@@ -1,20 +1,20 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { Icon } from "@iconify/react";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupButton, InputGroupText } from "@/components/ui/input-group";
 
 const InputGroupsButton = () => {
   return (
     <>
       <InputGroup>
         <InputGroupButton>
-          <Button  size="md" className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0">
+          <Button
+            size="md"
+            className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0"
+          >
             <Icon icon="heroicons:magnifying-glass" />
           </Button>
         </InputGroupButton>
@@ -23,7 +23,10 @@ const InputGroupsButton = () => {
       <InputGroup>
         <Input type="text" placeholder="Search.." />
         <InputGroupButton>
-          <Button size="md" className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-l-0">
+          <Button
+            size="md"
+            className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-l-0"
+          >
             <Icon icon="heroicons:magnifying-glass" />
           </Button>
         </InputGroupButton>
@@ -31,7 +34,12 @@ const InputGroupsButton = () => {
 
       <InputGroup>
         <InputGroupButton>
-          <Button size="md" className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0">Search</Button>
+          <Button
+            size="md"
+            className="hover:ring-0 hover:ring-offset-0 border hover:border-default dark:hover:border-default-500 border-r-0"
+          >
+            Search
+          </Button>
         </InputGroupButton>
         <Input type="text" placeholder="Search.." />
         <InputGroupText>
diff --git a/src/app/[locale]/(protected)/forms/input-group/layout.tsx b/src/app/[locale]/(protected)/forms/input-group/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/input-group/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/input-group/merged-input-group.tsx b/src/app/[locale]/(protected)/forms/input-group/merged-input-group.tsx
index 3a41bae2..a5b203aa 100644
--- a/src/app/[locale]/(protected)/forms/input-group/merged-input-group.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/merged-input-group.tsx
@@ -1,13 +1,10 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import {
-  InputGroup,
-  InputGroupButton,
-  InputGroupText,
-} from "@/components/ui/input-group";
 import { Icon } from "@iconify/react";
+
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupButton, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
 
 const MergedInputGroup = () => {
@@ -27,21 +24,11 @@ const MergedInputGroup = () => {
       </InputGroup>
       <InputGroup merged>
         <InputGroupButton>
-          <Button
-            disabled
-            variant="outline"
-            size="md"
-            className="border-default-200 border-r-0"
-          >
+          <Button disabled variant="outline" size="md" className="border-default-200 border-r-0">
             <Icon icon="heroicons:at-symbol" />
           </Button>
         </InputGroupButton>
-        <Input
-          disabled
-          type="text"
-          placeholder="Search.."
-          className="border-l-0"
-        />
+        <Input disabled type="text" placeholder="Search.." className="border-l-0" />
       </InputGroup>
       <InputGroup merged>
         <InputGroupText>
@@ -54,24 +41,15 @@ const MergedInputGroup = () => {
           Password
         </Label>
         <InputGroup>
-          <Input
-            type="password"
-            placeholder="Password"
-            id="username2"
-            required
-          />
+          <Input type="password" placeholder="Password" id="username2" required />
         </InputGroup>
       </div>
       <InputGroup merged>
         <Input type="text" placeholder="Recient’s username" />
-        <InputGroupText className=" text-sm font-normal ">
-          @example.com
-        </InputGroupText>
+        <InputGroupText className=" text-sm font-normal ">@example.com</InputGroupText>
       </InputGroup>
       <InputGroup merged>
-        <InputGroupText className=" text-sm font-normal">
-          https://example.com/users/
-        </InputGroupText>
+        <InputGroupText className=" text-sm font-normal">https://example.com/users/</InputGroupText>
         <Input type="text" placeholder="Recient’s username" />
       </InputGroup>
     </>
diff --git a/src/app/[locale]/(protected)/forms/input-group/page.tsx b/src/app/[locale]/(protected)/forms/input-group/page.tsx
index a72c130c..adeead06 100644
--- a/src/app/[locale]/(protected)/forms/input-group/page.tsx
+++ b/src/app/[locale]/(protected)/forms/input-group/page.tsx
@@ -1,16 +1,27 @@
 "use client";
+
 import Card from "@/components/ui/structures/code-snippet";
-import InputGroupSize from "./input-group-size";
-import MergedInputGroup from "./merged-input-group";
-import InputGroupsButton from "./input-groups-button";
-import BasicInputGroup from "./basic-input-group";
-import InputGroupRadius from "./input-group-radius";
-import CheckboxRadioGroup from "./checkbox-radio-group";
-import MultipleAddons from "./multiple-addons";
-import InputButtonWithDropdown from "./input-button-with-dropdown";
-import { basicInputGroup, checkboxRadioGroup, inputButtonWithDropdown, inputGroupButtons, inputGroupRadius, inputGroupSize, mergedInputGroup, multipleAddons } from "./source-code";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
+import BasicInputGroup from "./basic-input-group";
+import CheckboxRadioGroup from "./checkbox-radio-group";
+import InputButtonWithDropdown from "./input-button-with-dropdown";
+import InputGroupRadius from "./input-group-radius";
+import InputGroupSize from "./input-group-size";
+import InputGroupsButton from "./input-groups-button";
+import MergedInputGroup from "./merged-input-group";
+import MultipleAddons from "./multiple-addons";
+import {
+  basicInputGroup,
+  checkboxRadioGroup,
+  inputButtonWithDropdown,
+  inputGroupButtons,
+  inputGroupRadius,
+  inputGroupSize,
+  mergedInputGroup,
+  multipleAddons,
+} from "./source-code";
+
 const InputGrouPpage = () => {
   return (
     <div>
diff --git a/src/app/[locale]/(protected)/forms/input-group/source-code.ts b/src/app/[locale]/(protected)/forms/input-group/source-code.ts
index f002d5d2..6718df47 100644
--- a/src/app/[locale]/(protected)/forms/input-group/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/input-group/source-code.ts
@@ -1,4 +1,4 @@
-export const basicInputGroup=`"use client";
+export const basicInputGroup = `"use client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -64,8 +64,8 @@ const BasicInputGroup = () => {
 };
 
 export default BasicInputGroup;
-`
-export const checkboxRadioGroup=`"use client";
+`;
+export const checkboxRadioGroup = `"use client";
 
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -106,9 +106,9 @@ const CheckboxRadioGroup = () => {
 };
 
 export default CheckboxRadioGroup;
-`
+`;
 
-export const inputButtonWithDropdown=`"use client";
+export const inputButtonWithDropdown = `"use client";
 
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
@@ -224,9 +224,9 @@ const InputButtonWithDropdown = () => {
 };
 
 export default InputButtonWithDropdown;
-`
+`;
 
-export const inputGroupRadius=`"use client";
+export const inputGroupRadius = `"use client";
 
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -270,8 +270,8 @@ const InputGroupRadius = () => {
 };
 
 export default InputGroupRadius;
-`
-export const inputGroupSize=`"use client";
+`;
+export const inputGroupSize = `"use client";
 import React from "react";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -304,8 +304,8 @@ const InputGroupSize = () => {
 };
 
 export default InputGroupSize;
-`
-export const inputGroupUnmerged=`"use client";
+`;
+export const inputGroupUnmerged = `"use client";
 
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -355,8 +355,8 @@ const InputGroupUnmerged = () => {
 };
 
 export default InputGroupUnmerged;
-`
-export const inputGroupButtons=`"use client";
+`;
+export const inputGroupButtons = `"use client";
 
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
@@ -401,8 +401,8 @@ const InputGroupsButton = () => {
 };
 
 export default InputGroupsButton;
-`
-export const mergedInputGroup=`"use client";
+`;
+export const mergedInputGroup = `"use client";
 
 import { Input } from "@/components/ui/input";
 import {
@@ -473,9 +473,9 @@ const MergedInputGroup = () => {
 };
 
 export default MergedInputGroup;
-`
+`;
 
-export const multipleAddons=`"use client";
+export const multipleAddons = `"use client";
 
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
@@ -498,4 +498,4 @@ const MultipleAddons = () => {
 };
 
 export default MultipleAddons;
-`
\ No newline at end of file
+`;
diff --git a/src/app/[locale]/(protected)/forms/input-layout/horizontal-form-icon.tsx b/src/app/[locale]/(protected)/forms/input-layout/horizontal-form-icon.tsx
index 58d8f62b..b3480ccb 100644
--- a/src/app/[locale]/(protected)/forms/input-layout/horizontal-form-icon.tsx
+++ b/src/app/[locale]/(protected)/forms/input-layout/horizontal-form-icon.tsx
@@ -1,17 +1,18 @@
-
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
 
 const HorizontalFormWithIcon = () => {
   return (
     <form>
       <div className="grid grid-cols-2 gap-4">
         <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriFullName1" className="lg:min-w-[160px]">Full Name</Label>
+          <Label htmlFor="hriFullName1" className="lg:min-w-[160px]">
+            Full Name
+          </Label>
           <InputGroup merged>
             <InputGroupText>
               <Icon icon="mdi:user" />
@@ -20,7 +21,9 @@ const HorizontalFormWithIcon = () => {
           </InputGroup>
         </div>
         <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriEmail1" className="lg:min-w-[160px]">Email</Label>
+          <Label htmlFor="hriEmail1" className="lg:min-w-[160px]">
+            Email
+          </Label>
           <InputGroup merged>
             <InputGroupText>
               <Icon icon="ic:outline-email" />
@@ -29,7 +32,9 @@ const HorizontalFormWithIcon = () => {
           </InputGroup>
         </div>
         <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriPhone1" className="lg:min-w-[160px]">Phone</Label>
+          <Label htmlFor="hriPhone1" className="lg:min-w-[160px]">
+            Phone
+          </Label>
           <InputGroup merged className="flex">
             <InputGroupText>
               <Icon icon="tdesign:call" />
@@ -38,7 +43,9 @@ const HorizontalFormWithIcon = () => {
           </InputGroup>
         </div>
         <div className="col-span-2  flex flex-col lg:items-center lg:flex-row lg:gap-0 gap-2">
-          <Label htmlFor="hriPassword1" className="lg:min-w-[160px]">Password</Label>
+          <Label htmlFor="hriPassword1" className="lg:min-w-[160px]">
+            Password
+          </Label>
           <InputGroup merged>
             <InputGroupText>
               <Icon icon="material-symbols:lock-outline" />
@@ -50,14 +57,10 @@ const HorizontalFormWithIcon = () => {
           </InputGroup>
         </div>
 
-
         <div className="col-span-2 lg:pl-[160px]">
           <div className="flex lg:items-center gap-1.5">
             <Checkbox id="term6" />
-            <Label
-              htmlFor="term6"
-              className="text-base text-muted-foreground font-normal"
-            >
+            <Label htmlFor="term6" className="text-base text-muted-foreground font-normal">
               Remember Me
             </Label>
           </div>
@@ -70,4 +73,4 @@ const HorizontalFormWithIcon = () => {
   );
 };
 
-export default HorizontalFormWithIcon;
\ No newline at end of file
+export default HorizontalFormWithIcon;
diff --git a/src/app/[locale]/(protected)/forms/input-layout/horizontal-form.tsx b/src/app/[locale]/(protected)/forms/input-layout/horizontal-form.tsx
index b7b77ebf..f9da9e89 100644
--- a/src/app/[locale]/(protected)/forms/input-layout/horizontal-form.tsx
+++ b/src/app/[locale]/(protected)/forms/input-layout/horizontal-form.tsx
@@ -1,45 +1,48 @@
-
-import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
+
 const HorizontalForm = () => {
   return (
     <form>
       <div className="grid grid-cols-2 gap-4">
         <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrFullName2" className="lg:min-w-[160px]">Full Name</Label>
+          <Label htmlFor="hrFullName2" className="lg:min-w-[160px]">
+            Full Name
+          </Label>
           <Input type="text" placeholder="Your Name" id="hrFullName2" />
         </div>
         <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrEmail2" className="lg:min-w-[160px]">Email </Label>
+          <Label htmlFor="hrEmail2" className="lg:min-w-[160px]">
+            Email{" "}
+          </Label>
           <Input type="email" placeholder="Your Email" id="hrEmail2" />
         </div>
         <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrPhone2" className="lg:min-w-[160px]">Phone</Label>
+          <Label htmlFor="hrPhone2" className="lg:min-w-[160px]">
+            Phone
+          </Label>
           <Input type="number" placeholder="Your Number" id="hrPhone2" />
         </div>
         <div className="col-span-2  flex flex-col gap-2 lg:gap-0 lg:flex-row lg:items-center ">
-          <Label htmlFor="hrPassword2" className="lg:min-w-[160px]">Password</Label>
+          <Label htmlFor="hrPassword2" className="lg:min-w-[160px]">
+            Password
+          </Label>
           <Input type="password" placeholder="Your Password" id="hrPassword2" />
         </div>
         <div className="col-span-2 lg:pl-[160px]">
           <div className="flex lg:items-center gap-1.5">
             <Checkbox id="term5" />
-            <Label
-              htmlFor="term5"
-            >
-              Remember me
-            </Label>
+            <Label htmlFor="term5">Remember me</Label>
           </div>
         </div>
         <div className="col-span-2 lg:pl-[160px] mt-2">
           <Button type="submit">Submit</Button>
         </div>
       </div>
-
     </form>
   );
 };
 
-export default HorizontalForm;
\ No newline at end of file
+export default HorizontalForm;
diff --git a/src/app/[locale]/(protected)/forms/input-layout/layout.tsx b/src/app/[locale]/(protected)/forms/input-layout/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/input-layout/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/input-layout/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/input-layout/page.tsx b/src/app/[locale]/(protected)/forms/input-layout/page.tsx
index 1681bca0..17444135 100644
--- a/src/app/[locale]/(protected)/forms/input-layout/page.tsx
+++ b/src/app/[locale]/(protected)/forms/input-layout/page.tsx
@@ -1,5 +1,6 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import HorizontalForm from "./horizontal-form";
 import HorizontalFormWithIcon from "./horizontal-form-icon";
 import VerticalForm from "./vertical-form";
@@ -47,4 +48,4 @@ const InputLayout = () => {
   );
 };
 
-export default InputLayout;
\ No newline at end of file
+export default InputLayout;
diff --git a/src/app/[locale]/(protected)/forms/input-layout/vertical-form-icon.tsx b/src/app/[locale]/(protected)/forms/input-layout/vertical-form-icon.tsx
index 18630222..ff880412 100644
--- a/src/app/[locale]/(protected)/forms/input-layout/vertical-form-icon.tsx
+++ b/src/app/[locale]/(protected)/forms/input-layout/vertical-form-icon.tsx
@@ -1,17 +1,21 @@
-
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const VerticalFormWithIcon = () => {
   return (
     <form>
       <div className="space-y-4">
-
         <div className="space-y-2">
           <Label htmlFor="viFullName3">Full Name</Label>
           <InputGroup merged>
@@ -54,10 +58,7 @@ const VerticalFormWithIcon = () => {
         <div className="col-span-2">
           <div className="flex items-center gap-1.5">
             <Checkbox id="term4" color="default" />
-            <Label
-              htmlFor="term4"
-              className="text-base text-muted-foreground font-normal"
-            >
+            <Label htmlFor="term4" className="text-base text-muted-foreground font-normal">
               Remember Me
             </Label>
           </div>
@@ -70,4 +71,4 @@ const VerticalFormWithIcon = () => {
   );
 };
 
-export default VerticalFormWithIcon;
\ No newline at end of file
+export default VerticalFormWithIcon;
diff --git a/src/app/[locale]/(protected)/forms/input-layout/vertical-form.tsx b/src/app/[locale]/(protected)/forms/input-layout/vertical-form.tsx
index 4ace0016..9be2cc95 100644
--- a/src/app/[locale]/(protected)/forms/input-layout/vertical-form.tsx
+++ b/src/app/[locale]/(protected)/forms/input-layout/vertical-form.tsx
@@ -1,13 +1,14 @@
-"use client"
-import { Input } from "@/components/ui/input";
+"use client";
+
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Button } from '@/components/ui/button'
+
 const VerticalForm = () => {
   return (
     <form>
       <div className="space-y-4">
-
         <div className="space-y-2">
           <Label htmlFor="fullName5">Full Name</Label>
           <Input type="text" placeholder="Your Name" id="fullName5" />
@@ -26,10 +27,7 @@ const VerticalForm = () => {
         </div>
         <div className="flex items-center gap-1.5">
           <Checkbox id="term3" />
-          <Label
-            htmlFor="term3"
-            className="text-base text-muted-foreground font-normal"
-          >
+          <Label htmlFor="term3" className="text-base text-muted-foreground font-normal">
             Remember Me
           </Label>
         </div>
@@ -39,4 +37,4 @@ const VerticalForm = () => {
   );
 };
 
-export default VerticalForm;
\ No newline at end of file
+export default VerticalForm;
diff --git a/src/app/[locale]/(protected)/forms/input-mask/layout.tsx b/src/app/[locale]/(protected)/forms/input-mask/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/input-mask/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/input-mask/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/input-mask/page.tsx b/src/app/[locale]/(protected)/forms/input-mask/page.tsx
index 15d44e17..c77c1e8d 100644
--- a/src/app/[locale]/(protected)/forms/input-mask/page.tsx
+++ b/src/app/[locale]/(protected)/forms/input-mask/page.tsx
@@ -1,12 +1,10 @@
 "use client";
 
-import { Label } from "@/components/ui/label";
 import { CleaveInput } from "@/components/ui/cleave";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
 import Card from "@/components/ui/structures/code-snippet";
-import {
-  InputGroup,
-  InputGroupText
-} from "@/components/ui/input-group";
+
 import { inputMask } from "./source-code";
 
 const InputMaskPage = () => {
@@ -16,10 +14,7 @@ const InputMaskPage = () => {
         <div className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5">
           <div>
             <Label className="mb-2">Credit Card</Label>
-            <CleaveInput
-              options={{ creditCard: true }}
-              placeholder="0000 0000 0000 0000"
-            />
+            <CleaveInput options={{ creditCard: true }} placeholder="0000 0000 0000 0000" />
           </div>
           <div>
             <Label className="mb-2">Credit Card</Label>
@@ -51,11 +46,7 @@ const InputMaskPage = () => {
           </div>
           <div>
             <Label className="mb-2">Numeral Formatting</Label>
-            <CleaveInput
-              id="nu"
-              options={{ numeral: true }}
-              placeholder="10,000"
-            />
+            <CleaveInput id="nu" options={{ numeral: true }} placeholder="10,000" />
           </div>
 
           <div>
diff --git a/src/app/[locale]/(protected)/forms/input-mask/source-code.ts b/src/app/[locale]/(protected)/forms/input-mask/source-code.ts
index 90b076a4..67e6d221 100644
--- a/src/app/[locale]/(protected)/forms/input-mask/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/input-mask/source-code.ts
@@ -105,4 +105,4 @@ const InputMaskPage = () => {
 };
 
 export default InputMaskPage;
-`;
\ No newline at end of file
+`;
diff --git a/src/app/[locale]/(protected)/forms/input-otp/basic-input.tsx b/src/app/[locale]/(protected)/forms/input-otp/basic-input.tsx
index d885be8e..d0de3dfc 100644
--- a/src/app/[locale]/(protected)/forms/input-otp/basic-input.tsx
+++ b/src/app/[locale]/(protected)/forms/input-otp/basic-input.tsx
@@ -25,4 +25,4 @@ const BasicInput = () => {
   );
 };
 
-export default BasicInput;
\ No newline at end of file
+export default BasicInput;
diff --git a/src/app/[locale]/(protected)/forms/input-otp/controlled-otp.tsx b/src/app/[locale]/(protected)/forms/input-otp/controlled-otp.tsx
index cd77eb69..7db756e9 100644
--- a/src/app/[locale]/(protected)/forms/input-otp/controlled-otp.tsx
+++ b/src/app/[locale]/(protected)/forms/input-otp/controlled-otp.tsx
@@ -1,20 +1,15 @@
-"use client"
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
+"use client";
+
 import { useState } from "react";
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
+
 const ControlledOtp = () => {
-  const [value, setValue] = useState("")
+  const [value, setValue] = useState("");
 
   return (
     <div className="flex flex-col items-center gap-4">
-      <InputOTP
-        maxLength={6}
-        value={value}
-        onChange={(value) => setValue(value)}
-      >
+      <InputOTP maxLength={6} value={value} onChange={(value) => setValue(value)}>
         <InputOTPGroup>
           <InputOTPSlot index={0} />
           <InputOTPSlot index={1} />
@@ -25,14 +20,10 @@ const ControlledOtp = () => {
         </InputOTPGroup>
       </InputOTP>
       <div className=" text-sm">
-        {value === "" ? (
-          <>Enter your one-time password.</>
-        ) : (
-          <>You entered: {value}</>
-        )}
+        {value === "" ? <>Enter your one-time password.</> : <>You entered: {value}</>}
       </div>
     </div>
   );
 };
 
-export default ControlledOtp;
\ No newline at end of file
+export default ControlledOtp;
diff --git a/src/app/[locale]/(protected)/forms/input-otp/layout.tsx b/src/app/[locale]/(protected)/forms/input-otp/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/input-otp/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/input-otp/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/input-otp/page.tsx b/src/app/[locale]/(protected)/forms/input-otp/page.tsx
index 1ae3628c..8b82ed26 100644
--- a/src/app/[locale]/(protected)/forms/input-otp/page.tsx
+++ b/src/app/[locale]/(protected)/forms/input-otp/page.tsx
@@ -1,10 +1,12 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicInput from "./basic-input";
+import ControlledOtp from "./controlled-otp";
 import PatternOtp from "./pattern-otp";
 import SeperatorOtp from "./separator-otp";
-import ControlledOtp from "./controlled-otp";
-import { basicOtp, patternOtp, separatorOtp, controlledOtp } from "./source-code"
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { basicOtp, controlledOtp, patternOtp, separatorOtp } from "./source-code";
+
 const InputOtp = () => {
   return (
     <div>
@@ -27,4 +29,4 @@ const InputOtp = () => {
   );
 };
 
-export default InputOtp;
\ No newline at end of file
+export default InputOtp;
diff --git a/src/app/[locale]/(protected)/forms/input-otp/pattern-otp.tsx b/src/app/[locale]/(protected)/forms/input-otp/pattern-otp.tsx
index 4a8af3b7..f66e8afc 100644
--- a/src/app/[locale]/(protected)/forms/input-otp/pattern-otp.tsx
+++ b/src/app/[locale]/(protected)/forms/input-otp/pattern-otp.tsx
@@ -1,11 +1,9 @@
-"use client"
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
+"use client";
+
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "@/components/ui/input-otp"
 const PatternOtp = () => {
   return (
     <div className="flex justify-center">
@@ -23,4 +21,4 @@ const PatternOtp = () => {
   );
 };
 
-export default PatternOtp;
\ No newline at end of file
+export default PatternOtp;
diff --git a/src/app/[locale]/(protected)/forms/input-otp/separator-otp.tsx b/src/app/[locale]/(protected)/forms/input-otp/separator-otp.tsx
index f1aa23e6..9d672253 100644
--- a/src/app/[locale]/(protected)/forms/input-otp/separator-otp.tsx
+++ b/src/app/[locale]/(protected)/forms/input-otp/separator-otp.tsx
@@ -1,14 +1,14 @@
-
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
-} from "@/components/ui/input-otp"
+} from "@/components/ui/input-otp";
+
 const SeperatorOtp = () => {
   return (
     <div className="flex justify-center">
-      <InputOTP maxLength={6} >
+      <InputOTP maxLength={6}>
         <InputOTPGroup>
           <InputOTPSlot index={0} />
           <InputOTPSlot index={1} />
@@ -23,9 +23,9 @@ const SeperatorOtp = () => {
           <InputOTPSlot index={4} />
           <InputOTPSlot index={5} />
         </InputOTPGroup>
-      </InputOTP >
+      </InputOTP>
     </div>
-  )
+  );
 };
 
-export default SeperatorOtp;
\ No newline at end of file
+export default SeperatorOtp;
diff --git a/src/app/[locale]/(protected)/forms/input-otp/source-code.ts b/src/app/[locale]/(protected)/forms/input-otp/source-code.ts
index 5a24f261..cae733fa 100644
--- a/src/app/[locale]/(protected)/forms/input-otp/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/input-otp/source-code.ts
@@ -1,4 +1,4 @@
-export const basicOtp=`import {
+export const basicOtp = `import {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
@@ -25,9 +25,9 @@ const BasicInput = () => {
   );
 };
 
-export default BasicInput;`
+export default BasicInput;`;
 
-export const patternOtp=`"use client"
+export const patternOtp = `"use client"
 import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp"
 
 import {
@@ -52,9 +52,9 @@ const PatternOtp = () => {
   );
 };
 
-export default PatternOtp;`
+export default PatternOtp;`;
 
-export const separatorOtp=`
+export const separatorOtp = `
 import {
   InputOTP,
   InputOTPGroup,
@@ -84,9 +84,9 @@ const SeperatorOtp = () => {
   )
 };
 
-export default SeperatorOtp;`
+export default SeperatorOtp;`;
 
-export const controlledOtp=`"use client"
+export const controlledOtp = `"use client"
 import {
   InputOTP,
   InputOTPGroup,
@@ -123,4 +123,4 @@ const ControlledOtp = () => {
   );
 };
 
-export default ControlledOtp;`
\ No newline at end of file
+export default ControlledOtp;`;
diff --git a/src/app/[locale]/(protected)/forms/input/basic-inputs.tsx b/src/app/[locale]/(protected)/forms/input/basic-inputs.tsx
index cd7a24ce..b08372cd 100644
--- a/src/app/[locale]/(protected)/forms/input/basic-inputs.tsx
+++ b/src/app/[locale]/(protected)/forms/input/basic-inputs.tsx
@@ -9,7 +9,7 @@ const BasicInputs = () => {
         <Input type="text" id="projectName" placeholder="Management Dashboard" />
       </div>
       <div className="space-y-1.5">
-        <Label >Readonly Input</Label>
+        <Label>Readonly Input</Label>
         <Input type="text" placeholder="You can't edit me" readOnly />
       </div>
       <div className="space-y-1.5">
@@ -20,4 +20,4 @@ const BasicInputs = () => {
   );
 };
 
-export default BasicInputs;
\ No newline at end of file
+export default BasicInputs;
diff --git a/src/app/[locale]/(protected)/forms/input/input-colors.tsx b/src/app/[locale]/(protected)/forms/input/input-colors.tsx
index cc14d5ea..d69d833b 100644
--- a/src/app/[locale]/(protected)/forms/input/input-colors.tsx
+++ b/src/app/[locale]/(protected)/forms/input/input-colors.tsx
@@ -14,4 +14,4 @@ const InputColors = () => {
   );
 };
 
-export default InputColors;
\ No newline at end of file
+export default InputColors;
diff --git a/src/app/[locale]/(protected)/forms/input/input-size.tsx b/src/app/[locale]/(protected)/forms/input/input-size.tsx
index 26cd5228..a5758974 100644
--- a/src/app/[locale]/(protected)/forms/input/input-size.tsx
+++ b/src/app/[locale]/(protected)/forms/input/input-size.tsx
@@ -1,5 +1,6 @@
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+
 const InputSize = () => {
   return (
     <div className="space-y-2.5">
@@ -23,4 +24,4 @@ const InputSize = () => {
   );
 };
 
-export default InputSize;
\ No newline at end of file
+export default InputSize;
diff --git a/src/app/[locale]/(protected)/forms/input/layout.tsx b/src/app/[locale]/(protected)/forms/input/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/input/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/input/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/input/page.tsx b/src/app/[locale]/(protected)/forms/input/page.tsx
index 2dc3ee11..6f621274 100644
--- a/src/app/[locale]/(protected)/forms/input/page.tsx
+++ b/src/app/[locale]/(protected)/forms/input/page.tsx
@@ -1,13 +1,15 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicInputs from "./basic-inputs";
 import InputColors from "./input-colors";
 import InputSize from "./input-size";
 import { basicInput, inputColors, inputSize } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const InputPage = () => {
   return (
     <div>
-      <SiteBreadcrumb/>
+      <SiteBreadcrumb />
       <div className="space-y-6">
         <Card title="Basic Inputs" code={basicInput}>
           <BasicInputs />
@@ -23,4 +25,4 @@ const InputPage = () => {
   );
 };
 
-export default InputPage;
\ No newline at end of file
+export default InputPage;
diff --git a/src/app/[locale]/(protected)/forms/input/source-code.ts b/src/app/[locale]/(protected)/forms/input/source-code.ts
index 879e4c26..2d37eb9d 100644
--- a/src/app/[locale]/(protected)/forms/input/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/input/source-code.ts
@@ -1,4 +1,4 @@
-export const basicInput=`import { Input } from "@/components/ui/input";
+export const basicInput = `import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 const BasicInputs = () => {
@@ -20,9 +20,9 @@ const BasicInputs = () => {
   );
 };
 
-export default BasicInputs;`
+export default BasicInputs;`;
 
-export const inputColors=`import { Input } from "@/components/ui/input";
+export const inputColors = `import { Input } from "@/components/ui/input";
 
 const InputColors = () => {
   return (
@@ -38,9 +38,9 @@ const InputColors = () => {
   );
 };
 
-export default InputColors;`
+export default InputColors;`;
 
-export const inputSize=`import { Input } from "@/components/ui/input";
+export const inputSize = `import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 const InputSize = () => {
   return (
@@ -65,4 +65,4 @@ const InputSize = () => {
   );
 };
 
-export default InputSize;`
\ No newline at end of file
+export default InputSize;`;
diff --git a/src/app/[locale]/(protected)/forms/layout.tsx b/src/app/[locale]/(protected)/forms/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/radio/basic-radio.tsx b/src/app/[locale]/(protected)/forms/radio/basic-radio.tsx
index 77415886..bc2fec11 100644
--- a/src/app/[locale]/(protected)/forms/radio/basic-radio.tsx
+++ b/src/app/[locale]/(protected)/forms/radio/basic-radio.tsx
@@ -1,39 +1,41 @@
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
 const BasicRadio = () => {
   return (
     <div className="flex flex-wrap gap-5">
-      <RadioGroup
-        className="flex flex-wrap"
-        default-value="default"
-      >
+      <RadioGroup className="flex flex-wrap" default-value="default">
         <div className="flex items-center gap-2">
           <RadioGroupItem defaultChecked id="default" value="default" />
-          <Label className="text-default-600" htmlFor="default">Default</Label>
+          <Label className="text-default-600" htmlFor="default">
+            Default
+          </Label>
         </div>
         <div className="flex items-center gap-2">
           <RadioGroupItem id="Unselected" value="Unselected" />
-          <Label className="text-default-600" htmlFor="Unselected">Unselected</Label>
+          <Label className="text-default-600" htmlFor="Unselected">
+            Unselected
+          </Label>
         </div>
       </RadioGroup>
       <RadioGroup default-value="disabled">
         <div className="flex items-center gap-2">
           <RadioGroupItem disabled checked id="disabled" value="disabled" />
-          <Label className="text-default-600" htmlFor="disabled">Disabled</Label>
+          <Label className="text-default-600" htmlFor="disabled">
+            Disabled
+          </Label>
         </div>
       </RadioGroup>
       <RadioGroup>
         <div className="flex items-center gap-2">
-          <RadioGroupItem
-            disabled
-            id="Unselected Disabled"
-            value="Unselected Disabled"
-          />
-          <Label className="text-default-600" htmlFor="Unselected Disabled">Unselected Disabled</Label>
+          <RadioGroupItem disabled id="Unselected Disabled" value="Unselected Disabled" />
+          <Label className="text-default-600" htmlFor="Unselected Disabled">
+            Unselected Disabled
+          </Label>
         </div>
       </RadioGroup>
     </div>
   );
 };
 
-export default BasicRadio;
\ No newline at end of file
+export default BasicRadio;
diff --git a/src/app/[locale]/(protected)/forms/radio/color-radio.tsx b/src/app/[locale]/(protected)/forms/radio/color-radio.tsx
index 14239240..5f5f9d49 100644
--- a/src/app/[locale]/(protected)/forms/radio/color-radio.tsx
+++ b/src/app/[locale]/(protected)/forms/radio/color-radio.tsx
@@ -1,36 +1,49 @@
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
 const ColorRadio = () => {
   return (
     <div className="flex flex-wrap gap-6">
-    <RadioGroup className="flex flex-wrap" default-value="r1">
-      <div className="flex items-center gap-2">
-        <RadioGroupItem defaultChecked id="r1" value="r1" />
-        <Label className="text-default-600" htmlFor="r1">Default</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="primary" id="r2" value="r2" />
-        <Label className="text-default-600" htmlFor="r2">Primary</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="info" id="r3" value="r3" />
-        <Label className="text-default-600" htmlFor="r3">Info</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="success" id="r4" value="r4" />
-        <Label className="text-default-600" htmlFor="r4">Success</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="warning" id="r5" value="r5" />
-        <Label className="text-default-600" htmlFor="r5">Warning</Label>
-      </div>
-      <div className="flex items-center gap-2">
-        <RadioGroupItem color="destructive" id="r6" value="r6" />
-        <Label className="text-default-600" htmlFor="r6">Destructive</Label>
-      </div>
-    </RadioGroup>
+      <RadioGroup className="flex flex-wrap" default-value="r1">
+        <div className="flex items-center gap-2">
+          <RadioGroupItem defaultChecked id="r1" value="r1" />
+          <Label className="text-default-600" htmlFor="r1">
+            Default
+          </Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem color="primary" id="r2" value="r2" />
+          <Label className="text-default-600" htmlFor="r2">
+            Primary
+          </Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem color="info" id="r3" value="r3" />
+          <Label className="text-default-600" htmlFor="r3">
+            Info
+          </Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem color="success" id="r4" value="r4" />
+          <Label className="text-default-600" htmlFor="r4">
+            Success
+          </Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem color="warning" id="r5" value="r5" />
+          <Label className="text-default-600" htmlFor="r5">
+            Warning
+          </Label>
+        </div>
+        <div className="flex items-center gap-2">
+          <RadioGroupItem color="destructive" id="r6" value="r6" />
+          <Label className="text-default-600" htmlFor="r6">
+            Destructive
+          </Label>
+        </div>
+      </RadioGroup>
     </div>
   );
 };
 
-export default ColorRadio;
\ No newline at end of file
+export default ColorRadio;
diff --git a/src/app/[locale]/(protected)/forms/radio/layout.tsx b/src/app/[locale]/(protected)/forms/radio/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/radio/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/radio/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/radio/page.tsx b/src/app/[locale]/(protected)/forms/radio/page.tsx
index 36e5ecd4..a3685c7b 100644
--- a/src/app/[locale]/(protected)/forms/radio/page.tsx
+++ b/src/app/[locale]/(protected)/forms/radio/page.tsx
@@ -1,10 +1,11 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicRadio from "./basic-radio";
 import ColorRadio from "./color-radio";
-import SizesRadio from "./sizes-radio";
 import RadioGroupOptionsArray from "./radio-group-array";
+import SizesRadio from "./sizes-radio";
 import { basicRadio, colorRadio, radioGroupArray, sizesRadio } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const RadioPage = () => {
   return (
@@ -28,4 +29,4 @@ const RadioPage = () => {
   );
 };
 
-export default RadioPage;
\ No newline at end of file
+export default RadioPage;
diff --git a/src/app/[locale]/(protected)/forms/radio/radio-group-array.tsx b/src/app/[locale]/(protected)/forms/radio/radio-group-array.tsx
index ab870edd..19276f1c 100644
--- a/src/app/[locale]/(protected)/forms/radio/radio-group-array.tsx
+++ b/src/app/[locale]/(protected)/forms/radio/radio-group-array.tsx
@@ -1,13 +1,15 @@
-"use client"
+"use client";
+
+import { useState } from "react";
+
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { useState } from "react";
 
 const RadioGroupOptionsArray = () => {
   const [selected, setSelected] = useState("Orange");
   const handleSelect = (value: string) => {
-    setSelected(value)
-  }
+    setSelected(value);
+  };
   const items = [
     {
       value: "Orange",
@@ -24,19 +26,19 @@ const RadioGroupOptionsArray = () => {
   ];
   return (
     <div>
-      <RadioGroup 
-      defaultValue={selected}
-      onValueChange={handleSelect}
-      className="flex flex-wrap gap-6"
+      <RadioGroup
+        defaultValue={selected}
+        onValueChange={handleSelect}
+        className="flex flex-wrap gap-6"
       >
-        {
-          items.map((item) => (
-            <div className="flex items-center gap-2" key={item.value}>
-              <RadioGroupItem id={"radio-" + item.value} value={item.value} />
-              <Label className="text-default-600" htmlFor={"radio-" + item.value}>{item.label}</Label>
-            </div>
-          ))
-        }
+        {items.map((item) => (
+          <div className="flex items-center gap-2" key={item.value}>
+            <RadioGroupItem id={"radio-" + item.value} value={item.value} />
+            <Label className="text-default-600" htmlFor={"radio-" + item.value}>
+              {item.label}
+            </Label>
+          </div>
+        ))}
       </RadioGroup>
       <div className="mt-5 text-sm font-medium text-default-700">
         Selected Options: <strong className="text-default-900">{selected}</strong>
@@ -45,4 +47,4 @@ const RadioGroupOptionsArray = () => {
   );
 };
 
-export default RadioGroupOptionsArray;
\ No newline at end of file
+export default RadioGroupOptionsArray;
diff --git a/src/app/[locale]/(protected)/forms/radio/sizes-radio.tsx b/src/app/[locale]/(protected)/forms/radio/sizes-radio.tsx
index bc5658ab..c745ff26 100644
--- a/src/app/[locale]/(protected)/forms/radio/sizes-radio.tsx
+++ b/src/app/[locale]/(protected)/forms/radio/sizes-radio.tsx
@@ -1,28 +1,37 @@
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
 const SizesRadio = () => {
   return (
     <div className="flex flex-wrap gap-6">
       <RadioGroup className="flex flex-wrap" default-value="s1">
         <div className="flex items-center gap-2">
           <RadioGroupItem color="success" id="s4" value="s4" />
-          <Label className="text-default-600" htmlFor="s4">Default</Label>
+          <Label className="text-default-600" htmlFor="s4">
+            Default
+          </Label>
         </div>
         <div className="flex items-center gap-2">
           <RadioGroupItem defaultChecked id="s1" value="s1" size="sm" />
-          <Label className="text-default-600" htmlFor="s1">Small Size</Label>
+          <Label className="text-default-600" htmlFor="s1">
+            Small Size
+          </Label>
         </div>
         <div className="flex items-center gap-2">
           <RadioGroupItem color="primary" id="s2" value="s2" size="md" />
-          <Label className="text-default-600" htmlFor="s2">Medium Size</Label>
+          <Label className="text-default-600" htmlFor="s2">
+            Medium Size
+          </Label>
         </div>
         <div className="flex items-center gap-2">
           <RadioGroupItem color="info" id="s3" value="s3" size="lg" />
-          <Label className="text-default-600" htmlFor="s3">Large</Label>
+          <Label className="text-default-600" htmlFor="s3">
+            Large
+          </Label>
         </div>
       </RadioGroup>
     </div>
   );
 };
 
-export default SizesRadio;
\ No newline at end of file
+export default SizesRadio;
diff --git a/src/app/[locale]/(protected)/forms/radio/source-code.ts b/src/app/[locale]/(protected)/forms/radio/source-code.ts
index 56bd2085..87695202 100644
--- a/src/app/[locale]/(protected)/forms/radio/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/radio/source-code.ts
@@ -1,4 +1,4 @@
-export const basicRadio=`import { Label } from "@/components/ui/label";
+export const basicRadio = `import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 const BasicRadio = () => {
   return (
@@ -36,8 +36,8 @@ const BasicRadio = () => {
   );
 };
 
-export default BasicRadio;`
-export const colorRadio=`import { Label } from "@/components/ui/label";
+export default BasicRadio;`;
+export const colorRadio = `import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 const ColorRadio = () => {
   return (
@@ -72,9 +72,9 @@ const ColorRadio = () => {
   );
 };
 
-export default ColorRadio;`
+export default ColorRadio;`;
 
-export const radioGroupArray=`"use client"
+export const radioGroupArray = `"use client"
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { useState } from "react";
@@ -121,9 +121,9 @@ const RadioGroupOptionsArray = () => {
   );
 };
 
-export default RadioGroupOptionsArray;`
+export default RadioGroupOptionsArray;`;
 
-export const sizesRadio=`import { Label } from "@/components/ui/label";
+export const sizesRadio = `import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 const SizesRadio = () => {
   return (
@@ -150,4 +150,4 @@ const SizesRadio = () => {
   );
 };
 
-export default SizesRadio;`
\ No newline at end of file
+export default SizesRadio;`;
diff --git a/src/app/[locale]/(protected)/forms/react-select/basic-select.tsx b/src/app/[locale]/(protected)/forms/react-select/basic-select.tsx
index 2ab6de55..fb4e7eb7 100644
--- a/src/app/[locale]/(protected)/forms/react-select/basic-select.tsx
+++ b/src/app/[locale]/(protected)/forms/react-select/basic-select.tsx
@@ -1,6 +1,6 @@
-
 import Select from "react-select";
-const furits: { value: string, label: string }[] = [
+
+const furits: { value: string; label: string }[] = [
   { value: "chocolate", label: "Chocolate" },
   { value: "strawberry", label: "Strawberry" },
   { value: "vanilla", label: "Vanilla" },
@@ -64,4 +64,4 @@ const BasicSelect = () => {
   );
 };
 
-export default BasicSelect;
\ No newline at end of file
+export default BasicSelect;
diff --git a/src/app/[locale]/(protected)/forms/react-select/layout.tsx b/src/app/[locale]/(protected)/forms/react-select/layout.tsx
index 999bc158..6391a3ae 100644
--- a/src/app/[locale]/(protected)/forms/react-select/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/react-select/layout.tsx
@@ -7,4 +7,3 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 };
 
 export default Layout;
-
diff --git a/src/app/[locale]/(protected)/forms/react-select/page.tsx b/src/app/[locale]/(protected)/forms/react-select/page.tsx
index 771cedb7..9415004c 100644
--- a/src/app/[locale]/(protected)/forms/react-select/page.tsx
+++ b/src/app/[locale]/(protected)/forms/react-select/page.tsx
@@ -1,22 +1,23 @@
 "use client";
+
 import Card from "@/components/ui/structures/code-snippet";
-import ReactSelectOption from "./react-select-options";
-import BasicSelect from "./basic-select";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
+import BasicSelect from "./basic-select";
+import ReactSelectOption from "./react-select-options";
 
 const ReactSelectPage = () => {
   return (
     <div>
-      <SiteBreadcrumb/>
-    <div className="space-y-5">
-      <Card title="Basic React Select" code="">
-        <BasicSelect />
-      </Card>
-      <Card title="React Select Options" code="">
-        <ReactSelectOption />
-      </Card>
-    </div>
+      <SiteBreadcrumb />
+      <div className="space-y-5">
+        <Card title="Basic React Select" code="">
+          <BasicSelect />
+        </Card>
+        <Card title="React Select Options" code="">
+          <ReactSelectOption />
+        </Card>
+      </div>
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/forms/react-select/react-select-options.tsx b/src/app/[locale]/(protected)/forms/react-select/react-select-options.tsx
index bc30f130..76464039 100644
--- a/src/app/[locale]/(protected)/forms/react-select/react-select-options.tsx
+++ b/src/app/[locale]/(protected)/forms/react-select/react-select-options.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import React, { useState } from "react";
-import Select, { GroupBase, OptionProps, components } from "react-select";
-import makeAnimated from "react-select/animated";
 import { Icon } from "@iconify/react";
+import Select, { components, GroupBase, OptionProps } from "react-select";
+import makeAnimated from "react-select/animated";
 
 interface OptionType {
   value: string;
@@ -12,7 +12,6 @@ interface OptionType {
   icon?: string;
 }
 
-
 interface GroupedOption {
   label: string;
   options: OptionType[];
@@ -57,15 +56,12 @@ const groupedOptions: GroupedOption[] = [
 ];
 const animatedComponents = makeAnimated();
 
-
 const styles = {
   multiValue: (base: any, state: any) => {
     return state.data.isFixed ? { ...base, opacity: "0.5" } : base;
   },
   multiValueLabel: (base: any, state: any) => {
-    return state.data.isFixed
-      ? { ...base, color: "#626262", paddingRight: 6 }
-      : base;
+    return state.data.isFixed ? { ...base, color: "#626262", paddingRight: 6 } : base;
   },
   multiValueRemove: (base: any, state: any) => {
     return state.data.isFixed ? { ...base, display: "none" } : base;
@@ -77,9 +73,7 @@ const styles = {
 };
 const orderOptions = (values: OptionType[]) => {
   if (values.length > 0)
-    return values
-      .filter((v) => v.isFixed)
-      .concat(values.filter((v) => !v.isFixed));
+    return values.filter((v) => v.isFixed).concat(values.filter((v) => !v.isFixed));
 };
 
 const iconOptions: GroupedOption[] = [
@@ -143,8 +137,9 @@ const iconOptions: GroupedOption[] = [
   },
 ];
 
-
-const OptionComponent: React.FC<OptionProps<OptionType, boolean, GroupBase<OptionType>>> = (props) => {
+const OptionComponent: React.FC<OptionProps<OptionType, boolean, GroupBase<OptionType>>> = (
+  props
+) => {
   const { data } = props;
 
   return (
@@ -157,13 +152,9 @@ const OptionComponent: React.FC<OptionProps<OptionType, boolean, GroupBase<Optio
   );
 };
 
-
-
 // start component
 const ReactSelectOption = () => {
-  const [fixedValue, setFixedValue] = useState(
-    orderOptions([fruits[0], fruits[1]])
-  );
+  const [fixedValue, setFixedValue] = useState(orderOptions([fruits[0], fruits[1]]));
   const fixedOnChange = (value: any, { action, removedValue }: any) => {
     switch (action) {
       case "remove-value":
diff --git a/src/app/[locale]/(protected)/forms/select/basic-select.tsx b/src/app/[locale]/(protected)/forms/select/basic-select.tsx
index b46da1d3..068d19e2 100644
--- a/src/app/[locale]/(protected)/forms/select/basic-select.tsx
+++ b/src/app/[locale]/(protected)/forms/select/basic-select.tsx
@@ -1,4 +1,3 @@
-
 import {
   Select,
   SelectContent,
@@ -7,10 +6,9 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/components/ui/select";
 
 const BasicSelect = () => {
-
   return (
     <div className="space-y-3.5">
       <Select>
@@ -52,8 +50,12 @@ const BasicSelect = () => {
             <SelectLabel>Fruits</SelectLabel>
             <SelectItem value="apple">Apple</SelectItem>
             <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="blueberry" disabled>Blueberry</SelectItem>
-            <SelectItem value="grapes" disabled>Grapes</SelectItem>
+            <SelectItem value="blueberry" disabled>
+              Blueberry
+            </SelectItem>
+            <SelectItem value="grapes" disabled>
+              Grapes
+            </SelectItem>
             <SelectItem value="pineapple">Pineapple</SelectItem>
           </SelectGroup>
         </SelectContent>
@@ -62,4 +64,4 @@ const BasicSelect = () => {
   );
 };
 
-export default BasicSelect;
\ No newline at end of file
+export default BasicSelect;
diff --git a/src/app/[locale]/(protected)/forms/select/color-select.tsx b/src/app/[locale]/(protected)/forms/select/color-select.tsx
index 1c693963..bd4c5b82 100644
--- a/src/app/[locale]/(protected)/forms/select/color-select.tsx
+++ b/src/app/[locale]/(protected)/forms/select/color-select.tsx
@@ -1,9 +1,15 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const ColorSelect = () => {
   return (
     <div className="space-y-3">
-       <Select>
+      <Select>
         <SelectTrigger>
           <SelectValue placeholder="Select a subject" />
         </SelectTrigger>
@@ -39,7 +45,7 @@ const ColorSelect = () => {
           <SelectItem value="biology">Biology</SelectItem>
         </SelectContent>
       </Select>
-      <Select >
+      <Select>
         <SelectTrigger color="info">
           <SelectValue placeholder="Select a subject" />
         </SelectTrigger>
@@ -51,7 +57,7 @@ const ColorSelect = () => {
           <SelectItem value="biology">Biology</SelectItem>
         </SelectContent>
       </Select>
-      <Select >
+      <Select>
         <SelectTrigger color="warning">
           <SelectValue placeholder="Select a subject" />
         </SelectTrigger>
@@ -63,7 +69,7 @@ const ColorSelect = () => {
           <SelectItem value="biology">Biology</SelectItem>
         </SelectContent>
       </Select>
-      <Select >
+      <Select>
         <SelectTrigger color="success">
           <SelectValue placeholder="Select a subject" />
         </SelectTrigger>
@@ -75,7 +81,7 @@ const ColorSelect = () => {
           <SelectItem value="biology">Biology</SelectItem>
         </SelectContent>
       </Select>
-      <Select >
+      <Select>
         <SelectTrigger color="destructive">
           <SelectValue placeholder="Select a subject" />
         </SelectTrigger>
@@ -87,9 +93,8 @@ const ColorSelect = () => {
           <SelectItem value="biology">Biology</SelectItem>
         </SelectContent>
       </Select>
-
     </div>
   );
 };
 
-export default ColorSelect;
\ No newline at end of file
+export default ColorSelect;
diff --git a/src/app/[locale]/(protected)/forms/select/controlled-select.tsx b/src/app/[locale]/(protected)/forms/select/controlled-select.tsx
index 747807e3..2cb7903b 100644
--- a/src/app/[locale]/(protected)/forms/select/controlled-select.tsx
+++ b/src/app/[locale]/(protected)/forms/select/controlled-select.tsx
@@ -1,4 +1,7 @@
-"use client"
+"use client";
+
+import { useState } from "react";
+
 import {
   Select,
   SelectContent,
@@ -7,14 +10,13 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { useState } from "react";
+} from "@/components/ui/select";
 
 const ControlledSelect = () => {
   const [value, setValue] = useState("");
   const handleValueChange = (value: string) => {
-    setValue(value)
-  }
+    setValue(value);
+  };
   return (
     <div className="space-y-3.5">
       <Select onValueChange={handleValueChange}>
@@ -32,9 +34,11 @@ const ControlledSelect = () => {
           </SelectGroup>
         </SelectContent>
       </Select>
-      <p className="text-sm text-default-600">Selected: <strong>{value}</strong> </p>
+      <p className="text-sm text-default-600">
+        Selected: <strong>{value}</strong>{" "}
+      </p>
     </div>
   );
 };
 
-export default ControlledSelect;
\ No newline at end of file
+export default ControlledSelect;
diff --git a/src/app/[locale]/(protected)/forms/select/layout.tsx b/src/app/[locale]/(protected)/forms/select/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/select/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/select/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/select/page.tsx b/src/app/[locale]/(protected)/forms/select/page.tsx
index d0ccd7cb..33d93ecd 100644
--- a/src/app/[locale]/(protected)/forms/select/page.tsx
+++ b/src/app/[locale]/(protected)/forms/select/page.tsx
@@ -1,11 +1,19 @@
 import Card from "@/components/ui/structures/code-snippet";
-import BasicSelect from "./basic-select";
-import ControlledSelect from "./controlled-select";
-import ColorSelect from "./color-select";
-import SizesSelect from "./size-select";
-import SelectScrollable from "./scrollable-select";
-import { basicSelect,controlledSelect,colorSelect, sizeSelect, scrollableSelect } from "./source-code";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import BasicSelect from "./basic-select";
+import ColorSelect from "./color-select";
+import ControlledSelect from "./controlled-select";
+import SelectScrollable from "./scrollable-select";
+import SizesSelect from "./size-select";
+import {
+  basicSelect,
+  colorSelect,
+  controlledSelect,
+  scrollableSelect,
+  sizeSelect,
+} from "./source-code";
+
 const SelectPage = () => {
   return (
     <div>
@@ -31,4 +39,4 @@ const SelectPage = () => {
   );
 };
 
-export default SelectPage;
\ No newline at end of file
+export default SelectPage;
diff --git a/src/app/[locale]/(protected)/forms/select/scrollable-select.tsx b/src/app/[locale]/(protected)/forms/select/scrollable-select.tsx
index 28385b76..b653e466 100644
--- a/src/app/[locale]/(protected)/forms/select/scrollable-select.tsx
+++ b/src/app/[locale]/(protected)/forms/select/scrollable-select.tsx
@@ -1,4 +1,3 @@
-
 import {
   Select,
   SelectContent,
@@ -7,7 +6,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/components/ui/select";
 
 const SelectScrollable = () => {
   return (
@@ -31,9 +30,7 @@ const SelectScrollable = () => {
             <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
             <SelectItem value="cet">Central European Time (CET)</SelectItem>
             <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
-            <SelectItem value="west">
-              Western European Summer Time (WEST)
-            </SelectItem>
+            <SelectItem value="west">Western European Summer Time (WEST)</SelectItem>
             <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
             <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
           </SelectGroup>
@@ -44,21 +41,13 @@ const SelectScrollable = () => {
             <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
             <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
             <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
-            <SelectItem value="ist_indonesia">
-              Indonesia Central Standard Time (WITA)
-            </SelectItem>
+            <SelectItem value="ist_indonesia">Indonesia Central Standard Time (WITA)</SelectItem>
           </SelectGroup>
           <SelectGroup>
             <SelectLabel>Australia & Pacific</SelectLabel>
-            <SelectItem value="awst">
-              Australian Western Standard Time (AWST)
-            </SelectItem>
-            <SelectItem value="acst">
-              Australian Central Standard Time (ACST)
-            </SelectItem>
-            <SelectItem value="aest">
-              Australian Eastern Standard Time (AEST)
-            </SelectItem>
+            <SelectItem value="awst">Australian Western Standard Time (AWST)</SelectItem>
+            <SelectItem value="acst">Australian Central Standard Time (ACST)</SelectItem>
+            <SelectItem value="aest">Australian Eastern Standard Time (AEST)</SelectItem>
             <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
             <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
           </SelectGroup>
@@ -72,7 +61,7 @@ const SelectScrollable = () => {
         </SelectContent>
       </Select>
     </div>
-  )
-}
+  );
+};
 
-export default SelectScrollable;
\ No newline at end of file
+export default SelectScrollable;
diff --git a/src/app/[locale]/(protected)/forms/select/size-select.tsx b/src/app/[locale]/(protected)/forms/select/size-select.tsx
index cd88f0ba..b60ee34c 100644
--- a/src/app/[locale]/(protected)/forms/select/size-select.tsx
+++ b/src/app/[locale]/(protected)/forms/select/size-select.tsx
@@ -1,7 +1,14 @@
-"use client"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-const SizesSelect = () => {
+"use client";
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const SizesSelect = () => {
   return (
     <div className="space-y-4">
       <Select>
@@ -52,10 +59,8 @@ const SizesSelect = () => {
           <SelectItem value="biology">Biology</SelectItem>
         </SelectContent>
       </Select>
-    
-
     </div>
   );
 };
 
-export default SizesSelect;
\ No newline at end of file
+export default SizesSelect;
diff --git a/src/app/[locale]/(protected)/forms/select/source-code.ts b/src/app/[locale]/(protected)/forms/select/source-code.ts
index cc176fee..d578bd8b 100644
--- a/src/app/[locale]/(protected)/forms/select/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/select/source-code.ts
@@ -1,4 +1,4 @@
-export const basicSelect=`
+export const basicSelect = `
 import {
   Select,
   SelectContent,
@@ -62,9 +62,9 @@ const BasicSelect = () => {
   );
 };
 
-export default BasicSelect;`
+export default BasicSelect;`;
 
-export const controlledSelect=`"use client"
+export const controlledSelect = `"use client"
 import {
   Select,
   SelectContent,
@@ -103,9 +103,9 @@ const ControlledSelect = () => {
   );
 };
 
-export default ControlledSelect;`
+export default ControlledSelect;`;
 
-export const colorSelect=`import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+export const colorSelect = `import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 const ColorSelect = () => {
   return (
@@ -199,9 +199,9 @@ const ColorSelect = () => {
   );
 };
 
-export default ColorSelect;`
+export default ColorSelect;`;
 
-export const scrollableSelect=`
+export const scrollableSelect = `
 import {
   Select,
   SelectContent,
@@ -278,9 +278,9 @@ const SelectScrollable = () => {
   )
 }
 
-export default SelectScrollable;`
+export default SelectScrollable;`;
 
-export const sizeSelect=`"use client"
+export const sizeSelect = `"use client"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 const SizesSelect = () => {
 
@@ -340,4 +340,4 @@ const SizesSelect = () => {
   );
 };
 
-export default SizesSelect;`
\ No newline at end of file
+export default SizesSelect;`;
diff --git a/src/app/[locale]/(protected)/forms/slider/basic-slider.tsx b/src/app/[locale]/(protected)/forms/slider/basic-slider.tsx
index 8fee0aa8..3e448251 100644
--- a/src/app/[locale]/(protected)/forms/slider/basic-slider.tsx
+++ b/src/app/[locale]/(protected)/forms/slider/basic-slider.tsx
@@ -1,11 +1,11 @@
-import { Slider } from '@/components/ui/slider';
+import { Slider } from "@/components/ui/slider";
 
 const BasicSlider = () => {
   return (
-    <div className='space-y-5'>
+    <div className="space-y-5">
       <Slider defaultValue={[75]} />
     </div>
   );
 };
 
-export default BasicSlider;
\ No newline at end of file
+export default BasicSlider;
diff --git a/src/app/[locale]/(protected)/forms/slider/layout.tsx b/src/app/[locale]/(protected)/forms/slider/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/slider/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/slider/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/slider/page.tsx b/src/app/[locale]/(protected)/forms/slider/page.tsx
index a8e74b21..e98ec322 100644
--- a/src/app/[locale]/(protected)/forms/slider/page.tsx
+++ b/src/app/[locale]/(protected)/forms/slider/page.tsx
@@ -1,7 +1,9 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicSlider from "./basic-slider";
 import { basicSlider } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const SliderPage = () => {
   return (
     <div>
@@ -13,4 +15,4 @@ const SliderPage = () => {
   );
 };
 
-export default SliderPage;
\ No newline at end of file
+export default SliderPage;
diff --git a/src/app/[locale]/(protected)/forms/slider/source-code.ts b/src/app/[locale]/(protected)/forms/slider/source-code.ts
index 108bf9d9..e9c67137 100644
--- a/src/app/[locale]/(protected)/forms/slider/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/slider/source-code.ts
@@ -1,4 +1,4 @@
-export const basicSlider=`import { Slider } from '@/components/ui/slider';
+export const basicSlider = `import { Slider } from '@/components/ui/slider';
 
 const BasicSlider = () => {
   return (
@@ -8,4 +8,4 @@ const BasicSlider = () => {
   );
 };
 
-export default BasicSlider;`
\ No newline at end of file
+export default BasicSlider;`;
diff --git a/src/app/[locale]/(protected)/forms/switch/basic-switch.tsx b/src/app/[locale]/(protected)/forms/switch/basic-switch.tsx
index 79d30a7b..b6a7aa52 100644
--- a/src/app/[locale]/(protected)/forms/switch/basic-switch.tsx
+++ b/src/app/[locale]/(protected)/forms/switch/basic-switch.tsx
@@ -14,15 +14,14 @@ const BasicSwitch = () => {
       </div>
       <div className="flex items-center gap-3">
         <Switch id="s3" disabled defaultChecked />
-        <Label htmlFor="s3" >Disabled Active Switch</Label>
+        <Label htmlFor="s3">Disabled Active Switch</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch id="s3" disabled/>
-        <Label htmlFor="s3" >Disabled Inactive Switch</Label>
+        <Switch id="s3" disabled />
+        <Label htmlFor="s3">Disabled Inactive Switch</Label>
       </div>
-
     </div>
   );
 };
 
-export default BasicSwitch;
\ No newline at end of file
+export default BasicSwitch;
diff --git a/src/app/[locale]/(protected)/forms/switch/color-switch.tsx b/src/app/[locale]/(protected)/forms/switch/color-switch.tsx
index 27ab82d9..f6bae77b 100644
--- a/src/app/[locale]/(protected)/forms/switch/color-switch.tsx
+++ b/src/app/[locale]/(protected)/forms/switch/color-switch.tsx
@@ -36,4 +36,4 @@ const ColorSwitch = () => {
   );
 };
 
-export default ColorSwitch;
\ No newline at end of file
+export default ColorSwitch;
diff --git a/src/app/[locale]/(protected)/forms/switch/layout.tsx b/src/app/[locale]/(protected)/forms/switch/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/switch/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/switch/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/switch/page.tsx b/src/app/[locale]/(protected)/forms/switch/page.tsx
index 398b3f93..098c95ac 100644
--- a/src/app/[locale]/(protected)/forms/switch/page.tsx
+++ b/src/app/[locale]/(protected)/forms/switch/page.tsx
@@ -1,11 +1,19 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicSwitch from "./basic-switch";
 import ColorSwitch from "./color-switch";
+import {
+  basicSwitch,
+  colorSwitch,
+  switchSize,
+  switchWithBadge,
+  switchWithIcon,
+} from "./source-code";
 import SwitchSize from "./switch-size";
 import SwitchWithBadge from "./switch-with-badge";
 import SwitchWithIcon from "./switch-with-icon";
-import { basicSwitch, colorSwitch, switchSize, switchWithBadge, switchWithIcon } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const SwitchPage = () => {
   return (
     <div>
@@ -31,4 +39,4 @@ const SwitchPage = () => {
   );
 };
 
-export default SwitchPage;
\ No newline at end of file
+export default SwitchPage;
diff --git a/src/app/[locale]/(protected)/forms/switch/source-code.ts b/src/app/[locale]/(protected)/forms/switch/source-code.ts
index b29a36fc..d6ec2c9c 100644
--- a/src/app/[locale]/(protected)/forms/switch/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/switch/source-code.ts
@@ -1,4 +1,4 @@
-export const basicSwitch=`import { Label } from "@/components/ui/label";
+export const basicSwitch = `import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 
 const BasicSwitch = () => {
@@ -24,9 +24,9 @@ const BasicSwitch = () => {
   );
 };
 
-export default BasicSwitch;`
+export default BasicSwitch;`;
 
-export const colorSwitch=`import { Label } from "@/components/ui/label";
+export const colorSwitch = `import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 
 const ColorSwitch = () => {
@@ -64,9 +64,9 @@ const ColorSwitch = () => {
   );
 };
 
-export default ColorSwitch;`
+export default ColorSwitch;`;
 
-export const switchSize=`import { Label } from "@/components/ui/label";
+export const switchSize = `import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 
 const SwitchSize = () => {
@@ -92,9 +92,9 @@ const SwitchSize = () => {
   );
 };
 
-export default SwitchSize;`
+export default SwitchSize;`;
 
-export const switchWithBadge=`import { Label } from "@/components/ui/label";
+export const switchWithBadge = `import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 const SwitchWithBadge = () => {
   return (
@@ -171,9 +171,9 @@ const SwitchWithBadge = () => {
   );
 };
 
-export default SwitchWithBadge;`
+export default SwitchWithBadge;`;
 
-export const switchWithIcon=`import { Label } from "@/components/ui/label";
+export const switchWithIcon = `import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Ban, Bell, Check, Lock, LockOpen, Moon, PhoneIncoming, PhoneMissed, Sun, Volume2, VolumeX, X } from "lucide-react";
 
@@ -252,4 +252,4 @@ const SwitchWithIcon = () => {
   );
 };
 
-export default SwitchWithIcon;`
\ No newline at end of file
+export default SwitchWithIcon;`;
diff --git a/src/app/[locale]/(protected)/forms/switch/switch-size.tsx b/src/app/[locale]/(protected)/forms/switch/switch-size.tsx
index f4f6fd5e..380c7d7f 100644
--- a/src/app/[locale]/(protected)/forms/switch/switch-size.tsx
+++ b/src/app/[locale]/(protected)/forms/switch/switch-size.tsx
@@ -5,7 +5,7 @@ const SwitchSize = () => {
   return (
     <div className="flex items-center gap-6 flex-wrap">
       <div className="flex items-center gap-3">
-        <Switch defaultChecked id="sm" size="sm"/>
+        <Switch defaultChecked id="sm" size="sm" />
         <Label htmlFor="sm">Small Size</Label>
       </div>
       <div className="flex items-center gap-3">
@@ -13,16 +13,15 @@ const SwitchSize = () => {
         <Label htmlFor="default">Default</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch defaultChecked id="md" size="md"/>
+        <Switch defaultChecked id="md" size="md" />
         <Label htmlFor="md">Medium Size</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch defaultChecked id="lg" size="lg"/>
+        <Switch defaultChecked id="lg" size="lg" />
         <Label htmlFor="lg">Large Size</Label>
       </div>
-    
     </div>
   );
 };
 
-export default SwitchSize;
\ No newline at end of file
+export default SwitchSize;
diff --git a/src/app/[locale]/(protected)/forms/switch/switch-with-badge.tsx b/src/app/[locale]/(protected)/forms/switch/switch-with-badge.tsx
index 198094ab..0a52f25e 100644
--- a/src/app/[locale]/(protected)/forms/switch/switch-with-badge.tsx
+++ b/src/app/[locale]/(protected)/forms/switch/switch-with-badge.tsx
@@ -1,78 +1,39 @@
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
+
 const SwitchWithBadge = () => {
   return (
     <div className="flex items-center gap-6 flex-wrap">
       <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          id="badge1"
-          startContent="On"
-          endContent="Off"
-        />
+        <Switch defaultChecked id="badge1" startContent="On" endContent="Off" />
         <Label htmlFor="badge1">Default</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="primary"
-          id="badge2"
-          startContent="On"
-          endContent="Off" />
+        <Switch defaultChecked color="primary" id="badge2" startContent="On" endContent="Off" />
         <Label htmlFor="badge2">Primary</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="secondary"
-          id="badge3"
-          startContent="On"
-          endContent="Off"
-        />
+        <Switch defaultChecked color="secondary" id="badge3" startContent="On" endContent="Off" />
         <Label htmlFor="badge3">Secondary</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="info"
-          id="badge4"
-          startContent="On"
-          endContent="Off"
-        />
+        <Switch defaultChecked color="info" id="badge4" startContent="On" endContent="Off" />
         <Label htmlFor="badge4">Info</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="warning"
-          id="badge5"
-          startContent="On"
-          endContent="Off"
-        />
+        <Switch defaultChecked color="warning" id="badge5" startContent="On" endContent="Off" />
         <Label htmlFor="badge5">Warning</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="success"
-          id="badge6"
-          startContent="On"
-          endContent="Off"
-        />
+        <Switch defaultChecked color="success" id="badge6" startContent="On" endContent="Off" />
         <Label htmlFor="badge6">Success</Label>
       </div>
       <div className="flex items-center gap-3">
-        <Switch
-          defaultChecked
-          color="destructive"
-          id="badge7"
-          startContent="On"
-          endContent="Off"
-        />
+        <Switch defaultChecked color="destructive" id="badge7" startContent="On" endContent="Off" />
         <Label htmlFor="badge7">Destructive</Label>
       </div>
     </div>
   );
 };
 
-export default SwitchWithBadge;
\ No newline at end of file
+export default SwitchWithBadge;
diff --git a/src/app/[locale]/(protected)/forms/switch/switch-with-icon.tsx b/src/app/[locale]/(protected)/forms/switch/switch-with-icon.tsx
index 22b763b1..39292038 100644
--- a/src/app/[locale]/(protected)/forms/switch/switch-with-icon.tsx
+++ b/src/app/[locale]/(protected)/forms/switch/switch-with-icon.tsx
@@ -1,6 +1,20 @@
+import {
+  Ban,
+  Bell,
+  Check,
+  Lock,
+  LockOpen,
+  Moon,
+  PhoneIncoming,
+  PhoneMissed,
+  Sun,
+  Volume2,
+  VolumeX,
+  X,
+} from "lucide-react";
+
 import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
-import { Ban, Bell, Check, Lock, LockOpen, Moon, PhoneIncoming, PhoneMissed, Sun, Volume2, VolumeX, X } from "lucide-react";
 
 const SwitchWithIcon = () => {
   return (
@@ -20,7 +34,8 @@ const SwitchWithIcon = () => {
           color="primary"
           id="badge_icon2"
           startContent={<Check className="w-4 h-4" />}
-          endContent={<X className="w-4 h-4 text-default-900" />} />
+          endContent={<X className="w-4 h-4 text-default-900" />}
+        />
         <Label htmlFor="badge_icon2">Primary</Label>
       </div>
       <div className="flex items-center gap-3">
@@ -77,4 +92,4 @@ const SwitchWithIcon = () => {
   );
 };
 
-export default SwitchWithIcon;
\ No newline at end of file
+export default SwitchWithIcon;
diff --git a/src/app/[locale]/(protected)/forms/textarea/basic-textarea.tsx b/src/app/[locale]/(protected)/forms/textarea/basic-textarea.tsx
index 22f9b8dd..46dd9879 100644
--- a/src/app/[locale]/(protected)/forms/textarea/basic-textarea.tsx
+++ b/src/app/[locale]/(protected)/forms/textarea/basic-textarea.tsx
@@ -15,11 +15,12 @@ const BasicTextarea = () => {
       <div className="space-y-1.5">
         <Label>Readonly Textarea</Label>
         <Textarea
-          defaultValue={"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, commodi!"} readOnly={true}>
-        </Textarea>
+          defaultValue={"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, commodi!"}
+          readOnly={true}
+        ></Textarea>
       </div>
     </div>
   );
 };
 
-export default BasicTextarea;
\ No newline at end of file
+export default BasicTextarea;
diff --git a/src/app/[locale]/(protected)/forms/textarea/colors-textarea.tsx b/src/app/[locale]/(protected)/forms/textarea/colors-textarea.tsx
index c40e18ee..49a7ead7 100644
--- a/src/app/[locale]/(protected)/forms/textarea/colors-textarea.tsx
+++ b/src/app/[locale]/(protected)/forms/textarea/colors-textarea.tsx
@@ -1,4 +1,3 @@
-
 import { Textarea } from "@/components/ui/textarea";
 
 const ColorsTextarea = () => {
@@ -15,4 +14,4 @@ const ColorsTextarea = () => {
   );
 };
 
-export default ColorsTextarea;
\ No newline at end of file
+export default ColorsTextarea;
diff --git a/src/app/[locale]/(protected)/forms/textarea/displayed-rows.tsx b/src/app/[locale]/(protected)/forms/textarea/displayed-rows.tsx
index 3213908d..505132b3 100644
--- a/src/app/[locale]/(protected)/forms/textarea/displayed-rows.tsx
+++ b/src/app/[locale]/(protected)/forms/textarea/displayed-rows.tsx
@@ -1,5 +1,6 @@
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+
 const DisplayedRows = () => {
   return (
     <div className="space-y-4">
@@ -15,4 +16,4 @@ const DisplayedRows = () => {
   );
 };
 
-export default DisplayedRows;
\ No newline at end of file
+export default DisplayedRows;
diff --git a/src/app/[locale]/(protected)/forms/textarea/horizontal-label.tsx b/src/app/[locale]/(protected)/forms/textarea/horizontal-label.tsx
index 17634ee2..08a693ab 100644
--- a/src/app/[locale]/(protected)/forms/textarea/horizontal-label.tsx
+++ b/src/app/[locale]/(protected)/forms/textarea/horizontal-label.tsx
@@ -10,4 +10,4 @@ const HorizontalLabel = () => {
   );
 };
 
-export default HorizontalLabel;
\ No newline at end of file
+export default HorizontalLabel;
diff --git a/src/app/[locale]/(protected)/forms/textarea/layout.tsx b/src/app/[locale]/(protected)/forms/textarea/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/forms/textarea/layout.tsx
+++ b/src/app/[locale]/(protected)/forms/textarea/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/forms/textarea/page.tsx b/src/app/[locale]/(protected)/forms/textarea/page.tsx
index 504b71c9..6b8d18a1 100644
--- a/src/app/[locale]/(protected)/forms/textarea/page.tsx
+++ b/src/app/[locale]/(protected)/forms/textarea/page.tsx
@@ -1,14 +1,16 @@
 import Card from "@/components/ui/structures/code-snippet";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicTextarea from "./basic-textarea";
-import DisplayedRows from "./displayed-rows";
 import ColorsTextarea from "./colors-textarea";
+import DisplayedRows from "./displayed-rows";
 import HorizontalLabel from "./horizontal-label";
 import { basicTextarea, colorsTextarea, displayedRows, horizontalLabel } from "./source-code";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const TextareaPage = () => {
   return (
     <div>
-      <SiteBreadcrumb/>
+      <SiteBreadcrumb />
       <div className="space-y-6">
         <Card title="Basic Textarea" code={basicTextarea}>
           <BasicTextarea />
@@ -27,4 +29,4 @@ const TextareaPage = () => {
   );
 };
 
-export default TextareaPage;
\ No newline at end of file
+export default TextareaPage;
diff --git a/src/app/[locale]/(protected)/forms/textarea/source-code.ts b/src/app/[locale]/(protected)/forms/textarea/source-code.ts
index 52ee1f89..6e8b57c4 100644
--- a/src/app/[locale]/(protected)/forms/textarea/source-code.ts
+++ b/src/app/[locale]/(protected)/forms/textarea/source-code.ts
@@ -1,4 +1,4 @@
-export const basicTextarea=`import { Label } from "@/components/ui/label";
+export const basicTextarea = `import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
 const BasicTextarea = () => {
@@ -22,9 +22,9 @@ const BasicTextarea = () => {
   );
 };
 
-export default BasicTextarea;`
+export default BasicTextarea;`;
 
-export const colorsTextarea=`
+export const colorsTextarea = `
 import { Textarea } from "@/components/ui/textarea";
 
 const ColorsTextarea = () => {
@@ -41,9 +41,9 @@ const ColorsTextarea = () => {
   );
 };
 
-export default ColorsTextarea;`
+export default ColorsTextarea;`;
 
-export const displayedRows=`import { Label } from "@/components/ui/label";
+export const displayedRows = `import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 const DisplayedRows = () => {
   return (
@@ -60,9 +60,9 @@ const DisplayedRows = () => {
   );
 };
 
-export default DisplayedRows;`
+export default DisplayedRows;`;
 
-export const horizontalLabel=`import { Label } from "@/components/ui/label";
+export const horizontalLabel = `import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 
 const HorizontalLabel = () => {
@@ -74,4 +74,4 @@ const HorizontalLabel = () => {
   );
 };
 
-export default HorizontalLabel;`
\ No newline at end of file
+export default HorizontalLabel;`;
diff --git a/src/app/[locale]/(protected)/icons/layout.tsx b/src/app/[locale]/(protected)/icons/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/icons/layout.tsx
+++ b/src/app/[locale]/(protected)/icons/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/icons/page.tsx b/src/app/[locale]/(protected)/icons/page.tsx
index 5d1be296..dafc9988 100644
--- a/src/app/[locale]/(protected)/icons/page.tsx
+++ b/src/app/[locale]/(protected)/icons/page.tsx
@@ -1,13 +1,10 @@
-import { Link } from '@/i18n/navigation';
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
 const IconPage = () => {
   const icons = [
     { name: "heroicons:academic-cap" },
@@ -66,37 +63,29 @@ const IconPage = () => {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-wrap gap-3">
-        {
-          icons.map((icon, index) => (
-
-            <TooltipProvider
-              key={`icon-${index}`}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    key={`icon-${index}`}
-                    size="icon"
-                    className="bg-card text-default-500 text-xl border-default-200  w-14 h-12"
-                    variant="outline"
-                  >
-                    <Icon icon={icon.name} />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{icon.name}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          ))
-        }
+        {icons.map((icon, index) => (
+          <TooltipProvider key={`icon-${index}`}>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  key={`icon-${index}`}
+                  size="icon"
+                  className="bg-card text-default-500 text-xl border-default-200  w-14 h-12"
+                  variant="outline"
+                >
+                  <Icon icon={icon.name} />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{icon.name}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ))}
       </div>
       <div className="mt-10 flex justify-center">
         <Button asChild>
-          <Link
-            href="https://icon-sets.iconify.design"
-            target="_blank"
-          >
+          <Link href="https://icon-sets.iconify.design" target="_blank">
             View All iconify Icons
           </Link>
         </Button>
@@ -105,4 +94,4 @@ const IconPage = () => {
   );
 };
 
-export default IconPage;
\ No newline at end of file
+export default IconPage;
diff --git a/src/app/[locale]/(protected)/layout.tsx b/src/app/[locale]/(protected)/layout.tsx
index b77e4a10..a60e29d4 100644
--- a/src/app/[locale]/(protected)/layout.tsx
+++ b/src/app/[locale]/(protected)/layout.tsx
@@ -1,10 +1,11 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
 import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
 import DashCodeHeader from "@/components/partials/header";
-import MountedProvider from "/providers/mounted.provider";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
+import MountedProvider from "@/providers/mounted.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(protected)/maps/constant.ts b/src/app/[locale]/(protected)/maps/constant.ts
index 738bf4ac..e40fa139 100644
--- a/src/app/[locale]/(protected)/maps/constant.ts
+++ b/src/app/[locale]/(protected)/maps/constant.ts
@@ -1 +1 @@
-export const MAP_KEY = "7ZOaHj6xeWeeUNIdCjfC";
\ No newline at end of file
+export const MAP_KEY = "7ZOaHj6xeWeeUNIdCjfC";
diff --git a/src/app/[locale]/(protected)/maps/layout.tsx b/src/app/[locale]/(protected)/maps/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/maps/layout.tsx
+++ b/src/app/[locale]/(protected)/maps/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/basic-map.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/basic-map.tsx
index bbcfe9c0..9fbad960 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/basic-map.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/basic-map.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Leaflet from "leaflet";
-import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import { MapContainer, Marker, TileLayer } from "react-leaflet";
 
 // Set default icon paths
 Leaflet.Icon.Default.imagePath = "../node_modules/leaflet";
@@ -24,11 +24,7 @@ const BasicMap = ({ height = 350 }: { height?: number }) => {
   });
   const position: [number, number] = [state.lat, state.lng];
   return (
-    <MapContainer
-      center={position}
-      zoom={state.zoom}
-      style={{ height: height }}
-    >
+    <MapContainer center={position} zoom={state.zoom} style={{ height: height }}>
       <TileLayer
         attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/geo-json.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/geo-json.tsx
index b75be9b1..35657f11 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/geo-json.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/geo-json.tsx
@@ -1,9 +1,12 @@
 "use client";
-import { MapContainer, TileLayer, GeoJSON } from "react-leaflet";
-import L, { LatLng, divIcon } from "leaflet";
-import seg from "./seg.json";
-import ecomp from "./ecomp.json";
+
 import { FeatureCollection, Geometry } from "geojson";
+import L, { divIcon, LatLng } from "leaflet";
+import { GeoJSON, MapContainer, TileLayer } from "react-leaflet";
+
+import ecomp from "./ecomp.json";
+import seg from "./seg.json";
+
 const GeoJSONMap = ({ height = 350 }: { height?: number }) => {
   const position: [number, number] = [37.5004851, -96.2261503];
   const setColor = () => {
@@ -33,14 +36,8 @@ const GeoJSONMap = ({ height = 350 }: { height?: number }) => {
         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <GeoJSON
-        data={seg as FeatureCollection<Geometry, any>}
-        style={setColor}
-      />
-      <GeoJSON
-        data={ecomp as FeatureCollection<Geometry, any>}
-        pointToLayer={setIcon}
-      />
+      <GeoJSON data={seg as FeatureCollection<Geometry, any>} style={setColor} />
+      <GeoJSON data={ecomp as FeatureCollection<Geometry, any>} pointToLayer={setIcon} />
     </MapContainer>
   );
 };
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/layer-groups.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/layer-groups.tsx
index cc48cc80..0a7315cf 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/layer-groups.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/layer-groups.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTheme } from "next-themes";
 import {
   Circle,
   FeatureGroup,
@@ -11,7 +12,8 @@ import {
   TileLayer,
 } from "react-leaflet";
 
-import { useTheme } from "next-themes";
+import { colors } from "@/lib/colors";
+
 const rectangle: [number, number][] = [
   [51.49, -0.08],
   [51.5, -0.06],
@@ -22,7 +24,7 @@ interface MapState {
   lng: number;
   zoom: number;
 }
-import { colors } from "@/lib/colors";
+
 const LayerGroupMap = ({ height = 350 }: { height?: number }) => {
   const { theme: mode } = useTheme();
 
@@ -34,18 +36,15 @@ const LayerGroupMap = ({ height = 350 }: { height?: number }) => {
   const position: [number, number] = [state.lat, state.lng];
 
   return (
-    <MapContainer
-      center={position}
-      zoom={state.zoom}
-      style={{ height: height }}
-    >
+    <MapContainer center={position} zoom={state.zoom} style={{ height: height }}>
       <TileLayer
         attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
       <LayerGroup>
         <Circle radius={0} center={position} pathOptions={{ fillColor: "blue" }} />
-        <Circle radius={0}
+        <Circle
+          radius={0}
           center={position}
           pathOptions={{
             fillColor: mode === "dark" ? "dark" : colors.primary,
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/location-marker-map.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/location-marker-map.tsx
index 51e92107..a5cca660 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/location-marker-map.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/location-marker-map.tsx
@@ -1,7 +1,8 @@
 "use client";
+
 import { useState } from "react";
 import Leaflet from "leaflet";
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
 
 Leaflet.Icon.Default.imagePath = "../node_modules/leaflet";
 
@@ -35,11 +36,7 @@ const LocationMarkerMap = ({ height = 350 }: { height?: number }) => {
   const position: [number, number] = [state.lat, state.lng];
 
   return (
-    <MapContainer
-      center={position}
-      zoom={state.zoom}
-      style={{ height: height }}
-    >
+    <MapContainer center={position} zoom={state.zoom} style={{ height: height }}>
       <TileLayer
         attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/page.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/page.tsx
index 3ea9ac60..8b41bf9d 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/page.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/page.tsx
@@ -1,12 +1,15 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import GeoJSONMap from "./geo-json";
+
 import BasicMap from "./basic-map";
-import PopupMarkerMap from "./popup-marker-map";
-import LocationMarkerMap from "./location-marker-map";
-import VectorLayersMap from "./vector-layers";
+import GeoJSONMap from "./geo-json";
 import LayerGroupMap from "./layer-groups";
+import LocationMarkerMap from "./location-marker-map";
+import PopupMarkerMap from "./popup-marker-map";
 import SVGMap from "./svg-map";
+import VectorLayersMap from "./vector-layers";
+
 import "leaflet/dist/leaflet.css";
+
 const MapReactLeaflet = () => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/popup-marker-map.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/popup-marker-map.tsx
index 00cde315..389a6247 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/popup-marker-map.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/popup-marker-map.tsx
@@ -1,46 +1,42 @@
-"use client"
-import { useState } from "react"
-import Leaflet from "leaflet"
-import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"
+"use client";
 
-Leaflet.Icon.Default.imagePath = "../node_modules/leaflet"
+import { useState } from "react";
+import Leaflet from "leaflet";
+import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
+
+Leaflet.Icon.Default.imagePath = "../node_modules/leaflet";
 Leaflet.Icon.Default.mergeOptions({
-    iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
-    shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png'
-})
+  iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png",
+});
 
 interface MapState {
-    lat: number;
-    lng: number;
-    zoom: number;
+  lat: number;
+  lng: number;
+  zoom: number;
 }
 
 const PopupMarkerMap = ({ height = 350 }) => {
-    const [state, setState] = useState<MapState>({
-        lat: 51.505,
-        lng: -0.09,
-        zoom: 13,
-    })
-    const position: [number, number] = [state.lat, state.lng]
+  const [state, setState] = useState<MapState>({
+    lat: 51.505,
+    lng: -0.09,
+    zoom: 13,
+  });
+  const position: [number, number] = [state.lat, state.lng];
 
-    return (
-        <MapContainer
-            center={position}
-            zoom={state.zoom}
-            style={{ height: height }}
-        >
-            <TileLayer
-                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <Marker position={position}>
-                <Popup>
-                    <span className="text-gray-900 text-lg font-medium">Hello Dashcode!</span>
-                </Popup>
-            </Marker>
-        </MapContainer>
-    )
+  return (
+    <MapContainer center={position} zoom={state.zoom} style={{ height: height }}>
+      <TileLayer
+        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Marker position={position}>
+        <Popup>
+          <span className="text-gray-900 text-lg font-medium">Hello Dashcode!</span>
+        </Popup>
+      </Marker>
+    </MapContainer>
+  );
+};
 
-}
-
-export default PopupMarkerMap;
\ No newline at end of file
+export default PopupMarkerMap;
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/svg-map.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/svg-map.tsx
index 8f53743f..66f62c80 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/svg-map.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/svg-map.tsx
@@ -1,33 +1,28 @@
-"use client"
+"use client";
 
-import { MapContainer, TileLayer, SVGOverlay } from "react-leaflet"
+import { MapContainer, SVGOverlay, TileLayer } from "react-leaflet";
 
 const SVGMap = ({ height = 350 }: { height?: number }) => {
-    const position: [number, number] = [51.505, -0.09]
-    const bounds: [[number, number], [number, number]] = [
-        [51.49, -0.08],
-        [51.5, -0.06],
-    ]
+  const position: [number, number] = [51.505, -0.09];
+  const bounds: [[number, number], [number, number]] = [
+    [51.49, -0.08],
+    [51.5, -0.06],
+  ];
 
-    return (
-        <MapContainer
-            center={position}
-            zoom={13}
-            scrollWheelZoom={false}
-            style={{ height: height }}
-        >
-            <TileLayer
-                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-            />
-            <SVGOverlay attributes={{ stroke: 'red' }} bounds={bounds}>
-                <rect x="0" y="0" width="100%" height="100%" fill="blue" />
-                <circle r="5" cx="10" cy="10" fill="red" />
-                <text x="50%" y="50%" stroke="white">
-                    Hi
-                </text>
-            </SVGOverlay>
-        </MapContainer>
-    )
-}
+  return (
+    <MapContainer center={position} zoom={13} scrollWheelZoom={false} style={{ height: height }}>
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <SVGOverlay attributes={{ stroke: "red" }} bounds={bounds}>
+        <rect x="0" y="0" width="100%" height="100%" fill="blue" />
+        <circle r="5" cx="10" cy="10" fill="red" />
+        <text x="50%" y="50%" stroke="white">
+          Hi
+        </text>
+      </SVGOverlay>
+    </MapContainer>
+  );
+};
 export default SVGMap;
diff --git a/src/app/[locale]/(protected)/maps/maps-leaflet/vector-layers.tsx b/src/app/[locale]/(protected)/maps/maps-leaflet/vector-layers.tsx
index a3963a10..9c2886a9 100644
--- a/src/app/[locale]/(protected)/maps/maps-leaflet/vector-layers.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-leaflet/vector-layers.tsx
@@ -2,18 +2,19 @@
 
 import { useState } from "react";
 import { useTheme } from "next-themes";
-
 import {
-  MapContainer,
-  TileLayer,
-  Popup,
   Circle,
   CircleMarker,
+  MapContainer,
   Polygon,
   Polyline,
+  Popup,
   Rectangle,
+  TileLayer,
 } from "react-leaflet";
 
+import { colors } from "@/lib/colors";
+
 const polyline: [number, number][] = [
   [51.505, -0.09],
   [51.51, -0.1],
@@ -56,7 +57,6 @@ const rectangle: [number, number][] = [
   [51.49, -0.08],
   [51.5, -0.06],
 ];
-import { colors } from "@/lib/colors";
 
 const VectorLayersMap = ({ height = 350 }) => {
   const { theme: mode } = useTheme();
@@ -69,20 +69,12 @@ const VectorLayersMap = ({ height = 350 }) => {
 
   const position: [number, number] = [state.lat, state.lng];
   return (
-    <MapContainer
-      center={position}
-      zoom={state.zoom}
-      style={{ height: height }}
-    >
+    <MapContainer center={position} zoom={state.zoom} style={{ height: height }}>
       <TileLayer
         attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Circle
-        radius={0}
-        center={position}
-        pathOptions={{ fillColor: `hsla(${colors.primary})` }}
-      />
+      <Circle radius={0} center={position} pathOptions={{ fillColor: `hsla(${colors.primary})` }} />
       <CircleMarker
         center={[51.51, -0.12]}
         color={`hsla(${mode === "dark" ? "dark" : colors.warning})`}
@@ -90,26 +82,17 @@ const VectorLayersMap = ({ height = 350 }) => {
       >
         <Popup>Popup in CircleMarker</Popup>
       </CircleMarker>
-      <Polyline
-        color={`hsla(${mode === "dark" ? "dark" : colors.primary})`}
-        positions={polyline}
-      />
+      <Polyline color={`hsla(${mode === "dark" ? "dark" : colors.primary})`} positions={polyline} />
       <Polyline
         color={`hsla(${mode === "dark" ? "dark" : colors.info})`}
         positions={multiPolyline}
       />
-      <Polygon
-        color={`hsla(${mode === "dark" ? "dark" : colors.warning})`}
-        positions={polygon}
-      />
+      <Polygon color={`hsla(${mode === "dark" ? "dark" : colors.warning})`} positions={polygon} />
       <Polygon
         color={`hsla(${mode === "dark" ? "dark" : colors.success})`}
         positions={multiPolygon}
       />
-      <Rectangle
-        bounds={rectangle}
-        color={`hsla(${mode === "dark" ? "dark" : colors.primary})`}
-      />
+      <Rectangle bounds={rectangle} color={`hsla(${mode === "dark" ? "dark" : colors.primary})`} />
     </MapContainer>
   );
 };
diff --git a/src/app/[locale]/(protected)/maps/maps-vector/events-map.tsx b/src/app/[locale]/(protected)/maps/maps-vector/events-map.tsx
index b40b83c8..d5dfa014 100644
--- a/src/app/[locale]/(protected)/maps/maps-vector/events-map.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-vector/events-map.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import React, { useState } from "react";
-import world from "./worldmap.json";
 import { VectorMap } from "@south-paw/react-vector-maps";
 
+import world from "./worldmap.json";
+
 const EventVMap = ({ height = 350 }: { height?: number }) => {
   const [hovered, setHovered] = useState<string>("None");
   const [focused, setFocused] = useState<string>("None");
@@ -47,16 +48,13 @@ const EventVMap = ({ height = 350 }: { height?: number }) => {
       </div>
       <div className="text-center">
         <p className="text-sm font-medium text-card-foreground">
-          Hovered:{" "}
-          {hovered && <strong className="text-primary">{hovered}</strong>}
+          Hovered: {hovered && <strong className="text-primary">{hovered}</strong>}
         </p>
         <p className="text-sm font-medium text-card-foreground">
-          Focused:{" "}
-          {focused && <strong className="text-primary">{focused}</strong>}
+          Focused: {focused && <strong className="text-primary">{focused}</strong>}
         </p>
         <p className="text-sm font-medium text-card-foreground">
-          Clicked:{" "}
-          {clicked && <strong className="text-primary">{clicked}</strong>}
+          Clicked: {clicked && <strong className="text-primary">{clicked}</strong>}
         </p>
       </div>
     </div>
diff --git a/src/app/[locale]/(protected)/maps/maps-vector/layer-links.tsx b/src/app/[locale]/(protected)/maps/maps-vector/layer-links.tsx
index f722b278..a6189898 100644
--- a/src/app/[locale]/(protected)/maps/maps-vector/layer-links.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-vector/layer-links.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import React from "react";
-import world from "./worldmap.json";
 import { VectorMap } from "@south-paw/react-vector-maps";
 
+import world from "./worldmap.json";
+
 const LayerLinks = ({ height = 350 }: { height?: number }) => {
   const onClick = (event: React.MouseEvent<SVGPathElement>) => {
     const name = event.currentTarget.getAttribute("name");
     if (name) {
-     // window.open(`https://www.google.com/search?q=${name}%20nz`);
+      // window.open(`https://www.google.com/search?q=${name}%20nz`);
     }
   };
 
diff --git a/src/app/[locale]/(protected)/maps/maps-vector/page.tsx b/src/app/[locale]/(protected)/maps/maps-vector/page.tsx
index 17ffe5ed..fd3429ae 100644
--- a/src/app/[locale]/(protected)/maps/maps-vector/page.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-vector/page.tsx
@@ -1,9 +1,10 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import VMap from "./vectore-map";
+
 import EventVMap from "./events-map";
-import SelectingLayers from "./selecting-layers";
 import LayerLinks from "./layer-links";
+import SelectingLayers from "./selecting-layers";
 import StyledVMap from "./styled-map";
+import VMap from "./vectore-map";
 
 const MapsVectorPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/maps/maps-vector/selecting-layers.tsx b/src/app/[locale]/(protected)/maps/maps-vector/selecting-layers.tsx
index 7b8593d6..d70f7389 100644
--- a/src/app/[locale]/(protected)/maps/maps-vector/selecting-layers.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-vector/selecting-layers.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import world from "./worldmap.json";
 import { VectorMap } from "@south-paw/react-vector-maps";
 
+import world from "./worldmap.json";
+
 const SelectingLayers = ({ height = 250 }: { height?: number }) => {
   const [selected, setSelected] = useState<number[]>([]);
 
diff --git a/src/app/[locale]/(protected)/maps/maps-vector/styled-map.tsx b/src/app/[locale]/(protected)/maps/maps-vector/styled-map.tsx
index d0731410..9ba9b666 100644
--- a/src/app/[locale]/(protected)/maps/maps-vector/styled-map.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-vector/styled-map.tsx
@@ -1,15 +1,13 @@
 "use client";
 
-import world from "./worldmap.json";
 import { VectorMap } from "@south-paw/react-vector-maps";
 
+import world from "./worldmap.json";
+
 const StyledVMap = ({ height = 350 }: { height?: number }) => {
   return (
     <div className={`w-full h-[${height}px]`}>
-      <VectorMap
-        {...world}
-        className="h-full w-full object-cover dashcode-app-vmap"
-      />
+      <VectorMap {...world} className="h-full w-full object-cover dashcode-app-vmap" />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/maps/maps-vector/vectore-map.tsx b/src/app/[locale]/(protected)/maps/maps-vector/vectore-map.tsx
index d40787d9..bea32735 100644
--- a/src/app/[locale]/(protected)/maps/maps-vector/vectore-map.tsx
+++ b/src/app/[locale]/(protected)/maps/maps-vector/vectore-map.tsx
@@ -1,15 +1,13 @@
 "use client";
 
-import world from "./worldmap.json";
 import { VectorMap } from "@south-paw/react-vector-maps";
 
+import world from "./worldmap.json";
+
 const VMap = ({ height = 350 }: { height?: number }) => {
   return (
     <div className={`w-full h-[${height}px]`}>
-      <VectorMap
-        {...world}
-        className="h-full w-full object-cover dashcode-app-vmap"
-      />
+      <VectorMap {...world} className="h-full w-full object-cover dashcode-app-vmap" />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/notifications/components/columns.tsx b/src/app/[locale]/(protected)/notifications/components/columns.tsx
index 78fc6518..1f898df2 100644
--- a/src/app/[locale]/(protected)/notifications/components/columns.tsx
+++ b/src/app/[locale]/(protected)/notifications/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -23,9 +23,7 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Title",
-    cell: ({ row }) => (
-      <span className="whitespace-normal">{row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="whitespace-normal">{row.getValue("title")}</span>,
   },
   {
     accessorKey: "categoryName",
@@ -36,10 +34,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdAt",
     header: "Upload Date",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -67,8 +62,7 @@ const columns: ColumnDef<any>[] = [
       const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil
 
       // Gunakan `statusName` untuk pencocokan
-      const statusStyles =
-        statusColors[statusName] || "bg-gray-100 text-gray-600";
+      const statusStyles = statusColors[statusName] || "bg-gray-100 text-gray-600";
 
       return (
         <Badge className={cn("rounded-full px-5", statusStyles)}>
diff --git a/src/app/[locale]/(protected)/notifications/components/notifications-table.tsx b/src/app/[locale]/(protected)/notifications/components/notifications-table.tsx
index 2ede0de7..cf70fdc9 100644
--- a/src/app/[locale]/(protected)/notifications/components/notifications-table.tsx
+++ b/src/app/[locale]/(protected)/notifications/components/notifications-table.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { getNotifications } from "@/lib/services/notifications/notifications";
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import {
   CalendarCheck,
   CheckCheck,
@@ -14,7 +13,9 @@ import {
   SquareCheck,
   UploadIcon,
 } from "lucide-react";
-import { useRouter } from "next/navigation";
+
+import { getNotifications } from "@/lib/services/notifications/notifications";
+import { Button } from "@/components/ui/button";
 
 export type Notification = {
   id: number;
diff --git a/src/app/[locale]/(protected)/notifications/page.tsx b/src/app/[locale]/(protected)/notifications/page.tsx
index 72ce971f..46c266a8 100644
--- a/src/app/[locale]/(protected)/notifications/page.tsx
+++ b/src/app/[locale]/(protected)/notifications/page.tsx
@@ -1,8 +1,10 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Plus } from "lucide-react";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/i18n/navigation";
+import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BlogTable from "../contributor/blog/components/blog-table";
 import NotificationsTable from "./components/notifications-table";
 
diff --git a/src/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx b/src/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
index 74dfe406..6dbbdd9a 100644
--- a/src/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +27,19 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import {
+  getTicketingCollaborationPagination,
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,22 +51,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
-import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import {
-  getTicketingCollaborationPagination,
-  getTicketingEscalationPagination,
-  listTicketingInternal,
-} from "@/lib/services/communication/communication";
 import useTableColumns from "./columns";
 
 const CollaborationTable = () => {
@@ -74,11 +71,8 @@ const CollaborationTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -142,11 +136,7 @@ const CollaborationTable = () => {
 
   async function fetchData() {
     try {
-      const res = await getTicketingCollaborationPagination(
-        page - 1,
-        showData,
-        search
-      );
+      const res = await getTicketingCollaborationPagination(page - 1, showData, search);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -187,22 +177,11 @@ const CollaborationTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -223,9 +202,7 @@ const CollaborationTable = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -245,10 +222,7 @@ const CollaborationTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -278,11 +252,7 @@ const CollaborationTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx b/src/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx
index 7c0ae3df..a662bc2b 100644
--- a/src/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link, useRouter } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -27,18 +27,12 @@ const useTableColumns = () => {
     {
       accessorKey: "title",
       header: t("question"),
-      cell: ({ row }) => (
-        <span className="normal-case"> {row.getValue("title")}</span>
-      ),
+      cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
     },
     {
       accessorKey: "commentFromUserName",
       header: t("sender"),
-      cell: ({ row }) => (
-        <span className="normal-case">
-          {row.getValue("commentFromUserName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="normal-case">{row.getValue("commentFromUserName")}</span>,
     },
     {
       accessorKey: "Type",
@@ -52,10 +46,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("time"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -74,11 +65,7 @@ const useTableColumns = () => {
           ? "bg-green-100 text-green-600" // Gaya untuk "Open"
           : "bg-red-100 text-red-600"; // Gaya untuk "Closed"
 
-        return (
-          <Badge className={`rounded-full px-5 ${statusStyles}`}>
-            {status}
-          </Badge>
-        );
+        return <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>;
       },
     },
 
@@ -103,9 +90,7 @@ const useTableColumns = () => {
             <DropdownMenuContent className="p-0" align="end">
               <DropdownMenuItem
                 onClick={() =>
-                  router.push(
-                    `/shared/communication/collaboration/detail/${row.original.id}`
-                  )
+                  router.push(`/shared/communication/collaboration/detail/${row.original.id}`)
                 }
                 className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center"
               >
diff --git a/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/component/users-card.tsx b/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/component/users-card.tsx
index beef6fdc..03bdb24a 100644
--- a/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/component/users-card.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/component/users-card.tsx
@@ -1,20 +1,18 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import Select, { MultiValue } from "react-select";
 
-import { Icon } from "@iconify/react/dist/iconify.js";
+import { stringify } from "querystring";
 import { useEffect, useState } from "react";
-import { Separator } from "@/components/ui/separator";
-import {
-  getCuratorUser,
-  saveCollaborationTeams,
-} from "@/lib/services/communication/communication";
+import { useParams } from "next/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Select, { MultiValue } from "react-select";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
+
 import { close, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
+import { getCuratorUser, saveCollaborationTeams } from "@/lib/services/communication/communication";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
 
 const assigneeOptions = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
diff --git a/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx
index 51e6eb99..a15c879d 100644
--- a/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/collaboration/detail/[id]/page.tsx
@@ -1,8 +1,12 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import { useToast } from "@/components/ui/use-toast";
+
+import { stringify } from "querystring";
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
 import { close, loading } from "@/config/swal";
 import {
   deleteCollabDiscussion,
@@ -11,18 +15,13 @@ import {
   getTicketCollaborationTeams,
   saveCollabDiscussion,
 } from "@/lib/services/communication/communication";
-import {
-  getLocaleTimestamp,
-  htmlToString,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams } from "next/navigation";
-import { stringify } from "querystring";
-import { useEffect, useState } from "react";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
+import { getLocaleTimestamp, htmlToString, textEllipsis } from "@/lib/utils/globals";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+
 import UsersCard from "./component/users-card";
 
 export default function CollaborationPage() {
@@ -113,15 +112,10 @@ export default function CollaborationPage() {
               <div className="flex flex-col gap-1">
                 <div className="flex flex-row">
                   <p className="text-sm">
-                    <span className="font-semibold">
-                      {detailTickets?.commentFromUserName}
-                    </span>{" "}
+                    <span className="font-semibold">{detailTickets?.commentFromUserName}</span>{" "}
                     mengirimkan komentar untuk
                   </p>
-                  <a
-                    href={detailTickets?.feed?.permalink_url}
-                    className="font-weight-bold"
-                  >
+                  <a href={detailTickets?.feed?.permalink_url} className="font-weight-bold">
                     {textEllipsis(detailTickets?.feed?.message, 25)}
                   </a>
                 </div>
@@ -129,13 +123,9 @@ export default function CollaborationPage() {
                   {" "}
                   {`${new Date(detailTickets?.createdAt).getDate()}-${
                     new Date(detailTickets?.createdAt).getMonth() + 1
-                  }-${new Date(
+                  }-${new Date(detailTickets?.createdAt).getFullYear()} ${new Date(
                     detailTickets?.createdAt
-                  ).getFullYear()} ${new Date(
-                    detailTickets?.createdAt
-                  ).getHours()}:${new Date(
-                    detailTickets?.createdAt
-                  ).getMinutes()}`}
+                  ).getHours()}:${new Date(detailTickets?.createdAt).getMinutes()}`}
                 </p>
               </div>
             </div>
@@ -153,12 +143,8 @@ export default function CollaborationPage() {
                       <Icon icon="qlementine-icons:user-16" width={36} />
                       <div className="flex flex-col w-full">
                         <div className="flex justify-between items-center">
-                          <p className="text-sm font-semibold">
-                            {data?.messageFrom?.fullname}
-                          </p>
-                          <p className="text-xs">
-                            {getLocaleTimestamp(new Date(data?.createdAt))}
-                          </p>
+                          <p className="text-sm font-semibold">{data?.messageFrom?.fullname}</p>
+                          <p className="text-xs">{getLocaleTimestamp(new Date(data?.createdAt))}</p>
                         </div>
                         <div className="flex justify-between items-center">
                           <p className="text-sm">{data?.message}</p>
@@ -178,10 +164,7 @@ export default function CollaborationPage() {
                 <p>Belum Ada Tanggapan</p>
               )}
             </div>
-            <Textarea
-              value={replyValue}
-              onChange={(e) => setReplyValue(e.target.value)}
-            />
+            <Textarea value={replyValue} onChange={(e) => setReplyValue(e.target.value)} />
             <div className="flex justify-end py-3">
               <Button
                 className="w-fit"
diff --git a/src/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx b/src/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
index e8d05a97..2d5d76df 100644
--- a/src/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -27,18 +27,12 @@ const useTableColumns = () => {
     {
       accessorKey: "title",
       header: t("question"),
-      cell: ({ row }) => (
-        <span className="normal-case"> {row.getValue("title")}</span>
-      ),
+      cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
     },
     {
       accessorKey: "commentFromUserName",
       header: t("sender"),
-      cell: ({ row }) => (
-        <span className="normal-case">
-          {row.getValue("commentFromUserName")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="normal-case">{row.getValue("commentFromUserName")}</span>,
     },
     {
       accessorKey: "type",
@@ -52,10 +46,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("time"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -74,11 +65,7 @@ const useTableColumns = () => {
           ? "bg-green-100 text-green-600" // Gaya untuk "Open"
           : "bg-red-100 text-red-600"; // Gaya untuk "Closed"
 
-        return (
-          <Badge className={`rounded-full px-5 ${statusStyles}`}>
-            {status}
-          </Badge>
-        );
+        return <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>;
       },
     },
 
@@ -100,9 +87,7 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/shared/communication/escalation/detail/${row.original.id}`}
-              >
+              <Link href={`/shared/communication/escalation/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
diff --git a/src/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx b/src/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
index 3a5d8c2b..ad35bbde 100644
--- a/src/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +27,18 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import {
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,21 +50,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
-import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import {
-  getTicketingEscalationPagination,
-  listTicketingInternal,
-} from "@/lib/services/communication/communication";
 import useTableColumns from "./columns";
 
 const EscalationTable = () => {
@@ -73,11 +70,8 @@ const EscalationTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -145,11 +139,7 @@ const EscalationTable = () => {
 
   async function fetchData() {
     try {
-      const res = await getTicketingEscalationPagination(
-        page - 1,
-        Number(showData),
-        search
-      );
+      const res = await getTicketingEscalationPagination(page - 1, Number(showData), search);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -196,22 +186,11 @@ const EscalationTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -232,9 +211,7 @@ const EscalationTable = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -253,10 +230,7 @@ const EscalationTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -286,11 +260,7 @@ const EscalationTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/shared/communication/escalation/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/communication/escalation/detail/[id]/page.tsx
index 5c9ea385..eee28904 100644
--- a/src/app/[locale]/(protected)/shared/communication/escalation/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/escalation/detail/[id]/page.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
-import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
 import FormDetailEscalation from "@/components/features/form/communication/escalation-detail-form";
+import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const EscalationDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx b/src/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx
index b0136415..4c0d825f 100644
--- a/src/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx
@@ -1,19 +1,19 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { useTranslations } from "next-intl";
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -27,18 +27,14 @@ const useTableColumns = () => {
     {
       accessorKey: "title",
       header: t("question"),
-      cell: ({ row }) => (
-        <span className="normal-case"> {row.getValue("title")}</span>
-      ),
+      cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
     },
     {
       accessorKey: "createdBy",
       header: t("sender"),
       cell: ({ row }) => {
         const createdBy = row.original.createdBy; // Akses properti category
-        return (
-          <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
-        );
+        return <span className="normal-case">{createdBy?.fullname || "N/A"}</span>;
       },
     },
     {
@@ -53,10 +49,7 @@ const useTableColumns = () => {
       accessorKey: "createdAt",
       header: t("time"),
       cell: ({ row }) => {
-        const createdAt = row.getValue("createdAt") as
-          | string
-          | number
-          | undefined;
+        const createdAt = row.getValue("createdAt") as string | number | undefined;
 
         const formattedDate =
           createdAt && !isNaN(new Date(createdAt).getTime())
@@ -83,17 +76,13 @@ const useTableColumns = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="p-0" align="end">
-              <Link
-                href={`/shared/communication/internal/detail/${row.original.id}`}
-              >
+              <Link href={`/shared/communication/internal/detail/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <Eye className="w-4 h-4 me-1.5" />
                   View
                 </DropdownMenuItem>
               </Link>
-              <Link
-                href={`/shared/communication/internal/update/${row.original.id}`}
-              >
+              <Link href={`/shared/communication/internal/update/${row.original.id}`}>
                 <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                   <SquarePen className="w-4 h-4 me-1.5" />
                   Edit
diff --git a/src/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx b/src/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
index 4ed306bf..4b677a8d 100644
--- a/src/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -38,7 +29,15 @@ import {
   TrendingUp,
   UploadIcon,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listTicketingInternal } from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -50,19 +49,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
 import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import { listTicketingInternal } from "@/lib/services/communication/communication";
-import { Link } from "@/i18n/navigation";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 import useTableColumns from "./columns";
 
 const InternalTable = () => {
@@ -72,11 +69,8 @@ const InternalTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -146,11 +140,7 @@ const InternalTable = () => {
 
   async function fetchData() {
     try {
-      const res = await listTicketingInternal(
-        page - 1,
-        Number(showData),
-        search
-      );
+      const res = await listTicketingInternal(page - 1, Number(showData), search);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -194,22 +184,11 @@ const InternalTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -230,9 +209,7 @@ const InternalTable = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -251,10 +228,7 @@ const InternalTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -284,11 +258,7 @@ const InternalTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/shared/communication/internal/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/communication/internal/detail/[id]/page.tsx
index 0bddd866..c7ed5283 100644
--- a/src/app/[locale]/(protected)/shared/communication/internal/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/internal/detail/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const InternalDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/communication/internal/update/[id]/page.tsx b/src/app/[locale]/(protected)/shared/communication/internal/update/[id]/page.tsx
index 0617a398..f9da911c 100644
--- a/src/app/[locale]/(protected)/shared/communication/internal/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/internal/update/[id]/page.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
 import FormEditInternal from "@/components/features/form/communication/internal-edit-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const InternalUpdatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/communication/page.tsx b/src/app/[locale]/(protected)/shared/communication/page.tsx
index 275f6b64..bbb93825 100644
--- a/src/app/[locale]/(protected)/shared/communication/page.tsx
+++ b/src/app/[locale]/(protected)/shared/communication/page.tsx
@@ -1,17 +1,19 @@
 "use client";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
-import CollaborationTable from "./collaboration/components/collabroation-table";
-import EscalationTable from "./escalation/components/escalation-table";
 import { useState } from "react";
 import { Link, useRouter } from "@/i18n/navigation";
 import { PlusIcon } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import InternalTable from "./internal/components/internal-table";
 import { useTranslations } from "next-intl";
 
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import CollaborationTable from "./collaboration/components/collabroation-table";
+import EscalationTable from "./escalation/components/escalation-table";
+import InternalTable from "./internal/components/internal-table";
+
 const CommunicationPage = () => {
   const [tab, setTab] = useState("Pertanyaan Internal");
   const t = useTranslations("Communication");
@@ -43,11 +45,7 @@ const CommunicationPage = () => {
             rounded="md"
             onClick={() => setTab("Pertanyaan Internal")}
             className={` hover:text-white
-                ${
-                  tab === "Pertanyaan Internal"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
+                ${tab === "Pertanyaan Internal" ? "bg-black text-white " : "bg-white text-black "}`}
           >
             {t("internal-questions")}
           </Button>
@@ -55,11 +53,7 @@ const CommunicationPage = () => {
             rounded="md"
             onClick={() => setTab("Eskalasi")}
             className={` hover:text-white
-                ${
-                  tab === "Eskalasi"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
+                ${tab === "Eskalasi" ? "bg-black text-white " : "bg-white text-black "}`}
           >
             {t("escalation")}
           </Button>
@@ -67,11 +61,7 @@ const CommunicationPage = () => {
             rounded="md"
             onClick={() => setTab("Kolaborasi")}
             className={` hover:text-white
-                ${
-                  tab === "Kolaborasi"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
+                ${tab === "Kolaborasi" ? "bg-black text-white " : "bg-white text-black "}`}
           >
             {t("collaboration")}
           </Button>
diff --git a/src/app/[locale]/(protected)/shared/contest/components/columns.tsx b/src/app/[locale]/(protected)/shared/contest/components/columns.tsx
index 8f9c03aa..f62c01e1 100644
--- a/src/app/[locale]/(protected)/shared/contest/components/columns.tsx
+++ b/src/app/[locale]/(protected)/shared/contest/components/columns.tsx
@@ -1,24 +1,24 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2, Upload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteMedia } from "@/lib/services/content/content";
+import { publishContest } from "@/lib/services/contest/contest";
+import { error } from "@/lib/utils/swal";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { error } from "@/lib/utils/swal";
-import { deleteMedia } from "@/lib/services/content/content";
-import { publishContest } from "@/lib/services/contest/contest";
-import { useTranslations } from "next-intl";
 
 const useTableColumns = () => {
   const t = useTranslations("Table"); // Panggil di dalam hook
@@ -69,26 +69,18 @@ const useTableColumns = () => {
     {
       accessorKey: "duration",
       header: t("duration"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">{row.getValue("duration")}</span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("duration")}</span>,
     },
     {
       accessorKey: "targetOutput",
       header: t("target-output"),
-      cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("targetOutput")}
-        </span>
-      ),
+      cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("targetOutput")}</span>,
     },
     {
       accessorKey: "targetParticipantTopLevel",
       header: t("target-participant"),
       cell: ({ row }) => (
-        <span className="whitespace-nowrap">
-          {row.getValue("targetParticipantTopLevel")}
-        </span>
+        <span className="whitespace-nowrap">{row.getValue("targetParticipantTopLevel")}</span>
       ),
     },
     {
@@ -105,9 +97,7 @@ const useTableColumns = () => {
         const userLevelNumber: number = Number(getCookiesDecrypt("ulne"));
 
         const isPublishForAll: boolean = Boolean(row.original.isPublishForAll);
-        const isPublishForMabes: boolean = Boolean(
-          row.original.isPublishForMabes
-        );
+        const isPublishForMabes: boolean = Boolean(row.original.isPublishForMabes);
 
         const isPending: boolean =
           (userRoleId === 3 && userLevelNumber === 1 && !isPublishForAll) ||
@@ -121,8 +111,8 @@ const useTableColumns = () => {
               isPending
                 ? "bg-orange-100 text-orange-600" // Warna kuning untuk "Pending"
                 : isTerkirim
-                ? "bg-blue-100 text-blue-600" // Warna biru untuk "Terkirim"
-                : "bg-green-100 text-green-600" // Warna hijau untuk "Publish"
+                  ? "bg-blue-100 text-blue-600" // Warna biru untuk "Terkirim"
+                  : "bg-green-100 text-green-600" // Warna hijau untuk "Publish"
             }`}
           >
             {isPending ? "Pending" : isTerkirim ? "Terkirim" : "Publish"}
diff --git a/src/app/[locale]/(protected)/shared/contest/components/contest-table.tsx b/src/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
index 17703a11..4fd93d00 100644
--- a/src/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
+++ b/src/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,13 +27,10 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { Input } from "@/components/ui/input";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
+
 import { listContest } from "@/lib/services/contest/contest";
-import useTableColumns from "./columns";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -52,7 +39,21 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
 import { Label } from "@/components/ui/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
+import useTableColumns from "./columns";
 
 const TaskTable = () => {
   const router = useRouter();
@@ -60,11 +61,8 @@ const TaskTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("50");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -145,9 +143,7 @@ const TaskTable = () => {
 
   const handleStatusCheckboxChange = (status: number) => {
     setStatusFilter((prev) =>
-      prev.includes(status)
-        ? prev.filter((item) => item !== status)
-        : [...prev, status]
+      prev.includes(status) ? prev.filter((item) => item !== status) : [...prev, status]
     );
   };
 
@@ -182,22 +178,11 @@ const TaskTable = () => {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent className="w-56 text-sm">
-                <DropdownMenuRadioGroup
-                  value={showData}
-                  onValueChange={setShowData}
-                >
-                  <DropdownMenuRadioItem value="10">
-                    1 - 10 Data
-                  </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="50">
-                    1 - 50 Data
-                  </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="100">
-                    1 - 100 Data
-                  </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="250">
-                    1 - 250 Data
-                  </DropdownMenuRadioItem>
+                <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                  <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
                 </DropdownMenuRadioGroup>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -209,10 +194,7 @@ const TaskTable = () => {
                   Filter <ChevronDown />
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="w-64 h-[150px] overflow-y-auto"
-              >
+              <DropdownMenuContent align="end" className="w-64 h-[150px] overflow-y-auto">
                 <div className="flex flex-row justify-between my-1 mx-1">
                   <p>Filter</p>
                 </div>
@@ -274,9 +256,7 @@ const TaskTable = () => {
                         key={column.id}
                         className="capitalize"
                         checked={column.getIsVisible()}
-                        onCheckedChange={(value) =>
-                          column.toggleVisibility(!!value)
-                        }
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -295,10 +275,7 @@ const TaskTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -328,11 +305,7 @@ const TaskTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/shared/contest/create/page.tsx b/src/app/[locale]/(protected)/shared/contest/create/page.tsx
index 296a60c6..e0db98a0 100644
--- a/src/app/[locale]/(protected)/shared/contest/create/page.tsx
+++ b/src/app/[locale]/(protected)/shared/contest/create/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormContestDetail from "@/components/features/form/contest/contest-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const ContestDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/contest/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/contest/detail/[id]/page.tsx
index 296a60c6..e0db98a0 100644
--- a/src/app/[locale]/(protected)/shared/contest/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/contest/detail/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
 import FormContestDetail from "@/components/features/form/contest/contest-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const ContestDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/contest/page.tsx b/src/app/[locale]/(protected)/shared/contest/page.tsx
index 0d632b83..47ca5307 100644
--- a/src/app/[locale]/(protected)/shared/contest/page.tsx
+++ b/src/app/[locale]/(protected)/shared/contest/page.tsx
@@ -1,15 +1,17 @@
 "use client";
 
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import ContestTable from "./components/contest-table";
-import { Link } from "@/i18n/navigation";
-import { Button } from "@/components/ui/button";
-import { UploadIcon } from "lucide-react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { UploadIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import ContestTable from "./components/contest-table";
+
 const ContestPage = () => {
   const [userLevelId, setUserLevelId] = useState<any>(null);
   const t = useTranslations("Contest");
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio-visual.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio-visual.tsx
index 4d5de58b..dcfce2e2 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio-visual.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio-visual.tsx
@@ -1,5 +1,12 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -7,11 +14,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { getListContent } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const VideoSliderPage = () => {
   const [newContent, setNewContent] = useState<any>();
@@ -38,15 +40,9 @@ const VideoSliderPage = () => {
       <Carousel className="w-full max-w-7xl mx-auto ">
         <CarouselContent>
           {newContent?.map((video: any) => (
-            <CarouselItem
-              key={video?.id}
-              className="md:basis-1/2 lg:basis-1/3 "
-            >
+            <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3 ">
               <Link
-                href={generateLocalizedPath(
-                  `/video/detail/${video?.id}`,
-                  String(locale)
-                )}
+                href={generateLocalizedPath(`/video/detail/${video?.id}`, String(locale))}
                 className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
               >
                 <img
@@ -54,14 +50,11 @@ const VideoSliderPage = () => {
                   className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300 rounded-md"
                 />
                 <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
-                  <h1 className="text-sm font-semibold truncate">
-                    {video?.title}
-                  </h1>
+                  <h1 className="text-sm font-semibold truncate">{video?.title}</h1>
                   <p className="flex flex-row items-center text-sm gap-2">
                     {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
                     {video?.timezone ? video?.timezone : "WIB"} |{" "}
-                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                    {video.clickCount}{" "}
+                    <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
                   </p>
                 </div>
               </Link>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio.tsx
index 966296f3..871242e0 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/audio.tsx
@@ -1,5 +1,12 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -7,15 +14,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { getListContent } from "@/lib/services/landing/landing";
-import {
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const AudioSliderPage = () => {
   const [newContent, setNewContent] = useState<any>();
@@ -67,8 +65,7 @@ const AudioSliderPage = () => {
                     <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
                       {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
                       {audio?.timezone ? audio?.timezone : "WIB"} |{" "}
-                      <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                      {audio?.clickCount}{" "}
+                      <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}{" "}
                     </div>
                     <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
                       {textEllipsis(audio.title, 50)}
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/image.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/image.tsx
index 1a023eb1..4587ac1f 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/image.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/image.tsx
@@ -1,5 +1,12 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -7,15 +14,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { getListContent } from "@/lib/services/landing/landing";
-import {
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const ImageSliderPage = () => {
   const [newContent, setNewContent] = useState<any>();
@@ -44,10 +42,7 @@ const ImageSliderPage = () => {
           {newContent?.map((image: any) => (
             <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
               <Link
-                href={generateLocalizedPath(
-                  `/image/detail/${image?.id}`,
-                  String(locale)
-                )}
+                href={generateLocalizedPath(`/image/detail/${image?.id}`, String(locale))}
                 className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
               >
                 <img
@@ -55,14 +50,11 @@ const ImageSliderPage = () => {
                   className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300 rounded-md"
                 />
                 <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
-                  <h1 className="text-sm font-semibold truncate">
-                    {image?.title}
-                  </h1>
+                  <h1 className="text-sm font-semibold truncate">{image?.title}</h1>
                   <p className="flex flex-row items-center text-sm gap-2">
                     {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                     {image?.timezone ? image?.timezone : "WIB"}|{" "}
-                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                    {image?.clickCount}{" "}
+                    <Icon icon="formkit:eye" width="15" height="15" /> {image?.clickCount}{" "}
                   </p>
                 </div>
               </Link>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/teks.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/teks.tsx
index 2cbbf8bd..1e104371 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/teks.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-penugasan/teks.tsx
@@ -1,5 +1,12 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -7,15 +14,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { getListContent } from "@/lib/services/landing/landing";
-import {
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const TeksSliderPage = () => {
   const [newContent, setNewContent] = useState<any>();
@@ -67,8 +65,7 @@ const TeksSliderPage = () => {
                     <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
                       {formatDateToIndonesian(new Date(text?.createdAt))}{" "}
                       {text?.timezone ? text?.timezone : "WIB"} |{" "}
-                      <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                      {text?.clickCount}{" "}
+                      <Icon icon="formkit:eye" width="15" height="15" /> {text?.clickCount}{" "}
                     </div>
                     <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
                       {textEllipsis(text?.title, 50)}
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/audio.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/audio.tsx
index 09ab9670..00d49fc4 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/audio.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/audio.tsx
@@ -1,5 +1,13 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -7,16 +15,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
-import { getListContent } from "@/lib/services/landing/landing";
-import {
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const AudioAll = () => {
   const [audioData, setAudioData] = useState<any>();
@@ -103,15 +101,8 @@ const AudioAll = () => {
                   alt="#"
                   className="flex items-center justify-center"
                 />
-                <div className="flex mx-2 items-center justify-center">
-                  {audio?.duration}
-                </div>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                >
+                <div className="flex mx-2 items-center justify-center">{audio?.duration}</div>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                   <path
                     fill="#f00"
                     d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/page.tsx
index 6ea34f7d..4cd21d32 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/all/page.tsx
@@ -1,10 +1,12 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { locale } from "dayjs";
 import { Rows, Search, UploadIcon } from "lucide-react";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
@@ -12,17 +14,17 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { Link } from "@/i18n/navigation";
-import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { locale } from "dayjs";
-import { useEffect, useState } from "react";
-import { getListContent } from "@/lib/services/landing/landing";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import ContestTable from "../../../../contest/components/contest-table";
-import AudioSliderPage from "../audio";
 import TeksSliderPage from "../../document/teks";
 import ImageSliderPage from "../../image/image";
 import VideoSliderPage from "../../video/audio-visual";
+import AudioSliderPage from "../audio";
 import AudioAll from "./audio";
 
 const AudioAllPage = () => {
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx
index 6cc56457..c37ad307 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/audio.tsx
@@ -1,5 +1,14 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { hasData } from "jquery";
+
+import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
 import { Card } from "@/components/ui/card";
 import {
   Carousel,
@@ -8,17 +17,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
-import { getListContent } from "@/lib/services/landing/landing";
-import {
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { hasData } from "jquery";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const AudioSliderPage = () => {
   const [audioData, setAudioData] = useState<any>();
@@ -68,9 +66,7 @@ const AudioSliderPage = () => {
                 <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
                   <div className="p-2">
                     <Card className=" shadow-md rounded-lg overflow-hidden">
-                      <Link
-                        href={`/shared/curated-content/giat-routine/audio/detail/${audio.id}`}
-                      >
+                      <Link href={`/shared/curated-content/giat-routine/audio/detail/${audio.id}`}>
                         <div className="flex flex-row items-center gap-3">
                           <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-12 h-12 mx-3 my-3">
                             <svg
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx
index 7ae470be..3d90edff 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/audio/detail/[id]/page.tsx
@@ -1,15 +1,28 @@
 "use client";
+
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import Cookies from "js-cookie";
+import { DotSquare, InboxIcon, Music, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
+import { postBlog } from "@/lib/services/blog/blog";
+import {
+  deleteMediaCurationMessage,
+  detailMedia,
+  getMediaCurationMessage,
+  saveMediaCurationMessage,
+} from "@/lib/services/curated-content/curated-content";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,25 +30,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import Cookies from "js-cookie";
-import { postBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  DotSquare,
-  InboxIcon,
-  Music,
-  PaperclipIcon,
-  SmileIcon,
-  TrashIcon,
-} from "lucide-react";
-import {
-  deleteMediaCurationMessage,
-  detailMedia,
-  getMediaCurationMessage,
-  saveMediaCurationMessage,
-} from "@/lib/services/curated-content/curated-content";
-import { Swiper, SwiperSlide } from "swiper/react";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -43,25 +39,25 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
-import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import WavesurferPlayer from "@wavesurfer/react";
-import WaveSurfer from "wavesurfer.js";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Badge } from "@/components/ui/badge";
-import { htmlToString } from "@/lib/utils/globals";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { loading } from "@/lib/utils/swal";
+
 import { formatDate } from "@fullcalendar/core/index.js";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import WavesurferPlayer from "@wavesurfer/react";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import WaveSurfer from "wavesurfer.js";
+
+import { htmlToString } from "@/lib/utils/globals";
+import { loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   categoryName: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
@@ -313,9 +309,7 @@ export default function DetailAudio() {
         setDetailAudio(fileUrls);
         const fileUrlsThumbnail = filesData.map(
           (file: { thumbnailFileUrl: string; placements: string }) => ({
-            thumbnailFileUrl: file.thumbnailFileUrl
-              ? file.thumbnailFileUrl
-              : "default-image.jpg",
+            thumbnailFileUrl: file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg",
             placements: file.placements || "",
           })
         );
@@ -369,9 +363,7 @@ export default function DetailAudio() {
                         )}
                       />
                       {errors.title?.message && (
-                        <p className="text-red-400 text-sm">
-                          {errors.title.message}
-                        </p>
+                        <p className="text-red-400 text-sm">{errors.title.message}</p>
                       )}
                     </div>
                     <div className="flex items-center">
@@ -409,9 +401,7 @@ export default function DetailAudio() {
                           )}
                         />
                         {errors.description?.message && (
-                          <p className="text-red-400 text-sm">
-                            {errors.description.message}
-                          </p>
+                          <p className="text-red-400 text-sm">{errors.description.message}</p>
                         )}
                       </div>
                     </div>
@@ -450,10 +440,7 @@ export default function DetailAudio() {
                         <Label>Tag</Label>
                         <div className="flex flex-wrap gap-2">
                           {detail?.tags?.split(",").map((tag, index) => (
-                            <Badge
-                              key={index}
-                              className="border rounded-md  px-2 py-2"
-                            >
+                            <Badge key={index} className="border rounded-md  px-2 py-2">
                               {tag.trim()}
                             </Badge>
                           ))}
@@ -462,11 +449,7 @@ export default function DetailAudio() {
                     </div>
                     <div className=" py-3">
                       <div className="space-y-2">
-                        <Label>
-                          {" "}
-                          {detail?.uploadedBy?.fullname ||
-                            "Data tidak tersedia"}
-                        </Label>
+                        <Label> {detail?.uploadedBy?.fullname || "Data tidak tersedia"}</Label>
                       </div>
                     </div>
                     <div className=" py-3">
@@ -495,10 +478,7 @@ export default function DetailAudio() {
                           className="w-full"
                         >
                           {detailAudio?.map((data: any) => (
-                            <SwiperSlide
-                              key={data.id}
-                              onClick={() => handleFileClick(data.id)}
-                            >
+                            <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                               <WavesurferPlayer
                                 height={500}
                                 waveColor="red"
@@ -517,18 +497,12 @@ export default function DetailAudio() {
                           onClick={onPlayPause}
                           disabled={isPlaying}
                           className={`flex items-center gap-2 ${
-                            isPlaying
-                              ? "bg-gray-300 cursor-not-allowed"
-                              : "bg-primary text-white"
+                            isPlaying ? "bg-gray-300 cursor-not-allowed" : "bg-primary text-white"
                           } p-2 rounded`}
                         >
                           {isPlaying ? "Pause" : "Play"}
                           <Icon
-                            icon={
-                              isPlaying
-                                ? "carbon:pause-outline"
-                                : "famicons:play-sharp"
-                            }
+                            icon={isPlaying ? "carbon:pause-outline" : "famicons:play-sharp"}
                             className="h-5 w-5"
                           />
                         </Button>
@@ -541,10 +515,7 @@ export default function DetailAudio() {
                             modules={[Pagination, Thumbs]}
                           >
                             {detailAudio?.map((data: any) => (
-                              <SwiperSlide
-                                key={data.id}
-                                onClick={() => handleFileClick(data.id)}
-                              >
+                              <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                                 <img
                                   className="object-fill h-full w-full rounded-md"
                                   src={"/assets/music-icon.jpg"}
@@ -561,51 +532,34 @@ export default function DetailAudio() {
                 <div className="w-full lg:w-6/12 border px-3 rounded-md mt-3">
                   <div className="gap-5 mb-5">
                     <div className="mt-5">
-                      <Label className="text-xl text-black">
-                        Penempatan File
-                      </Label>
+                      <Label className="text-xl text-black">Penempatan File</Label>
                       <div className="flex flex-row justify-between items-center">
                         <p>file</p>
                         <p>Penempatan</p>
                       </div>
                       <p className="bg-black h-1 w-full rounded-lg"></p>
                       {detailThumb?.map((data: any) => (
-                        <div
-                          key={data.id}
-                          className="flex items-center gap-3 mt-2"
-                        >
+                        <div key={data.id} className="flex items-center gap-3 mt-2">
                           <Music className="object-cover w-32 h-32" />
                           <div className="flex flex-wrap lg:flex-row gap-3 items-center">
                             {/* Mabes Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "mabes"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "mabes"} disabled />
                               <span>Nasional</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "polda"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "polda"} disabled />
                               <span>Wilayah</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "satker"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "satker"} disabled />
                               <span>Satker</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "international"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "international"} disabled />
                               <span>International</span>
                             </label>
                           </div>
@@ -627,11 +581,7 @@ export default function DetailAudio() {
                       onChange={handleInputChange}
                     />
                     <div className="flex justify-end mt-3">
-                      <Button
-                        color="primary"
-                        onClick={() => postData()}
-                        type="button"
-                      >
+                      <Button color="primary" onClick={() => postData()} type="button">
                         Kirim Komentar
                       </Button>
                     </div>
@@ -691,10 +641,7 @@ export default function DetailAudio() {
                       {item.children?.length > 0 && (
                         <div className="ml-10 mt-2 flex flex-col">
                           {item.children.map((child: any) => (
-                            <div
-                              key={child.id}
-                              className="flex flex-col gap-3 mt-2"
-                            >
+                            <div key={child.id} className="flex flex-col gap-3 mt-2">
                               <div className="flex flex-row gap-3">
                                 <Avatar className="mt-2">
                                   <AvatarImage
@@ -711,9 +658,7 @@ export default function DetailAudio() {
                                       {formatDate(item.createdAt)}
                                     </span>
                                   </div>
-                                  <p className="text-gray-800 mt-1">
-                                    {child.message}
-                                  </p>
+                                  <p className="text-gray-800 mt-1">{child.message}</p>
                                   <div className="flex flex-row gap-2">
                                     {/* <div
                                       className="flex items-center mt-1 text-blue-500 cursor-pointer"
@@ -750,10 +695,7 @@ export default function DetailAudio() {
                               {child.children?.length > 0 && (
                                 <div className="ml-10 mt-2 flex flex-col mb-3">
                                   {child.children.map((child2: any) => (
-                                    <div
-                                      key={child2.id}
-                                      className="flex flex-col gap-3 mt-2"
-                                    >
+                                    <div key={child2.id} className="flex flex-col gap-3 mt-2">
                                       <div className="flex flex-row gap-3 ">
                                         <Avatar className="mt-2">
                                           <AvatarImage
@@ -770,20 +712,14 @@ export default function DetailAudio() {
                                               {formatDate(item.createdAt)}
                                             </span>
                                           </div>
-                                          <p className="text-gray-800 mt-1">
-                                            {child2.message}
-                                          </p>
+                                          <p className="text-gray-800 mt-1">{child2.message}</p>
                                           <div className="flex flex-row gap-2">
                                             <div
                                               className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                              onClick={() =>
-                                                deleteData(child2.id)
-                                              }
+                                              onClick={() => deleteData(child2.id)}
                                             >
                                               <TrashIcon className="w-4 h-4" />
-                                              <span className="ml-1">
-                                                Delete
-                                              </span>
+                                              <span className="ml-1">Delete</span>
                                             </div>
                                           </div>
                                         </div>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/page.tsx
index 61bbfddb..397edc0f 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/page.tsx
@@ -1,10 +1,12 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { locale } from "dayjs";
 import { Rows, Search, UploadIcon } from "lucide-react";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
@@ -12,17 +14,17 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { Link } from "@/i18n/navigation";
-import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { locale } from "dayjs";
-import { useEffect, useState } from "react";
-import { getListContent } from "@/lib/services/landing/landing";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import ContestTable from "../../../../contest/components/contest-table";
 import AudioSliderPage from "../../audio/audio";
-import TeksSliderPage from "../teks";
 import ImageSliderPage from "../../image/image";
 import VideoSliderPage from "../../video/audio-visual";
+import TeksSliderPage from "../teks";
 import TeksAll from "./teks";
 
 const DocumentAllPage = () => {
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/teks.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/teks.tsx
index c32b684f..36bb6c8e 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/teks.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/all/teks.tsx
@@ -1,5 +1,13 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -7,16 +15,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
-import { getListContent } from "@/lib/services/landing/landing";
-import {
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const TeksAll = () => {
   const [documentData, setDocumentData] = useState<any>();
@@ -98,10 +96,7 @@ const TeksAll = () => {
                   height="1em"
                   viewBox="0 0 512 512"
                 >
-                  <path
-                    fill="#f00"
-                    d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
-                  />
+                  <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
                 </svg>
                 Download Dokumen
               </div>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx
index 6351e593..fa506fd2 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/detail/[id]/page.tsx
@@ -1,15 +1,28 @@
 "use client";
+
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import Cookies from "js-cookie";
+import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
+import { postBlog } from "@/lib/services/blog/blog";
+import {
+  deleteMediaCurationMessage,
+  detailMedia,
+  getMediaCurationMessage,
+  saveMediaCurationMessage,
+} from "@/lib/services/curated-content/curated-content";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,24 +30,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import Cookies from "js-cookie";
-import { postBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  DotSquare,
-  InboxIcon,
-  PaperclipIcon,
-  SmileIcon,
-  TrashIcon,
-} from "lucide-react";
-import {
-  deleteMediaCurationMessage,
-  detailMedia,
-  getMediaCurationMessage,
-  saveMediaCurationMessage,
-} from "@/lib/services/curated-content/curated-content";
-import { Swiper, SwiperSlide } from "swiper/react";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -42,23 +39,23 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
-import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+
+import { formatDate } from "@fullcalendar/core/index.js";
 import JoditEditor from "jodit-react";
-import { Badge } from "@/components/ui/badge";
-import { Checkbox } from "@/components/ui/checkbox";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+
 import { htmlToString } from "@/lib/utils/globals";
 import { loading } from "@/lib/utils/swal";
-import { formatDate } from "@fullcalendar/core/index.js";
 import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   categoryName: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
@@ -351,9 +348,7 @@ export default function DetailDocument() {
                         )}
                       />
                       {errors.title?.message && (
-                        <p className="text-red-400 text-sm">
-                          {errors.title.message}
-                        </p>
+                        <p className="text-red-400 text-sm">{errors.title.message}</p>
                       )}
                     </div>
                     <div className="flex items-center">
@@ -391,9 +386,7 @@ export default function DetailDocument() {
                           )}
                         />
                         {errors.description?.message && (
-                          <p className="text-red-400 text-sm">
-                            {errors.description.message}
-                          </p>
+                          <p className="text-red-400 text-sm">{errors.description.message}</p>
                         )}
                       </div>
                     </div>
@@ -432,10 +425,7 @@ export default function DetailDocument() {
                         <Label>Tag</Label>
                         <div className="flex flex-wrap gap-2">
                           {detail?.tags?.split(",").map((tag, index) => (
-                            <Badge
-                              key={index}
-                              className="border rounded-md  px-2 py-2"
-                            >
+                            <Badge key={index} className="border rounded-md  px-2 py-2">
                               {tag.trim()}
                             </Badge>
                           ))}
@@ -444,11 +434,7 @@ export default function DetailDocument() {
                     </div>
                     <div className=" py-3">
                       <div className="space-y-2">
-                        <Label>
-                          {" "}
-                          {detail?.uploadedBy?.fullname ||
-                            "Data tidak tersedia"}
-                        </Label>
+                        <Label> {detail?.uploadedBy?.fullname || "Data tidak tersedia"}</Label>
                       </div>
                     </div>
                     <div className=" py-3">
@@ -477,13 +463,8 @@ export default function DetailDocument() {
                           className="w-full"
                         >
                           {detailThumb?.map((data: any) => (
-                            <SwiperSlide
-                              key={data.id}
-                              onClick={() => handleFileClick(data.id)}
-                            >
-                              {[".jpg", ".jpeg", ".png", ".webp"].includes(
-                                data.format
-                              ) ? (
+                            <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
+                              {[".jpg", ".jpeg", ".png", ".webp"].includes(data.format) ? (
                                 // Menampilkan gambar
                                 <img
                                   className="object-fill h-full w-full rounded-md"
@@ -497,9 +478,7 @@ export default function DetailDocument() {
                                   src={data.url}
                                   title={data.fileName || "PDF File"}
                                 />
-                              ) : [".docx", ".ppt", ".pptx"].includes(
-                                  data.format
-                                ) ? (
+                              ) : [".docx", ".ppt", ".pptx"].includes(data.format) ? (
                                 // Menampilkan file dokumen menggunakan Office Viewer
                                 <iframe
                                   className="w-full h-96 rounded-md"
@@ -531,13 +510,8 @@ export default function DetailDocument() {
                             modules={[Pagination, Thumbs]}
                           >
                             {detailThumb?.map((data: any) => (
-                              <SwiperSlide
-                                key={data.id}
-                                onClick={() => handleFileClick(data.id)}
-                              >
-                                {[".jpg", ".jpeg", ".png", ".webp"].includes(
-                                  data.format
-                                ) ? (
+                              <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
+                                {[".jpg", ".jpeg", ".png", ".webp"].includes(data.format) ? (
                                   <img
                                     className="object-cover h-[60px] w-[80px]"
                                     src={"/assets/docx-icon.jpg"}
@@ -545,9 +519,7 @@ export default function DetailDocument() {
                                   />
                                 ) : (
                                   <div className="h-[60px] w-[80px] flex items-center justify-center bg-gray-200 text-sm text-center text-gray-700 rounded-md">
-                                    {data?.format
-                                      ?.replace(".", "")
-                                      .toUpperCase()}
+                                    {data?.format?.replace(".", "").toUpperCase()}
                                   </div>
                                 )}
                               </SwiperSlide>
@@ -561,19 +533,14 @@ export default function DetailDocument() {
                 <div className="w-full lg:w-6/12 border px-3 rounded-md mt-3">
                   <div className="gap-5 mb-5">
                     <div className="mt-5">
-                      <Label className="text-xl text-black">
-                        Penempatan File
-                      </Label>
+                      <Label className="text-xl text-black">Penempatan File</Label>
                       <div className="flex flex-row justify-between items-center">
                         <p>file</p>
                         <p>Penempatan</p>
                       </div>
                       <p className="bg-black h-1 w-full rounded-lg"></p>
                       {detailThumb.map((data: any, index: number) => (
-                        <div
-                          key={index}
-                          className="flex items-center gap-3 mt-2"
-                        >
+                        <div key={index} className="flex items-center gap-3 mt-2">
                           <img
                             className="object-cover h-[60px] w-[80px]"
                             src={"/assets/docx-icon.jpg"}
@@ -581,34 +548,22 @@ export default function DetailDocument() {
                           />
                           <div className="flex flex-wrap lg:flex-row gap-3 items-center">
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "mabes"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "mabes"} disabled />
                               <span>Nasional</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "polda"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "polda"} disabled />
                               <span>Wilayah</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "satker"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "satker"} disabled />
                               <span>Satker</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "international"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "international"} disabled />
                               <span>International</span>
                             </label>
                           </div>
@@ -630,11 +585,7 @@ export default function DetailDocument() {
                       onChange={handleInputChange}
                     />
                     <div className="flex justify-end mt-3">
-                      <Button
-                        color="primary"
-                        onClick={() => postData()}
-                        type="button"
-                      >
+                      <Button color="primary" onClick={() => postData()} type="button">
                         Kirim Komentar
                       </Button>
                     </div>
@@ -694,10 +645,7 @@ export default function DetailDocument() {
                       {item.children?.length > 0 && (
                         <div className="ml-10 mt-2 flex flex-col">
                           {item.children.map((child: any) => (
-                            <div
-                              key={child.id}
-                              className="flex flex-col gap-3 mt-2"
-                            >
+                            <div key={child.id} className="flex flex-col gap-3 mt-2">
                               <div className="flex flex-row gap-3">
                                 <Avatar className="mt-2">
                                   <AvatarImage
@@ -714,9 +662,7 @@ export default function DetailDocument() {
                                       {formatDate(item.createdAt)}
                                     </span>
                                   </div>
-                                  <p className="text-gray-800 mt-1">
-                                    {child.message}
-                                  </p>
+                                  <p className="text-gray-800 mt-1">{child.message}</p>
                                   <div className="flex flex-row gap-2">
                                     {/* <div
                                       className="flex items-center mt-1 text-blue-500 cursor-pointer"
@@ -753,10 +699,7 @@ export default function DetailDocument() {
                               {child.children?.length > 0 && (
                                 <div className="ml-10 mt-2 flex flex-col mb-3">
                                   {child.children.map((child2: any) => (
-                                    <div
-                                      key={child2.id}
-                                      className="flex flex-col gap-3 mt-2"
-                                    >
+                                    <div key={child2.id} className="flex flex-col gap-3 mt-2">
                                       <div className="flex flex-row gap-3 ">
                                         <Avatar className="mt-2">
                                           <AvatarImage
@@ -773,20 +716,14 @@ export default function DetailDocument() {
                                               {formatDate(item.createdAt)}
                                             </span>
                                           </div>
-                                          <p className="text-gray-800 mt-1">
-                                            {child2.message}
-                                          </p>
+                                          <p className="text-gray-800 mt-1">{child2.message}</p>
                                           <div className="flex flex-row gap-2">
                                             <div
                                               className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                              onClick={() =>
-                                                deleteData(child2.id)
-                                              }
+                                              onClick={() => deleteData(child2.id)}
                                             >
                                               <TrashIcon className="w-4 h-4" />
-                                              <span className="ml-1">
-                                                Delete
-                                              </span>
+                                              <span className="ml-1">Delete</span>
                                             </div>
                                           </div>
                                         </div>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx
index 45b28568..1d37d22f 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/document/teks.tsx
@@ -1,5 +1,13 @@
 "use client";
+
+import React, { Component, useEffect, useState } from "react";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
 import { Card } from "@/components/ui/card";
 import {
   Carousel,
@@ -8,16 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
-import { getListContent } from "@/lib/services/landing/landing";
-import {
-  formatDateToIndonesian,
-  generateLocalizedPath,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams, usePathname, useRouter } from "next/navigation";
-import React, { Component, useEffect, useState } from "react";
 
 const TeksSliderPage = () => {
   const [documentData, setDocumentData] = useState<any>();
@@ -82,12 +80,9 @@ const TeksSliderPage = () => {
 
                         <div className="flex flex-col flex-1">
                           <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                            {formatDateToIndonesian(
-                              new Date(document?.createdAt)
-                            )}{" "}
+                            {formatDateToIndonesian(new Date(document?.createdAt))}{" "}
                             {document?.timezone ? document?.timezone : "WIB"} |{" "}
-                            <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                            518
+                            <Icon icon="formkit:eye" width="15" height="15" /> 518
                           </div>
                           <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
                             {document?.title}
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/[id]/page.tsx
index aceabd13..584b668b 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/[id]/page.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
+import FormAcceptAssignment from "@/components/features/form/shared/accept-assignment-form";
 import FormAskExpert from "@/components/features/form/shared/ask-expert-form";
 import FormDoItYourself from "@/components/features/form/shared/do-it-yourself-form";
-import FormAcceptAssignment from "@/components/features/form/shared/accept-assignment-form";
+import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
 
 const AcceptAssignmentPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/detail/[id]/page.tsx
index 1c3d0d4f..cf802bee 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/accept-assignment/detail/[id]/page.tsx
@@ -1,15 +1,28 @@
 "use client";
+
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import Cookies from "js-cookie";
+import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
+import { postBlog } from "@/lib/services/blog/blog";
+import {
+  deleteMediaCurationMessage,
+  detailMedia,
+  getMediaCurationMessage,
+  saveMediaCurationMessage,
+} from "@/lib/services/curated-content/curated-content";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,24 +30,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import Cookies from "js-cookie";
-import { postBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  DotSquare,
-  InboxIcon,
-  PaperclipIcon,
-  SmileIcon,
-  TrashIcon,
-} from "lucide-react";
-import {
-  deleteMediaCurationMessage,
-  detailMedia,
-  getMediaCurationMessage,
-  saveMediaCurationMessage,
-} from "@/lib/services/curated-content/curated-content";
-import { Swiper, SwiperSlide } from "swiper/react";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -42,30 +39,30 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
+
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
+
 import { listData } from "@/lib/services/landing/landing";
 import {
   createAssignmentResponse,
   deleteAssignmentResponse,
   getAssignmentResponseList,
 } from "@/lib/services/task";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, loading } from "@/lib/utils/swal";
-import { Checkbox } from "@/components/ui/checkbox";
 import { formatDateToIndonesian, htmlToString } from "@/lib/utils/globals";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
+import { close, loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@/components/ui/icon";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   categoryName: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
@@ -337,10 +334,7 @@ export default function DetailAcceptImage() {
                         className="w-full"
                       >
                         {detailThumb?.map((data: any) => (
-                          <SwiperSlide
-                            key={data.id}
-                            onClick={() => handleFileClick(data.id)}
-                          >
+                          <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                             <img
                               className="object-fill h-full w-full rounded-md"
                               src={data.thumbnailFileUrl}
@@ -361,10 +355,7 @@ export default function DetailAcceptImage() {
                           // className="mySwiper2"
                         >
                           {detailThumb?.map((data: any) => (
-                            <SwiperSlide
-                              key={data.id}
-                              onClick={() => handleFileClick(data.id)}
-                            >
+                            <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                               <img
                                 className="object-fill h-full w-full rounded-md"
                                 src={data.thumbnailFileUrl}
@@ -435,11 +426,7 @@ export default function DetailAcceptImage() {
                       onChange={handleInputChange}
                     />
                     <div className="flex justify-end mt-3">
-                      <Button
-                        color="primary"
-                        onClick={() => postData()}
-                        type="button"
-                      >
+                      <Button color="primary" onClick={() => postData()} type="button">
                         Kirim Komentar
                       </Button>
                     </div>
@@ -499,10 +486,7 @@ export default function DetailAcceptImage() {
                       {item.children?.length > 0 && (
                         <div className="ml-10 mt-2 flex flex-col">
                           {item.children.map((child: any) => (
-                            <div
-                              key={child.id}
-                              className="flex flex-col gap-3 mt-2"
-                            >
+                            <div key={child.id} className="flex flex-col gap-3 mt-2">
                               <div className="flex flex-row gap-3">
                                 <Avatar className="mt-2">
                                   <AvatarImage
@@ -519,9 +503,7 @@ export default function DetailAcceptImage() {
                                       {formatDate(item.createdAt)}
                                     </span>
                                   </div>
-                                  <p className="text-gray-800 mt-1">
-                                    {child.message}
-                                  </p>
+                                  <p className="text-gray-800 mt-1">{child.message}</p>
                                   <div className="flex flex-row gap-2">
                                     {/* <div
                                       className="flex items-center mt-1 text-blue-500 cursor-pointer"
@@ -558,10 +540,7 @@ export default function DetailAcceptImage() {
                               {child.children?.length > 0 && (
                                 <div className="ml-10 mt-2 flex flex-col mb-3">
                                   {child.children.map((child2: any) => (
-                                    <div
-                                      key={child2.id}
-                                      className="flex flex-col gap-3 mt-2"
-                                    >
+                                    <div key={child2.id} className="flex flex-col gap-3 mt-2">
                                       <div className="flex flex-row gap-3 ">
                                         <Avatar className="mt-2">
                                           <AvatarImage
@@ -578,20 +557,14 @@ export default function DetailAcceptImage() {
                                               {formatDate(item.createdAt)}
                                             </span>
                                           </div>
-                                          <p className="text-gray-800 mt-1">
-                                            {child2.message}
-                                          </p>
+                                          <p className="text-gray-800 mt-1">{child2.message}</p>
                                           <div className="flex flex-row gap-2">
                                             <div
                                               className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                              onClick={() =>
-                                                deleteData(child2.id)
-                                              }
+                                              onClick={() => deleteData(child2.id)}
                                             >
                                               <TrashIcon className="w-4 h-4" />
-                                              <span className="ml-1">
-                                                Delete
-                                              </span>
+                                              <span className="ml-1">Delete</span>
                                             </div>
                                           </div>
                                         </div>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/all/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/all/page.tsx
index 4edb1ea6..8229e02d 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/all/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/all/page.tsx
@@ -1,10 +1,12 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { locale } from "dayjs";
 import { Rows, Search, UploadIcon } from "lucide-react";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
@@ -12,17 +14,17 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { Link } from "@/i18n/navigation";
-import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { locale } from "dayjs";
-import { useEffect, useState } from "react";
-import { getListContent } from "@/lib/services/landing/landing";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import ContestTable from "../../../../contest/components/contest-table";
 import AudioSliderPage from "../../audio/audio";
 import TeksSliderPage from "../../document/teks";
-import ImageSliderPage from "../image";
 import VideoSliderPage from "../../video/audio-visual";
+import ImageSliderPage from "../image";
 
 const ImageAllPage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/ask-the-expert/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/ask-the-expert/[id]/page.tsx
index 296b96f7..4f8cc2d8 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/ask-the-expert/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/ask-the-expert/[id]/page.tsx
@@ -1,7 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
 import FormAskExpert from "@/components/features/form/shared/ask-expert-form";
+import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
 
 const AskExpertCreatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx
index a64f6e94..3fd89875 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/[id]/page.tsx
@@ -1,15 +1,28 @@
 "use client";
+
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import Cookies from "js-cookie";
+import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
+import { postBlog } from "@/lib/services/blog/blog";
+import {
+  deleteMediaCurationMessage,
+  detailMedia,
+  getMediaCurationMessage,
+  saveMediaCurationMessage,
+} from "@/lib/services/curated-content/curated-content";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,24 +30,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import Cookies from "js-cookie";
-import { postBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  DotSquare,
-  InboxIcon,
-  PaperclipIcon,
-  SmileIcon,
-  TrashIcon,
-} from "lucide-react";
-import {
-  deleteMediaCurationMessage,
-  detailMedia,
-  getMediaCurationMessage,
-  saveMediaCurationMessage,
-} from "@/lib/services/curated-content/curated-content";
-import { Swiper, SwiperSlide } from "swiper/react";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -42,28 +39,28 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
+
+import { Link } from "@/i18n/navigation";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
+
 import { listData } from "@/lib/services/landing/landing";
 import {
   createAssignmentResponse,
   deleteAssignmentResponse,
   getAssignmentResponseList,
 } from "@/lib/services/task";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, loading } from "@/lib/utils/swal";
-import { Checkbox } from "@/components/ui/checkbox";
 import { htmlToString } from "@/lib/utils/globals";
-import { Link } from "@/i18n/navigation";
+import { close, loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   categoryName: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
@@ -338,9 +335,7 @@ export default function DetailImage() {
                         )}
                       />
                       {errors.title?.message && (
-                        <p className="text-red-400 text-sm">
-                          {errors.title.message}
-                        </p>
+                        <p className="text-red-400 text-sm">{errors.title.message}</p>
                       )}
                     </div>
                     <div className="flex items-center">
@@ -378,9 +373,7 @@ export default function DetailImage() {
                           )}
                         />
                         {errors.description?.message && (
-                          <p className="text-red-400 text-sm">
-                            {errors.description.message}
-                          </p>
+                          <p className="text-red-400 text-sm">{errors.description.message}</p>
                         )}
                       </div>
                     </div>
@@ -419,10 +412,7 @@ export default function DetailImage() {
                         <Label>Tag</Label>
                         <div className="flex flex-wrap gap-2">
                           {detail?.tags?.split(",").map((tag, index) => (
-                            <Badge
-                              key={index}
-                              className="border rounded-md  px-2 py-2"
-                            >
+                            <Badge key={index} className="border rounded-md  px-2 py-2">
                               {tag.trim()}
                             </Badge>
                           ))}
@@ -431,11 +421,7 @@ export default function DetailImage() {
                     </div>
                     <div className=" py-3">
                       <div className="space-y-2">
-                        <Label>
-                          {" "}
-                          {detail?.uploadedBy?.fullname ||
-                            "Data tidak tersedia"}
-                        </Label>
+                        <Label> {detail?.uploadedBy?.fullname || "Data tidak tersedia"}</Label>
                       </div>
                     </div>
                     <div className=" py-3">
@@ -445,9 +431,7 @@ export default function DetailImage() {
                       </div>
                     </div>
                     <Link
-                      href={
-                        "/shared/curated-content/giat-routine/image/detail/content-rewrite"
-                      }
+                      href={"/shared/curated-content/giat-routine/image/detail/content-rewrite"}
                     >
                       <Button>Content Rewrite</Button>
                     </Link>
@@ -469,10 +453,7 @@ export default function DetailImage() {
                           className="w-full"
                         >
                           {detailThumb?.map((data: any) => (
-                            <SwiperSlide
-                              key={data.id}
-                              onClick={() => handleFileClick(data.id)}
-                            >
+                            <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                               <img
                                 className="object-fill h-full w-full rounded-md"
                                 src={data.thumbnailFileUrl}
@@ -493,10 +474,7 @@ export default function DetailImage() {
                             // className="mySwiper2"
                           >
                             {detailThumb?.map((data: any) => (
-                              <SwiperSlide
-                                key={data.id}
-                                onClick={() => handleFileClick(data.id)}
-                              >
+                              <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                                 <img
                                   className="object-fill h-full w-full rounded-md"
                                   src={data.thumbnailFileUrl}
@@ -513,19 +491,14 @@ export default function DetailImage() {
                 <div className="w-full lg:w-6/12 border px-3 rounded-md mt-3">
                   <div className="gap-5 mb-5">
                     <div className="mt-5">
-                      <Label className="text-xl text-black">
-                        Penempatan File
-                      </Label>
+                      <Label className="text-xl text-black">Penempatan File</Label>
                       <div className="flex flex-row justify-between items-center">
                         <p>file</p>
                         <p>Penempatan</p>
                       </div>
                       <p className="bg-black h-1 w-full rounded-lg"></p>
                       {detailThumb?.map((data: any) => (
-                        <div
-                          key={data.id}
-                          className="flex items-center gap-3 mt-2"
-                        >
+                        <div key={data.id} className="flex items-center gap-3 mt-2">
                           {/* <img
                             className="object-cover w-20 h-20"
                             src={data.thumbnailUrl} // Assuming `thumbnailUrl` is the property that contains the URL for the thumbnail image
@@ -539,34 +512,22 @@ export default function DetailImage() {
                           <div className="flex flex-wrap lg:flex-row gap-3 items-center">
                             {/* Mabes Checkbox */}
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "mabes"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "mabes"} disabled />
                               <span>Nasional</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "polda"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "polda"} disabled />
                               <span>Wilayah</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "satker"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "satker"} disabled />
                               <span>Satker</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "international"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "international"} disabled />
                               <span>International</span>
                             </label>
                           </div>
@@ -588,11 +549,7 @@ export default function DetailImage() {
                       onChange={handleInputChange}
                     />
                     <div className="flex justify-end mt-3">
-                      <Button
-                        color="primary"
-                        onClick={() => postData()}
-                        type="button"
-                      >
+                      <Button color="primary" onClick={() => postData()} type="button">
                         Kirim Komentar
                       </Button>
                     </div>
@@ -652,10 +609,7 @@ export default function DetailImage() {
                       {item.children?.length > 0 && (
                         <div className="ml-10 mt-2 flex flex-col">
                           {item.children.map((child: any) => (
-                            <div
-                              key={child.id}
-                              className="flex flex-col gap-3 mt-2"
-                            >
+                            <div key={child.id} className="flex flex-col gap-3 mt-2">
                               <div className="flex flex-row gap-3">
                                 <Avatar className="mt-2">
                                   <AvatarImage
@@ -672,9 +626,7 @@ export default function DetailImage() {
                                       {formatDate(item.createdAt)}
                                     </span>
                                   </div>
-                                  <p className="text-gray-800 mt-1">
-                                    {child.message}
-                                  </p>
+                                  <p className="text-gray-800 mt-1">{child.message}</p>
                                   <div className="flex flex-row gap-2">
                                     {/* <div
                                       className="flex items-center mt-1 text-blue-500 cursor-pointer"
@@ -711,10 +663,7 @@ export default function DetailImage() {
                               {child.children?.length > 0 && (
                                 <div className="ml-10 mt-2 flex flex-col mb-3">
                                   {child.children.map((child2: any) => (
-                                    <div
-                                      key={child2.id}
-                                      className="flex flex-col gap-3 mt-2"
-                                    >
+                                    <div key={child2.id} className="flex flex-col gap-3 mt-2">
                                       <div className="flex flex-row gap-3 ">
                                         <Avatar className="mt-2">
                                           <AvatarImage
@@ -731,20 +680,14 @@ export default function DetailImage() {
                                               {formatDate(item.createdAt)}
                                             </span>
                                           </div>
-                                          <p className="text-gray-800 mt-1">
-                                            {child2.message}
-                                          </p>
+                                          <p className="text-gray-800 mt-1">{child2.message}</p>
                                           <div className="flex flex-row gap-2">
                                             <div
                                               className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                              onClick={() =>
-                                                deleteData(child2.id)
-                                              }
+                                              onClick={() => deleteData(child2.id)}
                                             >
                                               <TrashIcon className="w-4 h-4" />
-                                              <span className="ml-1">
-                                                Delete
-                                              </span>
+                                              <span className="ml-1">Delete</span>
                                             </div>
                                           </div>
                                         </div>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/content-rewrite/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/content-rewrite/page.tsx
index a7f7667b..5c9dea0a 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/content-rewrite/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/content-rewrite/page.tsx
@@ -1,10 +1,16 @@
 "use client";
+
 import { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
+import { Link } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -12,18 +18,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Controller, useForm } from "react-hook-form";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import CustomEditor from "@/components/editor/custom-editor";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Link } from "@/i18n/navigation";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -35,9 +35,7 @@ const ContentRewritePage = () => {
   const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
   const [selectedSort, setSelectedSort] = useState("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
 
   type ImageSchema = z.infer<typeof imageSchema>;
 
@@ -68,9 +66,7 @@ const ContentRewritePage = () => {
               </div>
               <p
                 className={
-                  step === "configuration"
-                    ? "text-blue-500 font-semibold"
-                    : "text-gray-400"
+                  step === "configuration" ? "text-blue-500 font-semibold" : "text-gray-400"
                 }
               >
                 Configuration
@@ -78,9 +74,7 @@ const ContentRewritePage = () => {
             </div>
             <div
               className={`flex-1 h-0.5 ${
-                step === "draft"
-                  ? "bg-blue-500 text-blue-500"
-                  : "bg-gray-400 text-gray-400"
+                step === "draft" ? "bg-blue-500 text-blue-500" : "bg-gray-400 text-gray-400"
               }`}
             ></div>
             <div className="flex flex-col items-center">
@@ -93,21 +87,13 @@ const ContentRewritePage = () => {
               >
                 ○
               </div>
-              <p
-                className={
-                  step === "draft"
-                    ? "text-blue-500 font-semibold"
-                    : "text-gray-400"
-                }
-              >
+              <p className={step === "draft" ? "text-blue-500 font-semibold" : "text-gray-400"}>
                 Draft
               </p>
             </div>
             <div
               className={`flex-1 h-0.5 ${
-                step === "publish"
-                  ? "bg-blue-500 text-blue-500"
-                  : "bg-gray-400 text-gray-400"
+                step === "publish" ? "bg-blue-500 text-blue-500" : "bg-gray-400 text-gray-400"
               }`}
             ></div>
             <div className="flex flex-col items-center">
@@ -120,13 +106,7 @@ const ContentRewritePage = () => {
               >
                 ○
               </div>
-              <p
-                className={
-                  step === "publish"
-                    ? "text-blue-500 font-semibold"
-                    : "text-gray-400"
-                }
-              >
+              <p className={step === "publish" ? "text-blue-500 font-semibold" : "text-gray-400"}>
                 Publish
               </p>
             </div>
@@ -156,9 +136,7 @@ const ContentRewritePage = () => {
                     <SelectContent>
                       <SelectItem value="friendly">Friendly</SelectItem>
                       <SelectItem value="profesional">Profesional</SelectItem>
-                      <SelectItem value="informational">
-                        Informational
-                      </SelectItem>
+                      <SelectItem value="informational">Informational</SelectItem>
                       <SelectItem value="neutral">Neutral</SelectItem>
                       <SelectItem value="witty">Witty</SelectItem>
                     </SelectContent>
@@ -171,30 +149,18 @@ const ContentRewritePage = () => {
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="news">
-                        News (300 - 900 words)
-                      </SelectItem>
-                      <SelectItem value="info">
-                        Info (900 - 2000 words)
-                      </SelectItem>
-                      <SelectItem value="detail">
-                        Detail (2000 - 5000 words)
-                      </SelectItem>
+                      <SelectItem value="news">News (300 - 900 words)</SelectItem>
+                      <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
+                      <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
               </div>
               <div className="mb-4">
                 <Label>Configuration</Label>
-                <Input
-                  placeholder="Type your custom instruction here!"
-                  className="h-20"
-                />
+                <Input placeholder="Type your custom instruction here!" className="h-20" />
               </div>
-              <Button
-                onClick={() => setStep("draft")}
-                className=" bg-blue-600 text-white"
-              >
+              <Button onClick={() => setStep("draft")} className=" bg-blue-600 text-white">
                 Selanjutnya
               </Button>
             </>
@@ -249,20 +215,13 @@ const ContentRewritePage = () => {
                     title: "Polres Magelang Kota Konferensi Pers Terkait...",
                   },
                 ].map((article, index) => (
-                  <div
-                    key={index}
-                    className="border rounded-md overflow-hidden relative"
-                  >
+                  <div key={index} className="border rounded-md overflow-hidden relative">
                     <input
                       type="checkbox"
                       className="absolute top-2 left-2 w-5 h-5 cursor-pointer"
                     />
 
-                    <img
-                      src={article.src}
-                      alt={article.alt}
-                      className="w-full h-40 object-cover"
-                    />
+                    <img src={article.src} alt={article.alt} className="w-full h-40 object-cover" />
 
                     <p className="p-2 text-sm">{article.title}</p>
                   </div>
@@ -277,11 +236,7 @@ const ContentRewritePage = () => {
                 >
                   Kembali
                 </Button>
-                <Button
-                  onClick={() => setStep("publish")}
-                  variant={"default"}
-                  color="primary"
-                >
+                <Button onClick={() => setStep("publish")} variant={"default"} color="primary">
                   Selanjutnya
                 </Button>
               </div>
@@ -293,15 +248,8 @@ const ContentRewritePage = () => {
               <div className="py-3">
                 <div className="flex flex-row justify-between items-center mb-3">
                   <Label>940 Words</Label>
-                  <Link
-                    href={`/contributor/content/image/update-seo/${selectedArticleId}`}
-                  >
-                    <Button
-                      className="mb-2"
-                      size="sm"
-                      variant={"outline"}
-                      color="primary"
-                    >
+                  <Link href={`/contributor/content/image/update-seo/${selectedArticleId}`}>
+                    <Button className="mb-2" size="sm" variant={"outline"} color="primary">
                       Edit
                     </Button>
                   </Link>
@@ -330,11 +278,7 @@ const ContentRewritePage = () => {
                 >
                   Kembali
                 </Button>
-                <Button
-                  onClick={() => setStep("publish")}
-                  variant={"default"}
-                  color="primary"
-                >
+                <Button onClick={() => setStep("publish")} variant={"default"} color="primary">
                   Selanjutnya
                 </Button>
               </div>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/do-it-yourself/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/do-it-yourself/[id]/page.tsx
index 839a392a..59677ff4 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/do-it-yourself/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/do-it-yourself/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
 import FormAskExpert from "@/components/features/form/shared/ask-expert-form";
 import FormDoItYourself from "@/components/features/form/shared/do-it-yourself-form";
+import FormTaskTa from "@/components/features/form/task-ta/task-ta-form";
 
 const DoItYourselfCreatePage = () => {
   return (
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx
index 17ef9f1a..61fdf440 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/image.tsx
@@ -1,5 +1,13 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -9,13 +17,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
-
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useRouter } from "next/navigation";
-import React, { useEffect, useState } from "react";
 
 type ImageData = {
   id: string;
@@ -77,9 +78,7 @@ const ImageSliderPage = () => {
                           />
                           <div className="p-3">
                             <p className="text-xs text-gray-500">
-                              {formatDateToIndonesian(
-                                new Date(image?.createdAt)
-                              )}{" "}
+                              {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                               {image?.timezone || "WIB"} |
                               <Icon
                                 icon="formkit:eye"
@@ -89,9 +88,7 @@ const ImageSliderPage = () => {
                               />
                               {image?.clickCount}
                             </p>
-                            <h3 className="font-semibold text-sm truncate">
-                              {image?.title}
-                            </h3>
+                            <h3 className="font-semibold text-sm truncate">{image?.title}</h3>
                           </div>
                         </CardContent>
                       </Link>
@@ -119,11 +116,7 @@ const ImageSliderPage = () => {
                           <Link
                             href={`/shared/curated-content/giat-routine/image/accept-assignment/${image.id}`}
                           >
-                            <Button
-                              className="w-full "
-                              color="primary"
-                              size="md"
-                            >
+                            <Button className="w-full " color="primary" size="md">
                               Accept Assignment
                             </Button>
                           </Link>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/all/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/all/page.tsx
index 373118aa..38d67401 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/all/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/all/page.tsx
@@ -1,10 +1,12 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { locale } from "dayjs";
 import { Rows, Search, UploadIcon } from "lucide-react";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
@@ -12,12 +14,12 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { Link } from "@/i18n/navigation";
-import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { locale } from "dayjs";
-import { useEffect, useState } from "react";
-import { getListContent } from "@/lib/services/landing/landing";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import ContestTable from "../../../../contest/components/contest-table";
 import AudioSliderPage from "../../audio/audio";
 import TeksSliderPage from "../../document/teks";
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx
index fcbfede8..51969d40 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/audio-visual.tsx
@@ -1,5 +1,13 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import image from "next/image";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -10,12 +18,6 @@ import {
   CarouselPrevious,
 } from "@/components/ui/carousel";
 import { Label } from "@/components/ui/label";
-import { listCuratedContent } from "@/lib/services/curated-content/curated-content";
-import { getListContent } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import image from "next/image";
-import React, { useEffect, useState } from "react";
 
 type VideoData = {
   id: string;
@@ -65,9 +67,7 @@ const VideoSliderPage = () => {
                 <CarouselItem key={index} className="md:basis-1/3 lg:basis-1/3">
                   <div className="p-2">
                     <Card className="shadow-md rounded-lg overflow-hidden">
-                      <Link
-                        href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}
-                      >
+                      <Link href={`/shared/curated-content/giat-routine/video/detail/${video.id}`}>
                         <CardContent className="p-0">
                           <img
                             src={video?.thumbnailLink}
@@ -76,9 +76,7 @@ const VideoSliderPage = () => {
                           />
                           <div className="p-3">
                             <p className="text-xs text-gray-500">
-                              {formatDateToIndonesian(
-                                new Date(video?.createdAt)
-                              )}{" "}
+                              {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
                               {video?.timezone || "WIB"} |
                               <Icon
                                 icon="formkit:eye"
@@ -88,9 +86,7 @@ const VideoSliderPage = () => {
                               />
                               {video?.clickCount}
                             </p>
-                            <h3 className="font-semibold text-sm truncate">
-                              {video?.title}
-                            </h3>
+                            <h3 className="font-semibold text-sm truncate">{video?.title}</h3>
                           </div>
                         </CardContent>
                       </Link>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx
index acf48729..71b5e1b1 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/giat-routine/video/detail/[id]/page.tsx
@@ -1,15 +1,28 @@
 "use client";
+
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card, CardContent } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import Cookies from "js-cookie";
+import { DotSquare, InboxIcon, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
+import { postBlog } from "@/lib/services/blog/blog";
+import {
+  deleteMediaCurationMessage,
+  detailMedia,
+  getMediaCurationMessage,
+  saveMediaCurationMessage,
+} from "@/lib/services/curated-content/curated-content";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,24 +30,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import Cookies from "js-cookie";
-import { postBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  DotSquare,
-  InboxIcon,
-  PaperclipIcon,
-  SmileIcon,
-  TrashIcon,
-} from "lucide-react";
-import {
-  deleteMediaCurationMessage,
-  detailMedia,
-  getMediaCurationMessage,
-  saveMediaCurationMessage,
-} from "@/lib/services/curated-content/curated-content";
-import { Swiper, SwiperSlide } from "swiper/react";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -42,22 +39,22 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
+
+import { formatDate } from "@fullcalendar/core/index.js";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+
+import { htmlToString } from "@/lib/utils/globals";
+import { loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { formatDate } from "@fullcalendar/core/index.js";
-import { loading } from "@/lib/utils/swal";
-import { htmlToString } from "@/lib/utils/globals";
 import { Checkbox } from "@/components/ui/checkbox";
 
 const detailSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   categoryName: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
 
@@ -284,9 +281,7 @@ export default function DetailImage() {
         const filesDataThumbnail = details.files || [];
         const fileUrlsThumbnail = filesData.map(
           (file: { thumbnailFileUrl: string; placements: string }) => ({
-            thumbnailFileUrl: file.thumbnailFileUrl
-              ? file.thumbnailFileUrl
-              : "default-image.jpg",
+            thumbnailFileUrl: file.thumbnailFileUrl ? file.thumbnailFileUrl : "default-image.jpg",
             placements: file.placements || "",
           })
         );
@@ -339,9 +334,7 @@ export default function DetailImage() {
                         )}
                       />
                       {errors.title?.message && (
-                        <p className="text-red-400 text-sm">
-                          {errors.title.message}
-                        </p>
+                        <p className="text-red-400 text-sm">{errors.title.message}</p>
                       )}
                     </div>
                     <div className="flex items-center">
@@ -379,9 +372,7 @@ export default function DetailImage() {
                           )}
                         />
                         {errors.description?.message && (
-                          <p className="text-red-400 text-sm">
-                            {errors.description.message}
-                          </p>
+                          <p className="text-red-400 text-sm">{errors.description.message}</p>
                         )}
                       </div>
                     </div>
@@ -420,10 +411,7 @@ export default function DetailImage() {
                         <Label>Tag</Label>
                         <div className="flex flex-wrap gap-2">
                           {detail?.tags?.split(",").map((tag, index) => (
-                            <Badge
-                              key={index}
-                              className="border rounded-md  px-2 py-2"
-                            >
+                            <Badge key={index} className="border rounded-md  px-2 py-2">
                               {tag.trim()}
                             </Badge>
                           ))}
@@ -432,11 +420,7 @@ export default function DetailImage() {
                     </div>
                     <div className=" py-3">
                       <div className="space-y-2">
-                        <Label>
-                          {" "}
-                          {detail?.uploadedBy?.fullname ||
-                            "Data tidak tersedia"}
-                        </Label>
+                        <Label> {detail?.uploadedBy?.fullname || "Data tidak tersedia"}</Label>
                       </div>
                     </div>
                     <div className=" py-3">
@@ -465,10 +449,7 @@ export default function DetailImage() {
                           className="w-full"
                         >
                           {detailVideo?.map((data: any) => (
-                            <SwiperSlide
-                              key={data.id}
-                              onClick={() => handleFileClick(data.id)}
-                            >
+                            <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                               <video
                                 className="object-fill h-full w-full rounded-md"
                                 src={data.url}
@@ -489,10 +470,7 @@ export default function DetailImage() {
                             modules={[Pagination, Thumbs]}
                           >
                             {detailVideo?.map((data: any) => (
-                              <SwiperSlide
-                                key={data.id}
-                                onClick={() => handleFileClick(data.id)}
-                              >
+                              <SwiperSlide key={data.id} onClick={() => handleFileClick(data.id)}>
                                 <video
                                   className="object-cover h-[60px] w-[80px] rounded-md"
                                   src={data.url}
@@ -510,19 +488,14 @@ export default function DetailImage() {
                 <div className="w-full lg:w-6/12 border px-3 rounded-md mt-3">
                   <div className="gap-5 mb-5">
                     <div className="mt-5">
-                      <Label className="text-xl text-black">
-                        Penempatan File
-                      </Label>
+                      <Label className="text-xl text-black">Penempatan File</Label>
                       <div className="flex flex-row justify-between items-center">
                         <p>file</p>
                         <p>Penempatan</p>
                       </div>
                       <p className="bg-black h-1 w-full rounded-lg"></p>
                       {detailThumb?.map((data: any) => (
-                        <div
-                          key={data.id}
-                          className="flex items-center gap-3 mt-2"
-                        >
+                        <div key={data.id} className="flex items-center gap-3 mt-2">
                           <img
                             className="object-cover w-20 h-20 lg:w-32 lg:h-32"
                             src={"/assets/video-icon.webp"}
@@ -530,34 +503,22 @@ export default function DetailImage() {
                           />
                           <div className="flex flex-wrap lg:flex-row gap-3 items-center">
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "mabes"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "mabes"} disabled />
                               <span>Nasional</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "polda"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "polda"} disabled />
                               <span>Wilayah</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "satker"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "satker"} disabled />
                               <span>Satker</span>
                             </label>
 
                             <label className=" cursor-pointer flex items-center gap-2">
-                              <Checkbox
-                                checked={data.placements === "international"}
-                                disabled
-                              />
+                              <Checkbox checked={data.placements === "international"} disabled />
                               <span>International</span>
                             </label>
                           </div>
@@ -579,11 +540,7 @@ export default function DetailImage() {
                       onChange={handleInputChange}
                     />
                     <div className="flex justify-end mt-3">
-                      <Button
-                        color="primary"
-                        onClick={() => postData()}
-                        type="button"
-                      >
+                      <Button color="primary" onClick={() => postData()} type="button">
                         Kirim Komentar
                       </Button>
                     </div>
@@ -643,10 +600,7 @@ export default function DetailImage() {
                       {item.children?.length > 0 && (
                         <div className="ml-10 mt-2 flex flex-col">
                           {item.children.map((child: any) => (
-                            <div
-                              key={child.id}
-                              className="flex flex-col gap-3 mt-2"
-                            >
+                            <div key={child.id} className="flex flex-col gap-3 mt-2">
                               <div className="flex flex-row gap-3">
                                 <Avatar className="mt-2">
                                   <AvatarImage
@@ -663,9 +617,7 @@ export default function DetailImage() {
                                       {formatDate(item.createdAt)}
                                     </span>
                                   </div>
-                                  <p className="text-gray-800 mt-1">
-                                    {child.message}
-                                  </p>
+                                  <p className="text-gray-800 mt-1">{child.message}</p>
                                   <div className="flex flex-row gap-2">
                                     {/* <div
                                       className="flex items-center mt-1 text-blue-500 cursor-pointer"
@@ -702,10 +654,7 @@ export default function DetailImage() {
                               {child.children?.length > 0 && (
                                 <div className="ml-10 mt-2 flex flex-col mb-3">
                                   {child.children.map((child2: any) => (
-                                    <div
-                                      key={child2.id}
-                                      className="flex flex-col gap-3 mt-2"
-                                    >
+                                    <div key={child2.id} className="flex flex-col gap-3 mt-2">
                                       <div className="flex flex-row gap-3 ">
                                         <Avatar className="mt-2">
                                           <AvatarImage
@@ -722,20 +671,14 @@ export default function DetailImage() {
                                               {formatDate(item.createdAt)}
                                             </span>
                                           </div>
-                                          <p className="text-gray-800 mt-1">
-                                            {child2.message}
-                                          </p>
+                                          <p className="text-gray-800 mt-1">{child2.message}</p>
                                           <div className="flex flex-row gap-2">
                                             <div
                                               className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                              onClick={() =>
-                                                deleteData(child2.id)
-                                              }
+                                              onClick={() => deleteData(child2.id)}
                                             >
                                               <TrashIcon className="w-4 h-4" />
-                                              <span className="ml-1">
-                                                Delete
-                                              </span>
+                                              <span className="ml-1">Delete</span>
                                             </div>
                                           </div>
                                         </div>
diff --git a/src/app/[locale]/(protected)/shared/curated-content/page.tsx b/src/app/[locale]/(protected)/shared/curated-content/page.tsx
index 76c12e9e..b7aa2a31 100644
--- a/src/app/[locale]/(protected)/shared/curated-content/page.tsx
+++ b/src/app/[locale]/(protected)/shared/curated-content/page.tsx
@@ -1,10 +1,13 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { locale } from "dayjs";
 import { ArrowRight, Rows, Search, UploadIcon } from "lucide-react";
-import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { useTranslations } from "next-intl";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Carousel,
   CarouselContent,
@@ -12,19 +15,18 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { Link } from "@/i18n/navigation";
-import { formatDateToIndonesian, generateLocalizedPath } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { locale } from "dayjs";
-import { useEffect, useState } from "react";
-import { getListContent } from "@/lib/services/landing/landing";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import ContestTable from "../contest/components/contest-table";
+import AudioSliderPage from "./giat-routine/audio/audio";
+import TeksSliderPage from "./giat-routine/document/teks";
+import ImageSliderPage from "./giat-routine/image/image";
 import GiatRoutine from "./giat-routine/video/audio-visual";
 import VideoSliderPage from "./giat-routine/video/audio-visual";
-import AudioSliderPage from "./giat-routine/audio/audio";
-import ImageSliderPage from "./giat-routine/image/image";
-import TeksSliderPage from "./giat-routine/document/teks";
-import ContestTable from "../contest/components/contest-table";
-import { useTranslations } from "next-intl";
 
 const CuratedContentPage = () => {
   const t = useTranslations("Curation");
@@ -34,9 +36,7 @@ const CuratedContentPage = () => {
       <div className="my-3">
         <Tabs defaultValue="giat-routine" className="w-full">
           <Card className="py-3 px-2 my-4">
-            <p className="text-lg font-semibold ml-2">
-              {t("content-curation")}
-            </p>
+            <p className="text-lg font-semibold ml-2">{t("content-curation")}</p>
             <TabsList className="flex-wrap">
               <TabsTrigger
                 value="giat-routine"
diff --git a/src/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx b/src/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx
index 946add76..ce054ae5 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/account-report/components/column.tsx
@@ -1,17 +1,17 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { Link } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -57,9 +57,7 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link
-              href={`/supervisor/communications/account-report/detail/${row?.original?.id}`}
-            >
+            <Link href={`/supervisor/communications/account-report/detail/${row?.original?.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
diff --git a/src/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx b/src/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx
index 76ae7b9e..76eae66f 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/account-report/components/table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronDown,
   ChevronLeft,
@@ -37,7 +27,14 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { getUserReportsPagination } from "@/lib/services/communication/report-account";
+import { getFaqList } from "@/lib/services/master/faq";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -49,14 +46,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import { getFaqList } from "@/lib/services/master/faq";
-import columns from "./column";
-import { getUserReportsPagination } from "@/lib/services/communication/report-account";
-import { Card, CardContent } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { StatisticsBlock } from "@/components/features/blocks/statistics-block";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./column";
 
 const ReportTable = () => {
   const router = useRouter();
@@ -65,11 +66,8 @@ const ReportTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
   const [pagination, setPagination] = React.useState<PaginationState>({
@@ -134,11 +132,7 @@ const ReportTable = () => {
 
   async function fetchData() {
     try {
-      const res = await getUserReportsPagination(
-        page - 1,
-        Number(showData),
-        search
-      );
+      const res = await getUserReportsPagination(page - 1, Number(showData), search);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -159,11 +153,7 @@ const ReportTable = () => {
       <Card>
         <CardContent className="p-4">
           <div className="grid md:grid-cols-3   gap-4">
-            <StatisticsBlock
-              total="64"
-              title="Total Pelaporan"
-              className=" border shadow-none"
-            />
+            <StatisticsBlock total="64" title="Total Pelaporan" className=" border shadow-none" />
             <StatisticsBlock
               title="Total Disetujui"
               total="564"
@@ -206,22 +196,11 @@ const ReportTable = () => {
                   </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-56 text-sm">
-                  <DropdownMenuRadioGroup
-                    value={showData}
-                    onValueChange={setShowData}
-                  >
-                    <DropdownMenuRadioItem value="10">
-                      1 - 10 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="20">
-                      1 - 20 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="25">
-                      1 - 25 Data
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="50">
-                      1 - 50 Data
-                    </DropdownMenuRadioItem>
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
                   </DropdownMenuRadioGroup>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -242,9 +221,7 @@ const ReportTable = () => {
                           key={column.id}
                           className="capitalize"
                           checked={column.getIsVisible()}
-                          onCheckedChange={(value) =>
-                            column.toggleVisibility(!!value)
-                          }
+                          onCheckedChange={(value) => column.toggleVisibility(!!value)}
                         >
                           {column.id}
                         </DropdownMenuCheckboxItem>
@@ -262,10 +239,7 @@ const ReportTable = () => {
                     <TableHead key={header.id}>
                       {header.isPlaceholder
                         ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                        : flexRender(header.column.columnDef.header, header.getContext())}
                     </TableHead>
                   ))}
                 </TableRow>
@@ -281,31 +255,21 @@ const ReportTable = () => {
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>
               )}
             </TableBody>
           </Table>
-          <TablePagination
-            table={table}
-            totalData={totalData}
-            totalPage={totalPage}
-          />
+          <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
         </div>
       </div>
     </>
diff --git a/src/app/[locale]/(protected)/supervisor/communications/account-report/detail/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/account-report/detail/[id]/page.tsx
index eccc415d..cf07b85b 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/account-report/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/account-report/detail/[id]/page.tsx
@@ -1,7 +1,7 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import FormAccountReport from "@/components/features/form/account-report/account-report-form";
 import FormBlogDetail from "@/components/features/form/blog/blog--detail-form";
 import FormSurveyDetailPage from "@/components/features/form/survey/survey-detail";
-import FormAccountReport from "@/components/features/form/account-report/account-report-form";
 
 const AccountReportDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx
index f0b6c811..53257aee 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/account-report/page.tsx
@@ -1,9 +1,11 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import FaqTable from "./components/table";
-import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import { StatisticsBlock } from "@/components/features/blocks/statistics-block";
+
+import FaqTable from "./components/table";
 import ReportTable from "./components/table";
 
 const FaqPage = async () => {
@@ -12,9 +14,7 @@ const FaqPage = async () => {
       <SiteBreadcrumb />
       <div className="space-y-4">
         <div className="flex items-center">
-          <div className="flex-1 text-xl font-medium text-default-900">
-            Pelaporan Akun
-          </div>
+          <div className="flex-1 text-xl font-medium text-default-900">Pelaporan Akun</div>
           <div className="flex-none"></div>
         </div>
 
diff --git a/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx b/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx
index 6307e9a1..68551902 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/collabroation-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,19 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import {
+  getTicketingCollaborationPagination,
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -47,22 +49,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
-import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import {
-  getTicketingCollaborationPagination,
-  getTicketingEscalationPagination,
-  listTicketingInternal,
-} from "@/lib/services/communication/communication";
 
 const CollaborationSpvTable = () => {
   const router = useRouter();
@@ -71,11 +68,8 @@ const CollaborationSpvTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -139,11 +133,7 @@ const CollaborationSpvTable = () => {
 
   async function fetchData() {
     try {
-      const res = await getTicketingCollaborationPagination(
-        page - 1,
-        showData,
-        search
-      );
+      const res = await getTicketingCollaborationPagination(page - 1, showData, search);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -183,22 +173,11 @@ const CollaborationSpvTable = () => {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-56 text-sm">
-            <DropdownMenuRadioGroup
-              value={showData}
-              onValueChange={setShowData}
-            >
-              <DropdownMenuRadioItem value="10">
-                1 - 10 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="20">
-                1 - 20 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="25">
-                1 - 25 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="50">
-                1 - 50 Data
-              </DropdownMenuRadioItem>
+            <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+              <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -212,10 +191,7 @@ const CollaborationSpvTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -245,11 +221,7 @@ const CollaborationSpvTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx b/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx
index c6ef9dac..351d41fa 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/collaboration/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link, useRouter } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -23,16 +23,12 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Pertanyaan",
-    cell: ({ row }) => (
-      <span className="normal-case"> {row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
   },
   {
     accessorKey: "commentFromUserName",
     header: "CreateBy",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("commentFromUserName")}</span>,
   },
   {
     accessorKey: "Type",
@@ -46,10 +42,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdAt",
     header: "Waktu",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -68,9 +61,7 @@ const columns: ColumnDef<any>[] = [
         ? "bg-green-100 text-green-600" // Gaya untuk "Open"
         : "bg-red-100 text-red-600"; // Gaya untuk "Closed"
 
-      return (
-        <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
-      );
+      return <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>;
     },
   },
 
@@ -95,9 +86,7 @@ const columns: ColumnDef<any>[] = [
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem
               onClick={() =>
-                router.push(
-                  `/supervisor/communications/collaboration/detail/${row.original.id}`
-                )
+                router.push(`/supervisor/communications/collaboration/detail/${row.original.id}`)
               }
               className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center"
             >
diff --git a/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx b/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
index beef6fdc..03bdb24a 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/component/users-card.tsx
@@ -1,20 +1,18 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import Select, { MultiValue } from "react-select";
 
-import { Icon } from "@iconify/react/dist/iconify.js";
+import { stringify } from "querystring";
 import { useEffect, useState } from "react";
-import { Separator } from "@/components/ui/separator";
-import {
-  getCuratorUser,
-  saveCollaborationTeams,
-} from "@/lib/services/communication/communication";
+import { useParams } from "next/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Select, { MultiValue } from "react-select";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
+
 import { close, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
+import { getCuratorUser, saveCollaborationTeams } from "@/lib/services/communication/communication";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
 
 const assigneeOptions = [
   { value: "mahedi", label: "Mahedi Amin", image: "/images/avatar/av-1.svg" },
diff --git a/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx
index a923beff..fc76cc8e 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/collaboration/detail/[id]/page.tsx
@@ -1,8 +1,12 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
-import { useToast } from "@/components/ui/use-toast";
+
+import { stringify } from "querystring";
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
 import { close, loading } from "@/config/swal";
 import {
   deleteCollabDiscussion,
@@ -11,18 +15,13 @@ import {
   getTicketCollaborationTeams,
   saveCollabDiscussion,
 } from "@/lib/services/communication/communication";
-import {
-  getLocaleTimestamp,
-  htmlToString,
-  textEllipsis,
-} from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useParams } from "next/navigation";
-import { stringify } from "querystring";
-import { useEffect, useState } from "react";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
+import { getLocaleTimestamp, htmlToString, textEllipsis } from "@/lib/utils/globals";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+
 import UsersCard from "./component/users-card";
 
 export default function CollaborationPage() {
@@ -113,15 +112,10 @@ export default function CollaborationPage() {
               <div className="flex flex-col gap-1">
                 <div className="flex flex-row">
                   <p className="text-sm">
-                    <span className="font-semibold">
-                      {detailTickets?.commentFromUserName}
-                    </span>{" "}
+                    <span className="font-semibold">{detailTickets?.commentFromUserName}</span>{" "}
                     mengirimkan komentar untuk
                   </p>
-                  <a
-                    href={detailTickets?.feed?.permalink_url}
-                    className="font-weight-bold"
-                  >
+                  <a href={detailTickets?.feed?.permalink_url} className="font-weight-bold">
                     {textEllipsis(detailTickets?.feed?.message, 25)}
                   </a>
                 </div>
@@ -129,13 +123,9 @@ export default function CollaborationPage() {
                   {" "}
                   {`${new Date(detailTickets?.createdAt).getDate()}-${
                     new Date(detailTickets?.createdAt).getMonth() + 1
-                  }-${new Date(
+                  }-${new Date(detailTickets?.createdAt).getFullYear()} ${new Date(
                     detailTickets?.createdAt
-                  ).getFullYear()} ${new Date(
-                    detailTickets?.createdAt
-                  ).getHours()}:${new Date(
-                    detailTickets?.createdAt
-                  ).getMinutes()}`}
+                  ).getHours()}:${new Date(detailTickets?.createdAt).getMinutes()}`}
                 </p>
               </div>
             </div>
@@ -153,12 +143,8 @@ export default function CollaborationPage() {
                       <Icon icon="qlementine-icons:user-16" width={36} />
                       <div className="flex flex-col w-full">
                         <div className="flex justify-between items-center">
-                          <p className="text-sm font-semibold">
-                            {data?.messageFrom?.fullname}
-                          </p>
-                          <p className="text-xs">
-                            {getLocaleTimestamp(new Date(data?.createdAt))}
-                          </p>
+                          <p className="text-sm font-semibold">{data?.messageFrom?.fullname}</p>
+                          <p className="text-xs">{getLocaleTimestamp(new Date(data?.createdAt))}</p>
                         </div>
                         <div className="flex justify-between items-center">
                           <p className="text-sm">{data?.message}</p>
@@ -178,10 +164,7 @@ export default function CollaborationPage() {
                 <p>Belum Ada Tanggapan</p>
               )}
             </div>
-            <Textarea
-              value={replyValue}
-              onChange={(e) => setReplyValue(e.target.value)}
-            />
+            <Textarea value={replyValue} onChange={(e) => setReplyValue(e.target.value)} />
             <div className="flex justify-end py-3">
               <Button
                 className="w-fit"
diff --git a/src/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx
index 18a75f25..7a34f100 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/collaboration/page.tsx
@@ -1,7 +1,9 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
-import { Plus, PlusIcon } from "lucide-react";
 import { Link } from "@/i18n/navigation";
+import { Plus, PlusIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import CollaborationSpvTable from "./components/collabroation-table";
 
 const FaqPage = async () => {
diff --git a/src/app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx b/src/app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx
index 40f22a9c..7373fa5c 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/contact/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -23,18 +23,14 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Nama",
-    cell: ({ row }) => (
-      <span className="normal-case"> {row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
   },
   {
     accessorKey: "phoneNumber",
     header: "No.Telp",
     cell: ({ row }) => {
       const createdBy = row.original.createdBy; // Akses properti category
-      return (
-        <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
-      );
+      return <span className="normal-case">{createdBy?.fullname || "N/A"}</span>;
     },
   },
   {
@@ -49,10 +45,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdName",
     header: "Admin",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
diff --git a/src/app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx b/src/app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx
index eb9ce5ed..68c08174 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/contact/components/contact-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,17 @@ import {
   TrendingUp,
   UploadIcon,
 } from "lucide-react";
+import { Card } from "nextra-theme-docs";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listTicketingInternal } from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,21 +49,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
 import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import { listTicketingInternal } from "@/lib/services/communication/communication";
-import { Link } from "@/i18n/navigation";
-import { Card } from "nextra-theme-docs";
-import { CardContent } from "@/components/ui/card";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 
 const ContactTable = () => {
   const router = useRouter();
@@ -71,11 +68,8 @@ const ContactTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -88,9 +82,7 @@ const ContactTable = () => {
   const [search, setSearch] = React.useState<string>("");
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
-  const [activeCategory, setActiveCategory] = React.useState<string | null>(
-    null
-  );
+  const [activeCategory, setActiveCategory] = React.useState<string | null>(null);
 
   const roleId = getCookiesDecrypt("urie");
 
@@ -180,12 +172,7 @@ const ContactTable = () => {
 
   async function fetchData() {
     try {
-      const res = await listTicketingInternal(
-        page - 1,
-        Number(showData),
-        search,
-        activeCategory
-      );
+      const res = await listTicketingInternal(page - 1, Number(showData), search, activeCategory);
       const data = res?.data?.data;
       const contentData = data?.content || [];
       contentData.forEach((item: any, index: number) => {
@@ -227,9 +214,7 @@ const ContactTable = () => {
             onClick={() => setActiveCategory(category)}
           >
             <div className="flex flex-col gap-3 text-center py-5 w-[250px]">
-              <p className="text-3xl font-bold">
-                {index === 0 ? 34 : index === 1 ? 1 : 43}
-              </p>
+              <p className="text-3xl font-bold">{index === 0 ? 34 : index === 1 ? 1 : 43}</p>
               <p>{category}</p>
               <p className="text-blue-700">Lihat Kontak</p>
             </div>
@@ -246,10 +231,7 @@ const ContactTable = () => {
                     <TableHead key={header.id}>
                       {header.isPlaceholder
                         ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
+                        : flexRender(header.column.columnDef.header, header.getContext())}
                     </TableHead>
                   ))}
                 </TableRow>
@@ -265,31 +247,21 @@ const ContactTable = () => {
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )}
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                       </TableCell>
                     ))}
                   </TableRow>
                 ))
               ) : (
                 <TableRow>
-                  <TableCell
-                    colSpan={columns.length}
-                    className="h-24 text-center"
-                  >
+                  <TableCell colSpan={columns.length} className="h-24 text-center">
                     No results.
                   </TableCell>
                 </TableRow>
               )}
             </TableBody>
           </Table>
-          <TablePagination
-            table={table}
-            totalData={totalData}
-            totalPage={totalPage}
-          />
+          <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
         </div>
       )}
     </div>
diff --git a/src/app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx
index 2c986821..82d0010c 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/contact/create/page.tsx
@@ -1,5 +1,21 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useEffect, useState } from "react";
+import { Link, useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
+
+import { loading } from "@/config/swal";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListExperiences,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/lib/services/management-user/management-user";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -10,12 +26,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { Link, useRouter } from "@/i18n/navigation";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -23,16 +34,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { useEffect, useState } from "react";
-import {
-  AdministrationLevelList,
-  getListCompetencies,
-  getListExperiences,
-  saveUserInternal,
-  saveUserRolePlacements,
-} from "@/lib/services/management-user/management-user";
-import { loading } from "@/config/swal";
-import { Label } from "@/components/ui/label";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const FormSchema = z.object({
   name: z.string({
@@ -179,15 +181,9 @@ export default function AddContactForm() {
     });
   }
 
-  const handleSelectionChange = (
-    index: number,
-    type: "roleId" | "userLevelId",
-    value: string
-  ) => {
+  const handleSelectionChange = (index: number, type: "roleId" | "userLevelId", value: string) => {
     setPlacementRows((prevRows) =>
-      prevRows.map((row) =>
-        row.index === index ? { ...row, [type]: value } : row
-      )
+      prevRows.map((row) => (row.index === index ? { ...row, [type]: value } : row))
     );
   };
 
@@ -212,10 +208,7 @@ export default function AddContactForm() {
       <SiteBreadcrumb />
 
       <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
           <FormField
             control={form.control}
             name="email"
diff --git a/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx b/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx
index 47750807..a95bf270 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -23,18 +23,14 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Nama",
-    cell: ({ row }) => (
-      <span className="normal-case"> {row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
   },
   {
     accessorKey: "phoneNumber",
     header: "No.Telp",
     cell: ({ row }) => {
       const createdBy = row.original.createdBy; // Akses properti category
-      return (
-        <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
-      );
+      return <span className="normal-case">{createdBy?.fullname || "N/A"}</span>;
     },
   },
   {
@@ -49,10 +45,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdName",
     header: "Admin",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -66,10 +59,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "approver",
     header: "Approver",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -82,10 +72,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "contributor",
     header: "Contributor",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
diff --git a/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx b/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx
index 40b6b90b..b548c723 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/components/contact-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,17 @@ import {
   TrendingUp,
   UploadIcon,
 } from "lucide-react";
+import { Card } from "nextra-theme-docs";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listTicketingInternal } from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { CardContent } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,21 +49,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
 import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import { listTicketingInternal } from "@/lib/services/communication/communication";
-import { Link } from "@/i18n/navigation";
-import { Card } from "nextra-theme-docs";
-import { CardContent } from "@/components/ui/card";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 
 const ImportTable = () => {
   const router = useRouter();
@@ -71,11 +68,8 @@ const ImportTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -88,9 +82,7 @@ const ImportTable = () => {
   const [search, setSearch] = React.useState<string>("");
   const userId = getCookiesDecrypt("uie");
   const userLevelId = getCookiesDecrypt("ulie");
-  const [activeCategory, setActiveCategory] = React.useState<string | null>(
-    null
-  );
+  const [activeCategory, setActiveCategory] = React.useState<string | null>(null);
 
   const [selectedFile, setSelectedFile] = React.useState(null);
 
@@ -187,12 +179,7 @@ const ImportTable = () => {
 
   async function fetchData() {
     try {
-      const res = await listTicketingInternal(
-        page - 1,
-        Number(showData),
-        search,
-        activeCategory
-      );
+      const res = await listTicketingInternal(page - 1, Number(showData), search, activeCategory);
       const data = res?.data?.data;
       const contentData = data?.content || [];
       contentData.forEach((item: any, index: number) => {
@@ -234,10 +221,7 @@ const ImportTable = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 ))}
               </TableRow>
@@ -253,31 +237,21 @@ const ImportTable = () => {
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>
                   ))}
                 </TableRow>
               ))
             ) : (
               <TableRow>
-                <TableCell
-                  colSpan={columns.length}
-                  className="h-24 text-center"
-                >
+                <TableCell colSpan={columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
             )}
           </TableBody>
         </Table>
-        <TablePagination
-          table={table}
-          totalData={totalData}
-          totalPage={totalPage}
-        />
+        <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
       </div>
       <div className="my-3">
         <Link href="/supervisor/communications/contact">
diff --git a/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx
index 8f334f00..5d7a501f 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/contact/import-contact/page.tsx
@@ -1,7 +1,9 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/i18n/navigation";
 import { PlusIcon, User } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import ContactTable from "../components/contact-table";
 import ImportTable from "./components/contact-table";
 
diff --git a/src/app/[locale]/(protected)/supervisor/communications/contact/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/contact/page.tsx
index 6fa3742c..a956425d 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/contact/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/contact/page.tsx
@@ -1,7 +1,9 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/i18n/navigation";
 import { PlusIcon, User } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import InternalSpvTable from "../internal/components/internal-table";
 import ContactTable from "./components/contact-table";
 
diff --git a/src/app/[locale]/(protected)/supervisor/communications/escalation/detail/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/escalation/detail/[id]/page.tsx
index 196b3bf1..f3cde258 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/escalation/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/escalation/detail/[id]/page.tsx
@@ -1,11 +1,11 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
-import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
 import FormDetailEscalation from "@/components/features/form/communication/escalation-detail-form";
-import FormQuestionsForward from "@/components/features/form/communication/escalation-forward-form";
 import FormQuestionsDetail from "@/components/features/form/communication/escalation-detail-new-form";
+import FormQuestionsForward from "@/components/features/form/communication/escalation-forward-form";
+import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const EscalationDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/supervisor/communications/escalation/forward/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/escalation/forward/[id]/page.tsx
index 9d04333a..f86b6726 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/escalation/forward/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/escalation/forward/[id]/page.tsx
@@ -1,10 +1,10 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
-import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
 import FormDetailEscalation from "@/components/features/form/communication/escalation-detail-form";
 import FormQuestionsForward from "@/components/features/form/communication/escalation-forward-form";
+import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const EscalationForwardPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx b/src/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx
index 25416cb5..43beb1dd 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/forward/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -23,16 +23,12 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Pertanyaan",
-    cell: ({ row }) => (
-      <span className="normal-case"> {row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
   },
   {
     accessorKey: "commentFromUserName",
     header: "Penerima",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("commentFromUserName")}</span>,
   },
   {
     accessorKey: "type",
@@ -46,10 +42,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdAt",
     header: "Waktu",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -68,9 +61,7 @@ const columns: ColumnDef<any>[] = [
         ? "bg-green-100 text-green-600" // Gaya untuk "Open"
         : "bg-red-100 text-red-600"; // Gaya untuk "Closed"
 
-      return (
-        <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
-      );
+      return <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>;
     },
   },
 
@@ -92,9 +83,7 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link
-              href={`/supervisor/communications/escalation/detail/${row.original.id}`}
-            >
+            <Link href={`/supervisor/communications/escalation/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
diff --git a/src/app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx b/src/app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx
index 67fc03f5..ea9f840b 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/forward/components/escalation-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,18 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import {
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -47,21 +48,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
-import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import {
-  getTicketingEscalationPagination,
-  listTicketingInternal,
-} from "@/lib/services/communication/communication";
 
 const EscalationTable = () => {
   const router = useRouter();
@@ -70,11 +67,8 @@ const EscalationTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -142,11 +136,7 @@ const EscalationTable = () => {
 
   async function fetchData() {
     try {
-      const res = await getTicketingEscalationPagination(
-        page - 1,
-        Number(showData),
-        search
-      );
+      const res = await getTicketingEscalationPagination(page - 1, Number(showData), search);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -192,22 +182,11 @@ const EscalationTable = () => {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-56 text-sm">
-            <DropdownMenuRadioGroup
-              value={showData}
-              onValueChange={setShowData}
-            >
-              <DropdownMenuRadioItem value="10">
-                1 - 10 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="20">
-                1 - 20 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="25">
-                1 - 25 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="50">
-                1 - 50 Data
-              </DropdownMenuRadioItem>
+            <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+              <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -220,10 +199,7 @@ const EscalationTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -253,11 +229,7 @@ const EscalationTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx
index 5c9ea385..eee28904 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/forward/detail/[id]/page.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
-import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
 import FormDetailEscalation from "@/components/features/form/communication/escalation-detail-form";
+import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const EscalationDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/supervisor/communications/forward/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/forward/page.tsx
index e63c093c..691a6ac6 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/forward/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/forward/page.tsx
@@ -1,7 +1,9 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import EscalationTable from "./components/escalation-table";
 
 const FaqPage = async () => {
diff --git a/src/app/[locale]/(protected)/supervisor/communications/internal/components/columns.tsx b/src/app/[locale]/(protected)/supervisor/communications/internal/components/columns.tsx
index ff9bc011..77128a5e 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/internal/components/columns.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/internal/components/columns.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link } from "@/i18n/navigation";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -23,18 +23,14 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Pertanyaan",
-    cell: ({ row }) => (
-      <span className="normal-case"> {row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case"> {row.getValue("title")}</span>,
   },
   {
     accessorKey: "createdBy",
     header: "Pengirim",
     cell: ({ row }) => {
       const createdBy = row.original.createdBy; // Akses properti category
-      return (
-        <span className="normal-case">{createdBy?.fullname || "N/A"}</span>
-      );
+      return <span className="normal-case">{createdBy?.fullname || "N/A"}</span>;
     },
   },
   {
@@ -49,10 +45,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdAt",
     header: "Waktu",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -79,17 +72,13 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link
-              href={`/supervisor/communications/internal/detail/${row.original.id}`}
-            >
+            <Link href={`/supervisor/communications/internal/detail/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <Eye className="w-4 h-4 me-1.5" />
                 View
               </DropdownMenuItem>
             </Link>
-            <Link
-              href={`/supervisor/communications/internal/update/${row.original.id}`}
-            >
+            <Link href={`/supervisor/communications/internal/update/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <SquarePen className="w-4 h-4 me-1.5" />
                 Edit
diff --git a/src/app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx b/src/app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx
index f3b042ef..235341ef 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/internal/components/internal-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -37,7 +28,15 @@ import {
   TrendingUp,
   UploadIcon,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { listTicketingInternal } from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -48,19 +47,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./columns";
 import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import { listTicketingInternal } from "@/lib/services/communication/communication";
-import { Link } from "@/i18n/navigation";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./columns";
 
 const InternalSpvTable = () => {
   const router = useRouter();
@@ -69,11 +66,8 @@ const InternalSpvTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -143,11 +137,7 @@ const InternalSpvTable = () => {
 
   async function fetchData() {
     try {
-      const res = await listTicketingInternal(
-        page - 1,
-        Number(showData),
-        search
-      );
+      const res = await listTicketingInternal(page - 1, Number(showData), search);
       const data = res?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -190,22 +180,11 @@ const InternalSpvTable = () => {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-56 text-sm">
-            <DropdownMenuRadioGroup
-              value={showData}
-              onValueChange={setShowData}
-            >
-              <DropdownMenuRadioItem value="10">
-                1 - 10 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="20">
-                1 - 20 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="25">
-                1 - 25 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="50">
-                1 - 50 Data
-              </DropdownMenuRadioItem>
+            <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+              <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -218,10 +197,7 @@ const InternalSpvTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -251,11 +227,7 @@ const InternalSpvTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx
index 0bddd866..c7ed5283 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/internal/detail/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const InternalDetailPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/supervisor/communications/internal/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/internal/page.tsx
index 24cf3275..fbe33c0a 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/internal/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/internal/page.tsx
@@ -1,7 +1,9 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
 import { Link } from "@/i18n/navigation";
 import { PlusIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import InternalSpvTable from "./components/internal-table";
 
 const FaqPage = async () => {
diff --git a/src/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx
index 0617a398..f9da911c 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/internal/update/[id]/page.tsx
@@ -1,9 +1,9 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
 import FormEditInternal from "@/components/features/form/communication/internal-edit-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 
 const InternalUpdatePage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/columns.tsx b/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/columns.tsx
index 68ac4a3f..fb2b4fb1 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/columns.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/columns.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
+import { Link, usePathname, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
+import { format } from "date-fns";
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteQuestion } from "@/lib/services/communication/communication";
+import { deleteDataFAQ } from "@/lib/services/settings/settings";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { format } from "date-fns";
-import { Link, usePathname, useRouter } from "@/i18n/navigation";
 import { useToast } from "@/components/ui/use-toast";
-import { deleteDataFAQ } from "@/lib/services/settings/settings";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { deleteQuestion } from "@/lib/services/communication/communication";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -28,16 +28,12 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "message",
     header: "Pertanyaan",
-    cell: ({ row }) => (
-      <span className="normal-case"> {row.getValue("message")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case"> {row.getValue("message")}</span>,
   },
   {
     accessorKey: "commentFromUserName",
     header: "Penerima",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("commentFromUserName")}</span>,
   },
   {
     accessorKey: "type",
@@ -51,10 +47,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdAt",
     header: "Waktu",
     cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
 
       const formattedDate =
         createdAt && !isNaN(new Date(createdAt).getTime())
@@ -69,13 +62,9 @@ const columns: ColumnDef<any>[] = [
     cell: ({ row }) => {
       const isActive = row.getValue("isActive") as boolean;
       const status = isActive ? "Open" : "Closed";
-      const statusStyles = isActive
-        ? "bg-green-100 text-green-600"
-        : "bg-red-100 text-red-600";
+      const statusStyles = isActive ? "bg-green-100 text-green-600" : "bg-red-100 text-red-600";
 
-      return (
-        <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
-      );
+      return <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>;
     },
   },
 
@@ -135,16 +124,12 @@ const columns: ColumnDef<any>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
-            <Link
-              href={`/supervisor/communications/questions/reply/${row?.original?.id}`}
-            >
+            <Link href={`/supervisor/communications/questions/reply/${row?.original?.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center">
                 Jawab
               </DropdownMenuItem>
             </Link>
-            <Link
-              href={`/supervisor/communications/escalation/forward/${row?.original?.id}`}
-            >
+            <Link href={`/supervisor/communications/escalation/forward/${row?.original?.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center">
                 Bantuan
               </DropdownMenuItem>
diff --git a/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx b/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx
index 6107638d..80b20a12 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/components/questions-table.tsx
@@ -1,30 +1,21 @@
 "use client";
 
 import * as React from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +27,19 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import {
+  getQuestionPagination,
+  getTicketingEscalationPagination,
+  listTicketingInternal,
+} from "@/lib/services/communication/communication";
+import { listDataAudio, listDataImage, listDataVideo } from "@/lib/services/content/content";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -47,23 +50,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useParams, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
-import {
-  listDataAudio,
-  listDataImage,
-  listDataVideo,
-} from "@/lib/services/content/content";
-import {
-  getQuestionPagination,
-  getTicketingEscalationPagination,
-  listTicketingInternal,
-} from "@/lib/services/communication/communication";
-import { usePathname, useRouter } from "@/i18n/navigation";
 
 interface statisticType {
   incomingTotal: number;
@@ -71,9 +68,7 @@ interface statisticType {
   todayIncomingTotal: number;
 }
 
-const QuestionsTable = (props: {
-  statisticData: (data: statisticType) => void;
-}) => {
+const QuestionsTable = (props: { statisticData: (data: statisticType) => void }) => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -83,11 +78,8 @@ const QuestionsTable = (props: {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [showData, setShowData] = React.useState("10");
 
@@ -165,32 +157,27 @@ const QuestionsTable = (props: {
       title === "comment"
         ? "1"
         : title === "facebook"
-        ? "2"
-        : title === "instagram"
-        ? "3"
-        : title === "x"
-        ? "4"
-        : title === "youtube"
-        ? "5"
-        : title === "emergency"
-        ? "6"
-        : title === "email"
-        ? "7"
-        : title === "inbox"
-        ? "8"
-        : title === "whatsapp"
-        ? "9"
-        : title === "tiktok"
-        ? "10"
-        : "";
+          ? "2"
+          : title === "instagram"
+            ? "3"
+            : title === "x"
+              ? "4"
+              : title === "youtube"
+                ? "5"
+                : title === "emergency"
+                  ? "6"
+                  : title === "email"
+                    ? "7"
+                    : title === "inbox"
+                      ? "8"
+                      : title === "whatsapp"
+                        ? "9"
+                        : title === "tiktok"
+                          ? "10"
+                          : "";
 
     try {
-      const res = await getQuestionPagination(
-        search,
-        page - 1,
-        typeNow,
-        showData
-      );
+      const res = await getQuestionPagination(search, page - 1, typeNow, showData);
       const data = res?.data?.data;
       const contentData = data?.page?.content;
       console.log("contentDatassss : ", data);
@@ -213,12 +200,12 @@ const QuestionsTable = (props: {
         {title == "all"
           ? "Pertanyaan Masuk"
           : title === "inbox"
-          ? "Pesan Masuk"
-          : title == "comment"
-          ? "Komentar Konten"
-          : title === "emergency"
-          ? "Emergency Issue"
-          : title}{" "}
+            ? "Pesan Masuk"
+            : title == "comment"
+              ? "Komentar Konten"
+              : title === "emergency"
+                ? "Emergency Issue"
+                : title}{" "}
         <Badge color="secondary" className="text-xl font-normal">
           {totalData}
         </Badge>
@@ -247,22 +234,11 @@ const QuestionsTable = (props: {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-56 text-sm">
-            <DropdownMenuRadioGroup
-              value={showData}
-              onValueChange={setShowData}
-            >
-              <DropdownMenuRadioItem value="10">
-                1 - 10 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="20">
-                1 - 20 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="25">
-                1 - 25 Data
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="50">
-                1 - 50 Data
-              </DropdownMenuRadioItem>
+            <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+              <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
             </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -275,10 +251,7 @@ const QuestionsTable = (props: {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -308,11 +281,7 @@ const QuestionsTable = (props: {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
index 9f026abb..961504b9 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/questions/[title]/page.tsx
@@ -1,9 +1,12 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { useState } from "react";
 import { Link } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
+
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import QuestionsTable from "./components/questions-table";
-import { useState } from "react";
 
 interface statisticType {
   incomingTotal: number;
@@ -52,11 +55,7 @@ export default function Questions() {
                 href="/supervisor/communications/questions/emergency"
                 className="flex items-center gap-3"
               >
-                <Icon
-                  icon="material-symbols:emergency-home-rounded"
-                  width={24}
-                  color="#2563eb"
-                />
+                <Icon icon="material-symbols:emergency-home-rounded" width={24} color="#2563eb" />
                 Emergency Issue
               </Link>
               <Link
@@ -83,11 +82,7 @@ export default function Questions() {
                 href="/supervisor/communications/questions/instagram"
                 className="flex items-center gap-3"
               >
-                <Icon
-                  icon="ant-design:instagram-filled"
-                  width={24}
-                  color="#2563eb"
-                />
+                <Icon icon="ant-design:instagram-filled" width={24} color="#2563eb" />
                 Instagram
               </Link>
               <Link
@@ -108,22 +103,14 @@ export default function Questions() {
                 href="/supervisor/communications/questions/inbox"
                 className="flex items-center gap-3"
               >
-                <Icon
-                  icon="material-symbols:inbox"
-                  width={24}
-                  color="#2563eb"
-                />
+                <Icon icon="material-symbols:inbox" width={24} color="#2563eb" />
                 Pesan Masuk
               </Link>
               <Link
                 href="/supervisor/communications/questions/comment"
                 className="flex items-center gap-3"
               >
-                <Icon
-                  icon="material-symbols-light:comment-rounded"
-                  width={24}
-                  color="#2563eb"
-                />
+                <Icon icon="material-symbols-light:comment-rounded" width={24} color="#2563eb" />
                 Komentar Konten
               </Link>
             </div>
diff --git a/src/app/[locale]/(protected)/supervisor/communications/questions/components/column.tsx b/src/app/[locale]/(protected)/supervisor/communications/questions/components/column.tsx
index 4055cb28..0e379e10 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/questions/components/column.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/questions/components/column.tsx
@@ -1,24 +1,16 @@
-
 import * as React from "react";
-import {
-  ColumnDef,
-} from "@tanstack/react-table";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
 
-import {
-  Eye,
-  MoreVertical,
-  SquarePen,
-  Trash2,
-} from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -73,4 +65,4 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-export default columns;
\ No newline at end of file
+export default columns;
diff --git a/src/app/[locale]/(protected)/supervisor/communications/questions/components/table.tsx b/src/app/[locale]/(protected)/supervisor/communications/questions/components/table.tsx
index 2b4077f6..db6bfec3 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/questions/components/table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/questions/components/table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,12 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { getFaqList } from "@/lib/services/master/faq";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,10 +40,16 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
-import { getFaqList } from "@/lib/services/master/faq";
+
 import columns from "./column";
 
 const FaqTable = () => {
@@ -58,11 +59,8 @@ const FaqTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -94,11 +92,11 @@ const FaqTable = () => {
   });
 
   React.useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
     if (pageFromUrl) {
       setPage(Number(pageFromUrl));
     }
-  }, [searchParams]); 
+  }, [searchParams]);
 
   React.useEffect(() => {
     fetchData();
@@ -140,9 +138,7 @@ const FaqTable = () => {
         <div className="flex-none">
           <Input
             placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
+            value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
               table.getColumn("status")?.setFilterValue(event.target.value)
             }
@@ -158,10 +154,7 @@ const FaqTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -191,7 +184,12 @@ const FaqTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination table={table} totalData={totalData} totalPage={totalPage} visiblePageCount={5} />
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+        visiblePageCount={5}
+      />
     </div>
   );
 };
diff --git a/src/app/[locale]/(protected)/supervisor/communications/questions/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/questions/page.tsx
index b8c4d01e..5fe4d932 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/questions/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/questions/page.tsx
@@ -1,35 +1,32 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import FaqTable from "./components/table";
-import { Button } from "@/components/ui/button";
 import { Plus } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import FaqTable from "./components/table";
+
 const FaqPage = async () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
         <Card>
-            <CardHeader className="border-b border-solid border-default-200 mb-6">
-                <CardTitle>
-                    <div className="flex items-center">
-                        <div className="flex-1 text-xl font-medium text-default-900">
-                        FAQ Data
-                        </div>
-                        <div className="flex-none">
-                        <Button
-                            fullWidth
-                            size="md"
-                        >
-                            <Plus className="w-6 h-6 me-1.5"/>
-                            New FAQ
-                        </Button>
-                        </div>
-                    </div>
-                </CardTitle>
-            </CardHeader>
-            <CardContent className="p-0">
-                <FaqTable />
+          <CardHeader className="border-b border-solid border-default-200 mb-6">
+            <CardTitle>
+              <div className="flex items-center">
+                <div className="flex-1 text-xl font-medium text-default-900">FAQ Data</div>
+                <div className="flex-none">
+                  <Button fullWidth size="md">
+                    <Plus className="w-6 h-6 me-1.5" />
+                    New FAQ
+                  </Button>
+                </div>
+              </div>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <FaqTable />
           </CardContent>
         </Card>
       </div>
diff --git a/src/app/[locale]/(protected)/supervisor/communications/questions/reply/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/questions/reply/[id]/page.tsx
index 0cdecefd..3f2f8c5e 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/questions/reply/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/questions/reply/[id]/page.tsx
@@ -1,10 +1,10 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
-import FormDetailTicketing from "@/components/features/form/ticketing/ticketing-detail-form";
 import FormQuestionsReply from "@/components/features/form/communication/questions-reply-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
+import FormDetailTicketing from "@/components/features/form/ticketing/ticketing-detail-form";
 
 const QuestionsReplyPage = async () => {
   return (
diff --git a/src/app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx b/src/app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx
index e529245b..50cabebf 100644
--- a/src/app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/communications/web-chat/page.tsx
@@ -1,9 +1,10 @@
 "use client";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+
 import { useState } from "react";
+import { Search } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -13,8 +14,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Search } from "lucide-react";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const messages = [
   { name: "Miles Esther", initials: "ME", time: "06.00" },
@@ -46,9 +48,7 @@ const WebChatPage = () => {
                   </DialogTrigger>
                   <DialogContent className="max-w-[350px] bg-black text-white rounded-lg p-4">
                     <DialogHeader>
-                      <DialogTitle className="text-lg font-bold text-white">
-                        New Chat
-                      </DialogTitle>
+                      <DialogTitle className="text-lg font-bold text-white">New Chat</DialogTitle>
                     </DialogHeader>
                     <div className="relative">
                       <Search
@@ -64,25 +64,19 @@ const WebChatPage = () => {
                       <p className="text-sm font-semibold">+ Group Chat</p>
                     </div>
                     <div className="mt-4">
-                      <p className="text-sm text-gray-400">
-                        Frequently contacted
-                      </p>
+                      <p className="text-sm text-gray-400">Frequently contacted</p>
                       <div className="mt-2 space-y-2">
                         <div className="flex items-center gap-3">
                           <div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
                             ME
                           </div>
-                          <span className="text-sm font-medium">
-                            Miles Esther
-                          </span>
+                          <span className="text-sm font-medium">Miles Esther</span>
                         </div>
                         <div className="flex items-center gap-3">
                           <div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
                             HA
                           </div>
-                          <span className="text-sm font-medium">
-                            Henry Arthur
-                          </span>
+                          <span className="text-sm font-medium">Henry Arthur</span>
                         </div>
                       </div>
                     </div>
@@ -106,8 +100,8 @@ const WebChatPage = () => {
                         <div>
                           <p className="font-bold text-lg">{msg.name}</p>
                           <p className="text-gray-600 text-sm">
-                            ✅ Hallo, untuk patroli hari ini sudah bisa di akses
-                            di daily tasks, silahkan anda periksa
+                            ✅ Hallo, untuk patroli hari ini sudah bisa di akses di daily tasks,
+                            silahkan anda periksa
                           </p>
                         </div>
                       </div>
@@ -128,10 +122,7 @@ const WebChatPage = () => {
               <CardContent className="p-0 flex flex-col h-full">
                 {/* Header Chat */}
                 <div className="flex items-center bg-black text-white p-4">
-                  <button
-                    className="mr-4 text-white text-xl"
-                    onClick={() => setSelectedChat(null)}
-                  >
+                  <button className="mr-4 text-white text-xl" onClick={() => setSelectedChat(null)}>
                     ←
                   </button>
                   <div className="flex items-center gap-4">
@@ -149,8 +140,8 @@ const WebChatPage = () => {
                   {/* Pesan masuk */}
                   <div className="flex items-start mb-4">
                     <div className="bg-white p-3 rounded-lg shadow max-w-xs">
-                      Hallo, untuk patroli hari ini sudah bisa di akses di daily
-                      tasks, silahkan anda periksa
+                      Hallo, untuk patroli hari ini sudah bisa di akses di daily tasks, silahkan
+                      anda periksa
                     </div>
                     <p className="text-gray-500 text-xs ml-2">06.00</p>
                   </div>
@@ -174,16 +165,9 @@ const WebChatPage = () => {
 
                 {/* Input Chat */}
                 <div className="flex items-center p-4 bg-black">
-                  <Button className="bg-white text-black p-2 rounded-full mr-2">
-                    +
-                  </Button>
-                  <Input
-                    placeholder="Tulis pesan..."
-                    className="flex-1 rounded-lg"
-                  />
-                  <Button className="ml-2 bg-white text-black p-2 rounded-full">
-                    🎤
-                  </Button>
+                  <Button className="bg-white text-black p-2 rounded-full mr-2">+</Button>
+                  <Input placeholder="Tulis pesan..." className="flex-1 rounded-lg" />
+                  <Button className="ml-2 bg-white text-black p-2 rounded-full">🎤</Button>
                 </div>
               </CardContent>
             </Card>
diff --git a/src/app/[locale]/(protected)/supervisor/faq/components/column.tsx b/src/app/[locale]/(protected)/supervisor/faq/components/column.tsx
index 9ed3cfa8..627b22fc 100644
--- a/src/app/[locale]/(protected)/supervisor/faq/components/column.tsx
+++ b/src/app/[locale]/(protected)/supervisor/faq/components/column.tsx
@@ -1,23 +1,16 @@
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-
-import { Link, useRouter } from "@/i18n/navigation";
 import { error } from "@/config/swal";
 import { deleteCategory, deleteDataFAQ } from "@/lib/services/settings/settings";
+import { htmlToString } from "@/lib/utils/globals";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
 import { useToast } from "@/components/ui/use-toast";
 
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-import { htmlToString } from "@/lib/utils/globals";
 import EditSpvFAQModal from "./edit";
 
 const columns: ColumnDef<any>[] = [
@@ -31,19 +24,13 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "question",
     header: "Pertanyaan",
     cell: ({ row }) => (
-      <span className="normal-case">
-        {htmlToString(row.getValue("question"))}
-      </span>
+      <span className="normal-case">{htmlToString(row.getValue("question"))}</span>
     ),
   },
   {
     accessorKey: "answer",
     header: "Answer",
-    cell: ({ row }) => (
-      <span className="normal-case">
-        {htmlToString(row.getValue("answer"))}
-      </span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{htmlToString(row.getValue("answer"))}</span>,
   },
 
   {
diff --git a/src/app/[locale]/(protected)/supervisor/faq/components/create.tsx b/src/app/[locale]/(protected)/supervisor/faq/components/create.tsx
index f0626b42..1379f5c9 100644
--- a/src/app/[locale]/(protected)/supervisor/faq/components/create.tsx
+++ b/src/app/[locale]/(protected)/supervisor/faq/components/create.tsx
@@ -1,5 +1,14 @@
 "use client";
 
+import { stringify } from "querystring";
+import { useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { getUserRoles, postCategory, postDataFAQ } from "@/lib/services/settings/settings";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -9,9 +18,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -20,19 +26,9 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
-
-import {
-  getUserRoles,
-  postCategory,
-  postDataFAQ,
-} from "@/lib/services/settings/settings";
-import { useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
 
 const FormSchema = z.object({
   answer: z.string({
@@ -81,9 +77,7 @@ export default function CreateSpvFAQModal() {
   });
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
-  );
+  const isAllTargetChecked = publishToList.every((item) => target?.includes(item.id));
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     const request = {
@@ -119,10 +113,7 @@ export default function CreateSpvFAQModal() {
           <DialogTitle>Tambah FAQ</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="publishTo"
@@ -145,9 +136,7 @@ export default function CreateSpvFAQModal() {
                         <FormControl>
                           <RadioGroupItem value="international" />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          Internasional
-                        </FormLabel>
+                        <FormLabel className="font-normal">Internasional</FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -185,12 +174,7 @@ export default function CreateSpvFAQModal() {
               )}
             />
             <DialogFooter>
-              <Button
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
+              <Button type="submit" color="primary" size="md" className="text-xs">
                 Tambah FAQ
               </Button>
             </DialogFooter>
diff --git a/src/app/[locale]/(protected)/supervisor/faq/components/edit.tsx b/src/app/[locale]/(protected)/supervisor/faq/components/edit.tsx
index 734b8b59..e5816c70 100644
--- a/src/app/[locale]/(protected)/supervisor/faq/components/edit.tsx
+++ b/src/app/[locale]/(protected)/supervisor/faq/components/edit.tsx
@@ -1,6 +1,28 @@
 "use client";
 
+import { stringify } from "querystring";
+import { Fragment, useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { id } from "date-fns/locale";
+import { CloudUpload } from "lucide-react";
+import { useDropzone } from "react-dropzone";
+import { useForm } from "react-hook-form";
+import { Upload } from "tus-js-client";
+import { z } from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import {
+  detailDataFAQ,
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+} from "@/lib/services/settings/settings";
+import { htmlToString } from "@/lib/utils/globals";
 import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -9,9 +31,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
@@ -21,28 +40,10 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { useRouter } from "@/i18n/navigation";
 import { Input } from "@/components/ui/input";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  detailDataFAQ,
-  getUserRoles,
-  postCategory,
-  postDataFAQ,
-} from "@/lib/services/settings/settings";
-import { Fragment, useEffect, useState } from "react";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
-import { stringify } from "querystring";
-import { useDropzone } from "react-dropzone";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { Upload } from "tus-js-client";
-import { id } from "date-fns/locale";
-import { htmlToString } from "@/lib/utils/globals";
 
 const FormSchema = z.object({
   answer: z.string({
@@ -79,10 +80,7 @@ const publishToList = [
   },
 ];
 
-export default function EditSpvFAQModal(props: {
-  id: string;
-  isDetail: boolean;
-}) {
+export default function EditSpvFAQModal(props: { id: string; isDetail: boolean }) {
   const { id, isDetail } = props;
   const router = useRouter();
   const { toast } = useToast();
@@ -102,10 +100,7 @@ export default function EditSpvFAQModal(props: {
     const data = res?.data?.data;
     form.setValue("question", htmlToString(data.question));
     form.setValue("answer", htmlToString(data.answer));
-    form.setValue(
-      "publishTo",
-      data.isInternational ? "international" : "wilayah"
-    );
+    form.setValue("publishTo", data.isInternational ? "international" : "wilayah");
   };
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
@@ -134,19 +129,14 @@ export default function EditSpvFAQModal(props: {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
-        <a className="hover:underline cursor-pointer">
-          {isDetail ? "Detail" : "Edit"}
-        </a>
+        <a className="hover:underline cursor-pointer">{isDetail ? "Detail" : "Edit"}</a>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
           <DialogTitle>{isDetail ? "Detail" : "Edit"} FAQ</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
-            onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
-          >
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
             <FormField
               control={form.control}
               name="publishTo"
@@ -169,9 +159,7 @@ export default function EditSpvFAQModal(props: {
                         <FormControl>
                           <RadioGroupItem value="international" />
                         </FormControl>
-                        <FormLabel className="font-normal">
-                          Internasional
-                        </FormLabel>
+                        <FormLabel className="font-normal">Internasional</FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -219,12 +207,7 @@ export default function EditSpvFAQModal(props: {
             />
             {!isDetail && (
               <DialogFooter>
-                <Button
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
+                <Button type="submit" color="primary" size="md" className="text-xs">
                   Edit FAQ
                 </Button>
               </DialogFooter>
diff --git a/src/app/[locale]/(protected)/supervisor/faq/components/table.tsx b/src/app/[locale]/(protected)/supervisor/faq/components/table.tsx
index 8734a14f..ab90da78 100644
--- a/src/app/[locale]/(protected)/supervisor/faq/components/table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/faq/components/table.tsx
@@ -1,40 +1,27 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
-
-import { listEnableCategory } from "@/lib/services/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
 import { close, loading } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { NewCampaignIcon } from "@/components/icon";
+import { listEnableCategory } from "@/lib/services/content/content";
 import { getCategories, getListFAQ } from "@/lib/services/settings/settings";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -43,6 +30,18 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+import { NewCampaignIcon } from "@/components/icon";
+
+import columns from "./column";
 import CreateSpvFAQModal from "./create";
 
 const SpvFAQTable = () => {
@@ -53,11 +52,8 @@ const SpvFAQTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -139,10 +135,7 @@ const SpvFAQTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
diff --git a/src/app/[locale]/(protected)/supervisor/faq/page.tsx b/src/app/[locale]/(protected)/supervisor/faq/page.tsx
index f8c112ee..70de2904 100644
--- a/src/app/[locale]/(protected)/supervisor/faq/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/faq/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import SpvFAQTable from "./components/table";
 
 const FaqPage = async () => {
diff --git a/src/app/[locale]/(protected)/supervisor/knowledge-base/create-category.tsx b/src/app/[locale]/(protected)/supervisor/knowledge-base/create-category.tsx
index 79631544..9eabf6a7 100644
--- a/src/app/[locale]/(protected)/supervisor/knowledge-base/create-category.tsx
+++ b/src/app/[locale]/(protected)/supervisor/knowledge-base/create-category.tsx
@@ -1,17 +1,25 @@
-"use client"
-import { Button } from "@/components/ui/button"
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { saveKnowledgeBaseCategory } from "@/lib/services/master/knowledge-base";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog"
-import { CalendarIcon, Plus } from "lucide-react";
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
+} from "@/components/ui/dialog";
 import {
   Form,
   FormControl,
@@ -19,43 +27,42 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { toast } from "@/components/ui/use-toast"
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import Image from "next/image";
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { useState } from "react";
-import { useTranslations } from "next-intl";
-import { saveKnowledgeBaseCategory } from "@/lib/services/master/knowledge-base";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/components/ui/use-toast";
 
 const FormSchema = z.object({
   name: z.string().min(2, {
     message: "Name must be at least 2 characters.",
   }),
-})
+});
 
-const CreateCategory = ({ onSuccess } : { onSuccess?: () => void } ) => {
-  const t = useTranslations("TodoApp")
+const CreateCategory = ({ onSuccess }: { onSuccess?: () => void }) => {
+  const t = useTranslations("TodoApp");
   const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
   const form = useForm<z.infer<typeof FormSchema>>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
       name: "",
     },
-  })
+  });
 
   async function save(data: any) {
     const reqData = {
-        name: data.name
-    }
+      name: data.name,
+    };
     const response = await saveKnowledgeBaseCategory(reqData);
     if (response?.error) {
-        return false;
+      return false;
     }
     toast({
       title: "Task created successfully.",
@@ -107,4 +114,4 @@ const CreateCategory = ({ onSuccess } : { onSuccess?: () => void } ) => {
   );
 };
 
-export default CreateCategory;
\ No newline at end of file
+export default CreateCategory;
diff --git a/src/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx b/src/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx
index c14ec451..b80eaa99 100644
--- a/src/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/knowledge-base/page.tsx
@@ -1,27 +1,29 @@
 "use client";
 
+import React from "react";
+import { Plus, Trash, Trash2 } from "lucide-react";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { deleteMedia } from "@/lib/services/content/content";
+import {
+  deleteKnowledgeBase,
+  getKnowledgeBaseCategoryList,
+  getKnowledgeBaseList,
+} from "@/lib/services/master/knowledge-base";
+import { error } from "@/lib/utils/swal";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import {
-  deleteKnowledgeBase,
-  getKnowledgeBaseCategoryList,
-  getKnowledgeBaseList,
-} from "@/lib/services/master/knowledge-base";
-import React from "react";
-import { Plus, Trash, Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import CreateCategory from "./create-category";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { deleteMedia } from "@/lib/services/content/content";
-import { error } from "@/lib/utils/swal";
 
 const KnowledgeBase = () => {
   const MySwal = withReactContent(Swal);
@@ -125,11 +127,7 @@ const KnowledgeBase = () => {
           </Card>
           <div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
             {categories?.map((cateogry: any, index: number) => (
-              <TabsContent
-                key={index}
-                value={`category-${index}`}
-                className="mt-0"
-              >
+              <TabsContent key={index} value={`category-${index}`} className="mt-0">
                 <Accordion type="single" collapsible className="w-full">
                   {questions?.map((question: any) => (
                     <AccordionItem
diff --git a/src/app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx b/src/app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx
index 69e9ec79..670a2969 100644
--- a/src/app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx
+++ b/src/app/[locale]/(protected)/supervisor/setting/feedback/components/feedback.tsx
@@ -1,10 +1,12 @@
 "use client";
+
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { MoreVertical } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Textarea } from "@/components/ui/textarea";
+
 const FeedbackForm = () => {
   const [region, setRegion] = useState("nasional");
   const [feedbackList, setFeedbackList] = useState<string[]>([
@@ -53,10 +55,7 @@ const FeedbackForm = () => {
             />
           </div>
 
-          <Button
-            onClick={handleAddFeedback}
-            className="bg-blue-600 text-white"
-          >
+          <Button onClick={handleAddFeedback} className="bg-blue-600 text-white">
             Tambah Feedback
           </Button>
         </div>
diff --git a/src/app/[locale]/(protected)/supervisor/setting/feedback/page.tsx b/src/app/[locale]/(protected)/supervisor/setting/feedback/page.tsx
index 5b456ff4..01030a6c 100644
--- a/src/app/[locale]/(protected)/supervisor/setting/feedback/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/setting/feedback/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import FeedbackForm from "./components/feedback";
 
 const FeedbackPage = async () => {
diff --git a/src/app/[locale]/(protected)/supervisor/setting/social-media/page.tsx b/src/app/[locale]/(protected)/supervisor/setting/social-media/page.tsx
index 12b9f53d..6c3c5e7d 100644
--- a/src/app/[locale]/(protected)/supervisor/setting/social-media/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/setting/social-media/page.tsx
@@ -1,7 +1,8 @@
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { Button } from "@/components/ui/button";
 import { FaFacebookF, FaGoogle } from "react-icons/fa";
 
+import { Button } from "@/components/ui/button";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const SocialMediaPage = async () => {
   return (
     <div className="space-y-4">
diff --git a/src/app/[locale]/(protected)/supervisor/ticketing/components/columns.tsx b/src/app/[locale]/(protected)/supervisor/ticketing/components/columns.tsx
index def813bb..4c4c8bd8 100644
--- a/src/app/[locale]/(protected)/supervisor/ticketing/components/columns.tsx
+++ b/src/app/[locale]/(protected)/supervisor/ticketing/components/columns.tsx
@@ -1,31 +1,22 @@
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
+import { CheckSquare2, Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 
-import {
-  CheckSquare2,
-  Eye,
-  MoreVertical,
-  SquarePen,
-  Trash2,
-} from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import { closeTicket, deleteTicket } from "@/lib/services/communication/communication";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { error } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Link } from "@/i18n/navigation";
-import {
-  closeTicket,
-  deleteTicket,
-} from "@/lib/services/communication/communication";
-import withReactContent from "sweetalert2-react-content";
-import { error } from "@/lib/utils/swal";
-import Swal from "sweetalert2";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -41,16 +32,12 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "title",
     header: "Title",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("title")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("title")}</span>,
   },
   {
     accessorKey: "commentFromUserName",
     header: "Sender",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("commentFromUserName")}</span>,
   },
   {
     accessorKey: "type",
@@ -72,9 +59,7 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "createdAt",
     header: "Tanggal Unggah ",
     cell: ({ row }) => (
-      <span className="whitespace-nowrap">
-        {formatDateToIndonesian(row.getValue("createdAt"))}
-      </span>
+      <span className="whitespace-nowrap">{formatDateToIndonesian(row.getValue("createdAt"))}</span>
     ),
   },
   {
@@ -90,11 +75,7 @@ const columns: ColumnDef<any>[] = [
       console.log(statusName);
       const statusStyles = statusColors[statusName] || "default";
       if (statusName) {
-        return (
-          <Badge className={cn("rounded-full px-5", statusStyles)}>
-            {statusName}{" "}
-          </Badge>
-        );
+        return <Badge className={cn("rounded-full px-5", statusStyles)}>{statusName} </Badge>;
       }
     },
   },
diff --git a/src/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx b/src/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx
index a81dad36..12e981f1 100644
--- a/src/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx
+++ b/src/app/[locale]/(protected)/supervisor/ticketing/components/table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,13 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -47,11 +43,16 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./columns";
 
 const TicketingTable = () => {
@@ -61,13 +62,10 @@ const TicketingTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
   const [search, setSearch] = React.useState("");
 
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [showData, setShowData] = React.useState("10");
 
   const [rowSelection, setRowSelection] = React.useState({});
@@ -164,22 +162,11 @@ const TicketingTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -193,10 +180,7 @@ const TicketingTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -226,11 +210,7 @@ const TicketingTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </>
   );
 };
diff --git a/src/app/[locale]/(protected)/supervisor/ticketing/detail/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/ticketing/detail/[id]/page.tsx
index e56886ec..f7ad4a9e 100644
--- a/src/app/[locale]/(protected)/supervisor/ticketing/detail/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/ticketing/detail/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 import FormDetailTicketing from "@/components/features/form/ticketing/ticketing-detail-form";
 
 const TicketingDetailPage = async () => {
diff --git a/src/app/[locale]/(protected)/supervisor/ticketing/page.tsx b/src/app/[locale]/(protected)/supervisor/ticketing/page.tsx
index 1dba420f..bc429be1 100644
--- a/src/app/[locale]/(protected)/supervisor/ticketing/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/ticketing/page.tsx
@@ -1,4 +1,5 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import TicketingTable from "./components/table";
 
 const TicketingPage = async () => {
@@ -6,10 +7,7 @@ const TicketingPage = async () => {
     <div>
       <SiteBreadcrumb />
 
-      <section
-        id="table"
-        className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5"
-      >
+      <section id="table" className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5">
         <div className="flex justify-between py-3">
           <p className="text-lg">Semua Ticket</p>
         </div>
diff --git a/src/app/[locale]/(protected)/supervisor/ticketing/update/[id]/page.tsx b/src/app/[locale]/(protected)/supervisor/ticketing/update/[id]/page.tsx
index 752de12a..a496c3bf 100644
--- a/src/app/[locale]/(protected)/supervisor/ticketing/update/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/supervisor/ticketing/update/[id]/page.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import FormTask from "@/components/features/form/task/task-form";
-import FormTaskDetail from "@/components/features/form/task/task-detail-form";
 import FormDetailInternal from "@/components/features/form/communication/internal-detail-form";
+import FormTaskDetail from "@/components/features/form/task/task-detail-form";
+import FormTask from "@/components/features/form/task/task-form";
 import FormDetailTicketing from "@/components/features/form/ticketing/ticketing-detail-form";
 import FormUpdateTicketing from "@/components/features/form/ticketing/ticketing-update-form";
 
diff --git a/src/app/[locale]/(protected)/table/basic-table/basic-table-head.tsx b/src/app/[locale]/(protected)/table/basic-table/basic-table-head.tsx
index 0257c2f0..4620536f 100644
--- a/src/app/[locale]/(protected)/table/basic-table/basic-table-head.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/basic-table-head.tsx
@@ -5,27 +5,26 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
+
 import { columns, tableData } from "./data";
+
 const BasicTableHead = () => {
   return (
     <Table>
       <TableHeader className="bg-default-200 dark:bg-default-300">
         <TableRow>
-          {
-            columns.map((column,index)=>(
-              <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
-            ))
-          }
+          {columns.map((column, index) => (
+            <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
+          ))}
         </TableRow>
       </TableHeader>
       <TableBody>
-        {tableData.map((row,index) => (
+        {tableData.map((row, index) => (
           <TableRow key={`table-data-${index}`}>
             <TableCell>{row.age}</TableCell>
             <TableCell>{row.first_name}</TableCell>
-            <TableCell>{row.last_name}
-            </TableCell>
+            <TableCell>{row.last_name}</TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -33,4 +32,4 @@ const BasicTableHead = () => {
   );
 };
 
-export default BasicTableHead;
\ No newline at end of file
+export default BasicTableHead;
diff --git a/src/app/[locale]/(protected)/table/basic-table/basic-table.tsx b/src/app/[locale]/(protected)/table/basic-table/basic-table.tsx
index e3c6a448..a3cd0373 100644
--- a/src/app/[locale]/(protected)/table/basic-table/basic-table.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/basic-table.tsx
@@ -5,27 +5,26 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
+
 import { columns, tableData } from "./data";
+
 const BasicTable = () => {
   return (
     <Table>
       <TableHeader>
         <TableRow>
-          {
-            columns.map((column,index)=>(
-              <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
-            ))
-          }
+          {columns.map((column, index) => (
+            <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
+          ))}
         </TableRow>
       </TableHeader>
       <TableBody>
-        {tableData.map((row,index) => (
+        {tableData.map((row, index) => (
           <TableRow key={`table-data-${index}`}>
             <TableCell>{row.age}</TableCell>
             <TableCell>{row.first_name}</TableCell>
             <TableCell>{row.last_name}</TableCell>
-      
           </TableRow>
         ))}
       </TableBody>
@@ -33,4 +32,4 @@ const BasicTable = () => {
   );
 };
 
-export default BasicTable;
\ No newline at end of file
+export default BasicTable;
diff --git a/src/app/[locale]/(protected)/table/basic-table/bordered-table.tsx b/src/app/[locale]/(protected)/table/basic-table/bordered-table.tsx
index ffdd3c28..7d7e7f7d 100644
--- a/src/app/[locale]/(protected)/table/basic-table/bordered-table.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/bordered-table.tsx
@@ -5,21 +5,23 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
+
 import { columns, tableData } from "./data";
+
 const BorderedTable = () => {
   return (
     <Table>
       <TableHeader>
         <TableRow>
-          {
-            columns.map((column, index) => (
-              <TableHead
-                key={`basic-table-column-${index}`}
-                className="border border-default-100 dark:border-default-300"
-              >{column.label}</TableHead>
-            ))
-          }
+          {columns.map((column, index) => (
+            <TableHead
+              key={`basic-table-column-${index}`}
+              className="border border-default-100 dark:border-default-300"
+            >
+              {column.label}
+            </TableHead>
+          ))}
         </TableRow>
       </TableHeader>
       <TableBody className="[&_tr:last-child]:border">
@@ -28,10 +30,15 @@ const BorderedTable = () => {
             key={`table-data-${index}`}
             className="border border-default-100 dark:border-default-300"
           >
-            <TableCell className="border border-default-100 dark:border-default-300">{row.age}</TableCell>
-            <TableCell className="border border-default-100 dark:border-default-300">{row.first_name}</TableCell>
-            <TableCell className="border border-default-100 dark:border-default-300">{row.last_name}</TableCell>
-
+            <TableCell className="border border-default-100 dark:border-default-300">
+              {row.age}
+            </TableCell>
+            <TableCell className="border border-default-100 dark:border-default-300">
+              {row.first_name}
+            </TableCell>
+            <TableCell className="border border-default-100 dark:border-default-300">
+              {row.last_name}
+            </TableCell>
           </TableRow>
         ))}
       </TableBody>
@@ -39,4 +46,4 @@ const BorderedTable = () => {
   );
 };
 
-export default BorderedTable;
\ No newline at end of file
+export default BorderedTable;
diff --git a/src/app/[locale]/(protected)/table/basic-table/borderless-table.tsx b/src/app/[locale]/(protected)/table/basic-table/borderless-table.tsx
index ec75984f..77902f31 100644
--- a/src/app/[locale]/(protected)/table/basic-table/borderless-table.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/borderless-table.tsx
@@ -5,29 +5,23 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
+
 import { columns, tableData } from "./data";
+
 const BorderlessTable = () => {
   return (
     <Table>
       <TableHeader>
         <TableRow className="border-none">
-          {
-            columns.map((column, index) => (
-              <TableHead
-                key={`basic-table-column-${index}`}>
-                {column.label}
-              </TableHead>
-            ))
-          }
+          {columns.map((column, index) => (
+            <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
+          ))}
         </TableRow>
       </TableHeader>
       <TableBody className="border-none">
         {tableData.map((row, index) => (
-          <TableRow
-            key={`table-data-${index}`}
-            className="border-none"
-          >
+          <TableRow key={`table-data-${index}`} className="border-none">
             <TableCell>{row.age}</TableCell>
             <TableCell>{row.first_name}</TableCell>
             <TableCell>{row.last_name}</TableCell>
@@ -38,4 +32,4 @@ const BorderlessTable = () => {
   );
 };
 
-export default BorderlessTable;
\ No newline at end of file
+export default BorderlessTable;
diff --git a/src/app/[locale]/(protected)/table/basic-table/data.ts b/src/app/[locale]/(protected)/table/basic-table/data.ts
index a86dbb41..bf5cc387 100644
--- a/src/app/[locale]/(protected)/table/basic-table/data.ts
+++ b/src/app/[locale]/(protected)/table/basic-table/data.ts
@@ -1,17 +1,17 @@
 interface ColumnsProps {
-  label: string
-  field: string
+  label: string;
+  field: string;
 }
 interface TableDataProps {
-  id: number
-  age: number
-  first_name: string
-  last_name: string
-  email: string
-  gender: string
-  phone: string
-  occuption: string
-  img: string
+  id: number;
+  age: number;
+  first_name: string;
+  last_name: string;
+  email: string;
+  gender: string;
+  phone: string;
+  occuption: string;
+  img: string;
 }
 
 export const columns: ColumnsProps[] = [
@@ -27,83 +27,85 @@ export const columns: ColumnsProps[] = [
   {
     label: "Email",
     field: "email",
-  }
+  },
 ];
 
-export const tableData: TableDataProps[] = [{
-  id: 1,
-  age: 82,
-  first_name: "Dorelle",
-  last_name: "Harling",
-  email: "dharling0@rediff.com",
-  gender: "Female",
-  phone: "232(152)707-0110",
-  occuption: "Financial Advisor",
-  img: "/images/users/user-1.jpg"
-},
-{
-  id: 2,
-  age: 89,
-  first_name: "Bendicty",
-  last_name: "Llewellin",
-  email: "bllewellin1@example.com",
-  gender: "Male",
-  phone: "420(169)218-1769",
-  occuption: "Marketing Assistant",
-  img: "/images/users/user-2.jpg"
-},
-{
-  id: 3,
-  age: 28,
-  first_name: "Remy",
-  last_name: "Carbry",
-  email: "rcarbry2@prlog.org",
-  gender: "Polygender",
-  phone: "86(958)204-4491",
-  occuption: "Mechanical Systems Engineer",
-  img: "/images/users/user-3.jpg"
-},
-{
-  id: 4,
-  age: 20,
-  first_name: "Bernardo",
-  last_name: "Hacun",
-  email: "bhacun3@xinhuanet.com",
-  gender: "Male",
-  phone: "86(974)709-5254",
-  occuption: "Research Assistant IV",
-  img: "/images/users/user-4.jpg"
-},
-{
-  id: 5,
-  age: 2,
-  first_name: "Emelia",
-  last_name: "Garstang",
-  email: "egarstang4@miitbeian.gov.cn",
-  gender: "Female",
-  phone: "55(644)175-6748",
-  occuption: "Business Systems Development Analyst",
-  img: "/images/users/user-5.jpg"
-},
-{
-  id: 6,
-  age: 98,
-  first_name: "Dian",
-  last_name: "Dopson",
-  email: "ddopson5@examiner.com",
-  gender: "Female",
-  phone: "51(186)560-8480",
-  occuption: "Cost Accountant",
-  img: "/images/users/user-6.jpg"
-},
-{
-  id: 7,
-  age: 17,
-  first_name: "Coretta",
-  last_name: "Ponter",
-  email: "cponter6@loc.gov",
-  gender: "Female",
-  phone: "1(941)734-6255",
-  occuption: "Budget/Accounting Analyst II",
-  img: "/images/users/user-1.jpg"
-}]
\ No newline at end of file
+export const tableData: TableDataProps[] = [
+  {
+    id: 1,
+    age: 82,
+    first_name: "Dorelle",
+    last_name: "Harling",
+    email: "dharling0@rediff.com",
+    gender: "Female",
+    phone: "232(152)707-0110",
+    occuption: "Financial Advisor",
+    img: "/images/users/user-1.jpg",
+  },
+  {
+    id: 2,
+    age: 89,
+    first_name: "Bendicty",
+    last_name: "Llewellin",
+    email: "bllewellin1@example.com",
+    gender: "Male",
+    phone: "420(169)218-1769",
+    occuption: "Marketing Assistant",
+    img: "/images/users/user-2.jpg",
+  },
+  {
+    id: 3,
+    age: 28,
+    first_name: "Remy",
+    last_name: "Carbry",
+    email: "rcarbry2@prlog.org",
+    gender: "Polygender",
+    phone: "86(958)204-4491",
+    occuption: "Mechanical Systems Engineer",
+    img: "/images/users/user-3.jpg",
+  },
+  {
+    id: 4,
+    age: 20,
+    first_name: "Bernardo",
+    last_name: "Hacun",
+    email: "bhacun3@xinhuanet.com",
+    gender: "Male",
+    phone: "86(974)709-5254",
+    occuption: "Research Assistant IV",
+    img: "/images/users/user-4.jpg",
+  },
+  {
+    id: 5,
+    age: 2,
+    first_name: "Emelia",
+    last_name: "Garstang",
+    email: "egarstang4@miitbeian.gov.cn",
+    gender: "Female",
+    phone: "55(644)175-6748",
+    occuption: "Business Systems Development Analyst",
+    img: "/images/users/user-5.jpg",
+  },
+  {
+    id: 6,
+    age: 98,
+    first_name: "Dian",
+    last_name: "Dopson",
+    email: "ddopson5@examiner.com",
+    gender: "Female",
+    phone: "51(186)560-8480",
+    occuption: "Cost Accountant",
+    img: "/images/users/user-6.jpg",
+  },
+  {
+    id: 7,
+    age: 17,
+    first_name: "Coretta",
+    last_name: "Ponter",
+    email: "cponter6@loc.gov",
+    gender: "Female",
+    phone: "1(941)734-6255",
+    occuption: "Budget/Accounting Analyst II",
+    img: "/images/users/user-1.jpg",
+  },
+];
diff --git a/src/app/[locale]/(protected)/table/basic-table/hoverable-table.tsx b/src/app/[locale]/(protected)/table/basic-table/hoverable-table.tsx
index 5498d95e..09c80ebe 100644
--- a/src/app/[locale]/(protected)/table/basic-table/hoverable-table.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/hoverable-table.tsx
@@ -5,25 +5,25 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
+
 import { columns, tableData } from "./data";
+
 const HoverableTable = () => {
   return (
     <Table>
       <TableHeader>
         <TableRow className="bg-default-200 dark:bg-default-300">
-          {
-            columns.map((column,index)=>(
-              <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
-            ))
-          }
+          {columns.map((column, index) => (
+            <TableHead key={`basic-table-column-${index}`}>{column.label}</TableHead>
+          ))}
         </TableRow>
       </TableHeader>
       <TableBody>
-        {tableData.map((row,index) => (
-          <TableRow 
-          key={`table-data-${index}`}
-          className="hover:bg-default-200 dark:hover:bg-default-300"
+        {tableData.map((row, index) => (
+          <TableRow
+            key={`table-data-${index}`}
+            className="hover:bg-default-200 dark:hover:bg-default-300"
           >
             <TableCell>{row.age}</TableCell>
             <TableCell>{row.first_name}</TableCell>
@@ -35,4 +35,4 @@ const HoverableTable = () => {
   );
 };
 
-export default HoverableTable;
\ No newline at end of file
+export default HoverableTable;
diff --git a/src/app/[locale]/(protected)/table/basic-table/layout.tsx b/src/app/[locale]/(protected)/table/basic-table/layout.tsx
index e0f8475b..487e1a6c 100644
--- a/src/app/[locale]/(protected)/table/basic-table/layout.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/layout.tsx
@@ -1,15 +1,11 @@
 import { Metadata } from "next";
 
-export const metadata:Metadata ={
-  title: 'Basic Table',
-  description: 'Basic Table'
-}
-const Layout = ({children}: {children: React.ReactNode}) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+export const metadata: Metadata = {
+  title: "Basic Table",
+  description: "Basic Table",
+};
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
 };
 
-export default Layout;
\ No newline at end of file
+export default Layout;
diff --git a/src/app/[locale]/(protected)/table/basic-table/page.tsx b/src/app/[locale]/(protected)/table/basic-table/page.tsx
index eb7d3256..b2e1ce11 100644
--- a/src/app/[locale]/(protected)/table/basic-table/page.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/page.tsx
@@ -1,11 +1,12 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 import BasicTable from "./basic-table";
 import BasicTableHead from "./basic-table-head";
 import BorderedTable from "./bordered-table";
 import BorderlessTable from "./borderless-table";
-import StripedRows from "./striped-rows";
 import HoverableTable from "./hoverable-table";
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import StripedRows from "./striped-rows";
 
 const BasicTablePage = () => {
   return (
@@ -65,4 +66,4 @@ const BasicTablePage = () => {
   );
 };
 
-export default BasicTablePage;
\ No newline at end of file
+export default BasicTablePage;
diff --git a/src/app/[locale]/(protected)/table/basic-table/striped-rows.tsx b/src/app/[locale]/(protected)/table/basic-table/striped-rows.tsx
index 1bf1f8d4..b93f8fa4 100644
--- a/src/app/[locale]/(protected)/table/basic-table/striped-rows.tsx
+++ b/src/app/[locale]/(protected)/table/basic-table/striped-rows.tsx
@@ -5,33 +5,34 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
+
 import { columns, tableData } from "./data";
+
 const StripedRows = () => {
   return (
     <Table>
       <TableHeader>
         <TableRow>
-          {
-            columns.map((column,index)=>(
-              <TableHead
-               key={`basic-table-column-${index}`}
-               className="bg-default-200 dark:bg-default-300"
-               >{column.label}</TableHead>
-            ))
-          }
+          {columns.map((column, index) => (
+            <TableHead
+              key={`basic-table-column-${index}`}
+              className="bg-default-200 dark:bg-default-300"
+            >
+              {column.label}
+            </TableHead>
+          ))}
         </TableRow>
       </TableHeader>
       <TableBody>
-        {tableData.map((row,index) => (
+        {tableData.map((row, index) => (
           <TableRow
-           key={`table-data-${index}`}
-           className="even:bg-default-200 dark:even:bg-default-300"
-           >
+            key={`table-data-${index}`}
+            className="even:bg-default-200 dark:even:bg-default-300"
+          >
             <TableCell>{row.age}</TableCell>
             <TableCell>{row.first_name}</TableCell>
             <TableCell>{row.last_name}</TableCell>
-      
           </TableRow>
         ))}
       </TableBody>
@@ -39,4 +40,4 @@ const StripedRows = () => {
   );
 };
 
-export default StripedRows;
\ No newline at end of file
+export default StripedRows;
diff --git a/src/app/[locale]/(protected)/table/react-table/example1/columns.tsx b/src/app/[locale]/(protected)/table/react-table/example1/columns.tsx
index 65481f91..3abbdedc 100644
--- a/src/app/[locale]/(protected)/table/react-table/example1/columns.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/example1/columns.tsx
@@ -1,24 +1,22 @@
-"use client"
+"use client";
 
-import {
-  ColumnDef,
-} from "@tanstack/react-table"
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
 
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils/utils"
 export type DataProps = {
-  id:string | number;
+  id: string | number;
   order: number;
   customer: {
     name: string;
@@ -29,15 +27,14 @@ export type DataProps = {
   amount: string;
   status: "paid" | "due" | "canceled";
   action: React.ReactNode;
-}
+};
 export const columns: ColumnDef<DataProps>[] = [
   {
     id: "select",
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
@@ -73,49 +70,37 @@ export const columns: ColumnDef<DataProps>[] = [
       return (
         <div className="font-medium text-card-foreground/80">
           <div className="flex gap-3 items-center">
-            <Avatar
-              className="rounded-full w-8 h-8 bg-transparent hover:bg-transparent shadow-none border-none"
-            >
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
+            <Avatar className="rounded-full w-8 h-8 bg-transparent hover:bg-transparent shadow-none border-none">
+              {user?.image ? <AvatarImage src={user.image} /> : <AvatarFallback>AB</AvatarFallback>}
             </Avatar>
             <span className="text-sm text-default-600 whitespace-nowrap">
               {user?.name ?? "Unknown User"}
             </span>
           </div>
         </div>
-      )
-    }
+      );
+    },
   },
   {
     accessorKey: "date",
     header: "Date",
     cell: ({ row }) => {
-      return (
-        <span>{row.getValue("date")}</span>
-      )
-    }
+      return <span>{row.getValue("date")}</span>;
+    },
   },
   {
     accessorKey: "quantity",
     header: "Quantity",
     cell: ({ row }) => {
-      return (
-        <span>{row.getValue("quantity")}</span>
-      )
-    }
+      return <span>{row.getValue("quantity")}</span>;
+    },
   },
   {
     accessorKey: "amount",
     header: "Amount",
     cell: ({ row }) => {
-      return (
-        <span>{row.getValue("amount")}</span>
-      )
-    }
+      return <span>{row.getValue("amount")}</span>;
+    },
   },
   {
     accessorKey: "status",
@@ -124,16 +109,12 @@ export const columns: ColumnDef<DataProps>[] = [
       const statusColors: Record<string, string> = {
         paid: "bg-success/20 text-success",
         due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive"
+        canceled: "bg-destructive/20 text-destructive",
       };
       const status = row.getValue<string>("status");
       const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge 
-        className={cn("rounded-full px-5",statusStyles)}
-        >{status} </Badge>
-      );
-    }
+      return <Badge className={cn("rounded-full px-5", statusStyles)}>{status} </Badge>;
+    },
   },
   {
     id: "actions",
@@ -159,12 +140,15 @@ export const columns: ColumnDef<DataProps>[] = [
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
               <SquarePen className="w-4 h-4 me-1.5" />
-              Edit</DropdownMenuItem>
+              Edit
+            </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
-              <Trash2 className="w-4 h-4 me-1.5" />Delete</DropdownMenuItem>
+              <Trash2 className="w-4 h-4 me-1.5" />
+              Delete
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
-      )
-    }
-  }
-]
\ No newline at end of file
+      );
+    },
+  },
+];
diff --git a/src/app/[locale]/(protected)/table/react-table/example1/index.tsx b/src/app/[locale]/(protected)/table/react-table/example1/index.tsx
index 2bf415c1..0b370bbf 100644
--- a/src/app/[locale]/(protected)/table/react-table/example1/index.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/example1/index.tsx
@@ -1,21 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
 
-} from "@tanstack/react-table"
-import { columns } from "./columns"
-import { Input } from "@/components/ui/input"
-
+import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -23,19 +21,17 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
 
-import { data } from "./data"
-import TablePagination from "./table-pagination"
+import { columns } from "./columns";
+import { data } from "./data";
+import TablePagination from "./table-pagination";
 
 const ExampleOne = () => {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
     data,
@@ -54,14 +50,12 @@ const ExampleOne = () => {
       columnVisibility,
       rowSelection,
     },
-  })
+  });
 
   return (
     <div className="w-full">
       <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl font-medium text-default-900">
-          Order Records
-        </div>
+        <div className="flex-1 text-xl font-medium text-default-900">Order Records</div>
         <div className="flex-none">
           <Input
             placeholder="Filter Status..."
@@ -83,12 +77,9 @@ const ExampleOne = () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
-                )
+                );
               })}
             </TableRow>
           ))}
@@ -96,26 +87,17 @@ const ExampleOne = () => {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
+              <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
               </TableRow>
             ))
           ) : (
             <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center"
-              >
+              <TableCell colSpan={columns.length} className="h-24 text-center">
                 No results.
               </TableCell>
             </TableRow>
@@ -124,6 +106,6 @@ const ExampleOne = () => {
       </Table>
       <TablePagination table={table} />
     </div>
-  )
-}
-export default ExampleOne;
\ No newline at end of file
+  );
+};
+export default ExampleOne;
diff --git a/src/app/[locale]/(protected)/table/react-table/example1/table-pagination.tsx b/src/app/[locale]/(protected)/table/react-table/example1/table-pagination.tsx
index ad78cfeb..f2154ee2 100644
--- a/src/app/[locale]/(protected)/table/react-table/example1/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/example1/table-pagination.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -19,9 +20,9 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
@@ -29,24 +30,23 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
             className="w-8 h-8"
-            variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
+            variant={table.getState().pagination.pageIndex === pageIndex ? "default" : "outline"}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/table/react-table/example2/columns.tsx b/src/app/[locale]/(protected)/table/react-table/example2/columns.tsx
index ee5319bc..06e7cbac 100644
--- a/src/app/[locale]/(protected)/table/react-table/example2/columns.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/example2/columns.tsx
@@ -1,21 +1,14 @@
-"use client"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+"use client";
 
-import {
-  ColumnDef,
-} from "@tanstack/react-table"
-import { Eye, SquarePen, Trash2 } from "lucide-react"
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, SquarePen, Trash2 } from "lucide-react";
 
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export type DataProps = {
   id: string | number;
@@ -29,15 +22,14 @@ export type DataProps = {
   amount: string;
   status: "paid" | "due" | "canceled";
   action: React.ReactNode;
-}
+};
 export const columns: ColumnDef<DataProps>[] = [
   {
     id: "select",
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
@@ -73,49 +65,37 @@ export const columns: ColumnDef<DataProps>[] = [
       return (
         <div className="font-medium text-card-foreground/80">
           <div className="flex gap-3 items-center">
-            <Avatar
-              className="rounded-full w-8 h-8 bg-transparent hover:bg-transparent shadow-none border-none"
-            >
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
+            <Avatar className="rounded-full w-8 h-8 bg-transparent hover:bg-transparent shadow-none border-none">
+              {user?.image ? <AvatarImage src={user.image} /> : <AvatarFallback>AB</AvatarFallback>}
             </Avatar>
             <span className="text-sm text-default-600 whitespace-nowrap">
               {user?.name ?? "Unknown User"}
             </span>
           </div>
         </div>
-      )
-    }
+      );
+    },
   },
   {
     accessorKey: "date",
     header: "Date",
     cell: ({ row }) => {
-      return (
-        <span>{row.getValue("date")}</span>
-      )
-    }
+      return <span>{row.getValue("date")}</span>;
+    },
   },
   {
     accessorKey: "quantity",
     header: "Quantity",
     cell: ({ row }) => {
-      return (
-        <span>{row.getValue("quantity")}</span>
-      )
-    }
+      return <span>{row.getValue("quantity")}</span>;
+    },
   },
   {
     accessorKey: "amount",
     header: "Amount",
     cell: ({ row }) => {
-      return (
-        <span>{row.getValue("amount")}</span>
-      )
-    }
+      return <span>{row.getValue("amount")}</span>;
+    },
   },
   {
     accessorKey: "status",
@@ -124,16 +104,12 @@ export const columns: ColumnDef<DataProps>[] = [
       const statusColors: Record<string, string> = {
         paid: "bg-success/20 text-success",
         due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive"
+        canceled: "bg-destructive/20 text-destructive",
       };
       const status = row.getValue<string>("status");
       const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge
-          className={cn("rounded-full px-5", statusStyles)}
-        >{status} </Badge>
-      );
-    }
+      return <Badge className={cn("rounded-full px-5", statusStyles)}>{status} </Badge>;
+    },
   },
   {
     id: "actions",
@@ -195,7 +171,7 @@ export const columns: ColumnDef<DataProps>[] = [
             </Tooltip>
           </TooltipProvider>
         </div>
-      )
-    }
-  }
-]
\ No newline at end of file
+      );
+    },
+  },
+];
diff --git a/src/app/[locale]/(protected)/table/react-table/example2/data.ts b/src/app/[locale]/(protected)/table/react-table/example2/data.ts
index efbd602e..1fd1e74a 100644
--- a/src/app/[locale]/(protected)/table/react-table/example2/data.ts
+++ b/src/app/[locale]/(protected)/table/react-table/example2/data.ts
@@ -652,4 +652,3 @@ export const data: DataProps[] = [
     action: null,
   },
 ];
-
diff --git a/src/app/[locale]/(protected)/table/react-table/example2/index.tsx b/src/app/[locale]/(protected)/table/react-table/example2/index.tsx
index 90ec05e5..465d4ef8 100644
--- a/src/app/[locale]/(protected)/table/react-table/example2/index.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/example2/index.tsx
@@ -1,20 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
-} from "@tanstack/react-table"
-import { columns } from "./columns"
-import { Input } from "@/components/ui/input"
+  VisibilityState,
+} from "@tanstack/react-table";
 
+import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -22,19 +21,17 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
+} from "@/components/ui/table";
 
-import { data } from "./data"
-import TablePagination from "./table-pagination"
+import { columns } from "./columns";
+import { data } from "./data";
+import TablePagination from "./table-pagination";
 
-const ExampleTwo= () => {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  )
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
+const ExampleTwo = () => {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
     data,
@@ -53,7 +50,7 @@ const ExampleTwo= () => {
       columnVisibility,
       rowSelection,
     },
-  })
+  });
 
   return (
     <div className="w-full">
@@ -63,9 +60,7 @@ const ExampleTwo= () => {
           <Input
             placeholder="Filter Status..."
             value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
-            onChange={(event) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
+            onChange={(event) => table.getColumn("status")?.setFilterValue(event.target.value)}
             className="max-w-sm "
           />
         </div>
@@ -80,12 +75,9 @@ const ExampleTwo= () => {
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
-                )
+                );
               })}
             </TableRow>
           ))}
@@ -93,26 +85,17 @@ const ExampleTwo= () => {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
+              <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
               </TableRow>
             ))
           ) : (
             <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center"
-              >
+              <TableCell colSpan={columns.length} className="h-24 text-center">
                 No results.
               </TableCell>
             </TableRow>
@@ -121,6 +104,6 @@ const ExampleTwo= () => {
       </Table>
       <TablePagination table={table} />
     </div>
-  )
-}
-export default ExampleTwo;
\ No newline at end of file
+  );
+};
+export default ExampleTwo;
diff --git a/src/app/[locale]/(protected)/table/react-table/example2/table-pagination.tsx b/src/app/[locale]/(protected)/table/react-table/example2/table-pagination.tsx
index 46e25075..8a4b69a7 100644
--- a/src/app/[locale]/(protected)/table/react-table/example2/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/example2/table-pagination.tsx
@@ -1,7 +1,8 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import React from 'react';
+import React from "react";
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -14,16 +15,16 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
         {table.getFilteredSelectedRowModel().rows.length} of{" "}
         {table.getFilteredRowModel().rows.length} row(s) selected.
       </div>
-   
-       <div className="flex items-center gap-2 flex-none">
+
+      <div className="flex items-center gap-2 flex-none">
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
@@ -31,24 +32,23 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
             className="w-8 h-8"
-            variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
+            variant={table.getState().pagination.pageIndex === pageIndex ? "default" : "outline"}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/table/react-table/layout.tsx b/src/app/[locale]/(protected)/table/react-table/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/table/react-table/layout.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/table/react-table/page.tsx b/src/app/[locale]/(protected)/table/react-table/page.tsx
index 82c7623e..7daa2d67 100644
--- a/src/app/[locale]/(protected)/table/react-table/page.tsx
+++ b/src/app/[locale]/(protected)/table/react-table/page.tsx
@@ -1,13 +1,14 @@
-import { Card, CardContent } from '@/components/ui/card';
-import ExampleTwo from './example2';
-import ExampleOne from './example1';
-import SiteBreadcrumb from '@/components/ui/structures/site-breadcrumb';
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import ExampleOne from "./example1";
+import ExampleTwo from "./example2";
 
 const ReactTablePage = () => {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className='space-y-6'>
+      <div className="space-y-6">
         <Card>
           <CardContent className="p-0">
             <ExampleOne />
@@ -23,4 +24,4 @@ const ReactTablePage = () => {
   );
 };
 
-export default ReactTablePage;
\ No newline at end of file
+export default ReactTablePage;
diff --git a/src/app/[locale]/(protected)/template.tsx b/src/app/[locale]/(protected)/template.tsx
index 0b77e3a6..7a5b9452 100644
--- a/src/app/[locale]/(protected)/template.tsx
+++ b/src/app/[locale]/(protected)/template.tsx
@@ -1,20 +1,18 @@
-'use client'
+"use client";
 
-import { motion } from 'framer-motion'
-import { usePathname } from '@/i18n/navigation'
+import { usePathname } from "@/i18n/navigation";
+import { motion } from "framer-motion";
 
 export default function Template({ children }: { children: React.ReactNode }) {
-
-    const pathname = usePathname()
-    return (
-        <motion.div
-            key={pathname}
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ type: "spring", stiffness: 300, damping: 20 }}
-
-        >
-            {children}
-        </motion.div>
-    )
-}
\ No newline at end of file
+  const pathname = usePathname();
+  return (
+    <motion.div
+      key={pathname}
+      initial={{ y: 20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      transition={{ type: "spring", stiffness: 300, damping: 20 }}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/src/app/[locale]/(protected)/utility/blank-page/layout.tsx b/src/app/[locale]/(protected)/utility/blank-page/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/utility/blank-page/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/blank-page/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/utility/blank-page/page.tsx b/src/app/[locale]/(protected)/utility/blank-page/page.tsx
index adc14945..49c20525 100644
--- a/src/app/[locale]/(protected)/utility/blank-page/page.tsx
+++ b/src/app/[locale]/(protected)/utility/blank-page/page.tsx
@@ -1,11 +1,12 @@
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
 const BlankPage = () => {
   return (
     <div>
-      <SiteBreadcrumb/>
+      <SiteBreadcrumb />
       <div className="text-2xl font-medium">Blank Page</div>
     </div>
-  )
+  );
 };
 
 export default BlankPage;
diff --git a/src/app/[locale]/(protected)/utility/blog/layout.tsx b/src/app/[locale]/(protected)/utility/blog/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/utility/blog/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/blog/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/utility/blog/page.tsx b/src/app/[locale]/(protected)/utility/blog/page.tsx
index b78231c3..c8b48326 100644
--- a/src/app/[locale]/(protected)/utility/blog/page.tsx
+++ b/src/app/[locale]/(protected)/utility/blog/page.tsx
@@ -1,11 +1,13 @@
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import Sidebar from "./sidebar";
 import Image from "next/image";
-import { Link } from '@/i18n/navigation';
+import { Link } from "@/i18n/navigation";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
+import Sidebar from "./sidebar";
+
 const BlogPage = () => {
   return (
     <>
@@ -62,17 +64,14 @@ const BlogPage = () => {
                     </div>
                   </div>
                   <h5 className=" text-default-900">
-                    <Link href="blog-details">
-                      At Healthcare you will be treated by caring
-                    </Link>
+                    <Link href="blog-details">At Healthcare you will be treated by caring</Link>
                   </h5>
                   <div className="text-default-700 mt-4 space-y-4">
                     <p>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                      do eiusmod tempor incididunt ut labore et dolore magna
-                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                      ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet,
-                      consectetur adipiscing eli.
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+                      nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit
+                      amet, consectetur adipiscing eli.
                     </p>
                     <Button variant="outline">Read more</Button>
                   </div>
diff --git a/src/app/[locale]/(protected)/utility/blog/sidebar.tsx b/src/app/[locale]/(protected)/utility/blog/sidebar.tsx
index 69807d08..e7c068df 100644
--- a/src/app/[locale]/(protected)/utility/blog/sidebar.tsx
+++ b/src/app/[locale]/(protected)/utility/blog/sidebar.tsx
@@ -1,10 +1,11 @@
-import { Button } from "@/components/ui/button";
-import { Icon } from "@/components/ui/icon";
-import { Link } from '@/i18n/navigation';
 import Image from "next/image";
-import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
-import { Input } from "@/components/ui/input";
+import { Link } from "@/i18n/navigation";
+
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupButton } from "@/components/ui/input-group";
 
 const category = [
   {
@@ -84,9 +85,7 @@ const Sidebar = () => {
         </InputGroup>
       </CardHeader>
       <CardContent className="pt-4 border-b border-solid border-default-100">
-        <h4 className="text-default-700 text-xl font-medium mb-4">
-          Latest Blogs Post
-        </h4>
+        <h4 className="text-default-700 text-xl font-medium mb-4">Latest Blogs Post</h4>
         <ul className="list-item space-y-4">
           <li>
             <div className="flex space-x-4 rtl:space-x-reverse">
@@ -103,10 +102,7 @@ const Sidebar = () => {
               </div>
               <div className="flex-1 flex flex-col">
                 <h4 className="text-sm text-default-600 font-regular leading-5 mb-4">
-                  <Link href="#">
-                    Lorem ipsum dolor sit amet consectetur adipiscing
-                  </Link>
-                  .
+                  <Link href="#">Lorem ipsum dolor sit amet consectetur adipiscing</Link>.
                 </h4>
                 <span className="text-xs text-default-400">
                   <Link href="#">Oct 09, 2021</Link>
@@ -129,10 +125,7 @@ const Sidebar = () => {
               </div>
               <div className="flex-1 flex flex-col">
                 <h4 className="text-sm text-default-600 font-regular leading-5 mb-4">
-                  <Link href="#">
-                    Lorem ipsum dolor sit amet consectetur adipiscing
-                  </Link>
-                  .
+                  <Link href="#">Lorem ipsum dolor sit amet consectetur adipiscing</Link>.
                 </h4>
                 <span className="text-xs text-default-400">
                   <Link href="#">Oct 09, 2021</Link>
@@ -155,10 +148,7 @@ const Sidebar = () => {
               </div>
               <div className="flex-1 flex flex-col">
                 <h4 className="text-sm text-default-600 font-regular leading-5 mb-4">
-                  <Link href="#">
-                    Lorem ipsum dolor sit amet consectetur adipiscing
-                  </Link>
-                  .
+                  <Link href="#">Lorem ipsum dolor sit amet consectetur adipiscing</Link>.
                 </h4>
                 <span className="text-xs text-default-400">
                   <Link href="#">Oct 09, 2021</Link>
@@ -187,9 +177,7 @@ const Sidebar = () => {
         </ul>
       </CardContent>
       <CardContent className="pt-4 px-6">
-        <h4 className="text-default-700 text-xl font-medium mb-4">
-          Popular tags
-        </h4>
+        <h4 className="text-default-700 text-xl font-medium mb-4">Popular tags</h4>
         <ul className="flex flex-wrap">
           {tags.map((item, i) => (
             <li key={i} className="mr-2 mb-2">
@@ -205,9 +193,7 @@ const Sidebar = () => {
       </CardContent>
       <div className="mx-6 bg-default-900 dark:bg-default-50 text-primary-foreground dark:text-default rounded-xl p-6 space-y-4 mb-6">
         <h4 className="text-xl font-medium ">Subscribe to our blog</h4>
-        <div className="text-sm">
-          Lorem ipsum dolor sit amet, consectet ur adipiscing elit.
-        </div>
+        <div className="text-sm">Lorem ipsum dolor sit amet, consectet ur adipiscing elit.</div>
         <form action="#" className="space-y-4">
           <Input
             type="text"
diff --git a/src/app/[locale]/(protected)/utility/faq/layout.tsx b/src/app/[locale]/(protected)/utility/faq/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/utility/faq/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/faq/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/utility/faq/page.tsx b/src/app/[locale]/(protected)/utility/faq/page.tsx
index 45bc5c0e..a5719079 100644
--- a/src/app/[locale]/(protected)/utility/faq/page.tsx
+++ b/src/app/[locale]/(protected)/utility/faq/page.tsx
@@ -5,8 +5,9 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Card, CardContent } from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 const Faq = () => {
   return (
     <div>
@@ -45,10 +46,9 @@ const Faq = () => {
                     How does Dashcode work?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
                 <AccordionItem className="dark:bg-secondary bg-white" value="item-2">
@@ -56,10 +56,9 @@ const Faq = () => {
                     Where I can learn more about using Dashcode?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
                 <AccordionItem className="dark:bg-secondary bg-white" value="item-3">
@@ -67,10 +66,9 @@ const Faq = () => {
                     Why Dashcode is so important?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
                 <AccordionItem className="dark:bg-secondary bg-white" value="item-4">
@@ -78,10 +76,9 @@ const Faq = () => {
                     Where I can find Dashcode?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
@@ -93,10 +90,9 @@ const Faq = () => {
                     How does Dashcode work?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
                 <AccordionItem className="dark:bg-secondary bg-white" value="item-2">
@@ -104,10 +100,9 @@ const Faq = () => {
                     Where I can learn more about using Dashcode?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
@@ -119,10 +114,9 @@ const Faq = () => {
                     How does Dashcode work?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
                 <AccordionItem className="dark:bg-secondary bg-white" value="item-2">
@@ -130,10 +124,9 @@ const Faq = () => {
                     Where I can learn more about using Dashcode?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
                 <AccordionItem className="dark:bg-secondary bg-white" value="item-3">
@@ -141,10 +134,9 @@ const Faq = () => {
                     Why Dashcode is so important?
                   </AccordionTrigger>
                   <AccordionContent className="dark:bg-secondary bg-white">
-                    Journalist call this critical, introductory section the and
-                    when bridge properly executed, it is the that carries your
-                    reader from anheadine try at attention-grabbing to the body
-                    of your blog post.
+                    Journalist call this critical, introductory section the and when bridge properly
+                    executed, it is the that carries your reader from anheadine try at
+                    attention-grabbing to the body of your blog post.
                   </AccordionContent>
                 </AccordionItem>
               </Accordion>
diff --git a/src/app/[locale]/(protected)/utility/invoice/add/layout.tsx b/src/app/[locale]/(protected)/utility/invoice/add/layout.tsx
index 4728748a..dbedb306 100644
--- a/src/app/[locale]/(protected)/utility/invoice/add/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/add/layout.tsx
@@ -1,6 +1,7 @@
 export const metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 
 const layout = ({ children }: { children: React.ReactNode }) => {
diff --git a/src/app/[locale]/(protected)/utility/invoice/add/page.tsx b/src/app/[locale]/(protected)/utility/invoice/add/page.tsx
index fc3b4da9..1b9785be 100644
--- a/src/app/[locale]/(protected)/utility/invoice/add/page.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/add/page.tsx
@@ -1,10 +1,10 @@
-
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import Repeater from "@/components/features/form/repeater";
+
 import Picker from "./picker";
 
 const InvoiceAddPage = () => {
@@ -12,9 +12,7 @@ const InvoiceAddPage = () => {
     <div>
       <Card>
         <CardHeader className="border-0 border-b border-default-200 border-solid">
-          <CardTitle className="text-default-900 font-medium">
-            Create new invoice
-          </CardTitle>
+          <CardTitle className="text-default-900 font-medium">Create new invoice</CardTitle>
         </CardHeader>
         <CardContent className="p-6">
           <h4 className="text-default-900  text-xl mb-4">#89572935Kh</h4>
@@ -77,11 +75,7 @@ const InvoiceAddPage = () => {
 
           <div className="space-y-2">
             <Label htmlFor="additional-name">Additional note</Label>
-            <Textarea
-              id="additional-name"
-              placeholder="Note"
-              className="lg:w-1/2"
-            />
+            <Textarea id="additional-name" placeholder="Note" className="lg:w-1/2" />
           </div>
           <div className="text-right  mt-7">
             <Button>Save</Button>
diff --git a/src/app/[locale]/(protected)/utility/invoice/add/picker.tsx b/src/app/[locale]/(protected)/utility/invoice/add/picker.tsx
index cb65775f..c2d3b2f6 100644
--- a/src/app/[locale]/(protected)/utility/invoice/add/picker.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/add/picker.tsx
@@ -1,7 +1,9 @@
 "use client";
-import { Input } from "@/components/ui/input";
+
 import { useState } from "react";
 
+import { Input } from "@/components/ui/input";
+
 const Picker = () => {
   const [picker, setPicker] = useState<Date>(new Date());
 
diff --git a/src/app/[locale]/(protected)/utility/invoice/edit/[id]/page.tsx b/src/app/[locale]/(protected)/utility/invoice/edit/[id]/page.tsx
index 731291f9..ba231d03 100644
--- a/src/app/[locale]/(protected)/utility/invoice/edit/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/edit/[id]/page.tsx
@@ -1,9 +1,10 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import Repeater from "@/components/features/form/repeater";
+
 import Picker from "./picker";
 
 const InvoiceEditPage = () => {
@@ -11,9 +12,7 @@ const InvoiceEditPage = () => {
     <div>
       <Card>
         <CardHeader className="border-0 border-b border-default-200 border-solid">
-          <CardTitle className="text-default-900 font-medium">
-            Update invoice
-          </CardTitle>
+          <CardTitle className="text-default-900 font-medium">Update invoice</CardTitle>
         </CardHeader>
         <CardContent className="p-6">
           <h4 className="text-default-900  text-xl mb-4">#89572935Kh</h4>
@@ -76,11 +75,7 @@ const InvoiceEditPage = () => {
 
           <div className="space-y-2">
             <Label htmlFor="additional-name">Additional note</Label>
-            <Textarea
-              id="additional-name"
-              placeholder="Note"
-              className="lg:w-1/2"
-            />
+            <Textarea id="additional-name" placeholder="Note" className="lg:w-1/2" />
           </div>
           <div className="text-right  mt-7">
             <Button>Save</Button>
diff --git a/src/app/[locale]/(protected)/utility/invoice/edit/[id]/picker.tsx b/src/app/[locale]/(protected)/utility/invoice/edit/[id]/picker.tsx
index cb65775f..c2d3b2f6 100644
--- a/src/app/[locale]/(protected)/utility/invoice/edit/[id]/picker.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/edit/[id]/picker.tsx
@@ -1,7 +1,9 @@
 "use client";
-import { Input } from "@/components/ui/input";
+
 import { useState } from "react";
 
+import { Input } from "@/components/ui/input";
+
 const Picker = () => {
   const [picker, setPicker] = useState<Date>(new Date());
 
diff --git a/src/app/[locale]/(protected)/utility/invoice/edit/layout.tsx b/src/app/[locale]/(protected)/utility/invoice/edit/layout.tsx
index 4728748a..dbedb306 100644
--- a/src/app/[locale]/(protected)/utility/invoice/edit/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/edit/layout.tsx
@@ -1,6 +1,7 @@
 export const metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 
 const layout = ({ children }: { children: React.ReactNode }) => {
diff --git a/src/app/[locale]/(protected)/utility/invoice/layout.tsx b/src/app/[locale]/(protected)/utility/invoice/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/utility/invoice/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/utility/invoice/page.tsx b/src/app/[locale]/(protected)/utility/invoice/page.tsx
index 2e887341..b55dcf36 100644
--- a/src/app/[locale]/(protected)/utility/invoice/page.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/page.tsx
@@ -1,12 +1,12 @@
+import { Card } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 import TransactionsTable from "./transactions";
-import { Card } from "@/components/ui/card";
 
-import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 const Invoice = () => {
   return (
     <div>
-      <SiteBreadcrumb/>
+      <SiteBreadcrumb />
       <Card>
         <TransactionsTable />
       </Card>
diff --git a/src/app/[locale]/(protected)/utility/invoice/preview/[id]/page.tsx b/src/app/[locale]/(protected)/utility/invoice/preview/[id]/page.tsx
index ab18a976..e2894d37 100644
--- a/src/app/[locale]/(protected)/utility/invoice/preview/[id]/page.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/preview/[id]/page.tsx
@@ -1,7 +1,8 @@
+import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Icon } from "@/components/ui/icon";
 import Logo from "@/components/partials/auth/logo";
-import { Button } from "@/components/ui/button";
+
 import TotalTable from "./totaltable";
 
 const InvoicePreviewPage = () => {
@@ -57,9 +58,7 @@ const InvoicePreviewPage = () => {
               </div>
             </div>
             <div>
-              <span className="block text-default-900 font-medium leading-5 text-xl">
-                Bill to:
-              </span>
+              <span className="block text-default-900 font-medium leading-5 text-xl">Bill to:</span>
 
               <div className="text-default-500 font-normal leading-5 mt-4 text-sm">
                 Annette black-500 <br />
@@ -79,18 +78,10 @@ const InvoicePreviewPage = () => {
               <span className="block text-default-900 font-medium leading-5 text-xl mb-4">
                 Invoice:
               </span>
-              <h4 className="text-default-600 font-medium text-xs uppercase">
-                Invoice number:
-              </h4>
-              <div className="text-default-500 font-normal leading-5 text-sm">
-                #89572935Kh
-              </div>
-              <h4 className="text-default-600 font-medium text-xs uppercase">
-                date
-              </h4>
-              <div className="text-default-500 font-normal leading-5 text-sm">
-                09 December 2021
-              </div>
+              <h4 className="text-default-600 font-medium text-xs uppercase">Invoice number:</h4>
+              <div className="text-default-500 font-normal leading-5 text-sm">#89572935Kh</div>
+              <h4 className="text-default-600 font-medium text-xs uppercase">date</h4>
+              <div className="text-default-500 font-normal leading-5 text-sm">09 December 2021</div>
             </div>
           </div>
         </CardHeader>
diff --git a/src/app/[locale]/(protected)/utility/invoice/preview/[id]/totaltable.tsx b/src/app/[locale]/(protected)/utility/invoice/preview/[id]/totaltable.tsx
index 5cde8a59..3c40e237 100644
--- a/src/app/[locale]/(protected)/utility/invoice/preview/[id]/totaltable.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/preview/[id]/totaltable.tsx
@@ -50,10 +50,7 @@ const TotalTable = () => {
         </thead>
         <tbody>
           {rows.map((data, index) => (
-            <tr
-              key={index}
-              className="border-b border-default-100 border-solid  border-0"
-            >
+            <tr key={index} className="border-b border-default-100 border-solid  border-0">
               <td
                 colSpan={3}
                 className="text-default-900  text-sm  font-normal text-left last:text-right  px-6 py-4"
@@ -75,27 +72,20 @@ const TotalTable = () => {
       </table>
       <div className="md:flex px-6 py-6 items-center">
         <div className="flex-1 text-default-500  text-sm">
-          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
-          sint. Velit <br />
+          Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit <br />
           officia consequat duis enim velit mollit.
         </div>
         <div className="flex-none min-w-[270px] space-y-3">
           <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              subtotal:
-            </span>
+            <span className="font-medium text-default-600 text-xs  uppercase">subtotal:</span>
             <span className="text-default-900 ">$3601.50</span>
           </div>
           <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              vat (3.5%):
-            </span>
+            <span className="font-medium text-default-600 text-xs  uppercase">vat (3.5%):</span>
             <span className="text-default-900 ">$20.50</span>
           </div>
           <div className="flex justify-between">
-            <span className="font-medium text-default-600 text-xs  uppercase">
-              Invoice total:
-            </span>
+            <span className="font-medium text-default-600 text-xs  uppercase">Invoice total:</span>
             <span className="text-default-900  font-bold">$3622.00</span>
           </div>
         </div>
diff --git a/src/app/[locale]/(protected)/utility/invoice/transactions/columns.tsx b/src/app/[locale]/(protected)/utility/invoice/transactions/columns.tsx
index d6d22be5..76838a7e 100644
--- a/src/app/[locale]/(protected)/utility/invoice/transactions/columns.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/transactions/columns.tsx
@@ -1,20 +1,18 @@
-
-
+import { Link } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
 import { Eye, MoreVertical, SendHorizontal, SquarePen, Trash2 } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils/utils"
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Link } from '@/i18n/navigation';
 
 export type DataProps = {
   id: string | number;
@@ -35,8 +33,7 @@ export const columns: ColumnDef<DataProps>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
+          table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")
         }
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
@@ -75,11 +72,7 @@ export const columns: ColumnDef<DataProps>[] = [
         <div className="font-medium text-card-foreground/80">
           <div className="flex gap-3 items-center">
             <Avatar className="rounded-full w-8 h-8">
-              {user?.image ? (
-                <AvatarImage src={user.image} />
-              ) : (
-                <AvatarFallback>AB</AvatarFallback>
-              )}
+              {user?.image ? <AvatarImage src={user.image} /> : <AvatarFallback>AB</AvatarFallback>}
             </Avatar>
             <span className="text-sm text-default-600 whitespace-nowrap">
               {user?.name ?? "Unknown User"}
@@ -121,11 +114,7 @@ export const columns: ColumnDef<DataProps>[] = [
       };
       const status = row.getValue<string>("status");
       const statusStyles = statusColors[status] || "default";
-      return (
-        <Badge className={cn("rounded-full px-5", statusStyles)}>
-          {status}{" "}
-        </Badge>
-      );
+      return <Badge className={cn("rounded-full px-5", statusStyles)}>{status} </Badge>;
     },
   },
   {
diff --git a/src/app/[locale]/(protected)/utility/invoice/transactions/data.ts b/src/app/[locale]/(protected)/utility/invoice/transactions/data.ts
index bf50b1f3..06c850d9 100644
--- a/src/app/[locale]/(protected)/utility/invoice/transactions/data.ts
+++ b/src/app/[locale]/(protected)/utility/invoice/transactions/data.ts
@@ -1,4 +1,5 @@
 import { DataProps } from "./columns";
+
 export const data: DataProps[] = [
   {
     id: 1,
diff --git a/src/app/[locale]/(protected)/utility/invoice/transactions/index.tsx b/src/app/[locale]/(protected)/utility/invoice/transactions/index.tsx
index 2c694716..fd0c4029 100644
--- a/src/app/[locale]/(protected)/utility/invoice/transactions/index.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/transactions/index.tsx
@@ -1,20 +1,24 @@
 "use client";
 
 import * as React from "react";
+import { Link } from "@/i18n/navigation";
 import {
   ColumnFiltersState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { columns } from "./columns";
-import { Input } from "@/components/ui/input";
+import { Calendar, Filter, Plus } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
   Table,
   TableBody,
@@ -24,26 +28,15 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
+import BasicCalendar from "../../../components/calendar/basic-calendar";
+import { columns } from "./columns";
 import { data } from "./data";
 import TablePagination from "./table-pagination";
-import { Button } from "@/components/ui/button";
-import { Calendar, Filter, Plus } from "lucide-react";
-import { Link } from '@/i18n/navigation';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import BasicCalendar from "../../../components/calendar/basic-calendar";
-import { Card } from "@/components/ui/card";
 
 const TransactionsTable = () => {
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
   const table = useReactTable({
@@ -68,19 +61,13 @@ const TransactionsTable = () => {
   return (
     <div className="w-full">
       <div className="flex items-center py-4 px-5">
-        <div className="flex-1 text-xl font-medium text-default-900">
-          Invoice
-        </div>
+        <div className="flex-1 text-xl font-medium text-default-900">Invoice</div>
         <div className="flex-none">
           <div className="flex items-center gap-4 flex-wrap">
             <Input
               placeholder="Search..."
-              value={
-                (table.getColumn("status")?.getFilterValue() as string) ?? ""
-              }
-              onChange={(event) =>
-                table.getColumn("status")?.setFilterValue(event.target.value)
-              }
+              value={(table.getColumn("status")?.getFilterValue() as string) ?? ""}
+              onChange={(event) => table.getColumn("status")?.setFilterValue(event.target.value)}
               className="max-w-sm "
             />
             <Popover>
@@ -129,10 +116,7 @@ const TransactionsTable = () => {
                   <TableHead className="last:text-start" key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                      : flexRender(header.column.columnDef.header, header.getContext())}
                   </TableHead>
                 );
               })}
@@ -142,10 +126,7 @@ const TransactionsTable = () => {
         <TableBody>
           {table.getRowModel().rows?.length ? (
             table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-              >
+              <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id} className="h-[75px]">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/src/app/[locale]/(protected)/utility/invoice/transactions/table-pagination.tsx b/src/app/[locale]/(protected)/utility/invoice/transactions/table-pagination.tsx
index fab9b075..1e0d5cd5 100644
--- a/src/app/[locale]/(protected)/utility/invoice/transactions/table-pagination.tsx
+++ b/src/app/[locale]/(protected)/utility/invoice/transactions/table-pagination.tsx
@@ -1,6 +1,7 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -19,33 +20,32 @@ const TablePagination = ({ table }: DataTablePaginationProps) => {
           size="icon"
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronLeft className='w-4 h-4' />
+          <ChevronLeft className="w-4 h-4" />
         </Button>
         {table.getPageOptions().map((page, pageIndex) => (
           <Button
             key={`basic-data-table-${pageIndex}`}
             onClick={() => table.setPageIndex(pageIndex)}
             size="icon"
-            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? 'bg-default' : 'bg-default-300 text-default'}`}
+            className={`w-8 h-8 hover:text-primary-foreground ${table.getState().pagination.pageIndex === pageIndex ? "bg-default" : "bg-default-300 text-default"}`}
           >
             {page + 1}
           </Button>
-
         ))}
         <Button
           variant="outline"
           size="icon"
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
+          className="w-8 h-8"
         >
-          <ChevronRight className='w-4 h-4' />
+          <ChevronRight className="w-4 h-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/app/[locale]/(protected)/utility/pricing/layout.tsx b/src/app/[locale]/(protected)/utility/pricing/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/utility/pricing/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/pricing/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/utility/pricing/page.tsx b/src/app/[locale]/(protected)/utility/pricing/page.tsx
index b6842dfe..ad85074a 100644
--- a/src/app/[locale]/(protected)/utility/pricing/page.tsx
+++ b/src/app/[locale]/(protected)/utility/pricing/page.tsx
@@ -1,11 +1,15 @@
 "use client";
+
 import React, { useState } from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
 import Image from "next/image";
-import { tables2, tables } from "./data";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import { Icon } from "@/components/ui/icon";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import { tables, tables2 } from "./data";
+
 const PricingPage = () => {
   const [check, setCheck] = useState(true);
   const toggle = () => {
@@ -23,20 +27,14 @@ const PricingPage = () => {
               <label className="inline-flex text-sm cursor-pointer">
                 <input type="checkbox" onChange={toggle} hidden />
                 <span
-                  className={` ${
-                    check
-                      ? "bg-default-900  text-white"
-                      : "dark:text-default-700"
-                  } 
+                  className={` ${check ? "bg-default-900  text-white" : "dark:text-default-700"} 
                 px-[18px] py-1 transition duration-100 rounded`}
                 >
                   Yearly
                 </span>
                 <span
                   className={`
-              ${
-                !check ? "bg-default-900  text-white" : " dark:text-default-700"
-              }
+              ${!check ? "bg-default-900  text-white" : " dark:text-default-700"}
                 px-[18px] py-1 transition duration-100 rounded
                 `}
                 >
@@ -84,14 +82,12 @@ const PricingPage = () => {
                           Save 20%
                         </span>
                       </div>
-                      <p className="text-default-500  text-sm">
-                        per user/month, annually
-                      </p>
+                      <p className="text-default-500  text-sm">per user/month, annually</p>
                     </header>
                     <div className="price-body space-y-8">
                       <p className="text-sm leading-5 text-default-600 ">
-                        Designed for teams who need to manage complex workflows
-                        with more automation and integration.
+                        Designed for teams who need to manage complex workflows with more automation
+                        and integration.
                       </p>
                       <div>
                         <Button fullWidth variant="outline">
@@ -178,8 +174,8 @@ const PricingPage = () => {
                 text-sm leading-5
                 `}
                   >
-                    Designed for teams who need to manage complex workflows with
-                    more automation and integration.
+                    Designed for teams who need to manage complex workflows with more automation and
+                    integration.
                   </p>
                   <div>
                     {item.bg === "bg-default-900" ? (
diff --git a/src/app/[locale]/(protected)/utility/profile/area-chart.tsx b/src/app/[locale]/(protected)/utility/profile/area-chart.tsx
index c84d5aec..ba850fe2 100644
--- a/src/app/[locale]/(protected)/utility/profile/area-chart.tsx
+++ b/src/app/[locale]/(protected)/utility/profile/area-chart.tsx
@@ -1,15 +1,13 @@
 "use client";
-import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { useTheme } from "next-themes";
-import { useConfig } from "@/lib/hooks/use-config";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
-import { colors } from "@/lib/colors";
 
+import dynamic from "next/dynamic";
+import { useTheme } from "next-themes";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
+import { colors } from "@/lib/colors";
+import { useConfig } from "@/lib/hooks/use-config";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 const AreaChart = ({ height = 300 }) => {
   const [config] = useConfig();
@@ -48,12 +46,10 @@ const AreaChart = ({ height = 300 }) => {
         opacityFrom: 0.3,
         opacityTo: 0.1,
         stops: [50, 100, 0],
-      }
+      },
     },
-    yaxis: getYAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -61,15 +57,7 @@ const AreaChart = ({ height = 300 }) => {
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default AreaChart;
diff --git a/src/app/[locale]/(protected)/utility/profile/layout.tsx b/src/app/[locale]/(protected)/utility/profile/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/(protected)/utility/profile/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/profile/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/utility/profile/page.tsx b/src/app/[locale]/(protected)/utility/profile/page.tsx
index 55896687..98228ad7 100644
--- a/src/app/[locale]/(protected)/utility/profile/page.tsx
+++ b/src/app/[locale]/(protected)/utility/profile/page.tsx
@@ -1,9 +1,12 @@
-import { Icon } from "@/components/ui/icon";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import Image from "next/image";
-import { Link } from '@/i18n/navigation';
-import AreaChart from "./area-chart";
+import { Link } from "@/i18n/navigation";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
+
+import AreaChart from "./area-chart";
+
 const profile = () => {
   return (
     <div>
@@ -31,42 +34,26 @@ const profile = () => {
                 </div>
               </div>
               <div className="flex-1">
-                <div className="text-2xl font-medium text-default-900  mb-[3px]">
-                  Albert Flores
-                </div>
-                <div className="text-sm font-light text-default-600 ">
-                  Front End Developer
-                </div>
+                <div className="text-2xl font-medium text-default-900  mb-[3px]">Albert Flores</div>
+                <div className="text-sm font-light text-default-600 ">Front End Developer</div>
               </div>
             </div>
           </div>
 
           <div className="profile-info-500 md:flex md:text-start text-center flex-1 max-w-[516px] md:space-y-0 space-y-4">
             <div className="flex-1">
-              <div className="text-base text-default-900  font-medium mb-1">
-                $32,400
-              </div>
-              <div className="text-sm text-default-600 font-light ">
-                Total Balance
-              </div>
+              <div className="text-base text-default-900  font-medium mb-1">$32,400</div>
+              <div className="text-sm text-default-600 font-light ">Total Balance</div>
             </div>
 
             <div className="flex-1">
-              <div className="text-base text-default-900  font-medium mb-1">
-                200
-              </div>
-              <div className="text-sm text-default-600 font-light ">
-                Board Card
-              </div>
+              <div className="text-base text-default-900  font-medium mb-1">200</div>
+              <div className="text-sm text-default-600 font-light ">Board Card</div>
             </div>
 
             <div className="flex-1">
-              <div className="text-base text-default-900 font-medium mb-1">
-                3200
-              </div>
-              <div className="text-sm text-default-600 font-light">
-                Calender Events
-              </div>
+              <div className="text-base text-default-900 font-medium mb-1">3200</div>
+              <div className="text-sm text-default-600 font-light">Calender Events</div>
             </div>
           </div>
         </Card>
@@ -86,10 +73,7 @@ const profile = () => {
                       <div className="uppercase text-xs text-default-500  mb-1 leading-[12px]">
                         EMAIL
                       </div>
-                      <a
-                        href="mailto:someone@example.com"
-                        className="text-base text-default-600 "
-                      >
+                      <a href="mailto:someone@example.com" className="text-base text-default-600 ">
                         info@dashcode.com
                       </a>
                     </div>
@@ -103,10 +87,7 @@ const profile = () => {
                       <div className="uppercase text-xs text-default-500  mb-1 leading-[12px]">
                         PHONE
                       </div>
-                      <a
-                        href="tel:0189749676767"
-                        className="text-base text-default-600 "
-                      >
+                      <a href="tel:0189749676767" className="text-base text-default-600 ">
                         +1-202-555-0151
                       </a>
                     </div>
@@ -121,8 +102,7 @@ const profile = () => {
                         LOCATION
                       </div>
                       <div className="text-base text-default-600 ">
-                        Home# 320/N, Road# 71/B, Mohakhali, Dhaka-1207,
-                        Bangladesh
+                        Home# 320/N, Road# 71/B, Mohakhali, Dhaka-1207, Bangladesh
                       </div>
                     </div>
                   </li>
@@ -133,9 +113,7 @@ const profile = () => {
           <div className="lg:col-span-8 col-span-12">
             <Card title="Info">
               <CardHeader className="border-b">
-                <CardTitle className="text-xl font-normal">
-                  User Overview
-                </CardTitle>
+                <CardTitle className="text-xl font-normal">User Overview</CardTitle>
               </CardHeader>
               <CardContent className="pt-4">
                 <AreaChart height={190} />
diff --git a/src/app/[locale]/(protected)/utility/settings/layout.tsx b/src/app/[locale]/(protected)/utility/settings/layout.tsx
index a490cd7d..c425b593 100644
--- a/src/app/[locale]/(protected)/utility/settings/layout.tsx
+++ b/src/app/[locale]/(protected)/utility/settings/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Dashcode Next Js",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/(protected)/utility/settings/page.tsx b/src/app/[locale]/(protected)/utility/settings/page.tsx
index 829bca16..aa0eb5c4 100644
--- a/src/app/[locale]/(protected)/utility/settings/page.tsx
+++ b/src/app/[locale]/(protected)/utility/settings/page.tsx
@@ -1,12 +1,8 @@
 import React from "react";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/components/ui/card";
+import { Link } from "@/i18n/navigation";
+
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 import { Icon } from "@/components/ui/icon";
-import { Link } from '@/i18n/navigation';
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 
 const settings = () => {
@@ -20,9 +16,7 @@ const settings = () => {
               <div className="flex-none h-8 w-8 rounded-full bg-default-800  text-default-300 flex flex-col items-center justify-center text-lg">
                 <Icon icon="heroicons:building-office-2" />
               </div>
-              <div className="flex-1 text-base text-default-900  font-medium">
-                Company Settings
-              </div>
+              <div className="flex-1 text-base text-default-900  font-medium">Company Settings</div>
             </div>
           </CardHeader>
           <CardContent>
@@ -45,9 +39,7 @@ const settings = () => {
               <div className="flex-none h-8 w-8 rounded-full bg-primary-500 text-default-300 flex flex-col items-center justify-center text-lg">
                 <Icon icon="heroicons:credit-card" />
               </div>
-              <div className="flex-1 text-base text-default-900  font-medium">
-                Payment Settings
-              </div>
+              <div className="flex-1 text-base text-default-900  font-medium">Payment Settings</div>
             </div>
           </CardHeader>
           <CardContent>
@@ -70,9 +62,7 @@ const settings = () => {
               <div className="flex-none h-8 w-8 rounded-full bg-success text-white flex flex-col items-center justify-center text-lg">
                 <Icon icon="heroicons:users" />
               </div>
-              <div className="flex-1 text-base text-default-900  font-medium">
-                Profile Settings
-              </div>
+              <div className="flex-1 text-base text-default-900  font-medium">Profile Settings</div>
             </div>
           </CardHeader>
           <CardContent>
diff --git a/src/app/[locale]/(protected)/welcome/page.tsx b/src/app/[locale]/(protected)/welcome/page.tsx
index b3ad47ad..c0659f06 100644
--- a/src/app/[locale]/(protected)/welcome/page.tsx
+++ b/src/app/[locale]/(protected)/welcome/page.tsx
@@ -1,16 +1,17 @@
+import Image from "next/image";
+
 import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
 import ContentProductionVisualization from "@/components/features/visualization/content-production";
-import Image from "next/image";
 
 export default function ContentProduction() {
   return (
     <div className="flex justify-center items-center">
       <Image
-          className="w-auto h-[400px]"
-          width={500}
-          height={300}
-          src="/assets/img/welcome.png"
-          alt="mail"
+        className="w-auto h-[400px]"
+        width={500}
+        height={300}
+        src="/assets/img/welcome.png"
+        alt="mail"
       />
     </div>
   );
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx
index 155e7c41..80057af5 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/detail/[slug]/page.tsx
@@ -1,23 +1,31 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
+import { useParams, usePathname } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
-import { BarWave } from "react-cssfx-loading";
-import { useToast } from "@/components/ui/use-toast";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/lib/services/landing/landing";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, error, loading, warning } from "@/config/swal";
-import { useTranslations } from "next-intl";
-import { checkMaliciousText, getPublicLocaleTimestamp } from "@/lib/utils/globals";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import parse from "html-react-parser";
-import { postActivityLog } from "@/lib/services/content/content";
+import { useTranslations } from "next-intl";
+import { BarWave } from "react-cssfx-loading";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
 
+import { close, error, loading, warning } from "@/config/swal";
+import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { checkMaliciousText, getPublicLocaleTimestamp } from "@/lib/utils/globals";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailAudio = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -62,8 +70,8 @@ const DetailAudio = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -228,7 +236,7 @@ const DetailAudio = () => {
     { label: "S", value: "1066 x 599 px" },
     { label: "XS", value: "800 x 450 px" },
   ];
- async function sendSuggestionParent() {
+  async function sendSuggestionParent() {
     if (message?.length > 3) {
       loading();
       const data = {
@@ -280,41 +288,41 @@ const DetailAudio = () => {
     document.querySelector(`#${e}`)?.classList.toggle("none");
     setVisibleInput(visibleInput === e ? null : e);
   };
-   async function sendSuggestionChild(parentId: any) {
-      const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
-  
-      if (inputElement && inputElement.value.length > 3) {
-        loading();
-        const data = {
-          mediaUploadId: slug?.split("-")?.[0],
-          message: inputElement.value,
-          parentId,
-        };
-  
-        console.log(data);
-        const response = await createPublicSuggestion(data);
-        console.log(response);
-        const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
-        console.log(responseGet.data?.data);
-        setListSuggestion(responseGet.data?.data);
-  
-        // Reset input field
-        inputElement.value = "";
-  
-        // document.querySelector("#comment-id-" + parentId)?.style.display = "none";
-  
-        close();
-      }
-    }
-   async function deleteDataSuggestion(dataId: any) {
+  async function sendSuggestionChild(parentId: any) {
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
+
+    if (inputElement && inputElement.value.length > 3) {
       loading();
-      const response = await deletePublicSuggestion(dataId);
+      const data = {
+        mediaUploadId: slug?.split("-")?.[0],
+        message: inputElement.value,
+        parentId,
+      };
+
+      console.log(data);
+      const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
       console.log(responseGet.data?.data);
       setListSuggestion(responseGet.data?.data);
+
+      // Reset input field
+      inputElement.value = "";
+
+      // document.querySelector("#comment-id-" + parentId)?.style.display = "none";
+
       close();
     }
+  }
+  async function deleteDataSuggestion(dataId: any) {
+    loading();
+    const response = await deletePublicSuggestion(dataId);
+    console.log(response);
+    const responseGet = await getPublicSuggestionList(slug.split("-")?.[0]);
+    console.log(responseGet.data?.data);
+    setListSuggestion(responseGet.data?.data);
+    close();
+  }
   const deleteData = (dataId: any) => {
     MySwal.fire({
       title: "Delete Comment",
@@ -331,17 +339,17 @@ const DetailAudio = () => {
     });
   };
   const postDataChild = (id: any) => {
-      const checkMessage = checkMaliciousText(message);
-      if (checkMessage == "") {
-        if (Number(userRoleId) < 1 || userRoleId == undefined) {
-          router.push("/auth");
-        } else {
-          sendSuggestionChild(id);
-        }
+    const checkMessage = checkMaliciousText(message);
+    if (checkMessage == "") {
+      if (Number(userRoleId) < 1 || userRoleId == undefined) {
+        router.push("/auth");
       } else {
-        warning(checkMessage);
+        sendSuggestionChild(id);
       }
-    };
+    } else {
+      warning(checkMessage);
+    }
+  };
   return (
     <>
       <div className="min-h-screen px-4 md:px-24 py-4">
@@ -357,7 +365,11 @@ const DetailAudio = () => {
             {/* Footer Informasi */}
             <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
               <p className="flex flex-row items-center">
-                oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
+                oleh&nbsp;
+                <span className="font-semibold text-black">
+                  {detailDataAudio?.uploadedBy?.userLevel?.name}
+                </span>
+                &nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataAudio?.clickCount}
@@ -366,20 +378,31 @@ const DetailAudio = () => {
             </div>
             {/* Keterangan */}
             <div className="md:w-3/4">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">
+                {detailDataAudio?.title}
+              </h1>
+              <div
+                className="font-light text-justify"
+                dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 h-fit bg-gray-300 rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -388,13 +411,20 @@ const DetailAudio = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataAudio?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataAudio?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -403,15 +433,27 @@ const DetailAudio = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Audio
+            </h4>
 
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -424,15 +466,25 @@ const DetailAudio = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -450,8 +502,15 @@ const DetailAudio = () => {
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder="Type your comments here."
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
           </div>
@@ -462,10 +521,19 @@ const DetailAudio = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <img
+                    src={data?.suggestionFrom?.profilePictureUrl}
+                    className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
+                    onError={addDefaultProfile}
+                    alt=""
+                  />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
                     <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
@@ -481,11 +549,16 @@ const DetailAudio = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -494,14 +567,25 @@ const DetailAudio = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -511,14 +595,27 @@ const DetailAudio = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <img
+                            src={child1.suggestionFrom?.profilePictureUrl}
+                            onError={addDefaultProfile}
+                            alt=""
+                            className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
+                          />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
                               {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
+                            </p>
                             <div>
                               <a
                                 style={
@@ -530,7 +627,9 @@ const DetailAudio = () => {
                                 }
                                 onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
@@ -542,21 +641,35 @@ const DetailAudio = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
                               <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -566,14 +679,27 @@ const DetailAudio = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <img
+                                    src={child2.suggestionFrom?.profilePictureUrl}
+                                    className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
+                                    onError={addDefaultProfile}
+                                    alt=""
+                                  />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
+                                      <b>
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
                                       {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
+                                    </p>
                                     <div>
                                       <a
                                         style={
@@ -585,7 +711,9 @@ const DetailAudio = () => {
                                         }
                                         onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
@@ -597,20 +725,34 @@ const DetailAudio = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder="Masukkan balasan anda"
+                                    />
                                     <div className="flex flex-row gap-3">
                                       <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
                                       <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
index f141bed3..36eb568f 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx
@@ -1,22 +1,49 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+
 import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -57,7 +84,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -97,7 +126,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -115,7 +148,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("4");
@@ -137,7 +182,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (poldaName && String(poldaName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -166,7 +212,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -371,7 +418,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -387,7 +437,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -399,7 +451,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -412,17 +466,36 @@ const FilterPage = () => {
                   placeholderText={t("searchDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -437,13 +510,23 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="png" value="png" checked={formatFilter.includes("wav")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wav")} />
+                    <Checkbox
+                      id="png"
+                      value="png"
+                      checked={formatFilter.includes("wav")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wav")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">WAV</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("mp3")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp3")} />
+                    <Checkbox
+                      id="jpeg"
+                      value="jpeg"
+                      checked={formatFilter.includes("mp3")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp3")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MP3</span>
                   </label>
                 </li>
@@ -463,7 +546,11 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")} </h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -477,9 +564,18 @@ const FilterPage = () => {
                       {audioData?.map((audio: any) => (
                         <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3">
                           <div className="flex flex-row gap-6">
-                            <Link href={`${prefixPath}/audio/detail/${audio?.slug}`} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                            <Link
+                              href={`${prefixPath}/audio/detail/${audio?.slug}`}
+                              className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                            >
                               <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
-                                <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                                <svg
+                                  width="32"
+                                  height="34"
+                                  viewBox="0 0 32 34"
+                                  fill="null"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
                                   <path
                                     d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                                     fill="white"
@@ -489,9 +585,14 @@ const FilterPage = () => {
 
                               <div className="flex flex-col  flex-1">
                                 <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                                  {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}{" "}
+                                  {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
+                                  {audio?.timezone ? audio?.timezone : "WIB"} |{" "}
+                                  <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                                  {audio?.clickCount}{" "}
+                                </div>
+                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                                  {audio?.title}
                                 </div>
-                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
                               </div>
                             </Link>
                           </div>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx
index 1085734a..479e26e1 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/layout.tsx
@@ -1,19 +1,20 @@
 "use client";
 
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
-import { redirect } from "@/i18n/navigation";
-import Footer from "@/components/features/landing-page/footer";
-import Navbar from "@/components/features/landing-page/navbar";
-import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
 import { useParams } from "next/navigation";
+import { redirect } from "@/i18n/navigation";
+
+import Footer from "@/components/features/landing-page/footer";
 import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
 import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   const params = useParams();
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx
index ba37752b..328eb8a6 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/detail/[slug]/page.tsx
@@ -1,26 +1,38 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
-import { Textarea } from "@/components/ui/textarea";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/lib/services/landing/landing";
-import { close, error, loading, successCallback, warning } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
-import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/lib/utils/globals";
-import { useTranslations } from "next-intl";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { useSearchParams } from "next/navigation";
-import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, successCallback, warning } from "@/config/swal";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
+import {
+  checkMaliciousText,
+  formatDateToIndonesian,
+  getPublicLocaleTimestamp,
+} from "@/lib/utils/globals";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -74,8 +86,8 @@ const DetailDocument = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -522,7 +534,11 @@ const DetailDocument = () => {
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
             <div className="relative">
-              <img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+              <img
+                src={detailDataDocument?.files[selectedDocument]?.url}
+                alt="Main"
+                className="rounded-lg w-auto h-fit"
+              />
               <div className="absolute top-4 left-4"></div>
             </div>
             {/* Footer Informasi */}
@@ -536,7 +552,10 @@ const DetailDocument = () => {
               <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  {t("by")}&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;
+                  <span className="font-semibold text-black">
+                    {detailDataDocument?.uploadedBy?.userLevel?.name}
+                  </span>
                 </p>
                 {/* <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp; {t("updatedOn")} {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;
@@ -561,7 +580,9 @@ const DetailDocument = () => {
 
             {/* Keterangan */}
             <div className="">
-              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">{detailDataDocument?.title}</h1>
+              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify space-y-4">
+                {detailDataDocument?.title}
+              </h1>
               <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
             </div>
           </div>
@@ -569,12 +590,18 @@ const DetailDocument = () => {
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
@@ -583,13 +610,20 @@ const DetailDocument = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataDocument?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataDocument?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -598,13 +632,25 @@ const DetailDocument = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("docSize")}</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              {t("docSize")}
+            </h4>
             <div className="border-t border-black my-4"></div>
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -617,15 +663,25 @@ const DetailDocument = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>{t("downloadAll")}</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               {t("download")}
             </button>
@@ -633,19 +689,56 @@ const DetailDocument = () => {
             {/* Tombol Bagikan */}
             <div className="flex flex-row py-3">
               <p className="text-base font-semibold">{t("share")}</p>
-              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
-                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              <a
+                className="ml-8 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "fb",
+                    `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
+                  )
+                }
+              >
+                <Icon
+                  icon="brandico:facebook"
+                  height="20"
+                  className="px-auto text-red-600 text-center"
+                />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "tw",
+                    `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
+                  )
+                }
+              >
                 <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "wa",
+                    `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
+                  )
+                }
+              >
                 <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
               </a>
               <Popover>
                 <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
-                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
-                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  <a
+                    className="ml-5 cursor-pointer"
+                    data-toggle="dropdown"
+                    href="#"
+                    aria-expanded="false"
+                  >
+                    <Icon
+                      icon="material-symbols-light:mail"
+                      width="23"
+                      className="text-red-600 text-center"
+                    />
                   </a>
                 </PopoverTrigger>
                 <PopoverContent>
@@ -653,9 +746,18 @@ const DetailDocument = () => {
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                      <Input
+                        value={emailShareInput}
+                        onChange={(event) => setEmailShareInput(event.target.value)}
+                        onKeyPress={handleEmailList}
+                        type="email"
+                        placeholder={t("pressEnter")}
+                      />
                     </div>
-                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                    <Button
+                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                      onClick={() => shareToEmail()}
+                    >
                       {t("send")}
                     </Button>
                   </div>
@@ -671,8 +773,15 @@ const DetailDocument = () => {
         <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder="Type your comments here."
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
           </div>
@@ -683,10 +792,19 @@ const DetailDocument = () => {
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
-                  <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                  <img
+                    src={data?.suggestionFrom?.profilePictureUrl}
+                    className="h-12 lg:h-16 w-12 lg:w-16 mr-2"
+                    onError={addDefaultProfile}
+                    alt=""
+                  />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
                     <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
@@ -702,11 +820,16 @@ const DetailDocument = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -715,14 +838,25 @@ const DetailDocument = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -732,14 +866,27 @@ const DetailDocument = () => {
                   ? data.children?.map((child1: any) => (
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
-                          <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
+                          <img
+                            src={child1.suggestionFrom?.profilePictureUrl}
+                            onError={addDefaultProfile}
+                            alt=""
+                            className="h-10 lg:h-16 w-10 lg:w-16 mr-2"
+                          />
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
                               {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
+                            </p>
                             <div>
                               <a
                                 style={
@@ -751,7 +898,9 @@ const DetailDocument = () => {
                                 }
                                 onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
@@ -763,21 +912,35 @@ const DetailDocument = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
                               <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -787,14 +950,27 @@ const DetailDocument = () => {
                           ? child1.children?.map((child2: any) => (
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
-                                  <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
+                                  <img
+                                    src={child2.suggestionFrom?.profilePictureUrl}
+                                    className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
+                                    onError={addDefaultProfile}
+                                    alt=""
+                                  />
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
+                                      <b>
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
                                       {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
+                                    </p>
                                     <div>
                                       <a
                                         style={
@@ -806,7 +982,9 @@ const DetailDocument = () => {
                                         }
                                         onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
@@ -818,20 +996,34 @@ const DetailDocument = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder={t("enterReply")} />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder={t("enterReply")}
+                                    />
                                     <div className="flex flex-row gap-3">
                                       <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
                                       <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
index 3057fa66..48f67668 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx
@@ -1,21 +1,43 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getListContent,
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
 import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -56,7 +78,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -95,7 +119,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -113,7 +141,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("3");
@@ -135,7 +175,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (poldaName && String(poldaName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -167,7 +208,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -286,7 +328,12 @@ const FilterPage = () => {
     initFetch();
   }, [page]);
   const initFetch = async () => {
-    const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" });
+    const response = await getListContent({
+      page: page - 1,
+      size: 6,
+      sortBy: "createdAt",
+      contentTypeId: "3",
+    });
     console.log(response);
     setDocumentData(response?.data?.data?.content);
     const data = response?.data?.data;
@@ -389,7 +436,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -405,7 +455,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -417,7 +469,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -430,17 +484,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -455,31 +528,56 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="doc" value="doc" checked={formatFilter.includes("doc")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")} />
+                    <Checkbox
+                      id="doc"
+                      value="doc"
+                      checked={formatFilter.includes("doc")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">DOC</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="docx" value="docx" checked={formatFilter.includes("docx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")} />
+                    <Checkbox
+                      id="docx"
+                      value="docx"
+                      checked={formatFilter.includes("docx")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">DOCX</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="pdf" value="pdf" checked={formatFilter.includes("pdf")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")} />
+                    <Checkbox
+                      id="pdf"
+                      value="pdf"
+                      checked={formatFilter.includes("pdf")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PDF</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="ppt" value="ppt" checked={formatFilter.includes("ppt")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")} />
+                    <Checkbox
+                      id="ppt"
+                      value="ppt"
+                      checked={formatFilter.includes("ppt")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PPT</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="pptx" value="pptx" checked={formatFilter.includes("pptx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")} />
+                    <Checkbox
+                      id="pptx"
+                      value="pptx"
+                      checked={formatFilter.includes("pptx")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PPTX</span>
                   </label>
                 </li>
@@ -499,7 +597,11 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -508,9 +610,19 @@ const FilterPage = () => {
             {documentData?.length > 0 ? (
               <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                 {documentData?.map((document: any) => (
-                  <Link href={`${prefixPath}/document/detail/${document?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                  <Link
+                    href={`${prefixPath}/document/detail/${document?.slug}`}
+                    key={document?.id}
+                    className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                  >
                     <div className="flex items-center justify-center rounded-lg w-16 h-16">
-                      <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <svg
+                        width="28"
+                        height="34"
+                        viewBox="0 0 28 34"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
                         <path
                           d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                           fill="black"
@@ -519,12 +631,24 @@ const FilterPage = () => {
                     </div>
                     <div className="flex flex-col flex-1 gap-2">
                       <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center gap-2 text-xs">
-                        {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
+                        {formatDateToIndonesian(new Date(document?.createdAt))}{" "}
+                        {document?.timezone ? document?.timezone : "WIB"} |{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" /> 518
+                      </div>
+                      <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                        {document?.title}
                       </div>
-                      <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
                       <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                          <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="1em"
+                          height="1em"
+                          viewBox="0 0 512 512"
+                        >
+                          <path
+                            fill="#f00"
+                            d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                          />
                         </svg>
                         Download Dokumen
                       </div>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx
index 1085734a..479e26e1 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/document/layout.tsx
@@ -1,19 +1,20 @@
 "use client";
 
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
-import { redirect } from "@/i18n/navigation";
-import Footer from "@/components/features/landing-page/footer";
-import Navbar from "@/components/features/landing-page/navbar";
-import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
 import { useParams } from "next/navigation";
+import { redirect } from "@/i18n/navigation";
+
+import Footer from "@/components/features/landing-page/footer";
 import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
 import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   const params = useParams();
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
index 2b9e991b..fa2e5a29 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
@@ -1,23 +1,35 @@
 "use client";
 
-import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
-import { useToast } from "@/components/ui/use-toast";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, error, loading, warning } from "@/config/swal";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/lib/services/landing/landing";
-import { Link, useRouter } from "@/i18n/navigation";
 import Image from "next/image";
-import { useTranslations } from "next-intl";
-import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/lib/utils/globals";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { useSearchParams } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, warning } from "@/config/swal";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import {
+  checkMaliciousText,
+  formatDateToIndonesian,
+  getPublicLocaleTimestamp,
+} from "@/lib/utils/globals";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailInfo = () => {
   const MySwal = withReactContent(Swal);
@@ -72,8 +84,8 @@ const DetailInfo = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -379,7 +391,8 @@ const DetailInfo = () => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -389,7 +402,17 @@ const DetailInfo = () => {
           <div className="md:w-3/4">
             {/* Gambar Besar */}
             <div className="relative">
-              <Image width={1920} height={1080} src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink} alt="Main" className="rounded-lg w-auto h-fit" />
+              <Image
+                width={1920}
+                height={1080}
+                src={
+                  detailDataImage?.files?.length > 0
+                    ? detailDataImage.files[selectedImage]?.url
+                    : detailDataImage?.thumbnailLink
+                }
+                alt="Main"
+                className="rounded-lg w-auto h-fit"
+              />
               <div className="absolute top-4 left-4"></div>
             </div>
 
@@ -397,7 +420,13 @@ const DetailInfo = () => {
             <div className="py-4 flex flex-row gap-3">
               {detailDataImage?.files?.map((file: any, index: number) => (
                 <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                  <Image alt="imgae-small" width={1920} height={1080} src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                  <Image
+                    alt="imgae-small"
+                    width={1920}
+                    height={1080}
+                    src={file?.url}
+                    className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+                  />
                 </a>
               ))}
             </div>
@@ -406,7 +435,10 @@ const DetailInfo = () => {
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;
+                  <span className="font-semibold text-black dark:text-white">
+                    {detailDataImage?.uploadedBy?.userLevel?.name}
+                  </span>
                 </p>
                 {/* <p className="text-xs lg:text-sm">
                              &nbsp;|&nbsp;{t("updatedOn")}
@@ -433,19 +465,28 @@ const DetailInfo = () => {
             {/* Keterangan */}
             <div className="w-full">
               <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify mb-4" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <div
+                className="font-light text-justify mb-4"
+                dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -454,13 +495,20 @@ const DetailInfo = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataImage?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataImage?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -469,14 +517,26 @@ const DetailInfo = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Foto
+            </h4>
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -489,15 +549,25 @@ const DetailInfo = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -510,8 +580,15 @@ const DetailInfo = () => {
         <div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder={t("leaveComment")}
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
             <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
@@ -532,7 +609,11 @@ const DetailInfo = () => {
                   />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
                     <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
@@ -548,11 +629,16 @@ const DetailInfo = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -561,14 +647,25 @@ const DetailInfo = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -590,10 +687,18 @@ const DetailInfo = () => {
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
                               {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
+                            </p>
                             <div>
                               <a
                                 style={
@@ -605,7 +710,9 @@ const DetailInfo = () => {
                                 }
                                 onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
@@ -617,21 +724,35 @@ const DetailInfo = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
                               <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -653,10 +774,18 @@ const DetailInfo = () => {
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
+                                      <b>
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
                                       {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
+                                    </p>
                                     <div>
                                       <a
                                         style={
@@ -668,7 +797,9 @@ const DetailInfo = () => {
                                         }
                                         onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
@@ -680,20 +811,34 @@ const DetailInfo = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder="Masukkan balasan anda"
+                                    />
                                     <div className="flex flex-row gap-3">
                                       <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
                                       <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
index a4afeda8..c5f77f53 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx
@@ -1,21 +1,42 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
-import { useTranslations } from "next-intl";
+
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+import { close, loading } from "@/config/swal";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -57,7 +78,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -98,7 +121,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -116,7 +143,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("1");
@@ -138,7 +177,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (poldaName && String(poldaName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -167,7 +207,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -363,7 +404,8 @@ const FilterPage = () => {
       <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
     </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="flex flex-col">
@@ -388,7 +430,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -404,7 +449,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -416,7 +463,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex  flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -429,17 +478,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -454,19 +522,34 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="png" value="png" checked={formatFilter.includes("png")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")} />
+                    <Checkbox
+                      id="png"
+                      value="png"
+                      checked={formatFilter.includes("png")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PNG</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("jpeg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpeg")} />
+                    <Checkbox
+                      id="jpeg"
+                      value="jpeg"
+                      checked={formatFilter.includes("jpeg")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpeg")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">JPEG</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="jpg" value="jpg" checked={formatFilter.includes("jpg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpg")} />
+                    <Checkbox
+                      id="jpg"
+                      value="jpg"
+                      checked={formatFilter.includes("jpg")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpg")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">JPG</span>
                   </label>
                 </li>
@@ -487,7 +570,11 @@ const FilterPage = () => {
         <div className="w-[80%]">
           <div className="flex flex-col items-end mb-4">
             <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-            <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+            <select
+              defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+              onChange={(e) => handleSorting(e)}
+              className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+            >
               <option value="latest">{t("latest")}</option>
               <option value="popular">{t("mostPopular")}</option>
             </select>
@@ -522,7 +609,10 @@ const FilterPage = () => {
                 //     </Link>
                 //   </CardContent>
                 // </Card>
-                <Card key={image?.id} className="relative overflow-hidden hover:scale-105 transition-transform duration-300 h-full lg:h-[300px] w-full shadow-md hover:shadow-lg rounded-lg">
+                <Card
+                  key={image?.id}
+                  className="relative overflow-hidden hover:scale-105 transition-transform duration-300 h-full lg:h-[300px] w-full shadow-md hover:shadow-lg rounded-lg"
+                >
                   <CardContent className="flex flex-col w-full p-0">
                     <Link href={`${prefixPath}/image/detail/${image?.slug}`} className="relative">
                       {/* Gambar */}
@@ -543,7 +633,9 @@ const FilterPage = () => {
 
                       {/* Judul */}
                       <div className="absolute bottom-3 left-3 right-3  text-white p-3 rounded-md z-10">
-                        <h3 className="text-[20px] font-semibold truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</h3>
+                        <h3 className="text-[20px] font-semibold truncate hover:whitespace-normal hover:overflow-visible">
+                          {image?.title}
+                        </h3>
                       </div>
                     </Link>
                   </CardContent>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
index 1085734a..479e26e1 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/image/layout.tsx
@@ -1,19 +1,20 @@
 "use client";
 
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
-import { redirect } from "@/i18n/navigation";
-import Footer from "@/components/features/landing-page/footer";
-import Navbar from "@/components/features/landing-page/navbar";
-import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
 import { useParams } from "next/navigation";
+import { redirect } from "@/i18n/navigation";
+
+import Footer from "@/components/features/landing-page/footer";
 import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
 import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   const params = useParams();
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx
index bbda5629..c0c9552f 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/detail/[slug]/page.tsx
@@ -1,12 +1,20 @@
 "use client";
-import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname, useRouter } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
 import { getDetailIndeks, publicDetailBlog } from "@/lib/services/landing/landing";
 import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Textarea } from "@/components/ui/textarea";
 
 const IndeksDetail = () => {
   const [indeksData, setIndeksData] = useState<any>();
@@ -44,13 +52,17 @@ const IndeksDetail = () => {
         {/* Footer Informasi */}
         <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
           <div className="flex flex-row items-center mt-3 justify-between">
-            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>
+            &nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
           </div>
         </div>
 
         {/* Keterangan */}
         <div className="w-auto">
-          <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
+          <p
+            className="font-light text-justify"
+            dangerouslySetInnerHTML={{ __html: indeksData?.description }}
+          />
         </div>
       </div>
 
@@ -60,7 +72,9 @@ const IndeksDetail = () => {
           <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">
+              Kirim
+            </button>
           </div>
         </div>
 
@@ -71,13 +85,25 @@ const IndeksDetail = () => {
             <CarouselContent className="w-full max-w-7xl">
               {relatedPost?.map((relate: any) => (
                 <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
-                  <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                  <Link
+                    href={`/indeks/detail/${relate?.slug}`}
+                    className="relative group overflow-hidden shadow-md hover:shadow-lg"
+                  >
+                    <img
+                      src={relate?.thumbnailLink}
+                      className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
+                    />
                     <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
-                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                        {relate?.categoryName}
+                      </span>
+                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                        {relate?.title}
+                      </h1>
                       <p className="flex flex-row items-center text-[10px] gap-2">
-                        {formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
+                        {formatDateToIndonesian(new Date(relate?.createdAt))}{" "}
+                        {relate?.timezone ? relate?.timezone : "WIB"} |{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
                       </p>
                     </div>
                   </Link>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/layout.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/layout.tsx
index 6a8ae228..3e6e6481 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/layout.tsx
@@ -1,20 +1,17 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx
index 121bf896..08328026 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/indeks/page.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+
 import { getIndeksData } from "@/lib/services/landing/landing";
 import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { usePathname } from "next/navigation";
-import React, { useEffect, useState } from "react";
 
 const Indeks: React.FC = () => {
   const pathname = usePathname();
@@ -38,15 +39,27 @@ const Indeks: React.FC = () => {
             (indeks: any, index: number) =>
               index == count && (
                 <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
-                  <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" />
+                  <img
+                    src={indeks?.thumbnailLink}
+                    alt="image"
+                    className="w-full h-[310px] lg:h-[435px] rounded-lg"
+                  />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
+                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                      {indeks?.categoryName}
+                    </span>
                     <Link href={`/indeks/detail/${indeks?.slug}`}>
                       <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
                     </Link>
                     <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
+                      {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@@ -66,15 +79,27 @@ const Indeks: React.FC = () => {
             (indeksRight: any, index: number) =>
               (index == count + 1 || index == count + 2) && (
                 <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
-                  <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
+                  <img
+                    src={indeksRight?.thumbnailLink}
+                    alt="image"
+                    className="w-full h-[310px] lg:h-[215px] rounded-lg "
+                  />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span>
+                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                      {indeksRight?.categoryName}
+                    </span>
                     <Link href={`/indeks/detail/${indeksRight?.slug}`}>
                       <h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
                     </Link>
                     <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(indeksRight?.createdAt))}{" "}
+                      {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@@ -95,11 +120,21 @@ const Indeks: React.FC = () => {
           {indeksData?.map(
             (indeksBottom: any, index: number) =>
               index < 3 && (
-                <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
-                  <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
+                <div
+                  key={indeksBottom?.id}
+                  className="flex flex-col md:flex-row items-start p-4 gap-4"
+                >
+                  <img
+                    src={indeksBottom?.thumbnailLink}
+                    alt=""
+                    className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]"
+                  />
                   <div className="flex flex-col justify-between w-full">
                     <p className="text-sm">{indeksBottom?.date}</p>
-                    <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">
+                    <Link
+                      href={`/indeks/detail/${indeksBottom?.slug}`}
+                      className="text-2xl font-semibold text-gray-800"
+                    >
                       {indeksBottom?.title}
                     </Link>
                     <p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx
index 55180384..98728a3d 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/layout.tsx
@@ -1,17 +1,18 @@
 "use client";
 
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
-import { redirect } from "@/i18n/navigation";
-import Footer from "@/components/features/landing-page/footer";
-import Navbar from "@/components/features/landing-page/navbar";
-import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
 import { useParams } from "next/navigation";
+import { redirect } from "@/i18n/navigation";
+
+import Footer from "@/components/features/landing-page/footer";
+import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   const params = useParams();
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
index cdfb3e80..45676c68 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/page.tsx
@@ -1,18 +1,20 @@
 "use client";
 
+import React from "react";
+import { useParams } from "next/navigation";
+
 import ContentCategory from "@/components/features/landing-page/content-category";
 import HeaderBanner from "@/components/features/landing-page/header-banner";
+import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import ContentCategoryKaltara from "@/components/features/landing-page/landing-polda-kaltara/content-category-kaltara";
+import HeaderBannerKaltara from "@/components/features/landing-page/landing-polda-kaltara/header-banner-kaltara";
+import LatestContentKaltara from "@/components/features/landing-page/landing-polda-kaltara/latest-content-kaltara";
+import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import SearchSectionKaltara from "@/components/features/landing-page/landing-polda-kaltara/search-section-kaltara";
 import NewContent from "@/components/features/landing-page/new-content";
 import WelcomePolda from "@/components/features/landing-page/welcome-polda";
-import React from "react";
-import { useParams } from "next/navigation";
-import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
-import HeaderBannerKaltara from "@/components/features/landing-page/landing-polda-kaltara/header-banner-kaltara";
-import SearchSectionKaltara from "@/components/features/landing-page/landing-polda-kaltara/search-section-kaltara";
-import LatestContentKaltara from "@/components/features/landing-page/landing-polda-kaltara/latest-content-kaltara";
-import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+
 import NewsTickerKaltara from "../../tbnews/[polda_name]/components/news-tickers-kaltara";
-import ContentCategoryKaltara from "@/components/features/landing-page/landing-polda-kaltara/content-category-kaltara";
 
 const page = () => {
   const params = useParams();
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/layout.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/layout.tsx
index 6a8ae228..3e6e6481 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/layout.tsx
@@ -1,20 +1,17 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx
index 9e143dde..8e8f5361 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/schedule/page.tsx
@@ -1,19 +1,47 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import { close, loading } from "@/config/swal";
+import {
+  detailSchedule,
+  listSchedule,
+  listScheduleNextPublic,
+  listSchedulePrevPublic,
+  listScheduleTodayPublic,
+} from "@/lib/services/schedule/schedule";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { format } from "date-fns";
-import { cn } from "@/lib/utils/utils"
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { detailSchedule, listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/lib/services/schedule/schedule";
-import { useRouter } from "@/i18n/navigation";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
-import { close, loading } from "@/config/swal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 const timeList = [
   {
@@ -280,7 +308,9 @@ const Schedule = (props: any) => {
   };
 
   function setItemSchedule(id: string, date: string) {
-    const itemFound: any = schedules?.filter((s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id));
+    const itemFound: any = schedules?.filter(
+      (s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
+    );
 
     if (itemFound?.length > 0) {
       if (itemFound?.length == 1) {
@@ -309,7 +339,9 @@ const Schedule = (props: any) => {
             <b>{`${itemFound?.length} Jadwal Bersamaan`}</b>
           </p>
           <DropdownMenu>
-            <DropdownMenuTrigger className="font-bold text-blue-300">Lihat Jadwal</DropdownMenuTrigger>
+            <DropdownMenuTrigger className="font-bold text-blue-300">
+              Lihat Jadwal
+            </DropdownMenuTrigger>
             <DropdownMenuContent>
               {itemFound?.map((list: any) => (
                 <DropdownMenuItem
@@ -328,7 +360,10 @@ const Schedule = (props: any) => {
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <div className="border-0 dropdown-menu schedule-list" aria-labelledby="view-schedule"></div>
+          <div
+            className="border-0 dropdown-menu schedule-list"
+            aria-labelledby="view-schedule"
+          ></div>
         </div>
       );
     }
@@ -340,7 +375,13 @@ const Schedule = (props: any) => {
       <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
         <Popover>
           <PopoverTrigger asChild>
-            <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
+            <Button
+              variant={"outline"}
+              className={cn(
+                "w-[240px] py-4 justify-start text-left font-normal",
+                !startDate && "text-muted-foreground"
+              )}
+            >
               <CalendarIcon />
               {startDate ? format(startDate, "MMM yyyy") : <span>Pick a date</span>}
             </Button>
@@ -361,11 +402,25 @@ const Schedule = (props: any) => {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                  <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="#000"
+                    d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1"
+                  />
                 </svg>
                 Filter
-                <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  className="flex items-center justify-center"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
                 </svg>
               </a>
@@ -428,15 +483,30 @@ const Schedule = (props: any) => {
                   <table className="w-full text-sm text-start">
                     <thead className="text-md">
                       <tr className="h-full">
-                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">
+                          Time Table
+                        </th>
                         <th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
-                          <a onClick={() => changePrevWeek()} className="cursor-pointer h-fit self-center bottom-0">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
+                          <a
+                            onClick={() => changePrevWeek()}
+                            className="cursor-pointer h-fit self-center bottom-0"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7"
+                              />
                             </svg>
                           </a>
                         </th>
-                        <th className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}>
+                        <th
+                          className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}
+                        >
                           {/* <a className="cursor-pointer h-fit self-center bottom-0" >
                             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                               <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
@@ -447,25 +517,37 @@ const Schedule = (props: any) => {
                             <p>Monday</p>
                           </div>
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>Tuesday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>Wednesday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>Thursday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>Friday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>Saturday
                         </th>
                         <th
                           onClick={() => changeNextWeek()}
                           className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""
+                            new Date().toISOString().slice(0, 10) == dateAWeek[6]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
                           }`}
                         >
                           <div className="flex flex-col ">
@@ -480,8 +562,16 @@ const Schedule = (props: any) => {
                         </th>
                         <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
                           <a onClick={() => changeNextWeek()} className="cursor-pointer">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71"
+                              />
                             </svg>
                           </a>
                         </th>
@@ -490,15 +580,30 @@ const Schedule = (props: any) => {
                     <tbody>
                       {timeList.map((times) => (
                         <tr key={times.id}>
-                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">{times.time}</th>
-                          <td colSpan={2} className="p-3 border border-gray-100 dark:border-gray-700 ">
+                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">
+                            {times.time}
+                          </th>
+                          <td
+                            colSpan={2}
+                            className="p-3 border border-gray-100 dark:border-gray-700 "
+                          >
                             {setItemSchedule(times.id, dateList[0])}
                           </td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[1])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[2])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[3])}</td>
-                          <td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[4])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[5])}</td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[1])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[2])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[3])}
+                          </td>
+                          <td className="p-3 border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[4])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[5])}
+                          </td>
                           <td colSpan={2} className="border border-gray-100 dark:border-gray-700">
                             {setItemSchedule(times.id, dateList[6])}
                           </td>
@@ -514,12 +619,24 @@ const Schedule = (props: any) => {
           {/* Component Kanan */}
           <div className="w-1/4 flex flex-col gap-6">
             <div className="relative text-gray-600 dark:text-white">
-              <input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none" />
+              <input
+                type="text"
+                placeholder="Masukkan Judul Jadwal"
+                className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none"
+              />
               <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <g fill="none" fill-rule="evenodd">
                     <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
-                    <path fill="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
+                    <path
+                      fill="currentColor"
+                      d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0"
+                    />
                   </g>
                 </svg>
               </span>
@@ -562,7 +679,9 @@ const Schedule = (props: any) => {
                 <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
                 {todayList?.map((list: any) => (
                   <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -587,7 +706,9 @@ const Schedule = (props: any) => {
                 <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
                 {prevdayList?.map((list: any) => (
                   <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -612,7 +733,9 @@ const Schedule = (props: any) => {
                 <AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
                 {nextdayList?.map((list: any) => (
                   <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -707,13 +830,16 @@ const Schedule = (props: any) => {
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              <h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
+              <h1 className="my-4 font-light">
+                JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
+              </h1>
               <p className="font-bold">{detail?.title}</p>
             </AlertDialogTitle>
             <AlertDialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="iconamoon:clock-thin" />
-                {detail?.date} {detail?.startTime} - {detail?.endTime} {detail?.timezone ? detail.timezone : "WIB"}
+                {detail?.date} {detail?.startTime} - {detail?.endTime}{" "}
+                {detail?.timezone ? detail.timezone : "WIB"}
               </p>
             </AlertDialogDescription>
             <AlertDialogDescription>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/detail/[slug]/page.tsx
index 18ee45d8..b85aa3e9 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/detail/[slug]/page.tsx
@@ -1,17 +1,23 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/lib/services/landing/landing";
-import VideoPlayer from "@/lib/utils/video-player";
-import NewContent from "@/components/features/landing-page/new-content";
+import { useParams, usePathname } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
 import { close, error, loading } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getDetail,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import VideoPlayer from "@/lib/utils/video-player";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -49,8 +55,8 @@ const DetailVideo = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -233,7 +239,9 @@ const DetailVideo = () => {
             <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
               <p className="flex flex-row items-center mt-3">
                 oleh&nbsp;
-                <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
+                <span className="font-semibold text-black">
+                  {detailDataVideo?.uploadedBy?.userLevel?.name}
+                </span>
                 &nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
@@ -257,12 +265,18 @@ const DetailVideo = () => {
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4 h-fit">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -271,13 +285,20 @@ const DetailVideo = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataVideo?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataVideo?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataVideo?.categoryName}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataVideo?.tags.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500 hover:text-white">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500 hover:text-white"
+                >
                   {tag}
                 </a>
               ))}
@@ -286,15 +307,27 @@ const DetailVideo = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio Visual</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Audio Visual
+            </h4>
 
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -307,15 +340,25 @@ const DetailVideo = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -328,7 +371,9 @@ const DetailVideo = () => {
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">
+              Kirim
+            </button>
           </div>
         </div>
 
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
index 2a53348f..12e90c3c 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx
@@ -1,21 +1,43 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getListContent,
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
 import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -53,7 +75,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -93,7 +117,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -111,7 +139,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("2");
@@ -133,7 +173,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (poldaName && String(poldaName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -162,7 +203,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -389,7 +431,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -405,7 +450,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -417,7 +464,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -430,17 +479,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -455,31 +523,56 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mk4" value="mk4" checked={formatFilter.includes("mk4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")} />
+                    <Checkbox
+                      id="mk4"
+                      value="mk4"
+                      checked={formatFilter.includes("mk4")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MK4</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mov" value="mov" checked={formatFilter.includes("mov")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")} />
+                    <Checkbox
+                      id="mov"
+                      value="mov"
+                      checked={formatFilter.includes("mov")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MOV</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mp4" value="mp4" checked={formatFilter.includes("mp4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")} />
+                    <Checkbox
+                      id="mp4"
+                      value="mp4"
+                      checked={formatFilter.includes("mp4")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MP4</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="avi" value="avi" checked={formatFilter.includes("avi")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")} />
+                    <Checkbox
+                      id="avi"
+                      value="avi"
+                      checked={formatFilter.includes("avi")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">AVI</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="wmv" value="wmv" checked={formatFilter.includes("wmv")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")} />
+                    <Checkbox
+                      id="wmv"
+                      value="wmv"
+                      checked={formatFilter.includes("wmv")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">WMV</span>
                   </label>
                 </li>
@@ -499,7 +592,11 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -508,21 +605,36 @@ const FilterPage = () => {
             {videoData?.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {videoData?.map((video: any) => (
-                  <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
+                  <Card
+                    key={video?.id}
+                    className="hover:scale-110 transition-transform duration-300"
+                  >
                     <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                       <Link href={`${prefixPath}/video/detail/${video?.slug}`}>
-                        <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
+                        <img
+                          src={video?.thumbnailLink}
+                          className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center"
+                        />
                         <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                          {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                          {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
+                          {video?.timezone ? video?.timezone : "WIB"}|{" "}
+                          <Icon icon="formkit:eye" width="15" height="15" />
                           {video?.clickCount}{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 20 20"
+                          >
                             <path
                               fill="#f00"
                               d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
                             />
                           </svg>{" "}
                         </div>
-                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
+                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
+                          {video?.title}
+                        </div>
                       </Link>
                     </CardContent>
                   </Card>
diff --git a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx
index 1085734a..479e26e1 100644
--- a/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/polda/[polda_name]/video/layout.tsx
@@ -1,19 +1,20 @@
 "use client";
 
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
-import { redirect } from "@/i18n/navigation";
-import Footer from "@/components/features/landing-page/footer";
-import Navbar from "@/components/features/landing-page/navbar";
-import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
 import { useParams } from "next/navigation";
+import { redirect } from "@/i18n/navigation";
+
+import Footer from "@/components/features/landing-page/footer";
 import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import NavbarKaltara from "@/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
 import NewsTickerKaltara from "../../../tbnews/[polda_name]/components/news-tickers-kaltara";
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = ({ children }: { children: React.ReactNode }) => {
   const params = useParams();
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
index fd2a7bdb..6a53c21e 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/contact-us.tsx
@@ -1,7 +1,7 @@
+import React from "react";
+import Image from "next/image";
 import { Link } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
-import React from "react";
 
 const ContactUs = () => {
   return (
@@ -20,9 +20,13 @@ const ContactUs = () => {
             <hr className="border-t-2 border-dotted border-[#bb3523] my-2" />
             <p className="flex items-center text-sm gap-2">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                <path fill="#000" d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7" />
+                <path
+                  fill="#000"
+                  d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7"
+                />
               </svg>
-              Jalan Komjen Dr. H.M. Jasin No.86, Bumi Rahayu, Kec. Tj. Selor, Kabupaten Bulungan, Kalimantan Utara 77212
+              Jalan Komjen Dr. H.M. Jasin No.86, Bumi Rahayu, Kec. Tj. Selor, Kabupaten Bulungan,
+              Kalimantan Utara 77212
             </p>
             <p className="flex items-center text-sm  mt-2 gap-2">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
@@ -50,7 +54,10 @@ const ContactUs = () => {
             </p>
             <p className="flex items-center mt-2 gap-2">
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                <path fill="#000" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z" />
+                <path
+                  fill="#000"
+                  d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z"
+                />
               </svg>
               ppid@polri.go.id
             </p>
@@ -70,7 +77,10 @@ const ContactUs = () => {
                 </svg>
                 Tentang Kami{" "}
               </Link>
-              <Link href="https://tribratanews.polri.go.id/" className="flex items-center mt-2 text-sm gap-2">
+              <Link
+                href="https://tribratanews.polri.go.id/"
+                className="flex items-center mt-2 text-sm gap-2"
+              >
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
@@ -79,7 +89,10 @@ const ContactUs = () => {
                 </svg>
                 Redaksi
               </Link>
-              <Link href="https://www.humas.polri.go.id/" className="flex items-center mt-2 text-sm gap-2 ">
+              <Link
+                href="https://www.humas.polri.go.id/"
+                className="flex items-center mt-2 text-sm gap-2 "
+              >
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
@@ -88,7 +101,10 @@ const ContactUs = () => {
                 </svg>
                 Pedoman Media Siber
               </Link>
-              <Link href="https://new.netidhub.com/" className="flex items-center mt-2 text-sm gap-2">
+              <Link
+                href="https://new.netidhub.com/"
+                className="flex items-center mt-2 text-sm gap-2"
+              >
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
index 1ea65ddb..eabb287d 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/hero-kaltara.tsx
@@ -1,15 +1,22 @@
 "use client";
 
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
-import { Icon } from "@/components/ui/icon";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Link } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/lib/utils/globals";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/lib/utils/globals";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Icon } from "@/components/ui/icon";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Reveal } from "@/components/features/landing-page/Reveal";
 
 const HeroKaltara = () => {
   const params = useParams();
@@ -45,7 +52,8 @@ const HeroKaltara = () => {
     {
       id: 3,
       thumbnailLink: "/assets/tbnews/image-hero3.png",
-      title: "Polda Kaltara Menerima Surprise Dari Gubernur Kaltara dan Unsur TNI Dalam Hari Jadi Polda Kaltara ke 7",
+      title:
+        "Polda Kaltara Menerima Surprise Dari Gubernur Kaltara dan Unsur TNI Dalam Hari Jadi Polda Kaltara ke 7",
       categoryName: "NASIONAL",
       createdAt: "16 FEBRUARI 2025 | 16:18 WIB",
       description:
@@ -54,7 +62,8 @@ const HeroKaltara = () => {
     {
       id: 4,
       thumbnailLink: "/assets/tbnews/image-hero4.png",
-      title: "Kapolda Kaltara Resmikan Gedung Pelayanan SKCK Polres Tana Tidung: Langkah Meningkatkan Pelayanan Publik",
+      title:
+        "Kapolda Kaltara Resmikan Gedung Pelayanan SKCK Polres Tana Tidung: Langkah Meningkatkan Pelayanan Publik",
       categoryName: "NASIONAL",
       createdAt: "16 FEBRUARI 2025 | 16:18 WIB",
       description:
@@ -127,7 +136,8 @@ const HeroKaltara = () => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -173,9 +183,17 @@ const HeroKaltara = () => {
                   <CarouselItem key={row?.id}>
                     <div className="flex flex-col gap-[10px]">
                       <Link href={`${locale}/image/detail/${row?.slug}`}>
-                        <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover" />
+                        <Image
+                          src={row?.thumbnailLink}
+                          alt="gambar-utama"
+                          width={1920}
+                          height={1080}
+                          className="w-full h-[200px] lg:h-[500px] rounded-sm object-cover"
+                        />
                       </Link>
-                      <h1 className="font-bold font-sans text-[15px] lg:text-[30px]">{row.title}</h1>
+                      <h1 className="font-bold font-sans text-[15px] lg:text-[30px]">
+                        {row.title}
+                      </h1>
                       <div className="flex flex-row gap-3">
                         <p className="text-[#c03724] font-sans text-[16px]">{row?.categoryName}</p>
                         <p className="text-[16px] font-sans flex flex-row items-center text-slate-500 dark:text-white gap-1">
@@ -183,7 +201,10 @@ const HeroKaltara = () => {
                           {/* {row?.createdAt} */}
                         </p>
                       </div>
-                      <p className="text-[16px] font-sans text-justify" dangerouslySetInnerHTML={{ __html: row?.description }} />
+                      <p
+                        className="text-[16px] font-sans text-justify"
+                        dangerouslySetInnerHTML={{ __html: row?.description }}
+                      />
                     </div>
                   </CarouselItem>
                 ))}
@@ -236,7 +257,13 @@ const HeroKaltara = () => {
               {newContent?.slice(1).map((item: any, index: number) => (
                 <div className="flex gap-[6px] flex-col lg:w-full" key={index}>
                   <div className="flex-shrink-0 rounded-lg">
-                    <Image width={720} height={480} src={item?.thumbnailLink} alt="" className="w-full h-[120px] object-cover rounded-sm" />
+                    <Image
+                      width={720}
+                      height={480}
+                      src={item?.thumbnailLink}
+                      alt=""
+                      className="w-full h-[120px] object-cover rounded-sm"
+                    />
                   </div>
                   <div className="w-[280px] lg:w-auto flex flex-col gap-[6px]">
                     <h3 className="font-bold text-[14px] font-sans">{item?.title}</h3>
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
index 1c7642a6..743ab840 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/latest-news.tsx
@@ -1,13 +1,14 @@
 "use client";
 
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Skeleton } from "@/components/ui/skeleton";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { useTranslations } from "next-intl";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Reveal } from "@/components/features/landing-page/Reveal";
 
 const LatestNews = (props: { type: string }) => {
   const [isLoading, setIsLoading] = useState<any>(true);
@@ -22,7 +23,8 @@ const LatestNews = (props: { type: string }) => {
     {
       id: 1,
       thumbnailLink: "/assets/tbnews/latest1.png",
-      title: "Tokoh Agama Papua Apresiasi Makan Bergizi Gratis: Investasi Masa Depan Anak-anak Papua",
+      title:
+        "Tokoh Agama Papua Apresiasi Makan Bergizi Gratis: Investasi Masa Depan Anak-anak Papua",
       categoryName: "NASIONAL",
       createdAt: "17 Feb 2025 - 09:23 WIB",
       description:
@@ -136,7 +138,14 @@ const LatestNews = (props: { type: string }) => {
       <Reveal>
         <div className="my-10 px-4 lg:px-20 gap-3">
           <div className="bg-[#c03724] rounded-md p-3 w-fit">
-            <p className="text-white font-sans font-semibold">Berita {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}</p>
+            <p className="text-white font-sans font-semibold">
+              Berita{" "}
+              {props.type == "popular"
+                ? "Terpopuler"
+                : props.type == "latest"
+                  ? t("new")
+                  : "Serupa"}
+            </p>
           </div>
         </div>
         <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20">
@@ -152,7 +161,14 @@ const LatestNews = (props: { type: string }) => {
             <div className="w-full lg:w-2/3 lg:h-full">
               {newContent?.slice(0, 1).map((row: any) => (
                 <div className="flex flex-col gap-[10px]" key={row?.id}>
-                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[300px] rounded-sm object-cover" /> <h1 className="font-bold text-[16px] font-sans">{row?.title}</h1>
+                  <Image
+                    src={row?.thumbnailLink}
+                    alt="gambar-utama"
+                    width={1920}
+                    height={1080}
+                    className="w-full h-[200px] lg:h-[300px] rounded-sm object-cover"
+                  />{" "}
+                  <h1 className="font-bold text-[16px] font-sans">{row?.title}</h1>
                   <div className="flex flex-row gap-[10px]">
                     <p className="text-[#c03724] text-[12px] font-sans">{row?.categoryName}</p>
                     <p className="text-[12px] font-sans flex flex-row items-center text-slate-500 dark:text-white">
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
index ad941670..54ccf1e6 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/national-news.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getHeroData, listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+
+import { getHeroData, listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Reveal } from "@/components/features/landing-page/Reveal";
 
 const NationalNews = () => {
   const [isLoading, setIsLoading] = useState<any>(true);
@@ -20,7 +21,8 @@ const NationalNews = () => {
     {
       id: 1,
       thumbnailLink: "/assets/tbnews/nasional1.png",
-      title: "Wakapolda Papua Berikan Penghargaan Kapolri Kepada Anggota Yang Berprestasi saat Upacara Hari Kesadaran Nasional",
+      title:
+        "Wakapolda Papua Berikan Penghargaan Kapolri Kepada Anggota Yang Berprestasi saat Upacara Hari Kesadaran Nasional",
       categoryName: "NASIONAL",
       createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
       description:
@@ -29,7 +31,8 @@ const NationalNews = () => {
     {
       id: 2,
       thumbnailLink: "/assets/tbnews/image-hero2.png",
-      title: "Kabid Humas Polda NTT Apresiasi Respon Cepat Tim Buser Polres Ngada yang Berhasil Ringkus Terduga Pelaku Pemerkosaan",
+      title:
+        "Kabid Humas Polda NTT Apresiasi Respon Cepat Tim Buser Polres Ngada yang Berhasil Ringkus Terduga Pelaku Pemerkosaan",
       categoryName: "NASIONAL",
       createdAt: "16 FEBRUARI 2025 - 16:18 WIB",
       description:
@@ -149,7 +152,14 @@ const NationalNews = () => {
             <div className="w-full lg:w-2/3 lg:h-full">
               {newContent?.slice(0, 1).map((row: any) => (
                 <div className="flex flex-col gap-[10px]">
-                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[300px] rounded-sm object-cover" /> <h1 className="font-bold text-[16px] font-sans">{row?.title}</h1>
+                  <Image
+                    src={row?.thumbnailLink}
+                    alt="gambar-utama"
+                    width={1920}
+                    height={1080}
+                    className="w-full h-[200px] lg:h-[300px] rounded-sm object-cover"
+                  />{" "}
+                  <h1 className="font-bold text-[16px] font-sans">{row?.title}</h1>
                   <div className="flex flex-row gap-[10px]">
                     <p className="text-[#c03724] text-[12px] font-sans">{row?.categoryName}</p>
                     <p className="text-[12px] font-sans flex flex-row items-center text-slate-500 dark:text-white">
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
index c32e37df..e4034009 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/navbar-kaltara.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import React, { useState } from "react";
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import { Link } from "@/i18n/navigation";
-import Image from "next/image";
-import React, { useState } from "react";
 
 const category = [
   {
@@ -55,7 +56,13 @@ const NavbarKaltara = () => {
       <div className="flex flex-row justify-between items-center">
         <div className="flex w-full justify-between items-center">
           <Link href="/tbnews/polda-kaltara">
-            <Image width={2560} height={1440} src="/assets/img/logo-new-tbnews.png" alt="image" className="h-28 w-72" />
+            <Image
+              width={2560}
+              height={1440}
+              src="/assets/img/logo-new-tbnews.png"
+              alt="image"
+              className="h-28 w-72"
+            />
           </Link>
 
           <div className="flex flex-row">
@@ -76,14 +83,23 @@ const NavbarKaltara = () => {
         </div>
 
         {/* Mobile Menu Toggle */}
-        <button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
+        <button
+          className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden"
+          onClick={() => setMenuOpen(!menuOpen)}
+        >
           {menuOpen ? (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
+              <path
+                fill="currentColor"
+                d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
+              />
             </svg>
           ) : (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
+              <path
+                fill="currentColor"
+                d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z"
+              />
             </svg>
           )}
         </button>
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx
index ea5ea5d6..ea167c5b 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara.tsx
@@ -1,11 +1,13 @@
 "use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+
 import { getHeroData, listCarousel, listData } from "@/lib/services/landing/landing";
 import { formatDateToIndonesian, textEllipsis } from "@/lib/utils/globals";
-import { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
 import { Icon } from "@/components/ui/icon";
-import { useParams } from "next/navigation";
 
 export default function NewsTickerKaltara() {
   const [article, setArticle] = useState<any>([]);
@@ -121,21 +123,35 @@ export default function NewsTickerKaltara() {
         <span className="mr-0 lg:mr-2 w-full font-bold">{tanggal}</span>
         <div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
       </div>
-      <div className="text-[13px] lg:text-base w-full lg:w-[200px] text-white font-semibold ml-2 lg:ml-5 flex items-center">{t("breakingNews")} :</div>
-      <div className={`w-full px-2 lg:px-5 py-1 flex flex-col lg:flex-row items-center gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
+      <div className="text-[13px] lg:text-base w-full lg:w-[200px] text-white font-semibold ml-2 lg:ml-5 flex items-center">
+        {t("breakingNews")} :
+      </div>
+      <div
+        className={`w-full px-2 lg:px-5 py-1 flex flex-col lg:flex-row items-center gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}
+      >
         <Link href={`news/detail/${content[currentNewsIndex]?.id}`} className="hidden lg:block">
           <p className="text-[11px] text-white lg:text-base">{content[currentNewsIndex]?.title}</p>
         </Link>
         <Link href={`news/detail/${content[currentNewsIndex]?.id}`} className="lg:hidden">
-          <p className="text-[11px] text-white lg:text-base">{textEllipsis(content[currentNewsIndex]?.title, 28)}</p>
+          <p className="text-[11px] text-white lg:text-base">
+            {textEllipsis(content[currentNewsIndex]?.title, 28)}
+          </p>
         </Link>
-        <p className="text-[8px] lg:text-xs text-white">{formatDateToIndonesian(content[currentNewsIndex]?.createdAt)}</p>
+        <p className="text-[8px] lg:text-xs text-white">
+          {formatDateToIndonesian(content[currentNewsIndex]?.createdAt)}
+        </p>
       </div>
       <div className="flex flex-row text-white h-full gap-[1px]">
-        <a className="bg-[#bb3523] h-full flex items-center cursor-pointer" onClick={() => handlePrev()}>
+        <a
+          className="bg-[#bb3523] h-full flex items-center cursor-pointer"
+          onClick={() => handlePrev()}
+        >
           <Icon icon="ic:twotone-arrow-left" fontSize={30} />
         </a>
-        <a className="bg-[#bb3523] h-full flex items-center cursor-pointer" onClick={() => handleNext()}>
+        <a
+          className="bg-[#bb3523] h-full flex items-center cursor-pointer"
+          onClick={() => handleNext()}
+        >
           <Icon icon="ic:twotone-arrow-right" fontSize={30} />
         </a>
       </div>
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
index 600d46f8..24230884 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/popular-news.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { Skeleton } from "@/components/ui/skeleton";
-import { getHeroData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+
+import { getHeroData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const PopularNews = () => {
   const [isLoading, setIsLoading] = useState<any>(true);
@@ -69,13 +70,25 @@ const PopularNews = () => {
           <div className="w-full lg:w-2/3 lg:h-full">
             {heroData?.length > 0 && (
               <div className="flex flex-col gap-3">
-                <Image src={heroData[0]?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover" />{" "}
+                <Image
+                  src={heroData[0]?.thumbnailLink}
+                  alt="gambar-utama"
+                  width={1920}
+                  height={1080}
+                  className="w-full lg:w-[950px] h-[310px] lg:h-[420px] rounded-sm object-cover"
+                />{" "}
                 <h1 className="font-bold text-xl">{heroData[0]?.title}</h1>
                 <div className="flex flex-row gap-3">
                   <p className="text-[#c03724] text-xs">{heroData[0]?.categoryName}</p>
                   <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                    {formatDateToIndonesian(new Date(heroData[0]?.createdAt))} {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
-                    <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                    {formatDateToIndonesian(new Date(heroData[0]?.createdAt))}{" "}
+                    {heroData[0]?.timezone ? heroData[0]?.timezone : "WIB"}|{" "}
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="1.2em"
+                      height="1.2em"
+                      viewBox="0 0 24 24"
+                    >
                       <path
                         fill="currentColor"
                         d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@@ -85,10 +98,16 @@ const PopularNews = () => {
                   </p>
                 </div>
                 <p className="text-light text-justify hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
-                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta eligendi voluptate, ab sunt ratione accusamus esse animi vel libero
-                  veniam nulla tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit rem veniam doloribus saepe
-                  atque quia ut quaerat fugit harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis. Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit cum placeat! Est nostrum quas
-                  veritatis deserunt itaque illum alias. Assumenda deleniti similique id.
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae eum
+                  consectetur cum placeat non aperiam suscipit libero ipsa commodi. Quam dicta
+                  eligendi voluptate, ab sunt ratione accusamus esse animi vel libero veniam nulla
+                  tenetur ipsum provident minus. Error ad eligendi quasi autem neque ex, iste
+                  perspiciatis magnam. Magni, quos sequi. Lorem ipsum, dolor sit amet consectetur
+                  adipisicing elit. Velit rem veniam doloribus saepe atque quia ut quaerat fugit
+                  harum. Velit quia quisquam consectetur blanditiis porro itaque perferendis.
+                  Voluptatibus fuga ipsam maxime, hic doloribus inventore, odio eos molestiae velit
+                  cum placeat! Est nostrum quas veritatis deserunt itaque illum alias. Assumenda
+                  deleniti similique id.
                 </p>
               </div>
             )}
@@ -145,8 +164,14 @@ const PopularNews = () => {
                   <div className="flex flex-row gap-5">
                     <p className="text-[#c03724] text-sm">{item?.categoryName}</p>
                     <p className="text-xs flex flex-row items-center text-slate-500 dark:text-white gap-1">
-                      {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
+                      {item?.timezone ? item?.timezone : "WIB"}|{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
index b4e33913..b7f4fe33 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/pps-section.tsx
@@ -1,10 +1,17 @@
 "use client";
 
 import React from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import Image from "next/image";
 
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
 const PpsSection = () => {
   const image = [
     {
@@ -29,7 +36,13 @@ const PpsSection = () => {
             {image?.map((news: any, index) => (
               <CarouselItem key={news?.id} className="grid grid-cols-1">
                 <Card key={index} className="w-full overflow-hidden shadow-lg h-full">
-                  <Image src={news.src} alt="pps" width={2560} height={1440} className="w-full h-full lg:h-[60vh] object-cover rounded-md" />
+                  <Image
+                    src={news.src}
+                    alt="pps"
+                    width={2560}
+                    height={1440}
+                    className="w-full h-full lg:h-[60vh] object-cover rounded-md"
+                  />
 
                   <CardContent className="p-4">
                     {/* <div className="flex items-center gap-2 text-white text-xs font-bold">
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
index 18633248..bf159945 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/regional-news.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getHeroData, listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+
+import { getHeroData, listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Reveal } from "@/components/features/landing-page/Reveal";
 
 const RegionalNews = () => {
   const [isLoading, setIsLoading] = useState<any>(true);
@@ -22,7 +23,8 @@ const RegionalNews = () => {
     {
       id: 1,
       thumbnailLink: "/assets/tbnews/wilayah1.png",
-      title: "Rotasi Jabatan, Kapolres Malinau Pimpin Upacara Serah Terima Jabatan Wakapolres Malinau Dan Kabagops Polres Malinau",
+      title:
+        "Rotasi Jabatan, Kapolres Malinau Pimpin Upacara Serah Terima Jabatan Wakapolres Malinau Dan Kabagops Polres Malinau",
       categoryName: "KALTARA",
       createdAt: "17 Feb 2025 - 09:23 WIB",
       description:
@@ -31,7 +33,8 @@ const RegionalNews = () => {
     {
       id: 2,
       thumbnailLink: "/assets/tbnews/image-hero2.png",
-      title: "Dansat Brimob Polda Kaltara Turun Tangan Angkat Dani dan Saudara-Saudaranya sebagai Anak Asuhnya",
+      title:
+        "Dansat Brimob Polda Kaltara Turun Tangan Angkat Dani dan Saudara-Saudaranya sebagai Anak Asuhnya",
       categoryName: "KALTARA",
       createdAt: "17 Feb 2025 - 09:23 WIB",
       description:
@@ -40,7 +43,8 @@ const RegionalNews = () => {
     {
       id: 3,
       thumbnailLink: "/assets/tbnews/image-hero3.png",
-      title: "Polda Kaltara Gelar Operasi Pekat Kayan 2025 Guna Menjaga Situasi Kamtibmas Menjelang Bulan Suci Ramadhan",
+      title:
+        "Polda Kaltara Gelar Operasi Pekat Kayan 2025 Guna Menjaga Situasi Kamtibmas Menjelang Bulan Suci Ramadhan",
       categoryName: "KALTARA",
       createdAt: "17 Feb 2025 - 09:23 WIB",
       description:
@@ -58,7 +62,8 @@ const RegionalNews = () => {
     {
       id: 5,
       thumbnailLink: "/assets/tbnews/image-hero4.png",
-      title: "51 anggota satpam ikuti penutupan diksar yang dipimpin langsung oleh Dirbinmas Polda kalatar.",
+      title:
+        "51 anggota satpam ikuti penutupan diksar yang dipimpin langsung oleh Dirbinmas Polda kalatar.",
       categoryName: "KALTARA",
       createdAt: "17 Feb 2025 - 09:23 WIB",
       description:
@@ -142,7 +147,14 @@ const RegionalNews = () => {
             <div className="w-full lg:w-2/3 lg:h-full">
               {newContent?.slice(0, 1).map((row: any) => (
                 <div className="flex flex-col gap-[10px]">
-                  <Image src={row?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full h-[200px] lg:h-[300px] rounded-sm object-cover" /> <h1 className="font-bold text-[16px] font-sans">{row?.title}</h1>
+                  <Image
+                    src={row?.thumbnailLink}
+                    alt="gambar-utama"
+                    width={1920}
+                    height={1080}
+                    className="w-full h-[200px] lg:h-[300px] rounded-sm object-cover"
+                  />{" "}
+                  <h1 className="font-bold text-[16px] font-sans">{row?.title}</h1>
                   <div className="flex flex-row gap-3">
                     <p className="text-[#c03724] text-[12px] font-sans">{row?.categoryName}</p>
                     <p className="text-[12px] font-sans flex flex-row items-center text-slate-500 dark:text-white">
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
index fe97ed8a..513d696c 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/social-media.tsx
@@ -1,13 +1,20 @@
 "use client";
 
 import React, { useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import Image from "next/image";
-import { Icon } from "@/components/ui/icon";
 import { Link } from "@/i18n/navigation";
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+
 import { formatDateToIndonesian } from "@/lib/utils/globals";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Icon } from "@/components/ui/icon";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Reveal } from "@/components/features/landing-page/Reveal";
 
 const SocialMedia = () => {
   const [selectedTab, setSelectedTab] = useState("x");
@@ -60,7 +67,8 @@ const SocialMedia = () => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -142,16 +150,30 @@ const SocialMedia = () => {
                 <Carousel className="w-full mx-auto">
                   <CarouselContent className="gap-[20px] pl-5">
                     {twitter?.map((image: any) => (
-                      <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4 border border-slate-300 rounded-lg mt-4">
+                      <CarouselItem
+                        key={image?.id}
+                        className="md:basis-1/2 lg:basis-1/4 border border-slate-300 rounded-lg mt-4"
+                      >
                         <div className="mt-2 flex flex-row gap-2 mx-1">
                           <div className="h-full">
                             {" "}
-                            <Image alt="" src={image?.logo} width={1920} height={1080} className="h-12 w-12" />
+                            <Image
+                              alt=""
+                              src={image?.logo}
+                              width={1920}
+                              height={1080}
+                              className="h-12 w-12"
+                            />
                           </div>
                           <div className="flex flex-col">
                             <div className="flex flex-row gap-2">
                               <p className="font-bold">{image?.title}</p>
-                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="20"
+                                height="20"
+                                viewBox="0 0 256 256"
+                              >
                                 <path
                                   fill="#53b0ff"
                                   d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
@@ -164,7 +186,13 @@ const SocialMedia = () => {
                         <div className="flex flex-col w-full px-3">
                           <div className="my-3">
                             <p className="text-sm text-justify">{image?.desc} </p>
-                            <Image alt="" src={image?.image} width={1920} height={1080} className="h-full w-full mt-3 rounded-md" />{" "}
+                            <Image
+                              alt=""
+                              src={image?.image}
+                              width={1920}
+                              height={1080}
+                              className="h-full w-full mt-3 rounded-md"
+                            />{" "}
                           </div>
                         </div>
                       </CarouselItem>
@@ -180,12 +208,23 @@ const SocialMedia = () => {
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
                       {" "}
-                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                      <Image
+                        alt=""
+                        src="/assets/img/logo-humas.jpg"
+                        width={1920}
+                        height={1080}
+                        className="h-12 w-12"
+                      />
                     </div>
                     <div className="flex flex-col">
                       <div className="flex flex-row gap-2">
                         <p className="font-bold">TBNews Mabes Polri</p>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="20"
+                          height="20"
+                          viewBox="0 0 256 256"
+                        >
                           <path
                             fill="#53b0ff"
                             d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
@@ -198,10 +237,18 @@ const SocialMedia = () => {
                   <div className="flex flex-col w-full px-3">
                     <div className="my-3">
                       <p className="text-sm text-justify">
-                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
-                        dolor ut ullam tempora deserunt dolore consequatur!
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat
+                        soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta
+                        saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
+                        ullam tempora deserunt dolore consequatur!
                       </p>
-                      <Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                      <Image
+                        alt=""
+                        src="/assets/img/gbr-contoh.png"
+                        width={1920}
+                        height={1080}
+                        className="h-32 w-full mt-3 rounded-md"
+                      />{" "}
                     </div>
                   </div>
                 </div>
@@ -212,12 +259,23 @@ const SocialMedia = () => {
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
                       {" "}
-                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                      <Image
+                        alt=""
+                        src="/assets/img/logo-humas.jpg"
+                        width={1920}
+                        height={1080}
+                        className="h-12 w-12"
+                      />
                     </div>
                     <div className="flex flex-col">
                       <div className="flex flex-row gap-2">
                         <p className="font-bold">TBNews Mabes Polri</p>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="20"
+                          height="20"
+                          viewBox="0 0 256 256"
+                        >
                           <path
                             fill="#53b0ff"
                             d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
@@ -230,10 +288,18 @@ const SocialMedia = () => {
                   <div className="flex flex-col w-full px-3">
                     <div className="my-3">
                       <p className="text-sm text-justify">
-                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
-                        dolor ut ullam tempora deserunt dolore consequatur!
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat
+                        soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta
+                        saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
+                        ullam tempora deserunt dolore consequatur!
                       </p>
-                      <Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                      <Image
+                        alt=""
+                        src="/assets/img/gbr-contoh.png"
+                        width={1920}
+                        height={1080}
+                        className="h-32 w-full mt-3 rounded-md"
+                      />{" "}
                     </div>
                   </div>
                 </div>
@@ -244,12 +310,23 @@ const SocialMedia = () => {
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
                       {" "}
-                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                      <Image
+                        alt=""
+                        src="/assets/img/logo-humas.jpg"
+                        width={1920}
+                        height={1080}
+                        className="h-12 w-12"
+                      />
                     </div>
                     <div className="flex flex-col">
                       <div className="flex flex-row gap-2">
                         <p className="font-bold">TBNews Mabes Polri</p>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="20"
+                          height="20"
+                          viewBox="0 0 256 256"
+                        >
                           <path
                             fill="#53b0ff"
                             d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
@@ -262,10 +339,18 @@ const SocialMedia = () => {
                   <div className="flex flex-col w-full px-3">
                     <div className="my-3">
                       <p className="text-sm text-justify">
-                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
-                        dolor ut ullam tempora deserunt dolore consequatur!
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat
+                        soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta
+                        saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
+                        ullam tempora deserunt dolore consequatur!
                       </p>
-                      <Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                      <Image
+                        alt=""
+                        src="/assets/img/gbr-contoh.png"
+                        width={1920}
+                        height={1080}
+                        className="h-32 w-full mt-3 rounded-md"
+                      />{" "}
                     </div>
                   </div>
                 </div>
@@ -276,12 +361,23 @@ const SocialMedia = () => {
                   <div className="mt-2 flex flex-row gap-2 mx-1">
                     <div className="h-full">
                       {" "}
-                      <Image alt="" src="/assets/img/logo-humas.jpg" width={1920} height={1080} className="h-12 w-12" />
+                      <Image
+                        alt=""
+                        src="/assets/img/logo-humas.jpg"
+                        width={1920}
+                        height={1080}
+                        className="h-12 w-12"
+                      />
                     </div>
                     <div className="flex flex-col">
                       <div className="flex flex-row gap-2">
                         <p className="font-bold">TBNews Mabes Polri</p>
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="20"
+                          height="20"
+                          viewBox="0 0 256 256"
+                        >
                           <path
                             fill="#53b0ff"
                             d="M225.86 102.82c-3.77-3.94-7.67-8-9.14-11.57c-1.36-3.27-1.44-8.69-1.52-13.94c-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52c-3.56-1.47-7.63-5.37-11.57-9.14C146.28 23.51 138.44 16 128 16s-18.27 7.51-25.18 14.14c-3.94 3.77-8 7.67-11.57 9.14c-3.25 1.36-8.69 1.44-13.94 1.52c-9.76.15-20.82.31-28.51 8s-7.8 18.75-8 28.51c-.08 5.25-.16 10.67-1.52 13.94c-1.47 3.56-5.37 7.63-9.14 11.57C23.51 109.72 16 117.56 16 128s7.51 18.27 14.14 25.18c3.77 3.94 7.67 8 9.14 11.57c1.36 3.27 1.44 8.69 1.52 13.94c.15 9.76.31 20.82 8 28.51s18.75 7.85 28.51 8c5.25.08 10.67.16 13.94 1.52c3.56 1.47 7.63 5.37 11.57 9.14c6.9 6.63 14.74 14.14 25.18 14.14s18.27-7.51 25.18-14.14c3.94-3.77 8-7.67 11.57-9.14c3.27-1.36 8.69-1.44 13.94-1.52c9.76-.15 20.82-.31 28.51-8s7.85-18.75 8-28.51c.08-5.25.16-10.67 1.52-13.94c1.47-3.56 5.37-7.63 9.14-11.57c6.63-6.9 14.14-14.74 14.14-25.18s-7.51-18.27-14.14-25.18m-52.2 6.84l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 11.32"
@@ -294,22 +390,39 @@ const SocialMedia = () => {
                   <div className="flex flex-col w-full px-3">
                     <div className="my-3">
                       <p className="text-sm text-justify">
-                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta saepe perspiciatis corrupti quae sapiente accusantium cumque et
-                        dolor ut ullam tempora deserunt dolore consequatur!
+                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quo fugiat
+                        soluta. Possimus est inventore, quidem eligendi fugit repudiandae dicta
+                        saepe perspiciatis corrupti quae sapiente accusantium cumque et dolor ut
+                        ullam tempora deserunt dolore consequatur!
                       </p>
-                      <Image alt="" src="/assets/img/gbr-contoh.png" width={1920} height={1080} className="h-32 w-full mt-3 rounded-md" />{" "}
+                      <Image
+                        alt=""
+                        src="/assets/img/gbr-contoh.png"
+                        width={1920}
+                        height={1080}
+                        className="h-32 w-full mt-3 rounded-md"
+                      />{" "}
                     </div>
                   </div>
                 </div>
               </div>
             ) : (
               <p className="flex items-center justify-center">
-                <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                <Image
+                  width={1920}
+                  height={1080}
+                  src="/assets/empty-data.png"
+                  alt="empty"
+                  className="h-52 w-52 my-4"
+                />
               </p>
             )}
           </div>
           <div className="flex items-center flex-row justify-center mt-4">
-            <Link href="#" className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
+            <Link
+              href="#"
+              className="border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"
+            >
               Lihat Semua
             </Link>
           </div>
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/layout.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/layout.tsx
index f7fff9e8..0bb7f426 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/layout.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/layout.tsx
@@ -1,5 +1,5 @@
-import NavbarKaltara from "../../../components/navbar-kaltara";
 import ContactUs from "../../../components/contact-us";
+import NavbarKaltara from "../../../components/navbar-kaltara";
 import NewsTickerKaltara from "../../../components/news-tickers-kaltara";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
index cd718bdb..c7b03ed0 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
@@ -139,28 +139,41 @@
 
 "use client";
 
-import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
-import { useToast } from "@/components/ui/use-toast";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, error, loading, successCallback, warning } from "@/config/swal";
-import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, deleteWishlist, getDetail, getPublicSuggestionList, saveWishlist } from "@/lib/services/landing/landing";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
-import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/lib/utils/globals";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import parse from "html-react-parser";
-import { Skeleton } from "@/components/ui/skeleton";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, successCallback, warning } from "@/config/swal";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  createPublicSuggestion,
+  deletePublicSuggestion,
+  deleteWishlist,
+  getDetail,
+  getPublicSuggestionList,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
+import {
+  checkMaliciousText,
+  formatDateToIndonesian,
+  getPublicLocaleTimestamp,
+} from "@/lib/utils/globals";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 interface Size {
   label: string;
@@ -235,8 +248,8 @@ const DetailInfo = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -616,7 +629,8 @@ const DetailInfo = () => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -636,7 +650,11 @@ const DetailInfo = () => {
                   placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                   width={2560}
                   height={1440}
-                  src={detailDataImage?.files?.length > 0 ? detailDataImage.files[selectedImage]?.url : detailDataImage?.thumbnailLink}
+                  src={
+                    detailDataImage?.files?.length > 0
+                      ? detailDataImage.files[selectedImage]?.url
+                      : detailDataImage?.thumbnailLink
+                  }
                   alt="Main"
                   className="rounded-lg w-auto h-fit"
                 />
@@ -673,7 +691,10 @@ const DetailInfo = () => {
             <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
               <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
                 <p className="text-xs lg:text-sm">
-                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
+                  {t("by")}&nbsp;
+                  <span className="font-semibold text-black dark:text-white">
+                    {detailDataImage?.uploadedBy?.userLevel?.name}
+                  </span>
                 </p>
                 {/* <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}
@@ -699,20 +720,31 @@ const DetailInfo = () => {
 
             {/* Keterangan */}
             <div className="w-full">
-              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify mb-5 space-y-4 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">
+                {detailDataImage?.title}
+              </h1>
+              <div
+                className="font-light text-justify mb-5 space-y-4 lg:mb-0"
+                dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] dark:bg-slate-600 h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">{t("delete")}</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">{t("save")}</p>
               </a>
@@ -721,13 +753,20 @@ const DetailInfo = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataImage?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataImage?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -736,14 +775,26 @@ const DetailInfo = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">{t("imageSize")}</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              {t("imageSize")}
+            </h4>
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size?.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size?.label} checked={selectedSize === size?.label} onChange={(e) => setImageSizeSelected(e.target.value)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size?.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size?.label}
+                      checked={selectedSize === size?.label}
+                      onChange={(e) => setImageSizeSelected(e.target.value)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size?.label}</div>
                   </div>
                   <div className="text-sm">{size?.value}</div>
@@ -754,15 +805,25 @@ const DetailInfo = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>{t("downloadAll")}</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               {t("download")}
             </button>
@@ -770,19 +831,56 @@ const DetailInfo = () => {
             {/* Tombol Bagikan */}
             <div className="flex flex-row mt-5 justify-center">
               <p className="text-base font-semibold">{t("share")}</p>
-              <a className="ml-8 cursor-pointer" onClick={() => handleShare("fb", `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`)}>
-                <Icon icon="brandico:facebook" height="20" className="px-auto text-red-600 text-center" />
+              <a
+                className="ml-8 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "fb",
+                    `https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&quote=${content?.title}`
+                  )
+                }
+              >
+                <Icon
+                  icon="brandico:facebook"
+                  height="20"
+                  className="px-auto text-red-600 text-center"
+                />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("tw", `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`)}>
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "tw",
+                    `https://twitter.com/share?url=https%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}&text=${content?.title}`
+                  )
+                }
+              >
                 <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
               </a>
-              <a className="ml-5 cursor-pointer" onClick={() => handleShare("wa", `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`)}>
+              <a
+                className="ml-5 cursor-pointer"
+                onClick={() =>
+                  handleShare(
+                    "wa",
+                    `text=${content?.title}%0D%0A%0D%0Ahttps%3A%2F%2Fmediahub.polri.go.id%2F${typeString}%2Fdetail%2F${content?.id}`
+                  )
+                }
+              >
                 <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
               </a>
               <Popover>
                 <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
-                  <a className="ml-5 cursor-pointer" data-toggle="dropdown" href="#" aria-expanded="false">
-                    <Icon icon="material-symbols-light:mail" width="23" className="text-red-600 text-center" />
+                  <a
+                    className="ml-5 cursor-pointer"
+                    data-toggle="dropdown"
+                    href="#"
+                    aria-expanded="false"
+                  >
+                    <Icon
+                      icon="material-symbols-light:mail"
+                      width="23"
+                      className="text-red-600 text-center"
+                    />
                   </a>
                 </PopoverTrigger>
                 <PopoverContent>
@@ -790,9 +888,18 @@ const DetailInfo = () => {
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
                       <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                      <Input
+                        value={emailShareInput}
+                        onChange={(event) => setEmailShareInput(event.target.value)}
+                        onKeyPress={handleEmailList}
+                        type="email"
+                        placeholder={t("pressEnter")}
+                      />
                     </div>
-                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                    <Button
+                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                      onClick={() => shareToEmail()}
+                    >
                       {t("send")}
                     </Button>
                   </div>
@@ -808,8 +915,15 @@ const DetailInfo = () => {
         <div className="flex flex-col mt-16 p-4 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">{t("comment")}</p>
-            <Textarea placeholder={t("leaveComment")} className="flex w-full pb-12" onChange={getInputValue} />
-            <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+            <Textarea
+              placeholder={t("leaveComment")}
+              className="flex w-full pb-12"
+              onChange={getInputValue}
+            />
+            <button
+              onClick={() => postData()}
+              className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"
+            >
               {t("send")}
             </button>
             <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
@@ -830,7 +944,11 @@ const DetailInfo = () => {
                   />
                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
-                      {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
+                      {Number(data.suggestionFrom?.roleId) == 2 ||
+                      Number(data.suggestionFrom?.roleId) == 3 ||
+                      Number(data.suggestionFrom?.roleId) == 4
+                        ? "HUMAS POLRI"
+                        : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
                     <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
@@ -846,11 +964,16 @@ const DetailInfo = () => {
                         onClick={() => showInput(`comment-id-${data.id}`)}
                         className="mr-2"
                       >
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("reply")}
+                        </small>
                       </a>
-                      {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
+                      {Number(data.suggestionFrom?.id) == Number(userId) ||
+                      Number(userRoleId) == 2 ? (
                         <a onClick={() => deleteData(data.id)}>
-                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                          <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                            {t("delete")}
+                          </small>
                         </a>
                       ) : (
                         ""
@@ -859,14 +982,25 @@ const DetailInfo = () => {
                   </div>
                 </div>
                 {visibleInput === `comment-id-${data.id}` && (
-                  <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
-                    <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder={t("enterReply")} />
+                  <div
+                    id={`comment-id-${data.id}`}
+                    className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 "
+                  >
+                    <Textarea
+                      id={`input-comment-${data.id}`}
+                      className="p-4 focus:outline-none focus:border-sky-500"
+                      placeholder={t("enterReply")}
+                    />
                     <div className="flex flex-row gap-3">
                       <a onClick={() => postDataChild(data.id)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">{t("send")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">
+                          {t("send")}
+                        </small>
                       </a>
                       <a onClick={() => showInput(`comment-id-${data.id}`)}>
-                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                        <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                          {t("cancel")}
+                        </small>
                       </a>
                     </div>
                   </div>
@@ -888,10 +1022,18 @@ const DetailInfo = () => {
                           <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                             <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                               {" "}
-                              <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
+                              <b>
+                                {Number(child1.suggestionFrom?.roleId) == 2 ||
+                                Number(child1.suggestionFrom?.roleId) == 3 ||
+                                Number(child1.suggestionFrom?.roleId) == 4
+                                  ? "HUMAS POLRI"
+                                  : child1.suggestionFrom?.fullname}
+                              </b>{" "}
                               {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
-                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
+                            <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
+                              {parse(String(child1?.message))}
+                            </p>
                             <div>
                               <a
                                 style={
@@ -903,7 +1045,9 @@ const DetailInfo = () => {
                                 }
                                 onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("reply")}
+                                </small>
                               </a>
                               <a
                                 style={
@@ -915,21 +1059,35 @@ const DetailInfo = () => {
                                 }
                                 onClick={() => deleteData(child1.id)}
                               >
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("delete")}
+                                </small>
                               </a>
                             </div>
                           </div>
                         </div>
 
                         {visibleInput === `comment-id-${child1.id}` && (
-                          <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
-                            <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder={t("enterReply")} />
+                          <div
+                            id={`comment-id-${child1.id}`}
+                            className="px-4 lg:px-14 pl-28 lg:pl-[200px]"
+                          >
+                            <Textarea
+                              name=""
+                              className="mt-2 "
+                              id={`input-comment-${child1.id}`}
+                              placeholder={t("enterReply")}
+                            />
                             <div className="flex flex-row mt-2 gap-3">
                               <a onClick={() => postDataChild(child1.id)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("send")}
+                                </small>
                               </a>
                               <a onClick={() => showInput(`comment-id-${child1.id}`)}>
-                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                  {t("cancel")}
+                                </small>
                               </a>
                             </div>
                           </div>
@@ -951,10 +1109,18 @@ const DetailInfo = () => {
                                   <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
-                                      <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
+                                      <b>
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
+                                          ? "HUMAS POLRI"
+                                          : child2.suggestionFrom?.fullname}
+                                      </b>{" "}
                                       {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
-                                    <p className="text-slate-500 text-sm mb-4">{parse(String(child2?.message))}</p>
+                                    <p className="text-slate-500 text-sm mb-4">
+                                      {parse(String(child2?.message))}
+                                    </p>
                                     <div>
                                       <a
                                         style={
@@ -966,7 +1132,9 @@ const DetailInfo = () => {
                                         }
                                         onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("reply")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("reply")}
+                                        </small>
                                       </a>
                                       <a
                                         style={
@@ -978,20 +1146,34 @@ const DetailInfo = () => {
                                         }
                                         onClick={() => deleteData(child2.id)}
                                       >
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("delete")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("delete")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
                                 </div>
                                 {visibleInput === `comment-id-${child2.id}` && (
-                                  <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
-                                    <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
+                                  <div
+                                    id={`comment-id-${child2.id}`}
+                                    className="px-4 lg:px-14 pl-40 lg:pl-[265px]"
+                                  >
+                                    <Textarea
+                                      name=""
+                                      id={`input-comment-${child2.id}`}
+                                      className="my-2"
+                                      placeholder="Masukkan balasan anda"
+                                    />
                                     <div className="flex flex-row gap-3">
                                       <a onClick={() => postDataChild(child2.id)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("send")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("send")}
+                                        </small>
                                       </a>
                                       <a onClick={() => showInput(`comment-id-${child2.id}`)}>
-                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">{t("cancel")}</small>
+                                        <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
+                                          {t("cancel")}
+                                        </small>
                                       </a>
                                     </div>
                                   </div>
diff --git a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
index cc396089..d4a77fdf 100644
--- a/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
+++ b/src/app/[locale]/(public)/(polda)/tbnews/[polda_name]/page.tsx
@@ -1,17 +1,19 @@
 "use client";
 
 import React from "react";
-import NavbarKaltara from "./components/navbar-kaltara";
+
+import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+
+import ContactUs from "./components/contact-us";
 import HeroKaltara from "./components/hero-kaltara";
 import LatestNews from "./components/latest-news";
-import PopularNews from "./components/popular-news";
 import NationalNews from "./components/national-news";
-import RegionalNews from "./components/regional-news";
-import ContactUs from "./components/contact-us";
-import SocialMedia from "./components/social-media";
+import NavbarKaltara from "./components/navbar-kaltara";
 import NewsTickerKaltara from "./components/news-tickers-kaltara";
+import PopularNews from "./components/popular-news";
 import PpsSection from "./components/pps-section";
-import ContactUsKaltara from "@/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara";
+import RegionalNews from "./components/regional-news";
+import SocialMedia from "./components/social-media";
 
 const PoldaKaltara = () => {
   return (
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/detail/[slug]/page.tsx
index c8dba39f..c00d55d1 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/detail/[slug]/page.tsx
@@ -1,17 +1,23 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
+import { useParams, usePathname } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import { BarWave } from "react-cssfx-loading";
-import { useToast } from "@/components/ui/use-toast";
-import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/lib/services/landing/landing";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
+
 import { close, error, loading } from "@/config/swal";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getDetail,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailAudio = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -50,8 +56,8 @@ const DetailAudio = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -232,7 +238,11 @@ const DetailAudio = () => {
             {/* Footer Informasi */}
             <div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
               <p className="flex flex-row items-center">
-                oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
+                oleh&nbsp;
+                <span className="font-semibold text-black">
+                  {detailDataAudio?.uploadedBy?.userLevel?.name}
+                </span>
+                &nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataAudio?.clickCount}
@@ -241,20 +251,31 @@ const DetailAudio = () => {
             </div>
             {/* Keterangan */}
             <div className="md:w-3/4">
-              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1>
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
+              <h1 className="flex flex-row font-bold text-2xl mx-5 my-8">
+                {detailDataAudio?.title}
+              </h1>
+              <div
+                className="font-light text-justify"
+                dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 h-fit bg-gray-300 rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -263,13 +284,20 @@ const DetailAudio = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataAudio?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataAudio?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataAudio?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -278,15 +306,27 @@ const DetailAudio = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Audio
+            </h4>
 
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -299,15 +339,25 @@ const DetailAudio = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -319,8 +369,13 @@ const DetailAudio = () => {
         {/* Comment */}
         <div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
           <p className="flex items-start text-lg">Berikan Komentar</p>
-          <Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
-          <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
+          <Textarea
+            placeholder="Type your comments here."
+            className="flex items-start justify-center"
+          />
+          <button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">
+            Kirim
+          </button>
         </div>
 
         {/* Konten Serupa */}
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
index a9cedda1..58366c76 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx
@@ -1,22 +1,49 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+
 import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -57,7 +84,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -97,7 +126,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -115,7 +148,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("4");
@@ -137,7 +182,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (satkerName && String(satkerName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -166,7 +212,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -371,7 +418,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -387,7 +437,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -399,7 +451,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -412,17 +466,36 @@ const FilterPage = () => {
                   placeholderText={t("searchDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -437,13 +510,23 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="png" value="png" checked={formatFilter.includes("wav")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wav")} />
+                    <Checkbox
+                      id="png"
+                      value="png"
+                      checked={formatFilter.includes("wav")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wav")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">WAV</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("mp3")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp3")} />
+                    <Checkbox
+                      id="jpeg"
+                      value="jpeg"
+                      checked={formatFilter.includes("mp3")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp3")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MP3</span>
                   </label>
                 </li>
@@ -463,7 +546,11 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")} </h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -477,9 +564,18 @@ const FilterPage = () => {
                       {audioData?.map((audio: any) => (
                         <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3">
                           <div className="flex flex-row gap-6">
-                            <Link href={`${prefixPath}/audio/detail/${audio?.slug}`} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                            <Link
+                              href={`${prefixPath}/audio/detail/${audio?.slug}`}
+                              className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                            >
                               <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
-                                <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                                <svg
+                                  width="32"
+                                  height="34"
+                                  viewBox="0 0 32 34"
+                                  fill="null"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
                                   <path
                                     d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                                     fill="white"
@@ -489,9 +585,14 @@ const FilterPage = () => {
 
                               <div className="flex flex-col  flex-1">
                                 <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                                  {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}{" "}
+                                  {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
+                                  {audio?.timezone ? audio?.timezone : "WIB"} |{" "}
+                                  <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                                  {audio?.clickCount}{" "}
+                                </div>
+                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                                  {audio?.title}
                                 </div>
-                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
                               </div>
                             </Link>
                           </div>
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/layout.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/layout.tsx
index 6a8ae228..3e6e6481 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/layout.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/layout.tsx
@@ -1,20 +1,17 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/detail/[slug]/page.tsx
index acd9f8aa..7ce5aed4 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/detail/[slug]/page.tsx
@@ -1,16 +1,22 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
-import { Textarea } from "@/components/ui/textarea";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/lib/services/landing/landing";
-import { close, error, loading } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
+import { useParams, usePathname } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, error, loading } from "@/config/swal";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getDetail,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -50,8 +56,8 @@ const DetailDocument = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -224,13 +230,21 @@ const DetailDocument = () => {
           {/* Bagian Kiri */}
           <div className="md:w-3/4">
             <div className="relative">
-              <img src={detailDataDocument?.files[selectedDocument]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+              <img
+                src={detailDataDocument?.files[selectedDocument]?.url}
+                alt="Main"
+                className="rounded-lg w-auto h-fit"
+              />
               <div className="absolute top-4 left-4"></div>
             </div>
             {/* Footer Informasi */}
             <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
               <p className="flex flex-row items-center mt-3">
-                oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
+                oleh&nbsp;
+                <span className="font-semibold text-black">
+                  {detailDataDocument?.uploadedBy?.userLevel?.name}
+                </span>
+                &nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
                 {detailDataDocument?.clickCount}
@@ -248,12 +262,18 @@ const DetailDocument = () => {
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -262,13 +282,20 @@ const DetailDocument = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataDocument?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataDocument?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataDocument?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -277,13 +304,25 @@ const DetailDocument = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Foto
+            </h4>
             <div className="border-t border-black my-4"></div>
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -296,15 +335,25 @@ const DetailDocument = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -318,7 +367,9 @@ const DetailDocument = () => {
           <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg text-white w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] rounded-lg text-white w-fit px-4 py-1">
+              Kirim
+            </button>
           </div>
         </div>
 
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
index 363edc95..6bd45ceb 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx
@@ -1,21 +1,43 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getListContent,
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
 import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -56,7 +78,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -95,7 +119,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -113,7 +141,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("3");
@@ -135,7 +175,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (satkerName && String(satkerName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -167,7 +208,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -286,7 +328,12 @@ const FilterPage = () => {
     initFetch();
   }, [page]);
   const initFetch = async () => {
-    const response = await getListContent({ page: page - 1, size: 6, sortBy: "createdAt", contentTypeId: "3" });
+    const response = await getListContent({
+      page: page - 1,
+      size: 6,
+      sortBy: "createdAt",
+      contentTypeId: "3",
+    });
     console.log(response);
     setDocumentData(response?.data?.data?.content);
     const data = response?.data?.data;
@@ -389,7 +436,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -405,7 +455,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -417,7 +469,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -430,17 +484,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -455,31 +528,56 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="doc" value="doc" checked={formatFilter.includes("doc")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")} />
+                    <Checkbox
+                      id="doc"
+                      value="doc"
+                      checked={formatFilter.includes("doc")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">DOC</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="docx" value="docx" checked={formatFilter.includes("docx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")} />
+                    <Checkbox
+                      id="docx"
+                      value="docx"
+                      checked={formatFilter.includes("docx")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">DOCX</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="pdf" value="pdf" checked={formatFilter.includes("pdf")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")} />
+                    <Checkbox
+                      id="pdf"
+                      value="pdf"
+                      checked={formatFilter.includes("pdf")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PDF</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="ppt" value="ppt" checked={formatFilter.includes("ppt")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")} />
+                    <Checkbox
+                      id="ppt"
+                      value="ppt"
+                      checked={formatFilter.includes("ppt")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PPT</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="pptx" value="pptx" checked={formatFilter.includes("pptx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")} />
+                    <Checkbox
+                      id="pptx"
+                      value="pptx"
+                      checked={formatFilter.includes("pptx")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PPTX</span>
                   </label>
                 </li>
@@ -499,7 +597,11 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -508,9 +610,19 @@ const FilterPage = () => {
             {documentData?.length > 0 ? (
               <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                 {documentData?.map((document: any) => (
-                  <Link href={`${prefixPath}/document/detail/${document?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                  <Link
+                    href={`${prefixPath}/document/detail/${document?.slug}`}
+                    key={document?.id}
+                    className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                  >
                     <div className="flex items-center justify-center rounded-lg w-16 h-16">
-                      <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <svg
+                        width="28"
+                        height="34"
+                        viewBox="0 0 28 34"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
                         <path
                           d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                           fill="black"
@@ -519,12 +631,24 @@ const FilterPage = () => {
                     </div>
                     <div className="flex flex-col flex-1 gap-2">
                       <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center gap-2 text-xs">
-                        {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> 518
+                        {formatDateToIndonesian(new Date(document?.createdAt))}{" "}
+                        {document?.timezone ? document?.timezone : "WIB"} |{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" /> 518
+                      </div>
+                      <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                        {document?.title}
                       </div>
-                      <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
                       <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                          <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="1em"
+                          height="1em"
+                          viewBox="0 0 512 512"
+                        >
+                          <path
+                            fill="#f00"
+                            d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                          />
                         </svg>
                         Download Dokumen
                       </div>
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/layout.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/layout.tsx
index 6a8ae228..3e6e6481 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/layout.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/document/layout.tsx
@@ -1,20 +1,17 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/detail/[slug]/page.tsx
index 11882abe..2101d1ac 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/detail/[slug]/page.tsx
@@ -1,16 +1,22 @@
 "use client";
 
-import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
-import { useToast } from "@/components/ui/use-toast";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, error, loading } from "@/config/swal";
-import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/lib/services/landing/landing";
+import { useParams, usePathname } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, error, loading } from "@/config/swal";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getDetail,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailInfo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -50,8 +56,8 @@ const DetailInfo = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -229,7 +235,11 @@ const DetailInfo = () => {
           <div className="md:w-3/4">
             {/* Gambar Besar */}
             <div className="relative">
-              <img src={detailDataImage?.files[selectedImage]?.url} alt="Main" className="rounded-lg w-auto h-fit" />
+              <img
+                src={detailDataImage?.files[selectedImage]?.url}
+                alt="Main"
+                className="rounded-lg w-auto h-fit"
+              />
               <div className="absolute top-4 left-4"></div>
             </div>
 
@@ -237,7 +247,10 @@ const DetailInfo = () => {
             <div className="py-4 flex flex-row gap-3">
               {detailDataImage?.files?.map((file: any, index: number) => (
                 <a onClick={() => setSelectedImage(index)} key={file?.id}>
-                  <img src={file?.url} className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" />
+                  <img
+                    src={file?.url}
+                    className="w-[120px] h-[90px] object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
+                  />
                 </a>
               ))}
             </div>
@@ -245,7 +258,11 @@ const DetailInfo = () => {
             {/* Footer Informasi */}
             <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
               <div className="flex flex-row items-center mt-3 justify-between">
-                oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                oleh&nbsp;
+                <span className="font-semibold text-black">
+                  {detailDataImage?.uploadedBy?.userLevel?.name}
+                </span>
+                &nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp; {detailDataImage?.clickCount} &nbsp;
                 <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
@@ -255,19 +272,28 @@ const DetailInfo = () => {
             {/* Keterangan */}
             <div className="w-full">
               <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <div
+                className="font-light text-justify"
+                dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }}
+              />
             </div>
           </div>
 
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] h-fit rounded-lg mx-4">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -276,13 +302,20 @@ const DetailInfo = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataImage?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataImage?.category?.name}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataImage?.tags?.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500"
+                >
                   {tag}
                 </a>
               ))}
@@ -291,14 +324,26 @@ const DetailInfo = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Foto
+            </h4>
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -311,15 +356,25 @@ const DetailInfo = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -333,7 +388,9 @@ const DetailInfo = () => {
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
+              Kirim
+            </button>
           </div>
         </div>
 
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
index 411ea4e3..ba415ba6 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx
@@ -1,21 +1,42 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
 import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -56,7 +77,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -70,7 +93,7 @@ const FilterPage = () => {
   const [userLevels, setUserLevels] = useState([]);
   const satkerName = params?.satker_name;
   let prefixPath = satkerName ? `/satker/${satkerName}` : "/";
-  
+
   const t = useTranslations("FilterPage");
 
   // const [startDate, endDate] = dateRange;
@@ -97,7 +120,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -115,7 +142,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("1");
@@ -137,7 +176,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (satkerName && String(satkerName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -166,7 +206,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -371,7 +412,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -387,7 +431,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -399,7 +445,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex  flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -412,17 +460,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -437,19 +504,34 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="png" value="png" checked={formatFilter.includes("png")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")} />
+                    <Checkbox
+                      id="png"
+                      value="png"
+                      checked={formatFilter.includes("png")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PNG</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("jpeg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpeg")} />
+                    <Checkbox
+                      id="jpeg"
+                      value="jpeg"
+                      checked={formatFilter.includes("jpeg")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpeg")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">JPEG</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="jpg" value="jpg" checked={formatFilter.includes("jpg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpg")} />
+                    <Checkbox
+                      id="jpg"
+                      value="jpg"
+                      checked={formatFilter.includes("jpg")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpg")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">JPG</span>
                   </label>
                 </li>
@@ -469,7 +551,11 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -478,21 +564,36 @@ const FilterPage = () => {
             {imageData?.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {imageData?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-110 transition-transform duration-300">
+                  <Card
+                    key={image?.id}
+                    className="hover:scale-110 transition-transform duration-300"
+                  >
                     <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                       <Link href={`${prefixPath}/image/detail/${image?.slug}`}>
-                        <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
+                        <img
+                          src={image?.thumbnailLink}
+                          className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center"
+                        />
                         <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                          {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                          {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
+                          {image?.timezone ? image?.timezone : "WIB"}|{" "}
+                          <Icon icon="formkit:eye" width="15" height="15" />
                           {image?.clickCount}{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 20 20"
+                          >
                             <path
                               fill="#f00"
                               d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
                             />
                           </svg>{" "}
                         </div>
-                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
+                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
+                          {image?.title}
+                        </div>
                       </Link>
                     </CardContent>
                   </Card>
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/layout.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/layout.tsx
index b1a2e734..555d53e1 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/layout.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/image/layout.tsx
@@ -2,11 +2,7 @@ import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx
index bbda5629..c0c9552f 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/detail/[slug]/page.tsx
@@ -1,12 +1,20 @@
 "use client";
-import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname, useRouter } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
 import { getDetailIndeks, publicDetailBlog } from "@/lib/services/landing/landing";
 import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Textarea } from "@/components/ui/textarea";
 
 const IndeksDetail = () => {
   const [indeksData, setIndeksData] = useState<any>();
@@ -44,13 +52,17 @@ const IndeksDetail = () => {
         {/* Footer Informasi */}
         <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
           <div className="flex flex-row items-center mt-3 justify-between">
-            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
+            oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>
+            &nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
           </div>
         </div>
 
         {/* Keterangan */}
         <div className="w-auto">
-          <p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
+          <p
+            className="font-light text-justify"
+            dangerouslySetInnerHTML={{ __html: indeksData?.description }}
+          />
         </div>
       </div>
 
@@ -60,7 +72,9 @@ const IndeksDetail = () => {
           <div className="gap-5 flex flex-col px-4 lg:px-16">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">
+              Kirim
+            </button>
           </div>
         </div>
 
@@ -71,13 +85,25 @@ const IndeksDetail = () => {
             <CarouselContent className="w-full max-w-7xl">
               {relatedPost?.map((relate: any) => (
                 <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
-                  <Link href={`/indeks/detail/${relate?.slug}`} className="relative group overflow-hidden shadow-md hover:shadow-lg">
-                    <img src={relate?.thumbnailLink} className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                  <Link
+                    href={`/indeks/detail/${relate?.slug}`}
+                    className="relative group overflow-hidden shadow-md hover:shadow-lg"
+                  >
+                    <img
+                      src={relate?.thumbnailLink}
+                      className="w-full rounded-lg h-40 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
+                    />
                     <div className="absolute bottom-0 left-0 right-0 bg-gray-600 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{relate?.categoryName}</span>
-                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{relate?.title}</h1>
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                        {relate?.categoryName}
+                      </span>
+                      <h1 className="text-sm lg:text-lg mb-2 font-semibold h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                        {relate?.title}
+                      </h1>
                       <p className="flex flex-row items-center text-[10px] gap-2">
-                        {formatDateToIndonesian(new Date(relate?.createdAt))} {relate?.timezone ? relate?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
+                        {formatDateToIndonesian(new Date(relate?.createdAt))}{" "}
+                        {relate?.timezone ? relate?.timezone : "WIB"} |{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
                       </p>
                     </div>
                   </Link>
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/layout.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/layout.tsx
index 6a8ae228..3e6e6481 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/layout.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/layout.tsx
@@ -1,20 +1,17 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx
index 121bf896..08328026 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/indeks/page.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+
 import { getIndeksData } from "@/lib/services/landing/landing";
 import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { usePathname } from "next/navigation";
-import React, { useEffect, useState } from "react";
 
 const Indeks: React.FC = () => {
   const pathname = usePathname();
@@ -38,15 +39,27 @@ const Indeks: React.FC = () => {
             (indeks: any, index: number) =>
               index == count && (
                 <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
-                  <img src={indeks?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[435px] rounded-lg" />
+                  <img
+                    src={indeks?.thumbnailLink}
+                    alt="image"
+                    className="w-full h-[310px] lg:h-[435px] rounded-lg"
+                  />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeks?.categoryName}</span>
+                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                      {indeks?.categoryName}
+                    </span>
                     <Link href={`/indeks/detail/${indeks?.slug}`}>
                       <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
                     </Link>
                     <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeks?.createdAt))} {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
+                      {indeks?.timezone ? indeks?.timezone : "WIB"}|{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@@ -66,15 +79,27 @@ const Indeks: React.FC = () => {
             (indeksRight: any, index: number) =>
               (index == count + 1 || index == count + 2) && (
                 <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
-                  <img src={indeksRight?.thumbnailLink} alt="image" className="w-full h-[310px] lg:h-[215px] rounded-lg " />
+                  <img
+                    src={indeksRight?.thumbnailLink}
+                    alt="image"
+                    className="w-full h-[310px] lg:h-[215px] rounded-lg "
+                  />
                   <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{indeksRight?.categoryName}</span>
+                    <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                      {indeksRight?.categoryName}
+                    </span>
                     <Link href={`/indeks/detail/${indeksRight?.slug}`}>
                       <h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
                     </Link>
                     <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                      {formatDateToIndonesian(new Date(indeksRight?.createdAt))} {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(indeksRight?.createdAt))}{" "}
+                      {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
@@ -95,11 +120,21 @@ const Indeks: React.FC = () => {
           {indeksData?.map(
             (indeksBottom: any, index: number) =>
               index < 3 && (
-                <div key={indeksBottom?.id} className="flex flex-col md:flex-row items-start p-4 gap-4">
-                  <img src={indeksBottom?.thumbnailLink} alt="" className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]" />
+                <div
+                  key={indeksBottom?.id}
+                  className="flex flex-col md:flex-row items-start p-4 gap-4"
+                >
+                  <img
+                    src={indeksBottom?.thumbnailLink}
+                    alt=""
+                    className="h-40 object-cover rounded-lg w-full lg:w-full lg:h-[300px]"
+                  />
                   <div className="flex flex-col justify-between w-full">
                     <p className="text-sm">{indeksBottom?.date}</p>
-                    <Link href={`/indeks/detail/${indeksBottom?.slug}`} className="text-2xl font-semibold text-gray-800">
+                    <Link
+                      href={`/indeks/detail/${indeksBottom?.slug}`}
+                      className="text-2xl font-semibold text-gray-800"
+                    >
                       {indeksBottom?.title}
                     </Link>
                     <p className="text-sm text-gray-600 mt-2">{indeksBottom?.description}</p>
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx
index 59b1c1bb..2a23ba70 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/page.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import React from "react";
+
 import ContentCategory from "@/components/features/landing-page/content-category";
 import HeaderBannerSatker from "@/components/features/landing-page/header-banner-satker";
 import NewContent from "@/components/features/landing-page/new-content";
 import WelcomeSatker from "@/components/features/landing-page/welcome-satker";
-import React from "react";
 
 const page = () => {
   return (
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/layout.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/layout.tsx
index 6a8ae228..3e6e6481 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/layout.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/layout.tsx
@@ -1,20 +1,17 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx
index 9e143dde..8e8f5361 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/schedule/page.tsx
@@ -1,19 +1,47 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+
+import { close, loading } from "@/config/swal";
+import {
+  detailSchedule,
+  listSchedule,
+  listScheduleNextPublic,
+  listSchedulePrevPublic,
+  listScheduleTodayPublic,
+} from "@/lib/services/schedule/schedule";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { CalendarIcon } from "lucide-react";
-import React, { useEffect, useState } from "react";
-import { format } from "date-fns";
-import { cn } from "@/lib/utils/utils"
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { detailSchedule, listSchedule, listScheduleNextPublic, listSchedulePrevPublic, listScheduleTodayPublic } from "@/lib/services/schedule/schedule";
-import { useRouter } from "@/i18n/navigation";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
-import { close, loading } from "@/config/swal";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 const timeList = [
   {
@@ -280,7 +308,9 @@ const Schedule = (props: any) => {
   };
 
   function setItemSchedule(id: string, date: string) {
-    const itemFound: any = schedules?.filter((s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id));
+    const itemFound: any = schedules?.filter(
+      (s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
+    );
 
     if (itemFound?.length > 0) {
       if (itemFound?.length == 1) {
@@ -309,7 +339,9 @@ const Schedule = (props: any) => {
             <b>{`${itemFound?.length} Jadwal Bersamaan`}</b>
           </p>
           <DropdownMenu>
-            <DropdownMenuTrigger className="font-bold text-blue-300">Lihat Jadwal</DropdownMenuTrigger>
+            <DropdownMenuTrigger className="font-bold text-blue-300">
+              Lihat Jadwal
+            </DropdownMenuTrigger>
             <DropdownMenuContent>
               {itemFound?.map((list: any) => (
                 <DropdownMenuItem
@@ -328,7 +360,10 @@ const Schedule = (props: any) => {
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
-          <div className="border-0 dropdown-menu schedule-list" aria-labelledby="view-schedule"></div>
+          <div
+            className="border-0 dropdown-menu schedule-list"
+            aria-labelledby="view-schedule"
+          ></div>
         </div>
       );
     }
@@ -340,7 +375,13 @@ const Schedule = (props: any) => {
       <div className="relative px-4 lg:px-10 lg:py-10 py-4 bg-[#f7f7f7] dark:bg-slate-800">
         <Popover>
           <PopoverTrigger asChild>
-            <Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
+            <Button
+              variant={"outline"}
+              className={cn(
+                "w-[240px] py-4 justify-start text-left font-normal",
+                !startDate && "text-muted-foreground"
+              )}
+            >
               <CalendarIcon />
               {startDate ? format(startDate, "MMM yyyy") : <span>Pick a date</span>}
             </Button>
@@ -361,11 +402,25 @@ const Schedule = (props: any) => {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <a className="text-black flex flex-row w-fit gap-2 py-4 items-center cursor-pointer">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                  <path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="#000"
+                    d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1"
+                  />
                 </svg>
                 Filter
-                <svg className="flex items-center justify-center" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  className="flex items-center justify-center"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
                 </svg>
               </a>
@@ -428,15 +483,30 @@ const Schedule = (props: any) => {
                   <table className="w-full text-sm text-start">
                     <thead className="text-md">
                       <tr className="h-full">
-                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
+                        <th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">
+                          Time Table
+                        </th>
                         <th className="text-center border border-r-0 border-gray-100 dark:border-gray-700 py-6 w-[20px]">
-                          <a onClick={() => changePrevWeek()} className="cursor-pointer h-fit self-center bottom-0">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
+                          <a
+                            onClick={() => changePrevWeek()}
+                            className="cursor-pointer h-fit self-center bottom-0"
+                          >
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7"
+                              />
                             </svg>
                           </a>
                         </th>
-                        <th className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}>
+                        <th
+                          className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[0] ? "bg-red-600 text-white" : ""}`}
+                        >
                           {/* <a className="cursor-pointer h-fit self-center bottom-0" >
                             <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
                               <path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
@@ -447,25 +517,37 @@ const Schedule = (props: any) => {
                             <p>Monday</p>
                           </div>
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[1] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>Tuesday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[2] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>Wednesday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[3] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>Thursday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[4] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>Friday
                         </th>
-                        <th className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}>
+                        <th
+                          className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${new Date().toISOString().slice(0, 10) == dateAWeek[5] ? "bg-[#BE0106] text-white rounded-lg" : ""}`}
+                        >
                           <div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>Saturday
                         </th>
                         <th
                           onClick={() => changeNextWeek()}
                           className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) == dateAWeek[6] ? "bg-[#BE0106] text-white rounded-lg" : ""
+                            new Date().toISOString().slice(0, 10) == dateAWeek[6]
+                              ? "bg-[#BE0106] text-white rounded-lg"
+                              : ""
                           }`}
                         >
                           <div className="flex flex-col ">
@@ -480,8 +562,16 @@ const Schedule = (props: any) => {
                         </th>
                         <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
                           <a onClick={() => changeNextWeek()} className="cursor-pointer">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="40px" height="40px" viewBox="0 0 24 24">
-                              <path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="40px"
+                              height="40px"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                fill="currentColor"
+                                d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71"
+                              />
                             </svg>
                           </a>
                         </th>
@@ -490,15 +580,30 @@ const Schedule = (props: any) => {
                     <tbody>
                       {timeList.map((times) => (
                         <tr key={times.id}>
-                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">{times.time}</th>
-                          <td colSpan={2} className="p-3 border border-gray-100 dark:border-gray-700 ">
+                          <th className="text-center border border-gray-100 dark:border-gray-700 py-5">
+                            {times.time}
+                          </th>
+                          <td
+                            colSpan={2}
+                            className="p-3 border border-gray-100 dark:border-gray-700 "
+                          >
                             {setItemSchedule(times.id, dateList[0])}
                           </td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[1])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[2])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[3])}</td>
-                          <td className="p-3 border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[4])}</td>
-                          <td className="border border-gray-100 dark:border-gray-700">{setItemSchedule(times.id, dateList[5])}</td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[1])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[2])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[3])}
+                          </td>
+                          <td className="p-3 border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[4])}
+                          </td>
+                          <td className="border border-gray-100 dark:border-gray-700">
+                            {setItemSchedule(times.id, dateList[5])}
+                          </td>
                           <td colSpan={2} className="border border-gray-100 dark:border-gray-700">
                             {setItemSchedule(times.id, dateList[6])}
                           </td>
@@ -514,12 +619,24 @@ const Schedule = (props: any) => {
           {/* Component Kanan */}
           <div className="w-1/4 flex flex-col gap-6">
             <div className="relative text-gray-600 dark:text-white">
-              <input type="text" placeholder="Masukkan Judul Jadwal" className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none" />
+              <input
+                type="text"
+                placeholder="Masukkan Judul Jadwal"
+                className="pl-8 pr-4 py-1 w-full border rounded-full text-sm  focus:outline-none"
+              />
               <span className="absolute left-2 top-1/2 transform -translate-y-1/2">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <g fill="none" fill-rule="evenodd">
                     <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
-                    <path fill="currentColor" d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0" />
+                    <path
+                      fill="currentColor"
+                      d="M10.5 2a8.5 8.5 0 1 0 5.262 15.176l3.652 3.652a1 1 0 0 0 1.414-1.414l-3.652-3.652A8.5 8.5 0 0 0 10.5 2M4 10.5a6.5 6.5 0 1 1 13 0a6.5 6.5 0 0 1-13 0"
+                    />
                   </g>
                 </svg>
               </span>
@@ -562,7 +679,9 @@ const Schedule = (props: any) => {
                 <AccordionTrigger>Jadwal Hari ini</AccordionTrigger>
                 {todayList?.map((list: any) => (
                   <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -587,7 +706,9 @@ const Schedule = (props: any) => {
                 <AccordionTrigger>Jadwal Sebelumnya</AccordionTrigger>
                 {prevdayList?.map((list: any) => (
                   <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -612,7 +733,9 @@ const Schedule = (props: any) => {
                 <AccordionTrigger>Jadwal Selanjutnya</AccordionTrigger>
                 {nextdayList?.map((list: any) => (
                   <AccordionContent key={list?.id} className="flex flex-row gap-3">
-                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">{new Date(list.startDate).getDate()}</div>
+                    <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
+                      {new Date(list.startDate).getDate()}
+                    </div>
                     <div className="flex flex-col gap-2">
                       <h3 className="font-bold">{list?.title}</h3>
                       <p className="flex flex-row items-center gap-2">
@@ -707,13 +830,16 @@ const Schedule = (props: any) => {
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              <h1 className="my-4 font-light">JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}</h1>
+              <h1 className="my-4 font-light">
+                JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
+              </h1>
               <p className="font-bold">{detail?.title}</p>
             </AlertDialogTitle>
             <AlertDialogDescription>
               <p className="flex flex-row items-center gap-2">
                 <Icon icon="iconamoon:clock-thin" />
-                {detail?.date} {detail?.startTime} - {detail?.endTime} {detail?.timezone ? detail.timezone : "WIB"}
+                {detail?.date} {detail?.startTime} - {detail?.endTime}{" "}
+                {detail?.timezone ? detail.timezone : "WIB"}
               </p>
             </AlertDialogDescription>
             <AlertDialogDescription>
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/detail/[slug]/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/detail/[slug]/page.tsx
index 338d4436..18bb65bf 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/detail/[slug]/page.tsx
@@ -1,17 +1,23 @@
 "use client";
 
-import { useParams, usePathname } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { checkWishlistStatus, deleteWishlist, getDetail, saveWishlist } from "@/lib/services/landing/landing";
-import VideoPlayer from "@/lib/utils/video-player";
-import NewContent from "@/components/features/landing-page/new-content";
+import { useParams, usePathname } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
 import { close, error, loading } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
 import { postActivityLog } from "@/lib/services/content/content";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getDetail,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import VideoPlayer from "@/lib/utils/video-player";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailVideo = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -49,8 +55,8 @@ const DetailVideo = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -233,7 +239,9 @@ const DetailVideo = () => {
             <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
               <p className="flex flex-row items-center mt-3">
                 oleh&nbsp;
-                <span className="font-semibold text-black">{detailDataVideo?.uploadedBy?.userLevel?.name}</span>
+                <span className="font-semibold text-black">
+                  {detailDataVideo?.uploadedBy?.userLevel?.name}
+                </span>
                 &nbsp;|&nbsp;Diupdate pada {detailDataVideo?.updatedAt} WIB&nbsp;|&nbsp;
                 <Icon icon="formkit:eye" width="15" height="15" />
                 &nbsp;
@@ -257,12 +265,18 @@ const DetailVideo = () => {
           {/* Bagian Kanan */}
           <div className="md:w-1/4 p-4 bg-[#f7f7f7] rounded-lg mx-4 h-fit">
             {isSaved ? (
-              <a onClick={() => handleDeleteWishlist()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => handleDeleteWishlist()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark" width={40} />
                 <p className="text-base lg:text-lg">Hapus</p>
               </a>
             ) : (
-              <a onClick={() => doBookmark()} className="flex flex-col mb-3 items-center justify-center cursor-pointer">
+              <a
+                onClick={() => doBookmark()}
+                className="flex flex-col mb-3 items-center justify-center cursor-pointer"
+              >
                 <Icon icon="material-symbols:bookmark-outline" width={40} />
                 <p className="text-base lg:text-lg">Simpan</p>
               </a>
@@ -271,13 +285,20 @@ const DetailVideo = () => {
             {/* garis */}
             <div className="border-t border-black my-4"></div>
 
-            <Link href={`/all/filter?title=polda&category=${detailDataVideo?.category.id}`} className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
+            <Link
+              href={`/all/filter?title=polda&category=${detailDataVideo?.category.id}`}
+              className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded"
+            >
               {detailDataVideo?.categoryName}
             </Link>
 
             <div className="flex justify-center flex-wrap gap-2 mb-4">
               {detailDataVideo?.tags.split(",").map((tag: string) => (
-                <a onClick={() => router.push(`/all/filter?tag=${tag}`)} key={tag} className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500 hover:text-white">
+                <a
+                  onClick={() => router.push(`/all/filter?tag=${tag}`)}
+                  key={tag}
+                  className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500 hover:text-white"
+                >
                   {tag}
                 </a>
               ))}
@@ -286,15 +307,27 @@ const DetailVideo = () => {
             <div className="border-t border-black my-4"></div>
 
             {/* Opsi Ukuran Foto */}
-            <h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Audio Visual</h4>
+            <h4 className="flex text-lg justify-center items-center font-semibold my-3">
+              Opsi Ukuran Audio Visual
+            </h4>
 
             <div className="border-t border-black my-4"></div>
 
             <div className="space-y-2">
               {sizes.map((size: any) => (
                 <div className="flex flex-row justify-between">
-                  <div key={size.label} className="items-center flex flex-row  gap-2 cursor-pointer">
-                    <input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
+                  <div
+                    key={size.label}
+                    className="items-center flex flex-row  gap-2 cursor-pointer"
+                  >
+                    <input
+                      type="radio"
+                      name="size"
+                      value={size.label}
+                      checked={selectedSize === size.label}
+                      onChange={() => setSelectedSize(size.label)}
+                      className="text-red-600 focus:ring-red-600"
+                    />
                     <div className="text-sm">{size.label}</div>
                   </div>
                   <div className="">
@@ -307,15 +340,25 @@ const DetailVideo = () => {
             {/* Download Semua */}
             <div className="mt-4">
               <label className="flex items-center space-x-2 text-sm">
-                <input type="checkbox" className="text-red-600 focus:ring-red-600" onChange={() => setIsDownloadAll(!isDownloadAll)} />
+                <input
+                  type="checkbox"
+                  className="text-red-600 focus:ring-red-600"
+                  onChange={() => setIsDownloadAll(!isDownloadAll)}
+                />
                 <span>Download Semua File?</span>
               </label>
             </div>
 
             {/* Tombol Download */}
-            <button onClick={handleDownload} className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
+            <button
+              onClick={handleDownload}
+              className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
+            >
               <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
-                <path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+                <path
+                  fill="white"
+                  d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
+                />
               </svg>
               Download
             </button>
@@ -328,7 +371,9 @@ const DetailVideo = () => {
           <div className="gap-5 flex flex-col px-4 lg:px-14">
             <p className="flex items-start text-lg">Berikan Komentar</p>
             <Textarea placeholder="Type your comments here." className="flex w-full" />
-            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">Kirim</button>
+            <button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1">
+              Kirim
+            </button>
           </div>
         </div>
 
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
index cbf98a93..99a15130 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx
@@ -1,21 +1,43 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getListContent,
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
 import { useTranslations } from "next-intl";
 
+import { close, loading } from "@/config/swal";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -53,7 +75,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -93,7 +117,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -111,7 +139,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("2");
@@ -133,7 +173,8 @@ const FilterPage = () => {
 
   async function getDataAll() {
     if (satkerName && String(satkerName)?.length > 1) {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -162,7 +203,8 @@ const FilterPage = () => {
       setTotalPage(data?.totalPages);
       setTotalContent(response?.data?.data?.totalElements);
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -389,7 +431,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -405,7 +450,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -417,7 +464,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -430,17 +479,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -455,31 +523,56 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mk4" value="mk4" checked={formatFilter.includes("mk4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")} />
+                    <Checkbox
+                      id="mk4"
+                      value="mk4"
+                      checked={formatFilter.includes("mk4")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MK4</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mov" value="mov" checked={formatFilter.includes("mov")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")} />
+                    <Checkbox
+                      id="mov"
+                      value="mov"
+                      checked={formatFilter.includes("mov")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MOV</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mp4" value="mp4" checked={formatFilter.includes("mp4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")} />
+                    <Checkbox
+                      id="mp4"
+                      value="mp4"
+                      checked={formatFilter.includes("mp4")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MP4</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="avi" value="avi" checked={formatFilter.includes("avi")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")} />
+                    <Checkbox
+                      id="avi"
+                      value="avi"
+                      checked={formatFilter.includes("avi")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">AVI</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="wmv" value="wmv" checked={formatFilter.includes("wmv")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")} />
+                    <Checkbox
+                      id="wmv"
+                      value="wmv"
+                      checked={formatFilter.includes("wmv")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">WMV</span>
                   </label>
                 </li>
@@ -499,7 +592,11 @@ const FilterPage = () => {
           <div className="flex-1">
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -508,21 +605,36 @@ const FilterPage = () => {
             {videoData?.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {videoData?.map((video: any) => (
-                  <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
+                  <Card
+                    key={video?.id}
+                    className="hover:scale-110 transition-transform duration-300"
+                  >
                     <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                       <Link href={`${prefixPath}/video/detail/${video?.slug}`}>
-                        <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" />
+                        <img
+                          src={video?.thumbnailLink}
+                          className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center"
+                        />
                         <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                          {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"}| <Icon icon="formkit:eye" width="15" height="15" />
+                          {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
+                          {video?.timezone ? video?.timezone : "WIB"}|{" "}
+                          <Icon icon="formkit:eye" width="15" height="15" />
                           {video?.clickCount}{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 20 20"
+                          >
                             <path
                               fill="#f00"
                               d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
                             />
                           </svg>{" "}
                         </div>
-                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
+                        <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
+                          {video?.title}
+                        </div>
                       </Link>
                     </CardContent>
                   </Card>
diff --git a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/layout.tsx b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/layout.tsx
index 6a8ae228..3e6e6481 100644
--- a/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/layout.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/[satker_name]/video/layout.tsx
@@ -1,20 +1,17 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/(satker)/satker/layout.tsx b/src/app/[locale]/(public)/(satker)/satker/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/(satker)/satker/layout.tsx
+++ b/src/app/[locale]/(public)/(satker)/satker/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/all/filter/page.tsx b/src/app/[locale]/(public)/all/filter/page.tsx
index ac2ba815..d88e07b2 100644
--- a/src/app/[locale]/(public)/all/filter/page.tsx
+++ b/src/app/[locale]/(public)/all/filter/page.tsx
@@ -1,10 +1,23 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
 import {
   getUserLevelListByParent,
   listCategory,
@@ -12,28 +25,18 @@ import {
   listDataAll,
   listDataRegional,
 } from "@/lib/services/landing/landing";
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
+import { getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+import { Reveal } from "@/components/features/landing-page/Reveal";
+
 import "react-datepicker/dist/react-datepicker.css";
+
 import { close, loading } from "@/config/swal";
+import FilterAudioComponent from "@/components/features/landing-page/filter-all/audio-filter-card";
+import FilterDocumentComponent from "@/components/features/landing-page/filter-all/document-filter-card";
 import FilterImageComponent from "@/components/features/landing-page/filter-all/image-filter-card";
 import FilterVideoComponent from "@/components/features/landing-page/filter-all/video-filter-card";
-import FilterDocumentComponent from "@/components/features/landing-page/filter-all/document-filter-card";
-import FilterAudioComponent from "@/components/features/landing-page/filter-all/audio-filter-card";
 
 export default function FilterPage() {
   const router = useRouter();
@@ -45,11 +48,8 @@ export default function FilterPage() {
   const [totalData, setTotalData] = React.useState<number>(1);
   const [totalPage, setTotalPage] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -110,9 +110,7 @@ export default function FilterPage() {
 
   useEffect(() => {
     if (categorie) {
-      setCategoryFilter(
-        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
-      );
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
       console.log(
         "Kategori",
         categorie,
@@ -169,9 +167,7 @@ export default function FilterPage() {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -187,13 +183,9 @@ export default function FilterPage() {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("0", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         // setGetTotalPage(response?.data?.data?.totalPages);
@@ -209,9 +201,7 @@ export default function FilterPage() {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -226,13 +216,9 @@ export default function FilterPage() {
         startDateString,
         endDateString,
         monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)
-              ?.split("/")[0]
-              ?.replace("0", "")
+          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("0", "")
           : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
       // setGetTotalPage(response?.data?.data?.totalPages);
@@ -283,10 +269,7 @@ export default function FilterPage() {
   };
 
   async function getDataRegional() {
-    const filter =
-      categoryFilter?.length > 0
-        ? categoryFilter?.sort().join(",")
-        : categorie || "";
+    const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -299,12 +282,8 @@ export default function FilterPage() {
       "",
       startDateString,
       endDateString,
-      monthYearFilter
-        ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-        : "",
-      monthYearFilter
-        ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-        : "",
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+      monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
       12,
       pages,
       sortByOpt
@@ -475,27 +454,18 @@ export default function FilterPage() {
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
-                Kategori
-              </h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Kategori</h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
-                    <label
-                      className="inline-flex items-center"
-                      htmlFor={`${category.id}`}
-                    >
+                    <label className="inline-flex items-center" htmlFor={`${category.id}`}>
                       <Checkbox
                         id={`${category.id}`}
                         value={category.id}
                         checked={categoryFilter.includes(String(category.id))}
-                        onCheckedChange={(e) =>
-                          handleCategoryFilter(Boolean(e), category.id)
-                        }
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
                       />
-                      <span className="ml-2 text-gray-700 dark:text-white">
-                        {category?.name}
-                      </span>
+                      <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
                 ))}
@@ -505,9 +475,7 @@ export default function FilterPage() {
             <div className="border-t border-black my-4 dark:border-white"></div>
             {/* Garis */}
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
-                Format Konten
-              </h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">Format Konten</h3>
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
@@ -515,13 +483,9 @@ export default function FilterPage() {
                       id="png"
                       value="png"
                       checked={formatFilter.includes("image")}
-                      onCheckedChange={(e) =>
-                        handleFormatFilter(Boolean(e), "image")
-                      }
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "image")}
                     />
-                    <span className="ml-2 text-gray-700 dark:text-white">
-                      Foto
-                    </span>
+                    <span className="ml-2 text-gray-700 dark:text-white">Foto</span>
                   </label>
                 </li>
                 <li>
@@ -530,13 +494,9 @@ export default function FilterPage() {
                       id="jpeg"
                       value="jpeg"
                       checked={formatFilter.includes("video")}
-                      onCheckedChange={(e) =>
-                        handleFormatFilter(Boolean(e), "video")
-                      }
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "video")}
                     />
-                    <span className="ml-2 text-gray-700 dark:text-white">
-                      Audio Visual
-                    </span>
+                    <span className="ml-2 text-gray-700 dark:text-white">Audio Visual</span>
                   </label>
                 </li>
                 <li>
@@ -545,13 +505,9 @@ export default function FilterPage() {
                       id="jpg"
                       value="jpg"
                       checked={formatFilter.includes("document")}
-                      onCheckedChange={(e) =>
-                        handleFormatFilter(Boolean(e), "document")
-                      }
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "document")}
                     />
-                    <span className="ml-2 text-gray-700 dark:text-white">
-                      Teks
-                    </span>
+                    <span className="ml-2 text-gray-700 dark:text-white">Teks</span>
                   </label>
                 </li>
                 <li>
@@ -560,23 +516,16 @@ export default function FilterPage() {
                       id="jpg"
                       value="jpg"
                       checked={formatFilter.includes("audio")}
-                      onCheckedChange={(e) =>
-                        handleFormatFilter(Boolean(e), "audio")
-                      }
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "audio")}
                     />
-                    <span className="ml-2 text-gray-700 dark:text-white">
-                      Audio
-                    </span>
+                    <span className="ml-2 text-gray-700 dark:text-white">Audio</span>
                   </label>
                 </li>
               </ul>
             </div>
             <div className="border-t border-black dark:border-white my-4"></div>
             <div className="text-center">
-              <a
-                onClick={cleanCheckbox}
-                className="text-[#bb3523] cursor-pointer"
-              >
+              <a onClick={cleanCheckbox} className="text-[#bb3523] cursor-pointer">
                 <b>Reset Filter</b>
               </a>
             </div>
diff --git a/src/app/[locale]/(public)/audio/detail/[slug]/page.tsx b/src/app/[locale]/(public)/audio/detail/[slug]/page.tsx
index 823dfb25..a9242fcb 100644
--- a/src/app/[locale]/(public)/audio/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/audio/detail/[slug]/page.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { Metadata } from "next";
+
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -9,9 +11,8 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import { Metadata } from "next";
-import DetailImage from "@/components/features/main/image-detail";
 import DetailAudio from "@/components/features/main/audio-detail";
+import DetailImage from "@/components/features/main/image-detail";
 
 interface Size {
   label: string;
diff --git a/src/app/[locale]/(public)/audio/filter/page.tsx b/src/app/[locale]/(public)/audio/filter/page.tsx
index 7b587309..47df84f5 100644
--- a/src/app/[locale]/(public)/audio/filter/page.tsx
+++ b/src/app/[locale]/(public)/audio/filter/page.tsx
@@ -1,18 +1,44 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear, secondToTimes } from "@/lib/utils/globals";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import LandingPagination from "@/components/features/landing-page/pagination";
 import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
 import ReactDatePicker from "react-datepicker";
+
+import {
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import {
+  formatDateToIndonesian,
+  getOnlyDate,
+  getOnlyMonthAndYear,
+  secondToTimes,
+} from "@/lib/utils/globals";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import LandingPagination from "@/components/features/landing-page/pagination";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
 import { useTranslations } from "next-intl";
+
+import { close, loading } from "@/config/swal";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Reveal } from "@/components/features/landing-page/Reveal";
 
@@ -56,7 +82,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -103,7 +131,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -121,7 +153,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("4");
@@ -144,7 +188,8 @@ const FilterPage = () => {
   async function getDataAll() {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+        const filter =
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -162,7 +207,9 @@ const FilterPage = () => {
           filterGroup,
           startDateString,
           endDateString,
-          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
+            : "",
           monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
           locale == "en" ? true : false
         );
@@ -178,7 +225,8 @@ const FilterPage = () => {
         setTotalContent(response?.data?.data?.totalElements);
       }
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -387,7 +435,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -403,7 +454,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -415,7 +468,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -428,17 +483,36 @@ const FilterPage = () => {
                   placeholderText={t("searchDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories?.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -453,13 +527,23 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="png" value="png" checked={formatFilter.includes("wav")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wav")} />
+                    <Checkbox
+                      id="png"
+                      value="png"
+                      checked={formatFilter.includes("wav")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wav")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">WAV</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("mp3")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp3")} />
+                    <Checkbox
+                      id="jpeg"
+                      value="jpeg"
+                      checked={formatFilter.includes("mp3")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp3")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MP3</span>
                   </label>
                 </li>
@@ -479,7 +563,11 @@ const FilterPage = () => {
           <Reveal>
             <div className="flex flex-col items-end mb-4">
               <h2 className="text-lg font-semibold">{t("sortBy")} </h2>
-              <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+              <select
+                defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                onChange={(e) => handleSorting(e)}
+                className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+              >
                 <option value="latest">{t("latest")}</option>
                 <option value="popular">{t("mostPopular")}</option>
               </select>
@@ -502,11 +590,20 @@ const FilterPage = () => {
                   <div className="flex flex-col gap-3">
                     {audioData?.map((audio: any) => (
                       <div key={audio?.id}>
-                        <Link href={`/audio/detail/${audio?.slug}`} className="flex flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                        <Link
+                          href={`/audio/detail/${audio?.slug}`}
+                          className="flex flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                        >
                           <div className="flex justify-center lg:justify-between w-full gap-2 lg:gap-6">
                             <div className="flex flex-row gap-3">
                               <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-full lg:h-16">
-                                <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                                <svg
+                                  width="32"
+                                  height="34"
+                                  viewBox="0 0 32 34"
+                                  fill="null"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
                                   <path
                                     d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                                     fill="white"
@@ -516,7 +613,8 @@ const FilterPage = () => {
                               <div className="flex flex-col">
                                 <div className="flex flex-col lg:flex-row lg:gap-2">
                                   <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm items-center">
-                                    {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"}
+                                    {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
+                                    {audio?.timezone ? audio?.timezone : "WIB"}
                                   </div>
                                   <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm items-center">
                                     |&nbsp;
@@ -525,20 +623,37 @@ const FilterPage = () => {
                                   </div>
                                 </div>
 
-                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
+                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                                  {audio?.title}
+                                </div>
                               </div>
                             </div>
 
                             <div className="flex flex-col lg:flex-row items-center place-content-end gap-3">
                               <img src="/assets/wave.svg" alt="wave" className="h-5 lg:h-16" />
-                              <svg width="17" height="20" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                              <svg
+                                width="17"
+                                height="20"
+                                viewBox="0 0 32 34"
+                                fill="null"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
                                 <path
                                   d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                                   fill="black"
                                 />
                               </svg>
-                              <p className="text-xs lg:text-sm text-center"> {audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}</p>
-                              <Icon icon="ph:download-fill" className="text-red-500" fontSize={20} />
+                              <p className="text-xs lg:text-sm text-center">
+                                {" "}
+                                {audio?.duration
+                                  ? secondToTimes(Number(audio?.duration))
+                                  : "00:00:00"}
+                              </p>
+                              <Icon
+                                icon="ph:download-fill"
+                                className="text-red-500"
+                                fontSize={20}
+                              />
                             </div>
                           </div>
                         </Link>
diff --git a/src/app/[locale]/(public)/audio/layout.tsx b/src/app/[locale]/(public)/audio/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/audio/layout.tsx
+++ b/src/app/[locale]/(public)/audio/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/contact/layout.tsx b/src/app/[locale]/(public)/contact/layout.tsx
index a3f39b4c..b03298c7 100644
--- a/src/app/[locale]/(public)/contact/layout.tsx
+++ b/src/app/[locale]/(public)/contact/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
-import Navbar from "@/components/features/landing-page/navbar";
+
 import Footer from "@/components/features/landing-page/footer";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/contact/page.tsx b/src/app/[locale]/(public)/contact/page.tsx
index 1973dbd5..a523d885 100644
--- a/src/app/[locale]/(public)/contact/page.tsx
+++ b/src/app/[locale]/(public)/contact/page.tsx
@@ -1,15 +1,17 @@
 "use client";
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { useRouter } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { yupResolver } from "@hookform/resolvers/yup";
-import * as Yup from "yup";
-import { useForm } from "react-hook-form";
-import { getInfoProfile, getProfile, getSubjects } from "@/lib/services/auth";
-import { close, error, loading, successCallback } from "@/config/swal";
-import { sendMessage } from "@/lib/services/landing/landing";
 import { useTranslations } from "next-intl";
+import { useForm } from "react-hook-form";
+import * as Yup from "yup";
+
+import { close, error, loading, successCallback } from "@/config/swal";
+import { getInfoProfile, getProfile, getSubjects } from "@/lib/services/auth";
+import { sendMessage } from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Reveal } from "@/components/features/landing-page/Reveal";
 
 const ContactForm = () => {
   const router = useRouter();
@@ -95,35 +97,66 @@ const ContactForm = () => {
   };
 
   return (
-    <form method="POST" id="form" onSubmit={handleSubmit(onSubmit)} className="max-w-2xl mx-auto bg-white dark:bg-black p-6">
+    <form
+      method="POST"
+      id="form"
+      onSubmit={handleSubmit(onSubmit)}
+      className="max-w-2xl mx-auto bg-white dark:bg-black p-6"
+    >
       <Reveal>
         {/* Header */}
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-contact.png" alt="contact" />
           <h2 className="ml-4 text-2xl font-bold">{t("contactUs")}</h2>
         </div>
-        <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-1">{t("writeMessage")}</h3>
+        <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-1">
+          {t("writeMessage")}
+        </h3>
         <p className="text-sm text-gray-600 dark:text-white mb-6">{t("leaveMessage")}</p>
 
         {/* Form */}
         <form>
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("name")}</label>
-            <input type="text" placeholder={t("enterName")} className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.name ? "block" : ""}`} {...register("name")} required />
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
+              {t("name")}
+            </label>
+            <input
+              type="text"
+              placeholder={t("enterName")}
+              className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.name ? "block" : ""}`}
+              {...register("name")}
+              required
+            />
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">Email</label>
-            <input type="email" placeholder="name@mail.com" className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.email ? "block" : ""}`} {...register("email")} required />
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
+              Email
+            </label>
+            <input
+              type="email"
+              placeholder="name@mail.com"
+              className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.email ? "block" : ""}`}
+              {...register("email")}
+              required
+            />
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("number")} (Optional)</label>
-            <input type="text" placeholder={t("enterNumber")} className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" />
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
+              {t("number")} (Optional)
+            </label>
+            <input
+              type="text"
+              placeholder={t("enterNumber")}
+              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("subject")}</label>
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
+              {t("subject")}
+            </label>
             <select
               className={`w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.subjects ? "block" : ""}`}
               {...register("subjects", { onChange: (e) => handleSubjects(e) })}
@@ -144,11 +177,20 @@ const ContactForm = () => {
           </div>
 
           <div className="mb-4">
-            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">{t("messages")}</label>
-            <textarea placeholder={t("writeYourMessage")} rows={4} className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
+            <label className="block text-sm font-medium text-gray-700 dark:text-white mb-1">
+              {t("messages")}
+            </label>
+            <textarea
+              placeholder={t("writeYourMessage")}
+              rows={4}
+              className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            ></textarea>
           </div>
 
-          <button type="submit" className="w-fit bg-blue-500 flex justify-self-end text-white p-2 px-8 rounded-md hover:bg-blue-600 transition">
+          <button
+            type="submit"
+            className="w-fit bg-blue-500 flex justify-self-end text-white p-2 px-8 rounded-md hover:bg-blue-600 transition"
+          >
             {t("send")}
           </button>
         </form>
diff --git a/src/app/[locale]/(public)/content-management/download/page.tsx b/src/app/[locale]/(public)/content-management/download/page.tsx
index 7d7cb6f9..790402c5 100644
--- a/src/app/[locale]/(public)/content-management/download/page.tsx
+++ b/src/app/[locale]/(public)/content-management/download/page.tsx
@@ -1,25 +1,32 @@
 "use client";
 
-import { close, error, loading, successCallback } from "@/config/swal";
-import { checkWishlistStatus, deleteWishlist, getInfoProfile, mediaWishlist, saveWishlist } from "@/lib/services/landing/landing";
 import React, { useEffect, useState } from "react";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Image from "next/image";
 import { usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, successCallback } from "@/config/swal";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getInfoProfile,
+  mediaWishlist,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import ImageBlurry from "@/components/ui/image-blurry";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import HeaderManagement from "@/components/features/landing-page/header-management";
 import SidebarManagement from "@/components/features/landing-page/sidebar-management";
-import withReactContent from "sweetalert2-react-content";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import Swal from "sweetalert2";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
-import ImageBlurry from "@/components/ui/image-blurry";
-import Image from "next/image";
-import { useTranslations } from "next-intl";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -63,7 +70,16 @@ const Galery = (props: any) => {
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
-    const response = await mediaWishlist("2", isInstitute ? instituteId : "", name, filter, "9", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "2",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "9",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentVideo(response?.data?.data?.content);
@@ -97,7 +113,16 @@ const Galery = (props: any) => {
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("3", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "3",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "12",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentDocument(response?.data?.data?.content);
@@ -122,7 +147,16 @@ const Galery = (props: any) => {
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("4", isInstitute ? instituteId : "", name, filter, "6", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "4",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "6",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentAudio(response?.data?.data?.content);
@@ -143,7 +177,16 @@ const Galery = (props: any) => {
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("1", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "1",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "12",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentImage(response?.data?.data?.content);
@@ -338,48 +381,89 @@ const Galery = (props: any) => {
                 contentVideo?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentVideo?.map((video: any) => (
-                      <Card key={video?.id} className="hover:scale-105 transition-transform duration-300">
+                      <Card
+                        key={video?.id}
+                        className="hover:scale-105 transition-transform duration-300"
+                      >
                         <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                           <div>
                             <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                               <div className="relative h-60 rounded-lg overflow-hidden">
-                                <ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
+                                <ImageBlurry
+                                  src={video?.mediaUpload?.thumbnailLink}
+                                  alt={video?.mediaUpload?.title}
+                                  style={{ objectFit: "cover", width: "100%", height: "100%" }}
+                                />
                                 <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
                                   <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
-                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">{video?.mediaUpload?.title}</p>
+                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                      {video?.mediaUpload?.title}
+                                    </p>
                                   </Link>
                                   <p className="flex text-[10px] ml-1 mb-2 items-end">
                                     <Popover>
                                       <PopoverTrigger className="flex cursor-pointer" asChild>
                                         <a className="flex justify-end items-end place-items-end">
-                                          <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                          <Icon
+                                            className="text-white ml-1"
+                                            fontSize={25}
+                                            icon="tabler:dots"
+                                          />
                                         </a>
                                       </PopoverTrigger>
                                       <PopoverContent className="w-52">
-                                        <div onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                          <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">{t("save")}</p>
+                                        <div
+                                          onClick={() => handleSaveWishlist(video?.mediaUpload?.id)}
+                                          className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                        >
+                                          <Icon
+                                            icon="material-symbols:bookmark-outline"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            {t("save")}
+                                          </p>
                                         </div>
-                                        <Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                                        <Link
+                                          href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`}
+                                          className="flex flex-row hover:text-red-800 gap-2"
+                                        >
                                           <Icon icon="jam:write" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                          <p className="text-base font-semibold mb-2">
+                                            Content Rewrite
+                                          </p>
                                         </Link>
                                         <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                           <Popover>
                                             <PopoverTrigger asChild>
                                               <button className="w-full flex flex-row items-center gap-3">
                                                 <Icon icon="oi:share" fontSize={20} />
-                                                <p className="text-base font-semibold mb-1">{t("share")}</p>
+                                                <p className="text-base font-semibold mb-1">
+                                                  {t("share")}
+                                                </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
                                                 <h1 className="mb-2">{t("shareTo")}</h1>
                                                 <div className="flex flex-col mb-2">
-                                                  <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                                  <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                                  <p className="text-base font-semibold mb-1">
+                                                    {t("destinationEmail")}
+                                                  </p>
+                                                  <Input
+                                                    value={emailShareInput}
+                                                    onChange={(event) =>
+                                                      setEmailShareInput(event.target.value)
+                                                    }
+                                                    onKeyPress={handleEmailList}
+                                                    type="email"
+                                                    placeholder={t("pressEnter")}
+                                                  />
                                                 </div>
-                                                <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                                <Button
+                                                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                                  onClick={() => shareToEmail()}
+                                                >
                                                   {t("send")}
                                                 </Button>
                                               </div>
@@ -399,16 +483,31 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
                 contentAudio?.length > 0 ? (
                   <div className=" grid grid-cols-1 gap-6 ">
                     {contentAudio?.map((audio: any) => (
-                      <div key={audio?.id} className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                      <div
+                        key={audio?.id}
+                        className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                      >
                         <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
-                          <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                          <svg
+                            width="32"
+                            height="34"
+                            viewBox="0 0 32 34"
+                            fill="null"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
                             <path
                               d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                               fill="white"
@@ -417,7 +516,9 @@ const Galery = (props: any) => {
                         </div>
                         <div className="flex flex-col object-cover flex-1">
                           <Link href={`/audio/detail/${audio?.mediaUpload?.slug}`}>
-                            <div className="font-semibold text-gray-900 dark:text-white mt-1  text-sm">{audio?.mediaUpload?.title}</div>
+                            <div className="font-semibold text-gray-900 dark:text-white mt-1  text-sm">
+                              {audio?.mediaUpload?.title}
+                            </div>
                           </Link>
                         </div>
                         <div className="flex items-center justify-center gap-3">
@@ -425,9 +526,20 @@ const Galery = (props: any) => {
                             <img src="/assets/wave.svg" className="w-80" />
                           </div>
                           <div className="flex flex-row items-center justify-center text-gray-500 dark:text-gray-400">
-                            <img src="/assets/audio-icon.png" alt="#" className="flex items-center justify-center" />
-                            <div className="flex mx-2 items-center justify-center">{audio?.mediaUpload?.duration}</div>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                            <img
+                              src="/assets/audio-icon.png"
+                              alt="#"
+                              className="flex items-center justify-center"
+                            />
+                            <div className="flex mx-2 items-center justify-center">
+                              {audio?.mediaUpload?.duration}
+                            </div>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="20"
+                              height="20"
+                              viewBox="0 0 20 20"
+                            >
                               <path
                                 fill="#f00"
                                 d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
@@ -442,11 +554,17 @@ const Galery = (props: any) => {
                             </a>
                           </PopoverTrigger>
                           <PopoverContent className="w-52">
-                            <div onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
+                            <div
+                              onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)}
+                              className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                            >
                               <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
                               <p className="text-base font-semibold mb-2">{t("save")}</p>
                             </div>
-                            <Link href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                            <Link
+                              href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`}
+                              className="flex flex-row hover:text-red-800 gap-2"
+                            >
                               <Icon icon="jam:write" fontSize={25} />
                               <p className="text-base font-semibold mb-2">Content Rewrite</p>
                             </Link>
@@ -462,10 +580,21 @@ const Galery = (props: any) => {
                                   <div className="flex flex-col">
                                     <h1 className="mb-2">{t("shareTo")}</h1>
                                     <div className="flex flex-col mb-2">
-                                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                      <p className="text-base font-semibold mb-1">
+                                        {t("destinationEmail")}
+                                      </p>
+                                      <Input
+                                        value={emailShareInput}
+                                        onChange={(event) => setEmailShareInput(event.target.value)}
+                                        onKeyPress={handleEmailList}
+                                        type="email"
+                                        placeholder={t("pressEnter")}
+                                      />
                                     </div>
-                                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                    <Button
+                                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                      onClick={() => shareToEmail()}
+                                    >
                                       {t("send")}
                                     </Button>
                                   </div>
@@ -479,55 +608,103 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "image" ? (
                 contentImage?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentImage?.map((image: any) => (
-                      <Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
+                      <Card
+                        key={image?.id}
+                        className="hover:scale-105 transition-transform duration-300"
+                      >
                         <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                           <div>
                             <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                               <div className="relative h-60 rounded-lg overflow-hidden">
-                                <ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
+                                <ImageBlurry
+                                  src={image?.mediaUpload?.thumbnailLink}
+                                  alt={image?.mediaUpload?.title}
+                                  style={{ objectFit: "cover", width: "100%", height: "100%" }}
+                                />
                                 <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
                                   <Link href={`/video/detail/${image?.mediaUpload?.slug}`}>
-                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.mediaUpload?.title}</p>
+                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                      {image?.mediaUpload?.title}
+                                    </p>
                                   </Link>
                                   <p className="flex text-[10px] ml-1 mb-2 items-end">
                                     <Popover>
                                       <PopoverTrigger className="flex cursor-pointer" asChild>
                                         <a className="flex justify-end items-end place-items-end">
-                                          <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                          <Icon
+                                            className="text-white ml-1"
+                                            fontSize={25}
+                                            icon="tabler:dots"
+                                          />
                                         </a>
                                       </PopoverTrigger>
                                       <PopoverContent className="w-52">
-                                        <div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                          <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">{t("save")}</p>
+                                        <div
+                                          onClick={() => handleSaveWishlist(image?.mediaUpload?.id)}
+                                          className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                        >
+                                          <Icon
+                                            icon="material-symbols:bookmark-outline"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            {t("save")}
+                                          </p>
                                         </div>
-                                        <Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                                        <Link
+                                          href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`}
+                                          className="flex flex-row hover:text-red-800 gap-2"
+                                        >
                                           <Icon icon="jam:write" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                          <p className="text-base font-semibold mb-2">
+                                            Content Rewrite
+                                          </p>
                                         </Link>
                                         <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                           <Popover>
                                             <PopoverTrigger asChild>
                                               <button className="w-full flex flex-row items-center gap-3">
                                                 <Icon icon="oi:share" fontSize={20} />
-                                                <p className="text-base font-semibold mb-1"> {t("share")}</p>
+                                                <p className="text-base font-semibold mb-1">
+                                                  {" "}
+                                                  {t("share")}
+                                                </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
                                                 <h1 className="mb-2">{t("shareTo")}</h1>
                                                 <div className="flex flex-col mb-2">
-                                                  <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                                  <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                                  <p className="text-base font-semibold mb-1">
+                                                    {t("destinationEmail")}
+                                                  </p>
+                                                  <Input
+                                                    value={emailShareInput}
+                                                    onChange={(event) =>
+                                                      setEmailShareInput(event.target.value)
+                                                    }
+                                                    onKeyPress={handleEmailList}
+                                                    type="email"
+                                                    placeholder={t("pressEnter")}
+                                                  />
                                                 </div>
-                                                <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                                <Button
+                                                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                                  onClick={() => shareToEmail()}
+                                                >
                                                   {t("send")}
                                                 </Button>
                                               </div>
@@ -547,15 +724,30 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : contentDocument.length > 0 ? (
                 <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                   {contentDocument?.map((document: any) => (
-                    <div key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                    <div
+                      key={document?.id}
+                      className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                    >
                       <div className="flex items-center justify-center rounded-lg w-16 h-16">
-                        <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          width="28"
+                          height="34"
+                          viewBox="0 0 28 34"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                             fill="black"
@@ -564,12 +756,23 @@ const Galery = (props: any) => {
                       </div>
 
                       <div className="flex flex-col flex-1 gap-2">
-                        <Link href={`/document/detail/${document?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                        <Link
+                          href={`/document/detail/${document?.mediaUpload?.slug}`}
+                          className="font-semibold text-gray-900 dark:text-white mt-1 text-sm"
+                        >
                           {document?.mediaUpload?.title}
                         </Link>
                         <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                            <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 512 512"
+                          >
+                            <path
+                              fill="#f00"
+                              d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                            />
                           </svg>
                           Download {t("document")}
                         </div>
@@ -581,11 +784,17 @@ const Galery = (props: any) => {
                           </a>
                         </PopoverTrigger>
                         <PopoverContent className="w-52">
-                          <div onClick={() => handleSaveWishlist(document?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
+                          <div
+                            onClick={() => handleSaveWishlist(document?.mediaUpload?.id)}
+                            className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                          >
                             <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
                             <p className="text-base font-semibold mb-2">{t("save")}</p>
                           </div>
-                          <Link href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                          <Link
+                            href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`}
+                            className="flex flex-row hover:text-red-800 gap-2"
+                          >
                             <Icon icon="jam:write" fontSize={25} />
                             <p className="text-base font-semibold mb-2">Content Rewrite</p>
                           </Link>
@@ -601,10 +810,21 @@ const Galery = (props: any) => {
                                 <div className="flex flex-col">
                                   <h1 className="mb-2">{t("shareTo")}</h1>
                                   <div className="flex flex-col mb-2">
-                                    <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                    <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                    <p className="text-base font-semibold mb-1">
+                                      {t("destinationEmail")}
+                                    </p>
+                                    <Input
+                                      value={emailShareInput}
+                                      onChange={(event) => setEmailShareInput(event.target.value)}
+                                      onKeyPress={handleEmailList}
+                                      type="email"
+                                      placeholder={t("pressEnter")}
+                                    />
                                   </div>
-                                  <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                  <Button
+                                    className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                    onClick={() => shareToEmail()}
+                                  >
                                     {t("send")}
                                   </Button>
                                 </div>
@@ -618,7 +838,13 @@ const Galery = (props: any) => {
                 </div>
               ) : (
                 <p className="flex items-center justify-center">
-                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image
+                    width={1920}
+                    height={1080}
+                    src="/assets/empty-data.png"
+                    alt="empty"
+                    className="h-52 w-52 my-4"
+                  />
                 </p>
               )}
             </div>
diff --git a/src/app/[locale]/(public)/content-management/galery/page.tsx b/src/app/[locale]/(public)/content-management/galery/page.tsx
index ea754adc..3e0ada66 100644
--- a/src/app/[locale]/(public)/content-management/galery/page.tsx
+++ b/src/app/[locale]/(public)/content-management/galery/page.tsx
@@ -1,27 +1,39 @@
 "use client";
 
-import { close, error, loading, successCallback } from "@/config/swal";
-import { checkWishlistStatus, deleteWishlist, getInfoProfile, mediaWishlist, saveWishlist } from "@/lib/services/landing/landing";
 import React, { useEffect, useState } from "react";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Image from "next/image";
 import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, successCallback } from "@/config/swal";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getInfoProfile,
+  mediaWishlist,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
+import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import ImageBlurry from "@/components/ui/image-blurry";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useToast } from "@/components/ui/use-toast";
 import HeaderManagement from "@/components/features/landing-page/header-management";
 import SidebarManagement from "@/components/features/landing-page/sidebar-management";
-import withReactContent from "sweetalert2-react-content";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import Swal from "sweetalert2";
-import { useToast } from "@/components/ui/use-toast";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
-import ImageBlurry from "@/components/ui/image-blurry";
-import Image from "next/image";
-import { useTranslations } from "next-intl";
 
 const Galery = (props: any) => {
   const [profile, setProfile] = useState<any>();
@@ -65,7 +77,16 @@ const Galery = (props: any) => {
 
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
-    const response = await mediaWishlist("2", isInstitute ? instituteId : "", name, filter, "9", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "2",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "9",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentVideo(response?.data?.data?.content);
@@ -99,7 +120,16 @@ const Galery = (props: any) => {
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("3", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "3",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "12",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentDocument(response?.data?.data?.content);
@@ -124,7 +154,16 @@ const Galery = (props: any) => {
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("4", isInstitute ? instituteId : "", name, filter, "6", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "4",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "6",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentAudio(response?.data?.data?.content);
@@ -145,7 +184,16 @@ const Galery = (props: any) => {
     const name = title == undefined ? "" : title;
     const format = formatFilter == undefined ? "" : formatFilter?.join(",");
 
-    const response = await mediaWishlist("1", isInstitute ? instituteId : "", name, filter, "12", pages, sortBy, format);
+    const response = await mediaWishlist(
+      "1",
+      isInstitute ? instituteId : "",
+      name,
+      filter,
+      "12",
+      pages,
+      sortBy,
+      format
+    );
 
     setGetTotalPage(response?.data?.data?.totalPages);
     setContentImage(response?.data?.data?.content);
@@ -331,48 +379,89 @@ const Galery = (props: any) => {
                 contentVideo?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentVideo?.map((video: any) => (
-                      <Card key={video?.id} className="hover:scale-105 transition-transform duration-300">
+                      <Card
+                        key={video?.id}
+                        className="hover:scale-105 transition-transform duration-300"
+                      >
                         <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                           <div>
                             <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                               <div className="relative h-60 rounded-lg overflow-hidden">
-                                <ImageBlurry src={video?.mediaUpload?.thumbnailLink} alt={video?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
+                                <ImageBlurry
+                                  src={video?.mediaUpload?.thumbnailLink}
+                                  alt={video?.mediaUpload?.title}
+                                  style={{ objectFit: "cover", width: "100%", height: "100%" }}
+                                />
                                 <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
                                   <Link href={`/video/detail/${video?.mediaUpload?.slug}`}>
-                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">{video?.mediaUpload?.title}</p>
+                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                      {video?.mediaUpload?.title}
+                                    </p>
                                   </Link>
                                   <p className="flex text-[10px] ml-1 mb-2 items-end">
                                     <Popover>
                                       <PopoverTrigger className="flex cursor-pointer" asChild>
                                         <a className="flex justify-end items-end place-items-end">
-                                          <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                          <Icon
+                                            className="text-white ml-1"
+                                            fontSize={25}
+                                            icon="tabler:dots"
+                                          />
                                         </a>
                                       </PopoverTrigger>
                                       <PopoverContent className="w-52">
-                                        <div onClick={() => handleSaveWishlist(video?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                          <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">{t("save")} </p>
+                                        <div
+                                          onClick={() => handleSaveWishlist(video?.mediaUpload?.id)}
+                                          className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                        >
+                                          <Icon
+                                            icon="material-symbols:bookmark-outline"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            {t("save")}{" "}
+                                          </p>
                                         </div>
-                                        <Link href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                                        <Link
+                                          href={`/content-management/rewrite/create/${video?.mediaUpload?.id}`}
+                                          className="flex flex-row hover:text-red-800 gap-2"
+                                        >
                                           <Icon icon="jam:write" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                          <p className="text-base font-semibold mb-2">
+                                            Content Rewrite
+                                          </p>
                                         </Link>
                                         <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                           <Popover>
                                             <PopoverTrigger asChild>
                                               <button className="w-full flex flex-row items-center gap-3">
                                                 <Icon icon="oi:share" fontSize={20} />
-                                                <p className="text-base font-semibold mb-1">{t("share")} </p>
+                                                <p className="text-base font-semibold mb-1">
+                                                  {t("share")}{" "}
+                                                </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
                                                 <h1 className="mb-2">{t("shareTo")} </h1>
                                                 <div className="flex flex-col mb-2">
-                                                  <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                                  <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("shareTo")} />
+                                                  <p className="text-base font-semibold mb-1">
+                                                    {t("destinationEmail")}
+                                                  </p>
+                                                  <Input
+                                                    value={emailShareInput}
+                                                    onChange={(event) =>
+                                                      setEmailShareInput(event.target.value)
+                                                    }
+                                                    onKeyPress={handleEmailList}
+                                                    type="email"
+                                                    placeholder={t("shareTo")}
+                                                  />
                                                 </div>
-                                                <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                                <Button
+                                                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                                  onClick={() => shareToEmail()}
+                                                >
                                                   {t("send")}
                                                 </Button>
                                               </div>
@@ -392,33 +481,64 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
                 contentAudio?.length > 0 ? (
                   <div className=" grid grid-cols-1 gap-6 ">
                     {contentAudio?.map((audio: any) => (
-                      <div key={audio?.id} className="flex flex-col sm:flex-row items-center  bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                      <div
+                        key={audio?.id}
+                        className="flex flex-col sm:flex-row items-center  bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                      >
                         <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
-                          <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                          <svg
+                            width="32"
+                            height="34"
+                            viewBox="0 0 32 34"
+                            fill="null"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
                             <path
                               d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                               fill="white"
                             />
                           </svg>
                         </div>
-                        <Link href={`/audio/detail/${audio?.mediaUpload?.slug}`} className="flex flex-col  flex-1">
-                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{audio?.mediaUpload?.title}</div>
+                        <Link
+                          href={`/audio/detail/${audio?.mediaUpload?.slug}`}
+                          className="flex flex-col  flex-1"
+                        >
+                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                            {audio?.mediaUpload?.title}
+                          </div>
                         </Link>
                         <div className="flex items-center justify-center gap-3">
                           <div className="mt-2">
                             <img src="/assets/wave.svg" className="w-80" />
                           </div>
                           <div className="flex flex-row items-center justify-center text-gray-500 dark:text-gray-400">
-                            <img src="/assets/audio-icon.png" alt="#" className="flex items-center justify-center" />
-                            <div className="flex mx-2 items-center justify-center">{audio?.mediaUpload?.duration}</div>
-                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+                            <img
+                              src="/assets/audio-icon.png"
+                              alt="#"
+                              className="flex items-center justify-center"
+                            />
+                            <div className="flex mx-2 items-center justify-center">
+                              {audio?.mediaUpload?.duration}
+                            </div>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="20"
+                              height="20"
+                              viewBox="0 0 20 20"
+                            >
                               <path
                                 fill="#f00"
                                 d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
@@ -433,11 +553,17 @@ const Galery = (props: any) => {
                             </a>
                           </PopoverTrigger>
                           <PopoverContent className="w-52">
-                            <div onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
+                            <div
+                              onClick={() => handleSaveWishlist(audio?.mediaUpload?.id)}
+                              className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                            >
                               <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
                               <p className="text-base font-semibold mb-2">{t("save")}</p>
                             </div>
-                            <Link href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                            <Link
+                              href={`/content-management/rewrite/create/${audio?.mediaUpload?.id}`}
+                              className="flex flex-row hover:text-red-800 gap-2"
+                            >
                               <Icon icon="jam:write" fontSize={25} />
                               <p className="text-base font-semibold mb-2">Content Rewrite</p>
                             </Link>
@@ -453,10 +579,21 @@ const Galery = (props: any) => {
                                   <div className="flex flex-col">
                                     <h1 className="mb-2">{t("shareTo")}</h1>
                                     <div className="flex flex-col mb-2">
-                                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                      <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                      <p className="text-base font-semibold mb-1">
+                                        {t("destinationEmail")}
+                                      </p>
+                                      <Input
+                                        value={emailShareInput}
+                                        onChange={(event) => setEmailShareInput(event.target.value)}
+                                        onKeyPress={handleEmailList}
+                                        type="email"
+                                        placeholder={t("pressEnter")}
+                                      />
                                     </div>
-                                    <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                    <Button
+                                      className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                      onClick={() => shareToEmail()}
+                                    >
                                       {t("send")}
                                     </Button>
                                   </div>
@@ -470,55 +607,103 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "image" ? (
                 contentImage?.length > 0 ? (
                   <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                     {contentImage?.map((image: any) => (
-                      <Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
+                      <Card
+                        key={image?.id}
+                        className="hover:scale-105 transition-transform duration-300"
+                      >
                         <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                           <div>
                             <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                               <div className="relative h-60 rounded-lg overflow-hidden">
-                                <ImageBlurry src={image?.mediaUpload?.thumbnailLink} alt={image?.mediaUpload?.title} style={{ objectFit: "cover", width: "100%", height: "100%" }} />
+                                <ImageBlurry
+                                  src={image?.mediaUpload?.thumbnailLink}
+                                  alt={image?.mediaUpload?.title}
+                                  style={{ objectFit: "cover", width: "100%", height: "100%" }}
+                                />
                                 <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
                                   <Link href={`/video/detail/${image?.mediaUpload?.slug}`}>
-                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.mediaUpload?.title}</p>
+                                    <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                      {image?.mediaUpload?.title}
+                                    </p>
                                   </Link>
                                   <p className="flex text-[10px] ml-1 mb-2 items-end">
                                     <Popover>
                                       <PopoverTrigger className="flex cursor-pointer" asChild>
                                         <a className="flex justify-end items-end place-items-end">
-                                          <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                          <Icon
+                                            className="text-white ml-1"
+                                            fontSize={25}
+                                            icon="tabler:dots"
+                                          />
                                         </a>
                                       </PopoverTrigger>
                                       <PopoverContent className="w-52">
-                                        <div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                          <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">{t("save")}</p>
+                                        <div
+                                          onClick={() => handleSaveWishlist(image?.mediaUpload?.id)}
+                                          className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                        >
+                                          <Icon
+                                            icon="material-symbols:bookmark-outline"
+                                            fontSize={25}
+                                          />
+                                          <p className="text-base font-semibold mb-2">
+                                            {t("save")}
+                                          </p>
                                         </div>
-                                        <Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                                        <Link
+                                          href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`}
+                                          className="flex flex-row hover:text-red-800 gap-2"
+                                        >
                                           <Icon icon="jam:write" fontSize={25} />
-                                          <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                          <p className="text-base font-semibold mb-2">
+                                            Content Rewrite
+                                          </p>
                                         </Link>
                                         <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                           <Popover>
                                             <PopoverTrigger asChild>
                                               <button className="w-full flex flex-row items-center gap-3">
                                                 <Icon icon="oi:share" fontSize={20} />
-                                                <p className="text-base font-semibold mb-1"> {t("share")}</p>
+                                                <p className="text-base font-semibold mb-1">
+                                                  {" "}
+                                                  {t("share")}
+                                                </p>
                                               </button>
                                             </PopoverTrigger>
                                             <PopoverContent>
                                               <div className="flex flex-col">
                                                 <h1 className="mb-2">{t("shareTo")}</h1>
                                                 <div className="flex flex-col mb-2">
-                                                  <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                                  <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                                  <p className="text-base font-semibold mb-1">
+                                                    {t("destinationEmail")}
+                                                  </p>
+                                                  <Input
+                                                    value={emailShareInput}
+                                                    onChange={(event) =>
+                                                      setEmailShareInput(event.target.value)
+                                                    }
+                                                    onKeyPress={handleEmailList}
+                                                    type="email"
+                                                    placeholder={t("pressEnter")}
+                                                  />
                                                 </div>
-                                                <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                                <Button
+                                                  className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                                  onClick={() => shareToEmail()}
+                                                >
                                                   {t("send")}
                                                 </Button>
                                               </div>
@@ -538,15 +723,30 @@ const Galery = (props: any) => {
                   </div>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : contentDocument.length > 0 ? (
                 <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                   {contentDocument?.map((document: any) => (
-                    <div key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                    <div
+                      key={document?.id}
+                      className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                    >
                       <div className="flex items-center justify-center rounded-lg w-16 h-16">
-                        <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <svg
+                          width="28"
+                          height="34"
+                          viewBox="0 0 28 34"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
                           <path
                             d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                             fill="black"
@@ -555,12 +755,23 @@ const Galery = (props: any) => {
                       </div>
 
                       <div className="flex flex-col flex-1 gap-2">
-                        <Link href={`/document/detail/${document?.mediaUpload?.slug}`} className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                        <Link
+                          href={`/document/detail/${document?.mediaUpload?.slug}`}
+                          className="font-semibold text-gray-900 dark:text-white mt-1 text-sm"
+                        >
                           {document?.mediaUpload?.title}
                         </Link>
                         <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                            <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 512 512"
+                          >
+                            <path
+                              fill="#f00"
+                              d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                            />
                           </svg>
                           Download {t("document")}
                         </div>
@@ -572,11 +783,17 @@ const Galery = (props: any) => {
                           </a>
                         </PopoverTrigger>
                         <PopoverContent className="w-52">
-                          <div onClick={() => handleSaveWishlist(document?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
+                          <div
+                            onClick={() => handleSaveWishlist(document?.mediaUpload?.id)}
+                            className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                          >
                             <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
                             <p className="text-base font-semibold mb-2">{t("save")}</p>
                           </div>
-                          <Link href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                          <Link
+                            href={`/content-management/rewrite/create/${document?.mediaUpload?.id}`}
+                            className="flex flex-row hover:text-red-800 gap-2"
+                          >
                             <Icon icon="jam:write" fontSize={25} />
                             <p className="text-base font-semibold mb-2">Content Rewrite</p>
                           </Link>
@@ -592,10 +809,21 @@ const Galery = (props: any) => {
                                 <div className="flex flex-col">
                                   <h1 className="mb-2">{t("shareTo")}</h1>
                                   <div className="flex flex-col mb-2">
-                                    <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                    <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                    <p className="text-base font-semibold mb-1">
+                                      {t("destinationEmail")}
+                                    </p>
+                                    <Input
+                                      value={emailShareInput}
+                                      onChange={(event) => setEmailShareInput(event.target.value)}
+                                      onKeyPress={handleEmailList}
+                                      type="email"
+                                      placeholder={t("pressEnter")}
+                                    />
                                   </div>
-                                  <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                  <Button
+                                    className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                    onClick={() => shareToEmail()}
+                                  >
                                     {t("send")}
                                   </Button>
                                 </div>
@@ -609,7 +837,13 @@ const Galery = (props: any) => {
                 </div>
               ) : (
                 <p className="flex items-center justify-center">
-                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image
+                    width={1920}
+                    height={1080}
+                    src="/assets/empty-data.png"
+                    alt="empty"
+                    className="h-52 w-52 my-4"
+                  />
                 </p>
               )}
             </div>
diff --git a/src/app/[locale]/(public)/content-management/layout.tsx b/src/app/[locale]/(public)/content-management/layout.tsx
index 5d424bab..9a401f16 100644
--- a/src/app/[locale]/(public)/content-management/layout.tsx
+++ b/src/app/[locale]/(public)/content-management/layout.tsx
@@ -1,19 +1,20 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <Navbar />
-      
+
       {children}
       <Footer />
     </>
diff --git a/src/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx b/src/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
index b8e40600..10130f13 100644
--- a/src/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
+++ b/src/app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
@@ -1,35 +1,48 @@
 "use client";
 
-import HeaderManagement from "@/components/features/landing-page/header-management";
-import SidebarManagement from "@/components/features/landing-page/sidebar-management";
-import { useRouter } from "@/i18n/navigation";
-import { getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils/utils";
-import { useParams, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Cookies from "js-cookie";
+import { useTranslations } from "next-intl";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Controller, useForm } from "react-hook-form";
-import * as z from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import CustomEditor from "@/components/editor/custom-editor";
-import { generateDataArticle, getDetailArticle } from "@/lib/services/content/ai";
-import { Button } from "@/components/ui/button";
-import { close, error, loading } from "@/config/swal";
-import { saveContentRewrite } from "@/lib/services/content/content";
-import { getPublicSuggestionList } from "@/lib/services/landing/landing";
-import { getDetail } from "@/lib/services/detail/detail";
-import { yupResolver } from "@hookform/resolvers/yup";
 import * as Yup from "yup";
-import Cookies from "js-cookie";
+import * as z from "zod";
+
+import { close, error, loading } from "@/config/swal";
+import { generateDataArticle, getDetailArticle } from "@/lib/services/content/ai";
+import { saveContentRewrite } from "@/lib/services/content/content";
+import { getDetail } from "@/lib/services/detail/detail";
+import { getPublicSuggestionList } from "@/lib/services/landing/landing";
+import { getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import { useTranslations } from "next-intl";
+import CustomEditor from "@/components/editor/custom-editor";
+import HeaderManagement from "@/components/features/landing-page/header-management";
+import SidebarManagement from "@/components/features/landing-page/sidebar-management";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   mainKeyword: z.string().min(1, { message: "Keyword diperlukan" }),
-  seo: z.string().min(1, { message: "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter" }),
+  seo: z
+    .string()
+    .min(1, {
+      message: "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter",
+    }),
   description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
@@ -73,7 +86,9 @@ const page = (props: any) => {
   const validationSchema = Yup.object().shape({
     title: Yup.string().required("Judul tidak boleh kosong"),
     mainKeyword: Yup.string().required("Keyword tidak boleh kosong"),
-    seo: Yup.string().required("Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"),
+    seo: Yup.string().required(
+      "Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"
+    ),
     description: Yup.string().required("Narasi Penugasan harus lebih dari 2 karakter."),
   });
 
@@ -174,7 +189,10 @@ const page = (props: any) => {
         setMain({
           id: response?.data?.data?.files[0]?.id,
           type: response?.data?.data?.fileType.name,
-          url: Number(response?.data?.data?.fileType?.id) == 4 ? response?.data?.data?.files[0]?.secondaryUrl : response?.data?.data?.files[0]?.url,
+          url:
+            Number(response?.data?.data?.fileType?.id) == 4
+              ? response?.data?.data?.files[0]?.secondaryUrl
+              : response?.data?.data?.files[0]?.url,
           thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
           names: response?.data?.data?.files[0]?.fileName,
           format: response?.data?.data?.files[0]?.format,
@@ -334,7 +352,10 @@ const page = (props: any) => {
                       </div>
                       <div className="gap-1 flex flex-col mb-3">
                         <p className="font-semibold">{t("writingStyle")}</p>
-                        <Select value={selectedWritingStyle} onValueChange={setSelectedWritingStyle}>
+                        <Select
+                          value={selectedWritingStyle}
+                          onValueChange={setSelectedWritingStyle}
+                        >
                           <SelectTrigger className="w-full lg:w-[180px]">
                             <SelectValue placeholder={t("selectWriting")} />
                           </SelectTrigger>
@@ -372,7 +393,16 @@ const page = (props: any) => {
                       <Controller
                         control={control}
                         name="title"
-                        render={({ field: { onChange, value } }) => <Input type="text" className={`w-full border py-3 rounded-lg ${errors.title ? "is-invalid" : ""}`} {...register("title")} id="title" value={value} onChange={onChange} />}
+                        render={({ field: { onChange, value } }) => (
+                          <Input
+                            type="text"
+                            className={`w-full border py-3 rounded-lg ${errors.title ? "is-invalid" : ""}`}
+                            {...register("title")}
+                            id="title"
+                            value={value}
+                            onChange={onChange}
+                          />
+                        )}
                       />
                     </div>
                     <div className="mb-3">
@@ -381,7 +411,14 @@ const page = (props: any) => {
                         control={control}
                         name="mainKeyword"
                         render={({ field: { onChange, value } }) => (
-                          <Input type="text" className={`w-full border py-3 rounded-lg ${errors.mainKeyword ? "is-invalid" : ""}`} {...register("mainKeyword")} id="mainKeyword" value={value} onChange={onChange} />
+                          <Input
+                            type="text"
+                            className={`w-full border py-3 rounded-lg ${errors.mainKeyword ? "is-invalid" : ""}`}
+                            {...register("mainKeyword")}
+                            id="mainKeyword"
+                            value={value}
+                            onChange={onChange}
+                          />
                         )}
                       />
                     </div>
@@ -391,12 +428,22 @@ const page = (props: any) => {
                         control={control}
                         name="seo"
                         render={({ field: { onChange, value } }) => (
-                          <Textarea className="py-20" id="seo" placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter" {...register("seo")} onChange={onChange} value={value} />
+                          <Textarea
+                            className="py-20"
+                            id="seo"
+                            placeholder="Tuliskan kata kunci atau frasa yang relevan dengan blog Anda, lalu tekan enter"
+                            {...register("seo")}
+                            onChange={onChange}
+                            value={value}
+                          />
                         )}
                       />
                     </div>
                     <div className="mb-4">
-                      <a onClick={handleGenerateArtikel} className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base">
+                      <a
+                        onClick={handleGenerateArtikel}
+                        className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base"
+                      >
                         Generate Artikel
                       </a>
                       {isGeneratedArticle && (
@@ -433,7 +480,11 @@ const page = (props: any) => {
                           )
                         }
                       />
-                      {articleBody === null || articleBody === "" ? <p className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</p> : ""}
+                      {articleBody === null || articleBody === "" ? (
+                        <p className="text-red-400 px-0 text-sm">Deskripsi tidak boleh kosong*</p>
+                      ) : (
+                        ""
+                      )}
                     </div>
                     <div className="flex flex-row gap-3">
                       <Button
@@ -445,7 +496,10 @@ const page = (props: any) => {
                       >
                         {t("back")}
                       </Button>
-                      <Button type="submit" className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white">
+                      <Button
+                        type="submit"
+                        className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white"
+                      >
                         {t("save")}
                       </Button>
                     </div>
diff --git a/src/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx b/src/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
index 25dfab3f..67583190 100644
--- a/src/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
+++ b/src/app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
@@ -1,22 +1,23 @@
 "use client";
 
-import { close, error, loading } from "@/config/swal";
-import { useRouter } from "@/i18n/navigation";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { getContentRewrite, getInfoProfile } from "@/lib/services/landing/landing";
-import { useParams, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import { useParams, useSearchParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import * as Yup from "yup";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { useForm } from "react-hook-form";
+
+import { close, error, loading } from "@/config/swal";
 import { generateDataArticle } from "@/lib/services/content/ai";
+import { saveContentRewrite } from "@/lib/services/content/content";
+import { getContentRewrite, getInfoProfile } from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Input } from "@/components/ui/input";
+import CustomEditor from "@/components/editor/custom-editor";
 import HeaderManagement from "@/components/features/landing-page/header-management";
 import SidebarManagement from "@/components/features/landing-page/sidebar-management";
-import { saveContentRewrite } from "@/lib/services/content/content";
-import CustomEditor from "@/components/editor/custom-editor";
-import { Input } from "@/components/ui/input";
 
 const page = () => {
   const [profile, setProfile] = useState();
@@ -221,7 +222,14 @@ const page = () => {
                           <p className="font-semibold">Main Keyword</p>
                         </div>
                         <div>
-                          <Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
+                          <Input
+                            type="text"
+                            className="border mb-3 w-full rounded-md p-2 border-black"
+                            id="mainKeyword"
+                            name="mainKeyword"
+                            placeholder="Masukan Main Keyword disini!"
+                            defaultValue={content?.mainKeyword}
+                          />
                         </div>
                       </div>
                       <div className="w-full lg:w-1/2">
diff --git a/src/app/[locale]/(public)/content-management/rewrite/page.tsx b/src/app/[locale]/(public)/content-management/rewrite/page.tsx
index 51c4b561..c966fa81 100644
--- a/src/app/[locale]/(public)/content-management/rewrite/page.tsx
+++ b/src/app/[locale]/(public)/content-management/rewrite/page.tsx
@@ -1,24 +1,31 @@
 "use client";
 
-import HeaderManagement from "@/components/features/landing-page/header-management";
-import SidebarManagement from "@/components/features/landing-page/sidebar-management";
-import { close, error, loading, successCallback } from "@/config/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { checkWishlistStatus, deleteWishlist, getContentRewritePagination, getInfoProfile, saveWishlist } from "@/lib/services/landing/landing";
-import { useRouter, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { Card, CardContent } from "@/components/ui/card";
-import { Link } from "@/i18n/navigation";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+
+import { close, error, loading, successCallback } from "@/config/swal";
+import {
+  checkWishlistStatus,
+  deleteWishlist,
+  getContentRewritePagination,
+  getInfoProfile,
+  saveWishlist,
+} from "@/lib/services/landing/landing";
 import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import ImageBlurry from "@/components/ui/image-blurry";
-import Image from "next/image";
-import { useTranslations } from "next-intl";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import HeaderManagement from "@/components/features/landing-page/header-management";
+import SidebarManagement from "@/components/features/landing-page/sidebar-management";
 
 const page = () => {
   const [, setProfile] = useState();
@@ -211,48 +218,88 @@ const page = () => {
             {contentImage?.length > 0 ? (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                 {contentImage?.map((image: any) => (
-                  <Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
+                  <Card
+                    key={image?.id}
+                    className="hover:scale-105 transition-transform duration-300"
+                  >
                     <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                       <div>
                         <div className="relative group overflow-hidden shadow-md hover:shadow-lg">
                           <div className="relative h-60 rounded-lg overflow-hidden">
-                            <ImageBlurry src={image?.thumbnailUrl} alt={image?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
+                            <ImageBlurry
+                              src={image?.thumbnailUrl}
+                              alt={image?.title}
+                              style={{ objectFit: "contain", width: "100%", height: "100%" }}
+                            />
                             <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-transparent via-gray-900/80 to-transparent text-white">
                               <Link href={`/content-management/rewrite/detail/${image.id}`}>
-                                <p className="text-sm p-2 lg:text-base font-semibold truncate">{image?.title}</p>
+                                <p className="text-sm p-2 lg:text-base font-semibold truncate">
+                                  {image?.title}
+                                </p>
                               </Link>
                               <p className="flex text-[10px] ml-1 mb-2 items-end">
                                 <Popover>
                                   <PopoverTrigger className="flex cursor-pointer" asChild>
                                     <a className="flex justify-end items-end place-items-end">
-                                      <Icon className="text-white ml-1" fontSize={25} icon="tabler:dots" />
+                                      <Icon
+                                        className="text-white ml-1"
+                                        fontSize={25}
+                                        icon="tabler:dots"
+                                      />
                                     </a>
                                   </PopoverTrigger>
                                   <PopoverContent className="w-52">
-                                    <div onClick={() => handleSaveWishlist(image?.mediaUpload?.id)} className="cursor-pointer flex flex-row gap-2 hover:text-red-800">
-                                      <Icon icon="material-symbols:bookmark-outline" fontSize={25} />
+                                    <div
+                                      onClick={() => handleSaveWishlist(image?.mediaUpload?.id)}
+                                      className="cursor-pointer flex flex-row gap-2 hover:text-red-800"
+                                    >
+                                      <Icon
+                                        icon="material-symbols:bookmark-outline"
+                                        fontSize={25}
+                                      />
                                       <p className="text-base font-semibold mb-2">{t("save")}</p>
                                     </div>
-                                    <Link href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`} className="flex flex-row hover:text-red-800 gap-2">
+                                    <Link
+                                      href={`/content-management/rewrite/create/${image?.mediaUpload?.id}`}
+                                      className="flex flex-row hover:text-red-800 gap-2"
+                                    >
                                       <Icon icon="jam:write" fontSize={25} />
-                                      <p className="text-base font-semibold mb-2">Content Rewrite</p>
+                                      <p className="text-base font-semibold mb-2">
+                                        Content Rewrite
+                                      </p>
                                     </Link>
                                     <div className="flex items-center gap-1 hover:text-red-800 w-full rounded-lg">
                                       <Popover>
                                         <PopoverTrigger asChild>
                                           <button className="w-full flex flex-row items-center gap-3">
                                             <Icon icon="oi:share" fontSize={20} />
-                                            <p className="text-base font-semibold mb-1"> {t("share")}</p>
+                                            <p className="text-base font-semibold mb-1">
+                                              {" "}
+                                              {t("share")}
+                                            </p>
                                           </button>
                                         </PopoverTrigger>
                                         <PopoverContent>
                                           <div className="flex flex-col">
                                             <h1 className="mb-2">{t("shareTo")}</h1>
                                             <div className="flex flex-col mb-2">
-                                              <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
-                                              <Input value={emailShareInput} onChange={(event) => setEmailShareInput(event.target.value)} onKeyPress={handleEmailList} type="email" placeholder={t("pressEnter")} />
+                                              <p className="text-base font-semibold mb-1">
+                                                {t("destinationEmail")}
+                                              </p>
+                                              <Input
+                                                value={emailShareInput}
+                                                onChange={(event) =>
+                                                  setEmailShareInput(event.target.value)
+                                                }
+                                                onKeyPress={handleEmailList}
+                                                type="email"
+                                                placeholder={t("pressEnter")}
+                                              />
                                             </div>
-                                            <Button className="bg-blue-500 text-white p-2 w-fit rounded-lg" onClick={() => shareToEmail()}>
+                                            <Button
+                                              className="bg-blue-500 text-white p-2 w-fit rounded-lg"
+                                              onClick={() => shareToEmail()}
+                                            >
                                               {t("send")}
                                             </Button>
                                           </div>
@@ -272,7 +319,13 @@ const page = () => {
               </div>
             ) : (
               <p className="flex items-center justify-center">
-                <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                <Image
+                  width={1920}
+                  height={1080}
+                  src="/assets/empty-data.png"
+                  alt="empty"
+                  className="h-52 w-52 my-4"
+                />
               </p>
             )}
           </div>
diff --git a/src/app/[locale]/(public)/content-management/users/page.tsx b/src/app/[locale]/(public)/content-management/users/page.tsx
index d7d622b6..033f0b37 100644
--- a/src/app/[locale]/(public)/content-management/users/page.tsx
+++ b/src/app/[locale]/(public)/content-management/users/page.tsx
@@ -1,18 +1,28 @@
 "use client";
 
-import HeaderManagement from "@/components/features/landing-page/header-management";
-import SidebarManagement from "@/components/features/landing-page/sidebar-management";
-import { close, loading } from "@/config/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { getInfoProfile, getUsersTeams, saveUserReports } from "@/lib/services/landing/landing";
 import React, { useEffect, useState } from "react";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { Button } from "@/components/ui/button";
-import { useToast } from "@/components/ui/use-toast";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, loading } from "@/config/swal";
+import { getInfoProfile, getUsersTeams, saveUserReports } from "@/lib/services/landing/landing";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { useToast } from "@/components/ui/use-toast";
+import HeaderManagement from "@/components/features/landing-page/header-management";
+import SidebarManagement from "@/components/features/landing-page/sidebar-management";
 
 const page = () => {
   const [user, setUser] = useState<any>();
@@ -133,7 +143,13 @@ const page = () => {
                 <Dialog>
                   <DialogTrigger>
                     <div className="flex flex-col items-center border border-gray-500 p-2 bg-[#f8f8f8]  rounded-md">
-                      <Image src="/assets/gg-profile.png" alt="" width={1280} height={720} className="h-10 w-10 mb-4" />
+                      <Image
+                        src="/assets/gg-profile.png"
+                        alt=""
+                        width={1280}
+                        height={720}
+                        className="h-10 w-10 mb-4"
+                      />
                       <p className="font-bold text-base text-black">{row?.fullname}</p>
                       <p className="text-sm font-light text-black">{row?.username || "username"}</p>
                     </div>
@@ -153,7 +169,10 @@ const page = () => {
                       <div className="place-items-end">
                         <Dialog open={reportMessageOpen} onOpenChange={setReportMessageOpen}>
                           <DialogTrigger asChild>
-                            <Button variant="outline" className="bg-red-500 rounded-md text-white hover:bg-white hover:text-red-500">
+                            <Button
+                              variant="outline"
+                              className="bg-red-500 rounded-md text-white hover:bg-white hover:text-red-500"
+                            >
                               Report
                             </Button>
                           </DialogTrigger>
@@ -165,7 +184,12 @@ const page = () => {
                               <div className="border-b border-black w-full"></div>
                               <div className="flex flex-col">
                                 <h1 className="text-red-600 mb-2">{t("reasonReport")}</h1>
-                                <textarea id="formControlTextarea1" rows={4} className="border border-black font-light" onChange={(e: any) => setReportMessage(e.target.value)} />
+                                <textarea
+                                  id="formControlTextarea1"
+                                  rows={4}
+                                  className="border border-black font-light"
+                                  onChange={(e: any) => setReportMessage(e.target.value)}
+                                />
                               </div>
                             </div>
                             <DialogFooter>
diff --git a/src/app/[locale]/(public)/document/detail/[slug]/page.tsx b/src/app/[locale]/(public)/document/detail/[slug]/page.tsx
index 12ca11be..3fe921fd 100644
--- a/src/app/[locale]/(public)/document/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/document/detail/[slug]/page.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { Metadata } from "next";
+
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -9,10 +11,9 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import { Metadata } from "next";
+import DetailDocument from "@/components/features/main/document-detail";
 import DetailImage from "@/components/features/main/image-detail";
 import DetailVideo from "@/components/features/main/video-detail";
-import DetailDocument from "@/components/features/main/document-detail";
 
 interface Size {
   label: string;
diff --git a/src/app/[locale]/(public)/document/filter/page.tsx b/src/app/[locale]/(public)/document/filter/page.tsx
index f859a421..4ae21276 100644
--- a/src/app/[locale]/(public)/document/filter/page.tsx
+++ b/src/app/[locale]/(public)/document/filter/page.tsx
@@ -1,20 +1,42 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getListContent,
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
 import { useTranslations } from "next-intl";
+
+import { close, loading } from "@/config/swal";
 import { Skeleton } from "@/components/ui/skeleton";
 
 const columns: ColumnDef<any>[] = [
@@ -57,7 +79,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -103,7 +127,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -121,7 +149,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("3");
@@ -144,7 +184,8 @@ const FilterPage = () => {
   async function getDataAll() {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+        const filter =
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -162,7 +203,9 @@ const FilterPage = () => {
           filterGroup,
           startDateString,
           endDateString,
-          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
+            : "",
           monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
           locale == "en" ? true : false
         );
@@ -178,7 +221,8 @@ const FilterPage = () => {
         setTotalContent(response?.data?.data?.totalElements);
       }
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -402,7 +446,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -418,7 +465,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -430,7 +479,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -443,17 +494,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -468,31 +538,56 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="doc" value="doc" checked={formatFilter.includes("doc")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")} />
+                    <Checkbox
+                      id="doc"
+                      value="doc"
+                      checked={formatFilter.includes("doc")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "doc")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">DOC</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="docx" value="docx" checked={formatFilter.includes("docx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")} />
+                    <Checkbox
+                      id="docx"
+                      value="docx"
+                      checked={formatFilter.includes("docx")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "docx")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">DOCX</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="pdf" value="pdf" checked={formatFilter.includes("pdf")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")} />
+                    <Checkbox
+                      id="pdf"
+                      value="pdf"
+                      checked={formatFilter.includes("pdf")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pdf")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PDF</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="ppt" value="ppt" checked={formatFilter.includes("ppt")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")} />
+                    <Checkbox
+                      id="ppt"
+                      value="ppt"
+                      checked={formatFilter.includes("ppt")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "ppt")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PPT</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="pptx" value="pptx" checked={formatFilter.includes("pptx")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")} />
+                    <Checkbox
+                      id="pptx"
+                      value="pptx"
+                      checked={formatFilter.includes("pptx")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "pptx")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">PPTX</span>
                   </label>
                 </li>
@@ -513,7 +608,11 @@ const FilterPage = () => {
             <div className="flex-1">
               <div className="flex flex-col items-end mb-4">
                 <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-                <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+                <select
+                  defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                  onChange={(e) => handleSorting(e)}
+                  className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                >
                   <option value="latest">{t("latest")}</option>
                   <option value="popular">{t("mostPopular")}</option>
                 </select>
@@ -539,9 +638,19 @@ const FilterPage = () => {
                   {documentData?.length > 0 ? (
                     <div className=" grid grid-cols-1 md:grid-cols-2 gap-6">
                       {documentData?.map((document: any) => (
-                        <Link href={`/document/detail/${document?.slug}`} key={document?.id} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                        <Link
+                          href={`/document/detail/${document?.slug}`}
+                          key={document?.id}
+                          className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                        >
                           <div className="flex items-center justify-center rounded-lg w-16 h-16">
-                            <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <svg
+                              width="28"
+                              height="34"
+                              viewBox="0 0 28 34"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
                               <path
                                 d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                                 fill="black"
@@ -550,12 +659,25 @@ const FilterPage = () => {
                           </div>
                           <div className="flex flex-col flex-1 gap-2">
                             <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center gap-2 text-xs">
-                              {formatDateToIndonesian(new Date(document?.createdAt))} {document?.timezone ? document?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {document?.clickCount}
+                              {formatDateToIndonesian(new Date(document?.createdAt))}{" "}
+                              {document?.timezone ? document?.timezone : "WIB"} |{" "}
+                              <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                              {document?.clickCount}
+                            </div>
+                            <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                              {document?.title}
                             </div>
-                            <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{document?.title}</div>
                             <div className="flex gap-2 items-center text-xs text-red-500 dark:text-red-500">
-                              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                                <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="1em"
+                                height="1em"
+                                viewBox="0 0 512 512"
+                              >
+                                <path
+                                  fill="#f00"
+                                  d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                                />
                               </svg>
                               Download Dokumen
                             </div>
diff --git a/src/app/[locale]/(public)/document/layout.tsx b/src/app/[locale]/(public)/document/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/document/layout.tsx
+++ b/src/app/[locale]/(public)/document/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/error.tsx b/src/app/[locale]/(public)/error.tsx
index d2e5230b..884dc17a 100644
--- a/src/app/[locale]/(public)/error.tsx
+++ b/src/app/[locale]/(public)/error.tsx
@@ -1,24 +1,28 @@
-"use client"; // Error components must be Client Components
+"use client";
 
+// Error components must be Client Components
 import { useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Info } from "lucide-react";
 
-export default function Error({ error, reset }: {
-    error: Error & { digest?: string }
-    reset: () => void
-}) {
-    return (
-        <div className="space-y-4">
-            <Alert color="destructive" variant="soft">
-                <Info className="h-5 w-5" />
-                <AlertDescription>Something went wrong!</AlertDescription>
-            </Alert>
-            <Button onClick={() => reset()} color="destructive" size="sm">
-                Try again
-            </Button>
-        </div>
-    );
-}
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <Alert color="destructive" variant="soft">
+        <Info className="h-5 w-5" />
+        <AlertDescription>Something went wrong!</AlertDescription>
+      </Alert>
+      <Button onClick={() => reset()} color="destructive" size="sm">
+        Try again
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/(public)/faqs/layout.tsx b/src/app/[locale]/(public)/faqs/layout.tsx
index a3f39b4c..b03298c7 100644
--- a/src/app/[locale]/(public)/faqs/layout.tsx
+++ b/src/app/[locale]/(public)/faqs/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
-import Navbar from "@/components/features/landing-page/navbar";
+
 import Footer from "@/components/features/landing-page/footer";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/faqs/page.tsx b/src/app/[locale]/(public)/faqs/page.tsx
index c4c8a114..efb6a3d2 100644
--- a/src/app/[locale]/(public)/faqs/page.tsx
+++ b/src/app/[locale]/(public)/faqs/page.tsx
@@ -1,8 +1,10 @@
 "use client";
-import { Reveal } from "@/components/features/landing-page/Reveal";
+
 import React, { useState } from "react";
 import { useTranslations } from "next-intl";
 
+import { Reveal } from "@/components/features/landing-page/Reveal";
+
 interface FAQItem {
   question: string;
   answer: string;
@@ -42,7 +44,9 @@ const FAQS: React.FC = () => {
       <Reveal>
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-faqs.png" alt="Faqs" />
-          <h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800 dark:text-white">Frequently Asked Questions</h2>
+          <h2 className="ml-4 text-lg lg:text-2xl font-bold text-gray-800 dark:text-white">
+            Frequently Asked Questions
+          </h2>
         </div>
 
         {/* FAQS Items */}
@@ -50,10 +54,16 @@ const FAQS: React.FC = () => {
           {faqs?.map((faq, index) => (
             <div key={index} className="border-b border-gray-300 pb-2 cursor-pointer">
               <div className="flex justify-between items-center" onClick={() => toggleFAQ(index)}>
-                <h3 className="text-sm font-semibold text-gray-800 dark:text-white">{faq.question}</h3>
-                <span className="text-gray-500 dark:text-white text-xl">{openIndex === index ? "−" : "+"}</span>
+                <h3 className="text-sm font-semibold text-gray-800 dark:text-white">
+                  {faq.question}
+                </h3>
+                <span className="text-gray-500 dark:text-white text-xl">
+                  {openIndex === index ? "−" : "+"}
+                </span>
               </div>
-              {openIndex === index && <p className="text-gray-600 dark:text-white mt-2 text-sm">{faq.answer}</p>}
+              {openIndex === index && (
+                <p className="text-gray-600 dark:text-white mt-2 text-sm">{faq.answer}</p>
+              )}
             </div>
           ))}
         </div>
diff --git a/src/app/[locale]/(public)/feedback/layout.tsx b/src/app/[locale]/(public)/feedback/layout.tsx
index a3f39b4c..b03298c7 100644
--- a/src/app/[locale]/(public)/feedback/layout.tsx
+++ b/src/app/[locale]/(public)/feedback/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
-import Navbar from "@/components/features/landing-page/navbar";
+
 import Footer from "@/components/features/landing-page/footer";
+import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/feedback/page.tsx b/src/app/[locale]/(public)/feedback/page.tsx
index e30295d6..b9599350 100644
--- a/src/app/[locale]/(public)/feedback/page.tsx
+++ b/src/app/[locale]/(public)/feedback/page.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { Reveal } from "@/components/features/landing-page/Reveal";
-import { error, loading, successCallback } from "@/config/swal";
-import { getFeedback, postUserFeedback } from "@/lib/services/landing/landing";
 import React, { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 
+import { error, loading, successCallback } from "@/config/swal";
+import { getFeedback, postUserFeedback } from "@/lib/services/landing/landing";
+import { Reveal } from "@/components/features/landing-page/Reveal";
+
 interface RatingProps {
   label: string;
   onRate: (rating: number) => void;
@@ -24,7 +25,11 @@ const Rating: React.FC<RatingProps> = ({ label, onRate }) => {
       <span className="text-gray-800 dark:text-white">{label}</span>
       <div className="flex space-x-1">
         {[1, 2, 3, 4, 5].map((star) => (
-          <button key={star} onClick={() => handleClick(star)} className={`text-2xl ${star <= selected ? "text-yellow-500" : "text-gray-300"}`}>
+          <button
+            key={star}
+            onClick={() => handleClick(star)}
+            className={`text-2xl ${star <= selected ? "text-yellow-500" : "text-gray-300"}`}
+          >
             ★
           </button>
         ))}
@@ -120,15 +125,29 @@ const FeedbackForm: React.FC = () => {
       <div className="max-w-6xl flex flex-col mx-auto p-4 lg:p-40 gap-5 ">
         <div className="flex items-center justify-center mb-6">
           <img src="/assets/icons-feedback.png" alt="Feedback" />
-          <h2 className="ml-4 text-[15px] lg:text-[32px] font-bold text-gray-800 dark:text-white">{t("userFeedback")}</h2>
+          <h2 className="ml-4 text-[15px] lg:text-[32px] font-bold text-gray-800 dark:text-white">
+            {t("userFeedback")}
+          </h2>
         </div>
         <div className="text-black dark:text-white">
-          <Rating label={t("ratings")} onRate={(rating) => handleRatingChange("accessibility", rating)} />
-          <Rating label={t("ratings2")} onRate={(rating) => handleRatingChange("appearance", rating)} />
-          <Rating label={t("ratings3")} onRate={(rating) => handleRatingChange("content", rating)} />
+          <Rating
+            label={t("ratings")}
+            onRate={(rating) => handleRatingChange("accessibility", rating)}
+          />
+          <Rating
+            label={t("ratings2")}
+            onRate={(rating) => handleRatingChange("appearance", rating)}
+          />
+          <Rating
+            label={t("ratings3")}
+            onRate={(rating) => handleRatingChange("content", rating)}
+          />
         </div>
         <div className="flex justify-center">
-          <button onClick={handleSubmit} className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition text-sm lg:text-base">
+          <button
+            onClick={handleSubmit}
+            className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition text-sm lg:text-base"
+          >
             {t("send")}
           </button>
         </div>
diff --git a/src/app/[locale]/(public)/image/detail/[slug]/page.tsx b/src/app/[locale]/(public)/image/detail/[slug]/page.tsx
index e267341a..8c33fa53 100644
--- a/src/app/[locale]/(public)/image/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/image/detail/[slug]/page.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { Metadata } from "next";
+
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -9,7 +11,6 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import { Metadata } from "next";
 import DetailImage from "@/components/features/main/image-detail";
 
 interface Size {
diff --git a/src/app/[locale]/(public)/image/filter/page.tsx b/src/app/[locale]/(public)/image/filter/page.tsx
index 8a32e310..d6af8b17 100644
--- a/src/app/[locale]/(public)/image/filter/page.tsx
+++ b/src/app/[locale]/(public)/image/filter/page.tsx
@@ -1,23 +1,44 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
+import Image from "next/image";
 import { useTranslations } from "next-intl";
+
+import { close, loading } from "@/config/swal";
 import ImageBlurry from "@/components/ui/image-blurry";
 import { Skeleton } from "@/components/ui/skeleton";
-import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -60,7 +81,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -107,7 +130,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -125,7 +152,19 @@ const FilterPage = () => {
     }
     console.log(monthYearFilter, "monthFilter");
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("1");
@@ -148,7 +187,8 @@ const FilterPage = () => {
   async function getDataAll() {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+        const filter =
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -166,7 +206,9 @@ const FilterPage = () => {
           filterGroup,
           startDateString,
           endDateString,
-          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
+            : "",
           monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
           locale == "en" ? true : false
         );
@@ -182,7 +224,8 @@ const FilterPage = () => {
         setTotalContent(response?.data?.data?.totalElements);
       }
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -382,7 +425,8 @@ const FilterPage = () => {
     <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
   </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="flex flex-col">
@@ -401,7 +445,10 @@ const FilterPage = () => {
       {/* Left */}
       <div className="flex flex-col lg:flex-row gap-6 p-4">
         <div className="lg:hidden flex justify-end mb-2">
-          <button onClick={() => setIsFilterOpen(!isFilterOpen)} className="text-sm text-white bg-[#bb3523] px-4 py-1 rounded-md shadow">
+          <button
+            onClick={() => setIsFilterOpen(!isFilterOpen)}
+            className="text-sm text-white bg-[#bb3523] px-4 py-1 rounded-md shadow"
+          >
             {isFilterOpen ? "Hide Filter" : "Show Filter"}
           </button>
         </div>
@@ -415,7 +462,10 @@ const FilterPage = () => {
             <div className="border-t border-black my-4 dark:border-white"></div>
             <div className="space-y-6">
               <div>
-                <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+                <label
+                  htmlFor="search"
+                  className="block text-sm font-medium text-gray-700 dark:text-white"
+                >
                   {t("search")}
                 </label>
                 <Input
@@ -431,7 +481,9 @@ const FilterPage = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                  {t("monthYear")}
+                </label>
                 <ReactDatePicker
                   selected={monthYearFilter}
                   className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -443,7 +495,9 @@ const FilterPage = () => {
               </div>
 
               <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+                <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                  {t("date")}
+                </label>
                 <div className="flex  flex-row justify justify-between gap-2">
                   <ReactDatePicker
                     selectsRange
@@ -456,17 +510,36 @@ const FilterPage = () => {
                     placeholderText={t("selectDate")}
                     onCalendarClose={() => setCalenderState(!calenderState)}
                   />
-                  <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                  <div className="flex items-center">
+                    {handleClose ? (
+                      <Icon
+                        icon="carbon:close-filled"
+                        onClick={handleDeleteDate}
+                        width="20"
+                        inline
+                        color="#216ba5"
+                      />
+                    ) : (
+                      ""
+                    )}
+                  </div>
                 </div>
               </div>
 
               <div>
-                <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+                <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                  {t("categories")}
+                </h3>
                 <ul className="mt-2 space-y-2">
                   {categories.map((category: any) => (
                     <li key={category?.id}>
                       <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                        <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                        <Checkbox
+                          id={`${category.id}`}
+                          value={category.id}
+                          checked={categoryFilter.includes(String(category.id))}
+                          onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                        />
                         <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                       </label>
                     </li>
@@ -481,19 +554,34 @@ const FilterPage = () => {
                 <ul className="mt-2 space-y-2">
                   <li>
                     <label className="inline-flex items-center">
-                      <Checkbox id="png" value="png" checked={formatFilter.includes("png")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")} />
+                      <Checkbox
+                        id="png"
+                        value="png"
+                        checked={formatFilter.includes("png")}
+                        onCheckedChange={(e) => handleFormatFilter(Boolean(e), "png")}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">PNG</span>
                     </label>
                   </li>
                   <li>
                     <label className="inline-flex items-center">
-                      <Checkbox id="jpeg" value="jpeg" checked={formatFilter.includes("jpeg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpeg")} />
+                      <Checkbox
+                        id="jpeg"
+                        value="jpeg"
+                        checked={formatFilter.includes("jpeg")}
+                        onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpeg")}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">JPEG</span>
                     </label>
                   </li>
                   <li>
                     <label className="inline-flex items-center">
-                      <Checkbox id="jpg" value="jpg" checked={formatFilter.includes("jpg")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpg")} />
+                      <Checkbox
+                        id="jpg"
+                        value="jpg"
+                        checked={formatFilter.includes("jpg")}
+                        onCheckedChange={(e) => handleFormatFilter(Boolean(e), "jpg")}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">JPG</span>
                     </label>
                   </li>
@@ -515,7 +603,11 @@ const FilterPage = () => {
             <div className="w-full">
               <div className="flex flex-col items-end mb-4">
                 <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-                <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+                <select
+                  defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                  onChange={(e) => handleSorting(e)}
+                  className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                >
                   <option value="latest">{t("latest")}</option>
                   <option value="popular">{t("mostPopular")}</option>
                 </select>
@@ -539,7 +631,10 @@ const FilterPage = () => {
                   {imageData?.length > 0 ? (
                     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                       {imageData?.map((image: any) => (
-                        <Card key={image?.id} className="hover:scale-105 transition-transform duration-300">
+                        <Card
+                          key={image?.id}
+                          className="hover:scale-105 transition-transform duration-300"
+                        >
                           <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                             <Link href={`/image/detail/${image?.slug}`}>
                               {/* <img src={image?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg" /> */}
@@ -555,12 +650,15 @@ const FilterPage = () => {
                                 />
                               </div>
                               <div className="flex flex-row items-center gap-2 text-[10px] mx-1 mt-2">
-                                {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"}
+                                {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
+                                {image?.timezone ? image?.timezone : "WIB"}
                                 &nbsp; |
                                 <Icon icon="formkit:eye" width="15" height="15" />
                                 {image?.clickCount}{" "}
                               </div>
-                              <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{image?.title}</div>
+                              <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
+                                {image?.title}
+                              </div>
                             </Link>
                           </CardContent>
                         </Card>
@@ -568,12 +666,20 @@ const FilterPage = () => {
                     </div>
                   ) : (
                     <p className="flex items-center justify-center text-black">
-                      <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+                      <Image
+                        width={1920}
+                        height={1080}
+                        src="/assets/empty-data.png"
+                        alt="empty"
+                        className="h-60 w-60 my-4"
+                      />
                     </p>
                   )}
                 </>
               )}
-              {totalData > 1 && <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />}
+              {totalData > 1 && (
+                <LandingPagination table={table} totalData={totalData} totalPage={totalPage} />
+              )}
             </div>
           </Reveal>
         </div>
diff --git a/src/app/[locale]/(public)/inbox/layout.tsx b/src/app/[locale]/(public)/inbox/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/inbox/layout.tsx
+++ b/src/app/[locale]/(public)/inbox/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/inbox/page.tsx b/src/app/[locale]/(public)/inbox/page.tsx
index 966b0fed..bf5c4a97 100644
--- a/src/app/[locale]/(public)/inbox/page.tsx
+++ b/src/app/[locale]/(public)/inbox/page.tsx
@@ -1,13 +1,13 @@
 "use client";
 
+import React, { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+
 import { getUserNotifications } from "@/lib/services/landing/landing";
 import { getTimestamp } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useSearchParams } from "next/navigation";
-import { useRouter } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
 
 const InboxSection = () => {
   const router = useRouter();
@@ -55,7 +55,9 @@ const InboxSection = () => {
             <path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21" />
           </g>
         </svg>{" "}
-        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">{t("inbox")}</h2>
+        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">
+          {t("inbox")}
+        </h2>
       </div>
 
       <div className="flex flex-col justify-center items-center gap-3">
diff --git a/src/app/[locale]/(public)/inbox/update/page.tsx b/src/app/[locale]/(public)/inbox/update/page.tsx
index e62c5012..49fddf17 100644
--- a/src/app/[locale]/(public)/inbox/update/page.tsx
+++ b/src/app/[locale]/(public)/inbox/update/page.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
 import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+
 import { getUserNotifications } from "@/lib/services/landing/landing";
 import { getTimestamp } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
 
 const UpdateSection = () => {
   const pathname = usePathname();
@@ -50,7 +51,9 @@ const UpdateSection = () => {
             <path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21" />
           </g>
         </svg>{" "}
-        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">{t("update")}</h2>
+        <h2 className="ml-4 text-[15px] lg:text-[32px] font-semibold text-gray-800">
+          {t("update")}
+        </h2>
       </div>
 
       <div className="flex flex-col items-center gap-3">
diff --git a/src/app/[locale]/(public)/indeks/detail/[slug]/page.tsx b/src/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
index a45e3659..55bd72dc 100644
--- a/src/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/indeks/detail/[slug]/page.tsx
@@ -1,15 +1,13 @@
 "use client";
-import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel";
+import Image from "next/image";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+
+import { close, loading } from "@/config/swal";
 import {
   deleteBlogComments,
   getBlogComments,
@@ -19,12 +17,16 @@ import {
   publicDetailBlog,
 } from "@/lib/services/landing/landing";
 import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, loading } from "@/config/swal";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
 import { Input } from "@/components/ui/input";
-import { useTranslations } from "next-intl";
-import Image from "next/image";
+import { Textarea } from "@/components/ui/textarea";
 
 const IndeksDetail = () => {
   const searchParams = useSearchParams();
@@ -107,9 +109,7 @@ const IndeksDetail = () => {
   // }
 
   async function sendCommentChild(parentId: any) {
-    const inputMsg = document.querySelector(
-      `#input-comment-${parentId}`
-    ) as HTMLInputElement;
+    const inputMsg = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
 
     if (inputMsg && inputMsg.value.length > 3) {
       loading();
@@ -182,9 +182,7 @@ const IndeksDetail = () => {
   </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -199,9 +197,7 @@ const IndeksDetail = () => {
         {/* Gambar Utama */}
         <div className="flex items-center justify-center">
           <Image
-            placeholder={`data:image/svg+xml;base64,${toBase64(
-              shimmer(700, 475)
-            )}`}
+            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
             width={2560}
             height={1440}
             src={indeksData?.thumbnailLink}
@@ -215,9 +211,7 @@ const IndeksDetail = () => {
           <div className="flex mt-2">
             <p className="text-xs lg:text-sm mb-2 ">
               {t("by")}&nbsp;
-              <span className="font-semibold text-gray-500">
-                {indeksData?.uploaderName}
-              </span>
+              <span className="font-semibold text-gray-500">{indeksData?.uploaderName}</span>
               &nbsp; | &nbsp;{t("updatedOn")} {indeksData?.createdAt} WIB &nbsp;
             </p>
           </div>
@@ -236,9 +230,7 @@ const IndeksDetail = () => {
       <div className="w-full">
         <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7] dark:bg-slate-600">
           <div className="gap-5 flex flex-col px-4 lg:px-16">
-            <p className="flex items-start text-bases lg:text-lg">
-              {t("comment")}
-            </p>
+            <p className="flex items-start text-bases lg:text-lg">{t("comment")}</p>
             <Textarea
               placeholder="Type your comments here."
               className="flex w-full"
@@ -260,9 +252,7 @@ const IndeksDetail = () => {
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
                   <Image
-                    placeholder={`data:image/svg+xml;base64,${toBase64(
-                      shimmer(700, 475)
-                    )}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                     width={512}
                     height={512}
                     className="h-10 lg:h-20 w-10 lg:w-20"
@@ -284,9 +274,7 @@ const IndeksDetail = () => {
                         data.createdAt
                       ).getHours()}:${new Date(data.createdAt).getMinutes()}`}
                     </p>
-                    <p className="text-slate-500 text-sm lg:text-base mb-4">
-                      {data.message}
-                    </p>
+                    <p className="text-slate-500 text-sm lg:text-base mb-4">{data.message}</p>
                     <div className="gap-3">
                       <a
                         href="javascript:void(0)"
@@ -335,9 +323,7 @@ const IndeksDetail = () => {
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
                           <Image
-                            placeholder={`data:image/svg+xml;base64,${toBase64(
-                              shimmer(700, 475)
-                            )}`}
+                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                             width={512}
                             height={512}
                             className="h-10 lg:h-20 w-10 lg:w-20"
@@ -355,24 +341,16 @@ const IndeksDetail = () => {
                               </b>
                               {`${new Date(child1.createdAt).getDate()}/${
                                 new Date(child1.createdAt).getMonth() + 1
-                              }/${new Date(
+                              }/${new Date(child1.createdAt).getFullYear()} ${new Date(
                                 child1.createdAt
-                              ).getFullYear()} ${new Date(
-                                child1.createdAt
-                              ).getHours()}:${new Date(
-                                child1.createdAt
-                              ).getMinutes()}`}
-                            </p>
-                            <p className="text-slate-500 text-sm mb-4">
-                              {child1.message}
+                              ).getHours()}:${new Date(child1.createdAt).getMinutes()}`}
                             </p>
+                            <p className="text-slate-500 text-sm mb-4">{child1.message}</p>
                             <div className="gap-3">
                               <a
                                 href="javascript:void(0)"
                                 className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
                                 {t("reply")}
                               </a>
@@ -380,8 +358,7 @@ const IndeksDetail = () => {
                                 href="javascript:void(0)"
                                 className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
                                 style={
-                                  Number(child1.commentFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.commentFrom?.id) == Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -429,37 +406,24 @@ const IndeksDetail = () => {
                                   <div className="border border-slate-300 w-full p-4 bg-white gap-2">
                                     <p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
                                       <b>
-                                        {Number(child2.commentFrom?.roleId) ==
-                                          2 ||
-                                        Number(child2.commentFrom?.roleId) ==
-                                          3 ||
+                                        {Number(child2.commentFrom?.roleId) == 2 ||
+                                        Number(child2.commentFrom?.roleId) == 3 ||
                                         Number(child2.commentFrom?.roleId) == 4
                                           ? "HUMAS POLRI"
                                           : child2.commentFrom?.fullname}
                                       </b>
-                                      {`${new Date(
+                                      {`${new Date(child2.createdAt).getDate()}/${
+                                        new Date(child2.createdAt).getMonth() + 1
+                                      }/${new Date(child2.createdAt).getFullYear()} ${new Date(
                                         child2.createdAt
-                                      ).getDate()}/${
-                                        new Date(child2.createdAt).getMonth() +
-                                        1
-                                      }/${new Date(
-                                        child2.createdAt
-                                      ).getFullYear()} ${new Date(
-                                        child2.createdAt
-                                      ).getHours()}:${new Date(
-                                        child2.createdAt
-                                      ).getMinutes()}`}
-                                    </p>
-                                    <p className="text-slate-500 text-sm mb-4">
-                                      {child2.message}
+                                      ).getHours()}:${new Date(child2.createdAt).getMinutes()}`}
                                     </p>
+                                    <p className="text-slate-500 text-sm mb-4">{child2.message}</p>
                                     <div>
                                       <a
                                         href="javascript:void(0)"
                                         className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md"
-                                        onClick={() =>
-                                          showInput("comment-id-" + child2.id)
-                                        }
+                                        onClick={() => showInput("comment-id-" + child2.id)}
                                       >
                                         {t("reply")}
                                       </a>
@@ -467,8 +431,7 @@ const IndeksDetail = () => {
                                         href="javascript:void(0)"
                                         className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
                                         style={
-                                          Number(child2.commentFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.commentFrom?.id) == Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -512,25 +475,17 @@ const IndeksDetail = () => {
 
         {/* Konten Serupa */}
         <div className="space-x-5 flex flex-col px-4 lg:px-16 py-16 gap-5">
-          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8">
-            {" "}
-            {t("relatedPosts")}
-          </h1>
+          <h1 className="font-bold text-base lg:text-xl px-4 lg:px-8"> {t("relatedPosts")}</h1>
           <Carousel>
             <CarouselContent className="w-full max-w-7xl">
               {indexData?.map((relate: any) => (
-                <CarouselItem
-                  key={relate?.id}
-                  className="md:basis-1/2 lg:basis-1/3"
-                >
+                <CarouselItem key={relate?.id} className="md:basis-1/2 lg:basis-1/3">
                   <Link
                     href={`/indeks/detail/${relate?.slug}`}
                     className="relative group overflow-hidden shadow-md hover:shadow-lg"
                   >
                     <Image
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
+                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                       alt=""
                       width={2560}
                       height={1440}
@@ -547,8 +502,7 @@ const IndeksDetail = () => {
                       <p className="flex flex-row items-center text-[10px] gap-2">
                         {formatDateToIndonesian(new Date(relate?.createdAt))}{" "}
                         {relate?.timezone ? relate?.timezone : "WIB"} |{" "}
-                        <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                        {relate.clickCount}{" "}
+                        <Icon icon="formkit:eye" width="15" height="15" /> {relate.clickCount}{" "}
                       </p>
                     </div>
                   </Link>
diff --git a/src/app/[locale]/(public)/indeks/layout.tsx b/src/app/[locale]/(public)/indeks/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/indeks/layout.tsx
+++ b/src/app/[locale]/(public)/indeks/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/indeks/page.tsx b/src/app/[locale]/(public)/indeks/page.tsx
index 61d81106..4f860c4b 100644
--- a/src/app/[locale]/(public)/indeks/page.tsx
+++ b/src/app/[locale]/(public)/indeks/page.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { Skeleton } from "@/components/ui/skeleton";
-import { Link } from "@/i18n/navigation";
-import { getIndeksData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, htmlToString } from "@/lib/utils/globals";
+import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+
+import { getIndeksData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, htmlToString } from "@/lib/utils/globals";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const Indeks: React.FC = () => {
   const pathname = usePathname();
@@ -55,9 +56,7 @@ const Indeks: React.FC = () => {
   </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="px-4 lg:px-14">
@@ -72,14 +71,9 @@ const Indeks: React.FC = () => {
             {indeksData?.map(
               (indeks: any, index: number) =>
                 index == count && (
-                  <div
-                    key={indeks?.id}
-                    className="relative h-[310px] lg:h-[435px]"
-                  >
+                  <div key={indeks?.id} className="relative h-[310px] lg:h-[435px]">
                     <Image
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
+                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                       width={2560}
                       height={1440}
                       src={indeks?.thumbnailLink}
@@ -91,9 +85,7 @@ const Indeks: React.FC = () => {
                         {indeks?.categoryName}
                       </span>
                       <Link href={`/indeks/detail/${indeks?.slug}`}>
-                        <h2 className="text-2xl font-bold mt-2">
-                          {indeks?.title}
-                        </h2>
+                        <h2 className="text-2xl font-bold mt-2">{indeks?.title}</h2>
                       </Link>
                       <p className="text-xs flex flex-row items-center gap-1 mt-1">
                         {formatDateToIndonesian(new Date(indeks?.createdAt))}{" "}
@@ -132,14 +124,9 @@ const Indeks: React.FC = () => {
               {indeksData?.map(
                 (indeksRight: any, index: number) =>
                   (index == count + 1 || index == count + 2) && (
-                    <div
-                      key={indeksRight?.id}
-                      className="relative h-[310px] lg:h-[215px]"
-                    >
+                    <div key={indeksRight?.id} className="relative h-[310px] lg:h-[215px]">
                       <Image
-                        placeholder={`data:image/svg+xml;base64,${toBase64(
-                          shimmer(700, 475)
-                        )}`}
+                        placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                         width={1920}
                         height={1080}
                         src={indeksRight?.thumbnailLink}
@@ -151,18 +138,11 @@ const Indeks: React.FC = () => {
                           {indeksRight?.categoryName}
                         </span>
                         <Link href={`/indeks/detail/${indeksRight?.slug}`}>
-                          <h2 className="text-xl font-bold mt-2">
-                            {indeksRight?.title}
-                          </h2>
+                          <h2 className="text-xl font-bold mt-2">{indeksRight?.title}</h2>
                         </Link>
                         <p className="text-xs flex flex-row items-center gap-1 mt-1 ml-2">
-                          {formatDateToIndonesian(
-                            new Date(indeksRight?.createdAt)
-                          )}{" "}
-                          {indeksRight?.timezone
-                            ? indeksRight?.timezone
-                            : "WIB"}
-                          |{" "}
+                          {formatDateToIndonesian(new Date(indeksRight?.createdAt))}{" "}
+                          {indeksRight?.timezone ? indeksRight?.timezone : "WIB"}|{" "}
                           {/* <svg
                             xmlns="http://www.w3.org/2000/svg"
                             width="1.2em"
@@ -221,9 +201,7 @@ const Indeks: React.FC = () => {
                     className="flex flex-col md:flex-row items-start p-4 gap-4"
                   >
                     <Image
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
+                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                       width={500}
                       height={250}
                       src={indeksBottom?.thumbnailLink}
diff --git a/src/app/[locale]/(public)/layout.tsx b/src/app/[locale]/(public)/layout.tsx
index 247e6ed4..6b0ef456 100644
--- a/src/app/[locale]/(public)/layout.tsx
+++ b/src/app/[locale]/(public)/layout.tsx
@@ -1,14 +1,7 @@
 import MountedProvider from "@/providers/mounted.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
-  
-  return (
-    <MountedProvider 
-      isProtected={false} 
-    >
-      {children}
-    </MountedProvider>
-  );
+  return <MountedProvider isProtected={false}>{children}</MountedProvider>;
 };
 
 export default layout;
diff --git a/src/app/[locale]/(public)/profile/change-password/page.tsx b/src/app/[locale]/(public)/profile/change-password/page.tsx
index ed9d149f..69a0f5b9 100644
--- a/src/app/[locale]/(public)/profile/change-password/page.tsx
+++ b/src/app/[locale]/(public)/profile/change-password/page.tsx
@@ -1,23 +1,24 @@
 "use client";
 
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { id } from "date-fns/locale";
+import { control } from "leaflet";
+import { useTranslations } from "next-intl";
+import { Controller, useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import * as z from "zod";
+
+import { getInfoProfile, saveUser, setupPassword } from "@/lib/services/auth";
+import { getBlog, postBlog } from "@/lib/services/blog/blog";
+import { close, error, loading } from "@/lib/utils/swal";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { control } from "leaflet";
-import React, { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import Swal from "sweetalert2";
-import { getBlog, postBlog } from "@/lib/services/blog/blog";
-import { id } from "date-fns/locale";
-import { getInfoProfile, saveUser, setupPassword } from "@/lib/services/auth";
-import withReactContent from "sweetalert2-react-content";
 import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
-import { close, error, loading } from "@/lib/utils/swal";
 
 const profileSchema = z.object({
   password: z.string().min(1, { message: "Judul diperlukan" }),
@@ -145,9 +146,7 @@ const ChangePassword: React.FC = () => {
           </button>
         </Link>
         <Link href={"/profile/change-password"}>
-          <button className="bg-red-700 text-white px-4 py-2 rounded">
-            {t("changePass")}
-          </button>
+          <button className="bg-red-700 text-white px-4 py-2 rounded">{t("changePass")}</button>
         </Link>
       </div>
 
@@ -174,9 +173,7 @@ const ChangePassword: React.FC = () => {
                 )}
               />
               {errors.password?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.password.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.password.message}</p>
               )}
             </div>
             <div className="mb-4">
@@ -198,9 +195,7 @@ const ChangePassword: React.FC = () => {
                 )}
               />
               {errors.retypePassword?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.retypePassword.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.retypePassword.message}</p>
               )}
             </div>
             <div className="text-right">
diff --git a/src/app/[locale]/(public)/profile/change-profile/page.tsx b/src/app/[locale]/(public)/profile/change-profile/page.tsx
index bc454f2b..1ea76354 100644
--- a/src/app/[locale]/(public)/profile/change-profile/page.tsx
+++ b/src/app/[locale]/(public)/profile/change-profile/page.tsx
@@ -1,7 +1,8 @@
 "use client";
-import { Link } from "@/i18n/navigation";
-import Image from "next/image";
+
 import React, { useState } from "react";
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 
 const ChangeProfile: React.FC = () => {
@@ -39,29 +40,55 @@ const ChangeProfile: React.FC = () => {
 
       <div className="flex justify-center gap-4 mb-8">
         <Link href={"/profile"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("userProfile")}</button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
+            {t("userProfile")}
+          </button>
         </Link>
         <Link href={"/profile/change-profile"}>
           <button className="bg-red-700 text-white px-4 py-2 rounded">{t("changePhoto")}</button>
         </Link>
         <Link href={"/profile/change-password"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("changePass")}</button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
+            {t("changePass")}
+          </button>
         </Link>
       </div>
 
       <div className="w-80 mx-auto bg-gray-900 text-white shadow-md p-8 rounded">
         <div className="flex justify-center mb-6">
           <div className="w-40 h-40 rounded-full border border-gray-300 flex items-center justify-center">
-            {selectedImage ? <Image width={1920} height={1080} src={URL.createObjectURL(selectedImage)} alt="Preview" className="w-full h-full rounded-full object-cover" /> : <span className="text-gray-500">{t("noImage")}</span>}
+            {selectedImage ? (
+              <Image
+                width={1920}
+                height={1080}
+                src={URL.createObjectURL(selectedImage)}
+                alt="Preview"
+                className="w-full h-full rounded-full object-cover"
+              />
+            ) : (
+              <span className="text-gray-500">{t("noImage")}</span>
+            )}
           </div>
         </div>
 
         <div className="flex justify-center gap-4">
-          <input type="file" id="upload" accept="image/*" className="hidden" onChange={handleImageChange} />
-          <label htmlFor="upload" className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer">
+          <input
+            type="file"
+            id="upload"
+            accept="image/*"
+            className="hidden"
+            onChange={handleImageChange}
+          />
+          <label
+            htmlFor="upload"
+            className="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer"
+          >
             {t("changePhoto")}
           </label>
-          <button onClick={handleDelete} className="border border-red-700 text-red-700 px-4 py-2 rounded">
+          <button
+            onClick={handleDelete}
+            className="border border-red-700 text-red-700 px-4 py-2 rounded"
+          >
             {t("deletePhoto")}{" "}
           </button>
         </div>
diff --git a/src/app/[locale]/(public)/profile/layout.tsx b/src/app/[locale]/(public)/profile/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/profile/layout.tsx
+++ b/src/app/[locale]/(public)/profile/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/profile/page.tsx b/src/app/[locale]/(public)/profile/page.tsx
index 2c44f448..3088a279 100644
--- a/src/app/[locale]/(public)/profile/page.tsx
+++ b/src/app/[locale]/(public)/profile/page.tsx
@@ -1,22 +1,23 @@
 "use client";
 
+import React, { useEffect, useState } from "react";
+import router from "next/router";
+import { Link } from "@/i18n/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { id } from "date-fns/locale";
+import { control } from "leaflet";
+import { useTranslations } from "next-intl";
+import { Controller, useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import * as z from "zod";
+
+import { getInfoProfile, saveUser } from "@/lib/services/auth";
+import { getBlog, postBlog } from "@/lib/services/blog/blog";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { control } from "leaflet";
-import React, { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import Swal from "sweetalert2";
-import { getBlog, postBlog } from "@/lib/services/blog/blog";
-import { id } from "date-fns/locale";
-import router from "next/router";
-import { getInfoProfile, saveUser } from "@/lib/services/auth";
-import withReactContent from "sweetalert2-react-content";
 import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const profileSchema = z.object({
   username: z.string().min(1, { message: "Judul diperlukan" }),
@@ -124,10 +125,14 @@ const UbahProfile: React.FC = () => {
           <button className="bg-red-700 text-white px-4 py-2 rounded">{t("userProfile")}</button>
         </Link>
         <Link href={"/profile/change-profile"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("changePhoto")}</button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
+            {t("changePhoto")}
+          </button>
         </Link>
         <Link href={"/profile/change-password"}>
-          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">{t("changePass")}</button>
+          <button className="border border-red-700 text-red-700 px-4 py-2 rounded">
+            {t("changePass")}
+          </button>
         </Link>
       </div>
 
@@ -140,51 +145,136 @@ const UbahProfile: React.FC = () => {
                 <Label>
                   Username<span className="text-red-500">*</span>
                 </Label>
-                <Controller control={control} name="username" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.username} onChange={field.onChange} placeholder="Enter Title" />} />
-                {errors.username?.message && <p className="text-red-400 text-sm">{errors.username.message}</p>}
+                <Controller
+                  control={control}
+                  name="username"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      defaultValue={detail?.username}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.username?.message && (
+                  <p className="text-red-400 text-sm">{errors.username.message}</p>
+                )}
               </div>
               <div className="mb-4">
                 <Label>
                   {t("fullName")}
                   <span className="text-red-500">*</span>
                 </Label>
-                <Controller control={control} name="fullname" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.fullname} onChange={field.onChange} placeholder="Enter Title" />} />
-                {errors.fullname?.message && <p className="text-red-400 text-sm">{errors.fullname.message}</p>}
+                <Controller
+                  control={control}
+                  name="fullname"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      defaultValue={detail?.fullname}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.fullname?.message && (
+                  <p className="text-red-400 text-sm">{errors.fullname.message}</p>
+                )}
               </div>
               <div className="mb-4">
                 <Label>
                   {t("identityNumber")}
                   <span className="text-red-500">*</span>
                 </Label>
-                <Controller control={control} name="memberIdentity" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.memberIdentity} onChange={field.onChange} placeholder="Enter Title" />} />
-                {errors.memberIdentity?.message && <p className="text-red-400 text-sm">{errors.memberIdentity.message}</p>}
+                <Controller
+                  control={control}
+                  name="memberIdentity"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      defaultValue={detail?.memberIdentity}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.memberIdentity?.message && (
+                  <p className="text-red-400 text-sm">{errors.memberIdentity.message}</p>
+                )}
               </div>
               <div className="mb-4">
                 <Label>
                   Email<span className="text-red-500">*</span>
                 </Label>
-                <Controller control={control} name="email" render={({ field }) => <Input size="md" type="text" defaultValue={detail?.email} onChange={field.onChange} placeholder="Enter Title" />} />
-                {errors.email?.message && <p className="text-red-400 text-sm">{errors.email.message}</p>}
+                <Controller
+                  control={control}
+                  name="email"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="text"
+                      defaultValue={detail?.email}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.email?.message && (
+                  <p className="text-red-400 text-sm">{errors.email.message}</p>
+                )}
               </div>
               <div className="mb-4">
                 <Label>
                   {t("number")}
                   <span className="text-red-500">*</span>
                 </Label>
-                <Controller control={control} name="phoneNumber" render={({ field }) => <Input size="md" type="number" defaultValue={detail?.phoneNumber} onChange={field.onChange} placeholder="Enter Title" />} />
-                {errors.phoneNumber?.message && <p className="text-red-400 text-sm">{errors.phoneNumber.message}</p>}
+                <Controller
+                  control={control}
+                  name="phoneNumber"
+                  render={({ field }) => (
+                    <Input
+                      size="md"
+                      type="number"
+                      defaultValue={detail?.phoneNumber}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.phoneNumber?.message && (
+                  <p className="text-red-400 text-sm">{errors.phoneNumber.message}</p>
+                )}
               </div>
               <div className="mb-4">
                 <Label>
                   {t("address")}
                   <span className="text-red-500">*</span>
                 </Label>
-                <Controller control={control} name="address" render={({ field }) => <Textarea defaultValue={detail?.address} onChange={field.onChange} placeholder="Enter Title" />} />
-                {errors.address?.message && <p className="text-red-400 text-sm">{errors.address.message}</p>}
+                <Controller
+                  control={control}
+                  name="address"
+                  render={({ field }) => (
+                    <Textarea
+                      defaultValue={detail?.address}
+                      onChange={field.onChange}
+                      placeholder="Enter Title"
+                    />
+                  )}
+                />
+                {errors.address?.message && (
+                  <p className="text-red-400 text-sm">{errors.address.message}</p>
+                )}
               </div>
               <div className="text-right">
                 <div className="mt-4">
-                  <button type="submit" className="bg-red-700 text-white px-6 py-2 rounded hover:bg-red-800 focus:outline-none focus:ring focus:ring-red-300">
+                  <button
+                    type="submit"
+                    className="bg-red-700 text-white px-6 py-2 rounded hover:bg-red-800 focus:outline-none focus:ring focus:ring-red-300"
+                  >
                     {t("save")}
                   </button>
                 </div>
diff --git a/src/app/[locale]/(public)/schedule/layout.tsx b/src/app/[locale]/(public)/schedule/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/schedule/layout.tsx
+++ b/src/app/[locale]/(public)/schedule/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/(public)/schedule/page.tsx b/src/app/[locale]/(public)/schedule/page.tsx
index 48977779..323317e5 100644
--- a/src/app/[locale]/(public)/schedule/page.tsx
+++ b/src/app/[locale]/(public)/schedule/page.tsx
@@ -1,24 +1,13 @@
 "use client";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Popover,
-  PopoverArrow,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { CalendarIcon } from "lucide-react";
+
 import React, { useEffect, useState } from "react";
-import { format } from "date-fns";
-import { cn } from "@/lib/utils/utils"
-import { Checkbox } from "@/components/ui/checkbox";
+import { usePathname, useRouter } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { close, loading } from "@/config/swal";
 import {
   detailSchedule,
   listSchedule,
@@ -27,7 +16,13 @@ import {
   listScheduleTodayPublic,
   searchSchedules,
 } from "@/lib/services/schedule/schedule";
-import { usePathname, useRouter } from "@/i18n/navigation";
+import { cn } from "@/lib/utils/utils";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -39,15 +34,17 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { close, loading } from "@/config/swal";
-import { useTranslations } from "next-intl";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 
 const timeList = [
   {
@@ -324,21 +321,13 @@ const Schedule = (props: any) => {
 
   function getLastWeek(today: Date | undefined) {
     if (today) {
-      return new Date(
-        today.getFullYear(),
-        today.getMonth(),
-        today.getDate() - 7
-      );
+      return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
     }
   }
 
   function getNextWeek(today: Date | undefined) {
     if (today) {
-      return new Date(
-        today.getFullYear(),
-        today.getMonth(),
-        today.getDate() + 7
-      );
+      return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
     }
   }
 
@@ -464,8 +453,7 @@ const Schedule = (props: any) => {
 
   function setItemSchedule(id: string, date: string) {
     const itemFound: any = schedules?.filter(
-      (s: any) =>
-        s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
+      (s: any) => s.dateInRange.includes(date) && s.timeIndex.split(",").includes(id)
     );
 
     if (itemFound?.length > 0) {
@@ -476,8 +464,8 @@ const Schedule = (props: any) => {
               Number(itemFound[0]?.uploaderLevelNumber) == 1
                 ? "bg-yellow-300"
                 : Number(itemFound[0]?.uploaderLevelNumber) == 2
-                ? "bg-blue-400"
-                : "bg-gray-500"
+                  ? "bg-blue-400"
+                  : "bg-gray-500"
             }`}
             onClick={() => {
               getItem(itemFound[0]);
@@ -546,11 +534,7 @@ const Schedule = (props: any) => {
                 )}
               >
                 <CalendarIcon />
-                {startDate ? (
-                  format(startDate, "MMM yyyy")
-                ) : (
-                  <span>Pick a date</span>
-                )}
+                {startDate ? format(startDate, "MMM yyyy") : <span>Pick a date</span>}
               </Button>
             </PopoverTrigger>
             <PopoverContent className="w-auto p-0" align="start">
@@ -588,18 +572,11 @@ const Schedule = (props: any) => {
                     height="1em"
                     viewBox="0 0 24 24"
                   >
-                    <path
-                      fill="currentColor"
-                      fill-rule="evenodd"
-                      d="m6 7l6 6l6-6l2 2l-8 8l-8-8z"
-                    />
+                    <path fill="currentColor" fill-rule="evenodd" d="m6 7l6 6l6-6l2 2l-8 8l-8-8z" />
                   </svg>
                 </a>
               </PopoverTrigger>
-              <PopoverContent
-                align="start"
-                className="flex p-0 rounded-md w-fit"
-              >
+              <PopoverContent align="start" className="flex p-0 rounded-md w-fit">
                 <div className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 rounded-none">
                   <div className="gap-6 flex flex-row justify-end">
                     <p className="font-semibold">Filter</p>
@@ -638,10 +615,7 @@ const Schedule = (props: any) => {
                     className="text-black bg-yellow-300 w-fit p-3 flex justify-center items-center rounded-lg"
                   >
                     {list.name}&nbsp;
-                    <Icon
-                      icon="icon-park-outline:delete-two"
-                      className="items-center"
-                    />
+                    <Icon icon="icon-park-outline:delete-two" className="items-center" />
                   </button>
                 </div>
               ))}
@@ -679,8 +653,7 @@ const Schedule = (props: any) => {
                         </th>
                         <th
                           className={`text-center cursor-pointer border border-l-0 h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) ==
-                            dateAWeek[0]
+                            new Date().toISOString().slice(0, 10) == dateAWeek[0]
                               ? "bg-red-600 text-white"
                               : ""
                           }`}
@@ -691,90 +664,70 @@ const Schedule = (props: any) => {
                             </svg>
                           </a>{" "} */}
                           <div className="flex flex-col ">
-                            <p className="text-2xl">
-                              {dateAWeek[0]?.split("-")[2]}
-                            </p>
+                            <p className="text-2xl">{dateAWeek[0]?.split("-")[2]}</p>
                             <p>{t("monday")}</p>
                           </div>
                         </th>
                         <th
                           className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) ==
-                            dateAWeek[1]
+                            new Date().toISOString().slice(0, 10) == dateAWeek[1]
                               ? "bg-[#BE0106] text-white rounded-lg"
                               : ""
                           }`}
                         >
-                          <div className="text-2xl">
-                            {dateAWeek[1]?.split("-")[2]}
-                          </div>
+                          <div className="text-2xl">{dateAWeek[1]?.split("-")[2]}</div>
                           {t("tuesday")}
                         </th>
                         <th
                           className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) ==
-                            dateAWeek[2]
+                            new Date().toISOString().slice(0, 10) == dateAWeek[2]
                               ? "bg-[#BE0106] text-white rounded-lg"
                               : ""
                           }`}
                         >
-                          <div className="text-2xl">
-                            {dateAWeek[2]?.split("-")[2]}
-                          </div>
+                          <div className="text-2xl">{dateAWeek[2]?.split("-")[2]}</div>
                           {t("wednesday")}
                         </th>
                         <th
                           className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) ==
-                            dateAWeek[3]
+                            new Date().toISOString().slice(0, 10) == dateAWeek[3]
                               ? "bg-[#BE0106] text-white rounded-lg"
                               : ""
                           }`}
                         >
-                          <div className="text-2xl">
-                            {dateAWeek[3]?.split("-")[2]}
-                          </div>
+                          <div className="text-2xl">{dateAWeek[3]?.split("-")[2]}</div>
                           {t("thursday")}
                         </th>
                         <th
                           className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) ==
-                            dateAWeek[4]
+                            new Date().toISOString().slice(0, 10) == dateAWeek[4]
                               ? "bg-[#BE0106] text-white rounded-lg"
                               : ""
                           }`}
                         >
-                          <div className="text-2xl">
-                            {dateAWeek[4]?.split("-")[2]}
-                          </div>
+                          <div className="text-2xl">{dateAWeek[4]?.split("-")[2]}</div>
                           {t("friday")}
                         </th>
                         <th
                           className={`text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) ==
-                            dateAWeek[5]
+                            new Date().toISOString().slice(0, 10) == dateAWeek[5]
                               ? "bg-[#BE0106] text-white rounded-lg"
                               : ""
                           }`}
                         >
-                          <div className="text-2xl">
-                            {dateAWeek[5]?.split("-")[2]}
-                          </div>
+                          <div className="text-2xl">{dateAWeek[5]?.split("-")[2]}</div>
                           {t("saturday")}
                         </th>
                         <th
                           onClick={() => changeNextWeek()}
                           className={`text-center border cursor-pointer border-r-0 border-gray-100 dark:border-gray-700 py-6 min-w-[100px] ${
-                            new Date().toISOString().slice(0, 10) ==
-                            dateAWeek[6]
+                            new Date().toISOString().slice(0, 10) == dateAWeek[6]
                               ? "bg-[#BE0106] text-white rounded-lg"
                               : ""
                           }`}
                         >
                           <div className="flex flex-col ">
-                            <p className="text-2xl">
-                              {dateAWeek[6]?.split("-")[2]}
-                            </p>
+                            <p className="text-2xl">{dateAWeek[6]?.split("-")[2]}</p>
                             <p>{t("sunday")}</p>
                           </div>
                           {/* <a  className="cursor-pointer h-fit p-0 m-0 self-center">
@@ -784,10 +737,7 @@ const Schedule = (props: any) => {
                           </a> */}
                         </th>
                         <th className="text-center border-l-0 border border-gray-100 dark:border-gray-700 py-6 w-[20px]">
-                          <a
-                            onClick={() => changeNextWeek()}
-                            className="cursor-pointer"
-                          >
+                          <a onClick={() => changeNextWeek()} className="cursor-pointer">
                             <svg
                               xmlns="http://www.w3.org/2000/svg"
                               width="40px"
@@ -830,10 +780,7 @@ const Schedule = (props: any) => {
                           <td className="border border-gray-100 dark:border-gray-700">
                             {setItemSchedule(times.id, dateList[5])}
                           </td>
-                          <td
-                            colSpan={2}
-                            className="border border-gray-100 dark:border-gray-700"
-                          >
+                          <td colSpan={2} className="border border-gray-100 dark:border-gray-700">
                             {setItemSchedule(times.id, dateList[6])}
                           </td>
                         </tr>
@@ -911,10 +858,7 @@ const Schedule = (props: any) => {
               <AccordionItem value="item-1">
                 <AccordionTrigger>{t("todaySchedule")}</AccordionTrigger>
                 {todayList?.map((list: any) => (
-                  <AccordionContent
-                    key={list?.id}
-                    className="flex flex-row gap-3"
-                  >
+                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
                       {new Date(list.startDate).getDate()}
                     </div>
@@ -941,10 +885,7 @@ const Schedule = (props: any) => {
               <AccordionItem value="item-2">
                 <AccordionTrigger>{t("previousSchedule")}</AccordionTrigger>
                 {prevdayList?.map((list: any) => (
-                  <AccordionContent
-                    key={list?.id}
-                    className="flex flex-row gap-3"
-                  >
+                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
                       {new Date(list.startDate).getDate()}
                     </div>
@@ -971,10 +912,7 @@ const Schedule = (props: any) => {
               <AccordionItem value="item-3">
                 <AccordionTrigger>{t("nextSchedule")}</AccordionTrigger>
                 {nextdayList?.map((list: any) => (
-                  <AccordionContent
-                    key={list?.id}
-                    className="flex flex-row gap-3"
-                  >
+                  <AccordionContent key={list?.id} className="flex flex-row gap-3">
                     <div className="border-l-4 border-red-700 pl-1 h-fit font-bold text-lg">
                       {new Date(list.startDate).getDate()}
                     </div>
@@ -1073,8 +1011,7 @@ const Schedule = (props: any) => {
           <AlertDialogHeader>
             <AlertDialogTitle>
               <h1 className="my-4 font-light">
-                JADWAL /{" "}
-                {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
+                JADWAL / {detail?.isYoutube == true ? "LIVE STREAMING" : "DETAIL"}
               </h1>
               <p className="font-bold">{detail?.title}</p>
             </AlertDialogTitle>
diff --git a/src/app/[locale]/(public)/video/detail/[slug]/page.tsx b/src/app/[locale]/(public)/video/detail/[slug]/page.tsx
index 358617ae..a89b6bef 100644
--- a/src/app/[locale]/(public)/video/detail/[slug]/page.tsx
+++ b/src/app/[locale]/(public)/video/detail/[slug]/page.tsx
@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import { Metadata } from "next";
+
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -9,7 +11,6 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import { Metadata } from "next";
 import DetailImage from "@/components/features/main/image-detail";
 import DetailVideo from "@/components/features/main/video-detail";
 
diff --git a/src/app/[locale]/(public)/video/filter/page.tsx b/src/app/[locale]/(public)/video/filter/page.tsx
index bab7f73d..406306ff 100644
--- a/src/app/[locale]/(public)/video/filter/page.tsx
+++ b/src/app/[locale]/(public)/video/filter/page.tsx
@@ -1,23 +1,45 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  PaginationState,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from "@tanstack/react-table";
+import ReactDatePicker from "react-datepicker";
+
+import {
+  getListContent,
+  getUserLevelListByParent,
+  listCategory,
+  listData,
+  listDataRegional,
+} from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import { Card, CardContent } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
-import { getListContent, getUserLevelListByParent, listCategory, listData, listDataRegional } from "@/lib/services/landing/landing";
-import { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
 import LandingPagination from "@/components/features/landing-page/pagination";
 import { Reveal } from "@/components/features/landing-page/Reveal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
-import ReactDatePicker from "react-datepicker";
+
 import "react-datepicker/dist/react-datepicker.css";
-import { close, loading } from "@/config/swal";
+
+import Image from "next/image";
 import { useTranslations } from "next-intl";
+
+import { close, loading } from "@/config/swal";
 import ImageBlurry from "@/components/ui/image-blurry";
 import { Skeleton } from "@/components/ui/skeleton";
-import Image from "next/image";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -56,7 +78,9 @@ const FilterPage = () => {
   const [categoryFilter, setCategoryFilter] = useState<any>([]);
   const [monthYearFilter, setMonthYearFilter] = useState<any>();
   const [searchTitle, setSearchTitle] = useState<string>("");
-  const [sortByOpt, setSortByOpt] = useState<any>(sortBy === "popular" ? "clickCount" : "createdAt");
+  const [sortByOpt, setSortByOpt] = useState<any>(
+    sortBy === "popular" ? "clickCount" : "createdAt"
+  );
   const isRegional = asPath?.includes("regional");
   const isSatker = asPath?.includes("satker");
   const [formatFilter, setFormatFilter] = useState<any>([]);
@@ -103,7 +127,11 @@ const FilterPage = () => {
   useEffect(() => {
     if (categorie) {
       setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-      console.log("Kategori", categorie, categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
     }
   }, [categorie]);
 
@@ -116,7 +144,19 @@ const FilterPage = () => {
       }
     }
     initState();
-  }, [change, asPath, monthYearFilter, page, sortBy, sortByOpt, title, startDateString, endDateString, categorie, formatFilter]);
+  }, [
+    change,
+    asPath,
+    monthYearFilter,
+    page,
+    sortBy,
+    sortByOpt,
+    title,
+    startDateString,
+    endDateString,
+    categorie,
+    formatFilter,
+  ]);
 
   async function getCategories() {
     const category = await listCategory("2");
@@ -139,7 +179,8 @@ const FilterPage = () => {
   async function getDataAll() {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
-        const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+        const filter =
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const format = formatFilter == undefined ? "" : formatFilter?.join(",");
@@ -157,7 +198,9 @@ const FilterPage = () => {
           filterGroup,
           startDateString,
           endDateString,
-          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+          monthYearFilter
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
+            : "",
           monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : "",
           locale == "en" ? true : false
         );
@@ -173,7 +216,8 @@ const FilterPage = () => {
         setTotalContent(response?.data?.data?.totalElements);
       }
     } else {
-      const filter = categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
+      const filter =
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
       const name = title == undefined ? "" : title;
       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
       loading();
@@ -404,7 +448,10 @@ const FilterPage = () => {
           <div className="border-t border-black my-4 dark:border-white"></div>
           <div className="space-y-6">
             <div>
-              <label htmlFor="search" className="block text-sm font-medium text-gray-700 dark:text-white">
+              <label
+                htmlFor="search"
+                className="block text-sm font-medium text-gray-700 dark:text-white"
+              >
                 {t("search")}
               </label>
               <Input
@@ -420,7 +467,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("monthYear")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("monthYear")}
+              </label>
               <ReactDatePicker
                 selected={monthYearFilter}
                 className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
@@ -432,7 +481,9 @@ const FilterPage = () => {
             </div>
 
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-white">{t("date")}</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-white">
+                {t("date")}
+              </label>
               <div className="flex flex-row justify justify-between gap-2">
                 <ReactDatePicker
                   selectsRange
@@ -445,17 +496,36 @@ const FilterPage = () => {
                   placeholderText={t("selectDate")}
                   onCalendarClose={() => setCalenderState(!calenderState)}
                 />
-                <div className="flex items-center">{handleClose ? <Icon icon="carbon:close-filled" onClick={handleDeleteDate} width="20" inline color="#216ba5" /> : ""}</div>
+                <div className="flex items-center">
+                  {handleClose ? (
+                    <Icon
+                      icon="carbon:close-filled"
+                      onClick={handleDeleteDate}
+                      width="20"
+                      inline
+                      color="#216ba5"
+                    />
+                  ) : (
+                    ""
+                  )}
+                </div>
               </div>
             </div>
 
             <div>
-              <h3 className="text-sm font-medium text-gray-700 dark:text-white">{t("categories")}</h3>
+              <h3 className="text-sm font-medium text-gray-700 dark:text-white">
+                {t("categories")}
+              </h3>
               <ul className="mt-2 space-y-2">
                 {categories.map((category: any) => (
                   <li key={category?.id}>
                     <label className="inline-flex items-center" htmlFor={`${category.id}`}>
-                      <Checkbox id={`${category.id}`} value={category.id} checked={categoryFilter.includes(String(category.id))} onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)} />
+                      <Checkbox
+                        id={`${category.id}`}
+                        value={category.id}
+                        checked={categoryFilter.includes(String(category.id))}
+                        onCheckedChange={(e) => handleCategoryFilter(Boolean(e), category.id)}
+                      />
                       <span className="ml-2 text-gray-700 dark:text-white">{category?.name}</span>
                     </label>
                   </li>
@@ -470,31 +540,56 @@ const FilterPage = () => {
               <ul className="mt-2 space-y-2">
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mk4" value="mk4" checked={formatFilter.includes("mk4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")} />
+                    <Checkbox
+                      id="mk4"
+                      value="mk4"
+                      checked={formatFilter.includes("mk4")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mk4")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MK4</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mov" value="mov" checked={formatFilter.includes("mov")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")} />
+                    <Checkbox
+                      id="mov"
+                      value="mov"
+                      checked={formatFilter.includes("mov")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mov")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MOV</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="mp4" value="mp4" checked={formatFilter.includes("mp4")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")} />
+                    <Checkbox
+                      id="mp4"
+                      value="mp4"
+                      checked={formatFilter.includes("mp4")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "mp4")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">MP4</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="avi" value="avi" checked={formatFilter.includes("avi")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")} />
+                    <Checkbox
+                      id="avi"
+                      value="avi"
+                      checked={formatFilter.includes("avi")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "avi")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">AVI</span>
                   </label>
                 </li>
                 <li>
                   <label className="inline-flex items-center">
-                    <Checkbox id="wmv" value="wmv" checked={formatFilter.includes("wmv")} onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")} />
+                    <Checkbox
+                      id="wmv"
+                      value="wmv"
+                      checked={formatFilter.includes("wmv")}
+                      onCheckedChange={(e) => handleFormatFilter(Boolean(e), "wmv")}
+                    />
                     <span className="ml-2 text-gray-700 dark:text-white">WMV</span>
                   </label>
                 </li>
@@ -515,7 +610,11 @@ const FilterPage = () => {
             <div className="w-full">
               <div className="flex flex-col items-end mb-4">
                 <h2 className="text-lg font-semibold">{t("sortBy")}</h2>
-                <select defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"} onChange={(e) => handleSorting(e)} className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
+                <select
+                  defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
+                  onChange={(e) => handleSorting(e)}
+                  className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
+                >
                   <option value="latest">{t("latest")}</option>
                   <option value="popular">{t("mostPopular")}</option>
                 </select>
@@ -539,18 +638,29 @@ const FilterPage = () => {
                   {videoData?.length > 0 ? (
                     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                       {videoData?.map((video: any) => (
-                        <Card key={video?.id} className="hover:scale-110 transition-transform duration-300">
+                        <Card
+                          key={video?.id}
+                          className="hover:scale-110 transition-transform duration-300"
+                        >
                           <CardContent className="flex flex-col text-xs lg:text-sm w-full p-0">
                             <Link href={`/video/detail/${video?.slug}`}>
                               {/* <img src={video?.thumbnailLink} className="h-60 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
                               <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
-                                <ImageBlurry src={video?.thumbnailLink} alt={video?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
+                                <ImageBlurry
+                                  src={video?.thumbnailLink}
+                                  alt={video?.title}
+                                  style={{ objectFit: "contain", width: "100%", height: "100%" }}
+                                />
                               </div>
                               <div className="flex flex-row items-center gap-2 text-[10px] mx-2">
-                                {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" />
+                                {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
+                                {video?.timezone ? video?.timezone : "WIB"} |{" "}
+                                <Icon icon="formkit:eye" width="15" height="15" />
                                 {video?.clickCount}{" "}
                               </div>
-                              <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">{video?.title}</div>
+                              <div className="font-semibold pr-3 pb-3 mx-2 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible w-full">
+                                {video?.title}
+                              </div>
                             </Link>
                           </CardContent>
                         </Card>
@@ -558,7 +668,13 @@ const FilterPage = () => {
                     </div>
                   ) : (
                     <p className="flex items-center justify-center">
-                      <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-60 w-60 my-4" />
+                      <Image
+                        width={1920}
+                        height={1080}
+                        src="/assets/empty-data.png"
+                        alt="empty"
+                        className="h-60 w-60 my-4"
+                      />
                     </p>
                   )}
                 </>
diff --git a/src/app/[locale]/(public)/video/layout.tsx b/src/app/[locale]/(public)/video/layout.tsx
index f1743f44..b03298c7 100644
--- a/src/app/[locale]/(public)/video/layout.tsx
+++ b/src/app/[locale]/(public)/video/layout.tsx
@@ -1,13 +1,14 @@
-import LayoutProvider from "/providers/layout.provider";
-import LayoutContentProvider from "/providers/content.provider";
-import DashCodeSidebar from "@/components/partials/sidebar";
-import DashCodeFooter from "@/components/partials/footer";
-import ThemeCustomize from "@/components/partials/customizer";
-import DashCodeHeader from "@/components/partials/header";
-
 import { redirect } from "@/i18n/navigation";
+
 import Footer from "@/components/features/landing-page/footer";
 import Navbar from "@/components/features/landing-page/navbar";
+import ThemeCustomize from "@/components/partials/customizer";
+import DashCodeFooter from "@/components/partials/footer";
+import DashCodeHeader from "@/components/partials/header";
+import DashCodeSidebar from "@/components/partials/sidebar";
+
+import LayoutContentProvider from "@/providers/content.provider";
+import LayoutProvider from "@/providers/layout.provider";
 
 const layout = async ({ children }: { children: React.ReactNode }) => {
   return (
diff --git a/src/app/[locale]/[...not-found]/page.tsx b/src/app/[locale]/[...not-found]/page.tsx
index d7a39580..d3cc9cc9 100644
--- a/src/app/[locale]/[...not-found]/page.tsx
+++ b/src/app/[locale]/[...not-found]/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from "next/navigation";
 
 const page = () => {
-    notFound();
+  notFound();
 };
 
 export default page;
diff --git a/src/app/[locale]/auth/404/layout.tsx b/src/app/[locale]/auth/404/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/404/layout.tsx
+++ b/src/app/[locale]/auth/404/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/404/page.tsx b/src/app/[locale]/auth/404/page.tsx
index c41bf172..df45376f 100644
--- a/src/app/[locale]/auth/404/page.tsx
+++ b/src/app/[locale]/auth/404/page.tsx
@@ -1,8 +1,9 @@
-import Logo from "@/components/partials/auth/logo";
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import Image from "next/image";
-import { Link } from '@/i18n/navigation';
+import Logo from "@/components/partials/auth/logo";
 
 const Page404 = () => {
   return (
@@ -24,9 +25,7 @@ const Page404 = () => {
       <div className="container">
         <div className="flex justify-center flex-wrap items-center min-h-screen flex-col text-center">
           <Image height={500} width={500} src="/images/all-img/404-2.svg" alt="" />
-          <h4 className="text-3xl font-medium text-default-900  mb-2">
-            We are under maintenance.
-          </h4>
+          <h4 className="text-3xl font-medium text-default-900  mb-2">We are under maintenance.</h4>
           <p className="font-normal text-base text-default-500 ">
             We’re making the system more awesome. <br />
             We’ll be back shortly.
diff --git a/src/app/[locale]/auth/coming-soon/layout.tsx b/src/app/[locale]/auth/coming-soon/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/coming-soon/layout.tsx
+++ b/src/app/[locale]/auth/coming-soon/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/coming-soon/page.tsx b/src/app/[locale]/auth/coming-soon/page.tsx
index 6899debd..00c45fa9 100644
--- a/src/app/[locale]/auth/coming-soon/page.tsx
+++ b/src/app/[locale]/auth/coming-soon/page.tsx
@@ -1,10 +1,10 @@
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
 
-import Logo from "@/components/partials/auth/logo";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
-import Image from "next/image";
-import { Link } from '@/i18n/navigation';
+import Logo from "@/components/partials/auth/logo";
 
 const ComingSoonPage = () => {
   return (
@@ -30,8 +30,8 @@ const ComingSoonPage = () => {
               Get notified when we launch
             </div>
             <p className="font-normal text-default-600  max-w-[400px]">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt.
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt.
             </p>
             <div className=" flex items-center px-3 rounded bg-default-200 dark:bg-default-800">
               <Input
@@ -45,9 +45,7 @@ const ComingSoonPage = () => {
                 </Button>
               </div>
             </div>
-            <div className="text-sm text-default-500 ">
-              *Don’t worry we will not spam you :
-            </div>
+            <div className="text-sm text-default-500 ">*Don’t worry we will not spam you :</div>
           </div>
           <div>
             <Image
diff --git a/src/app/[locale]/auth/forgot-password/layout.tsx b/src/app/[locale]/auth/forgot-password/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/forgot-password/layout.tsx
+++ b/src/app/[locale]/auth/forgot-password/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/forgot-password/page.tsx b/src/app/[locale]/auth/forgot-password/page.tsx
index dd3ff24e..05845c8c 100644
--- a/src/app/[locale]/auth/forgot-password/page.tsx
+++ b/src/app/[locale]/auth/forgot-password/page.tsx
@@ -1,6 +1,7 @@
-import { Link } from "@/i18n/navigation";
-import ForgotPass from "@/components/partials/auth/forgot-pass";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
+import ForgotPass from "@/components/partials/auth/forgot-pass";
 import Logo from "@/components/partials/auth/logo";
 
 const ForgotPassPage = () => {
@@ -10,11 +11,23 @@ const ForgotPassPage = () => {
         <div className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50">
           <div className="max-w-[520px] pt-16 ps-20 ">
             <Link href="/" className="mb-6 inline-block">
-              <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
+              <Image
+                src="/assets/mediahub-logo.png"
+                alt=""
+                width={250}
+                height={250}
+                className="mb-10 w-full h-full"
+              />
             </Link>
           </div>
           <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-            <Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
+            <Image
+              src="/assets/vector-login.svg"
+              alt=""
+              width={300}
+              height={300}
+              className="mb-10 w-full h-full"
+            />
           </div>
         </div>
         <div className="flex-1 relative dark:bg-default-100 bg-white">
@@ -28,7 +41,9 @@ const ForgotPassPage = () => {
               <div className="text-center 2xl:mb-10 mb-5">
                 <h4 className="font-medium mb-4">Forgot Your Password?</h4>
               </div>
-              <div className="font-normal text-base text-default-500  text-center px-2 bg-default-100 rounded py-3 mb-4 mt-10">Enter your Username and instructions will be sent to you!</div>
+              <div className="font-normal text-base text-default-500  text-center px-2 bg-default-100 rounded py-3 mb-4 mt-10">
+                Enter your Username and instructions will be sent to you!
+              </div>
 
               <ForgotPass />
               <div className="md:max-w-[345px] mx-auto font-normal text-default-500  2xl:mt-12 mt-8 uppercase text-sm">
diff --git a/src/app/[locale]/auth/forgot-password2/layout.tsx b/src/app/[locale]/auth/forgot-password2/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/forgot-password2/layout.tsx
+++ b/src/app/[locale]/auth/forgot-password2/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/forgot-password2/page.tsx b/src/app/[locale]/auth/forgot-password2/page.tsx
index 5c6e9af9..3a63d225 100644
--- a/src/app/[locale]/auth/forgot-password2/page.tsx
+++ b/src/app/[locale]/auth/forgot-password2/page.tsx
@@ -1,8 +1,9 @@
-import { Link } from '@/i18n/navigation';
-import ForgotPass from "@/components/partials/auth/forgot-pass";
 import Image from "next/image";
-import Copyright from "@/components/partials/auth/copyright";
+import { Link } from "@/i18n/navigation";
+
 import Logo from "@/components/logo";
+import Copyright from "@/components/partials/auth/copyright";
+import ForgotPass from "@/components/partials/auth/forgot-pass";
 
 const ForgotPass2 = () => {
   return (
@@ -18,9 +19,7 @@ const ForgotPass2 = () => {
               </div>
               <div className="text-center 2xl:mb-10 mb-5">
                 <h4 className="font-medium mb-4">Forgot Your Password?</h4>
-                <div className="text-default-500 text-base">
-                  Reset Password with Dashcode.
-                </div>
+                <div className="text-default-500 text-base">Reset Password with Dashcode.</div>
               </div>
               <div className="font-normal text-base text-default-500 text-center px-2 bg-default-100  rounded py-3 mb-4 mt-10">
                 Enter your Email and instructions will be sent to you!
@@ -29,10 +28,7 @@ const ForgotPass2 = () => {
               <ForgotPass />
               <div className="md:max-w-[345px] mx-auto font-normal text-default-500 2xl:mt-12 mt-8 uppercase text-sm">
                 Forget It,
-                <Link
-                  href="/"
-                  className="text-default-900  font-medium hover:underline"
-                >
+                <Link href="/" className="text-default-900  font-medium hover:underline">
                   Send me Back
                 </Link>
                 to The Sign In
diff --git a/src/app/[locale]/auth/forgot-password3/layout.tsx b/src/app/[locale]/auth/forgot-password3/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/forgot-password3/layout.tsx
+++ b/src/app/[locale]/auth/forgot-password3/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/forgot-password3/page.tsx b/src/app/[locale]/auth/forgot-password3/page.tsx
index 740e4635..a2758895 100644
--- a/src/app/[locale]/auth/forgot-password3/page.tsx
+++ b/src/app/[locale]/auth/forgot-password3/page.tsx
@@ -1,6 +1,7 @@
-import { Link } from '@/i18n/navigation';
-import ForgotPass from "@/components/partials/auth/forgot-pass";
+import { Link } from "@/i18n/navigation";
+
 import Logo from "@/components/logo";
+import ForgotPass from "@/components/partials/auth/forgot-pass";
 
 const ForgotPass3 = () => {
   return (
@@ -30,9 +31,7 @@ s lg:w-1/2"
             </div>
             <div className="text-center 2xl:mb-10 mb-5">
               <h4 className="font-medium mb-4">Forgot Your Password?</h4>
-              <div className="text-default-500  text-base">
-                Reset Password with Dashcode.
-              </div>
+              <div className="text-default-500  text-base">Reset Password with Dashcode.</div>
             </div>
             <div className="font-normal text-base text-default-500  text-center px-2 bg-default-100 rounded py-3 mb-4 mt-10">
               Enter your Email and instructions will be sent to you!
@@ -41,10 +40,7 @@ s lg:w-1/2"
             <ForgotPass />
             <div className="md:max-w-[345px] mx-auto font-normal text-default-500  2xl:mt-12 mt-8 uppercase text-sm">
               Forget It,
-              <Link
-                href="/"
-                className="text-default-900  font-medium hover:underline"
-              >
+              <Link href="/" className="text-default-900  font-medium hover:underline">
                 Send me Back
               </Link>
               to The Sign In
@@ -52,8 +48,7 @@ s lg:w-1/2"
           </div>
         </div>
         <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-          Unlock your Project{" "}
-          <span className="text-white font-bold ms-1">performance</span>
+          Unlock your Project <span className="text-white font-bold ms-1">performance</span>
         </div>
       </div>
     </div>
diff --git a/src/app/[locale]/auth/lock-screen/layout.tsx b/src/app/[locale]/auth/lock-screen/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/lock-screen/layout.tsx
+++ b/src/app/[locale]/auth/lock-screen/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/lock-screen/page.tsx b/src/app/[locale]/auth/lock-screen/page.tsx
index 2cef268c..ae91354e 100644
--- a/src/app/[locale]/auth/lock-screen/page.tsx
+++ b/src/app/[locale]/auth/lock-screen/page.tsx
@@ -1,8 +1,10 @@
-import { Link } from '@/i18n/navigation';
-import Lock from "@/components/partials/auth/lock";
-import Copyright from "@/components/partials/auth/copyright";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
+import Copyright from "@/components/partials/auth/copyright";
+import Lock from "@/components/partials/auth/lock";
 import Logo from "@/components/partials/auth/logo";
+
 const LockScreen = () => {
   return (
     <div className="flex w-full items-center overflow-hidden min-h-dvh h-dvh basis-full">
@@ -17,9 +19,7 @@ const LockScreen = () => {
             </Link>
             <h4>
               Unlock your Project{" "}
-              <span className="text-default-800 font-bold ms-2">
-                performance
-              </span>
+              <span className="text-default-800 font-bold ms-2">performance</span>
             </h4>
           </div>
           <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
@@ -56,18 +56,13 @@ const LockScreen = () => {
                     className="w-full h-full object-cover block"
                   />
                 </div>
-                <div className="text-default-900  text-base font-medium mt-4">
-                  Kathryn Murphy
-                </div>
+                <div className="text-default-900  text-base font-medium mt-4">Kathryn Murphy</div>
               </div>
               <Lock />
 
               <div className="md:max-w-[345px] mx-auto font-normal text-default-500  mt-12 uppercase text-sm">
                 Not you ? return
-                <Link
-                  href="/"
-                  className="text-default-900  font-medium hover:underline"
-                >
+                <Link href="/" className="text-default-900  font-medium hover:underline">
                   Sign In
                 </Link>
               </div>
diff --git a/src/app/[locale]/auth/lock-screen2/layout.tsx b/src/app/[locale]/auth/lock-screen2/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/lock-screen2/layout.tsx
+++ b/src/app/[locale]/auth/lock-screen2/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/lock-screen2/page.tsx b/src/app/[locale]/auth/lock-screen2/page.tsx
index d93c5715..d599155c 100644
--- a/src/app/[locale]/auth/lock-screen2/page.tsx
+++ b/src/app/[locale]/auth/lock-screen2/page.tsx
@@ -1,7 +1,8 @@
-import { Link } from '@/i18n/navigation';
-import Lock from "@/components/partials/auth/lock";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import Logo from "@/components/logo";
+import Lock from "@/components/partials/auth/lock";
 
 const LockScreen2 = () => {
   return (
@@ -37,9 +38,7 @@ s lg:w-1/2 lg:block hidden"
             </div>
             <div className="text-center 2xl:mb-10 mb-5">
               <h4 className="font-medium mb-4">Forgot Your Password?</h4>
-              <div className="text-default-500 text-base">
-                Reset Password with Dashcode.
-              </div>
+              <div className="text-default-500 text-base">Reset Password with Dashcode.</div>
             </div>
             <div className="font-normal text-base text-default-500 text-center px-2 bg-default-100 rounded py-3 mb-4 mt-10">
               Enter your Email and instructions will be sent to you!
@@ -48,10 +47,7 @@ s lg:w-1/2 lg:block hidden"
             <Lock />
             <div className="md:max-w-[345px] mx-auto font-normal text-default-500 2xl:mt-12 mt-8 uppercase text-sm">
               Forget It,
-              <Link
-                href="/login"
-                className="text-default-900  font-medium hover:underline"
-              >
+              <Link href="/login" className="text-default-900  font-medium hover:underline">
                 Send me Back
               </Link>
               to The Sign In
@@ -59,8 +55,7 @@ s lg:w-1/2 lg:block hidden"
           </div>
         </div>
         <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-          Unlock your Project{" "}
-          <span className="text-white font-bold ms-1">performance</span>
+          Unlock your Project <span className="text-white font-bold ms-1">performance</span>
         </div>
       </div>
     </div>
diff --git a/src/app/[locale]/auth/lock-screen3/layout.tsx b/src/app/[locale]/auth/lock-screen3/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/lock-screen3/layout.tsx
+++ b/src/app/[locale]/auth/lock-screen3/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/lock-screen3/page.tsx b/src/app/[locale]/auth/lock-screen3/page.tsx
index e67cd2b9..8d78f067 100644
--- a/src/app/[locale]/auth/lock-screen3/page.tsx
+++ b/src/app/[locale]/auth/lock-screen3/page.tsx
@@ -1,7 +1,8 @@
-import Lock from "@/components/partials/auth/lock";
-import { Link } from '@/i18n/navigation';
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import Logo from "@/components/logo";
+import Lock from "@/components/partials/auth/lock";
 
 const LockScreen3 = () => {
   return (
@@ -51,26 +52,20 @@ s lg:w-1/2 lg:block hidden"
                   className="w-full h-full object-cover block"
                 />
               </div>
-              <div className="text-default-900  text-base font-medium mt-4">
-                Kathryn Murphy
-              </div>
+              <div className="text-default-900  text-base font-medium mt-4">Kathryn Murphy</div>
             </div>
             <Lock />
 
             <div className="text-sm mx-auto w-full text-center font-normal text-default-500 mt-12 uppercase">
               Not you ? return
-              <Link
-                href="/"
-                className="text-default-900  font-medium hover:underline"
-              >
+              <Link href="/" className="text-default-900  font-medium hover:underline">
                 Sign In
               </Link>
             </div>
           </div>
         </div>
         <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-          Unlock your Project{" "}
-          <span className="text-white font-bold ms-1">performance</span>
+          Unlock your Project <span className="text-white font-bold ms-1">performance</span>
         </div>
       </div>
     </div>
diff --git a/src/app/[locale]/auth/login/layout.tsx b/src/app/[locale]/auth/login/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/login/layout.tsx
+++ b/src/app/[locale]/auth/login/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/login/page.tsx b/src/app/[locale]/auth/login/page.tsx
index f0861d38..d95f3e10 100644
--- a/src/app/[locale]/auth/login/page.tsx
+++ b/src/app/[locale]/auth/login/page.tsx
@@ -1,9 +1,11 @@
-import { Link } from '@/i18n/navigation';
-import LoginForm from "@/components/partials/auth/login-form";
 import Image from "next/image";
-import Social from "@/components/partials/auth/social";
+import { Link } from "@/i18n/navigation";
+
 import Copyright from "@/components/partials/auth/copyright";
+import LoginForm from "@/components/partials/auth/login-form";
 import Logo from "@/components/partials/auth/logo";
+import Social from "@/components/partials/auth/social";
+
 const Login = ({ params: { locale } }: { params: { locale: string } }) => {
   return (
     <>
@@ -19,9 +21,7 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
               </Link>
               <h4>
                 Unlock your Project
-                <span className="text-default-800 font-bold ms-2">
-                  performance
-                </span>
+                <span className="text-default-800 font-bold ms-2">performance</span>
               </h4>
             </div>
             <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
diff --git a/src/app/[locale]/auth/login2/layout.tsx b/src/app/[locale]/auth/login2/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/login2/layout.tsx
+++ b/src/app/[locale]/auth/login2/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/login2/page.tsx b/src/app/[locale]/auth/login2/page.tsx
index a338b5d8..4d1755fb 100644
--- a/src/app/[locale]/auth/login2/page.tsx
+++ b/src/app/[locale]/auth/login2/page.tsx
@@ -1,9 +1,11 @@
-import { Link } from '@/i18n/navigation';
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
+import Logo from "@/components/logo";
+import Copyright from "@/components/partials/auth/copyright";
 import LoginForm from "@/components/partials/auth/login-form";
 import Social from "@/components/partials/auth/social";
-import Image from "next/image";
-import Copyright from "@/components/partials/auth/copyright";
-import Logo from "@/components/logo";
+
 const Login2 = () => {
   return (
     <>
@@ -34,10 +36,7 @@ const Login2 = () => {
                 </div>
                 <div className="md:max-w-[345px] mt-6 mx-auto font-normal text-default-500 md:mt-12 uppercase text-sm">
                   Don’t have an account?{" "}
-                  <Link
-                    href="/register"
-                    className="text-default-900  font-medium hover:underline"
-                  >
+                  <Link href="/register" className="text-default-900  font-medium hover:underline">
                     Sign up
                   </Link>
                 </div>
@@ -72,8 +71,7 @@ const Login2 = () => {
 
  max-w-[525px] mx-auto pb-20 text-center"
                 >
-                  Unlock your Project{" "}
-                  <span className="text-white font-bold ms-1">performance</span>
+                  Unlock your Project <span className="text-white font-bold ms-1">performance</span>
                 </div>
               </div>
             </div>
diff --git a/src/app/[locale]/auth/login3/layout.tsx b/src/app/[locale]/auth/login3/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/login3/layout.tsx
+++ b/src/app/[locale]/auth/login3/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/login3/page.tsx b/src/app/[locale]/auth/login3/page.tsx
index 76571348..11d5ed1f 100644
--- a/src/app/[locale]/auth/login3/page.tsx
+++ b/src/app/[locale]/auth/login3/page.tsx
@@ -1,8 +1,9 @@
-import { Link } from '@/i18n/navigation';
-import Social from "@/components/partials/auth/social";
-import LoginForm from "@/components/partials/auth/login-form";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import Logo from "@/components/logo";
+import LoginForm from "@/components/partials/auth/login-form";
+import Social from "@/components/partials/auth/social";
 
 const Login3 = () => {
   return (
@@ -54,18 +55,14 @@ s lg:w-1/2"
               </div>
               <div className="mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm text-center">
                 Already registered?
-                <Link
-                  href="/"
-                  className="text-default-900 font-medium hover:underline"
-                >
+                <Link href="/" className="text-default-900 font-medium hover:underline">
                   Sign In
                 </Link>
               </div>
             </div>
           </div>
           <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-            Unlock your Project{" "}
-            <span className="text-white font-bold ms-1">performance</span>
+            Unlock your Project <span className="text-white font-bold ms-1">performance</span>
           </div>
         </div>
       </div>
diff --git a/src/app/[locale]/auth/page.tsx b/src/app/[locale]/auth/page.tsx
index 515d0a30..6cc128b0 100644
--- a/src/app/[locale]/auth/page.tsx
+++ b/src/app/[locale]/auth/page.tsx
@@ -7,14 +7,15 @@
 
 // export default page
 
-import { Link } from "@/i18n/navigation";
-import LoginForm from "@/components/partials/auth/login-form";
 import Image from "next/image";
-import Social from "@/components/partials/auth/social";
-import Copyright from "@/components/partials/auth/copyright";
-import Logo from "@/components/partials/auth/logo";
+import { Link } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
 
+import Copyright from "@/components/partials/auth/copyright";
+import LoginForm from "@/components/partials/auth/login-form";
+import Logo from "@/components/partials/auth/logo";
+import Social from "@/components/partials/auth/social";
+
 const Login = ({ params: { locale } }: { params: { locale: string } }) => {
   const t = useTranslations("LandingPage");
 
diff --git a/src/app/[locale]/auth/register/layout.tsx b/src/app/[locale]/auth/register/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/register/layout.tsx
+++ b/src/app/[locale]/auth/register/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/register/page.tsx b/src/app/[locale]/auth/register/page.tsx
index ad857161..df0040d0 100644
--- a/src/app/[locale]/auth/register/page.tsx
+++ b/src/app/[locale]/auth/register/page.tsx
@@ -1,9 +1,11 @@
-import { Link } from '@/i18n/navigation';
-import RegForm from "@/components/partials/auth/reg-form";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import Copyright from "@/components/partials/auth/copyright";
 import Logo from "@/components/partials/auth/logo";
+import RegForm from "@/components/partials/auth/reg-form";
 import Social from "@/components/partials/auth/social";
+
 const Register = () => {
   return (
     <>
@@ -20,9 +22,7 @@ const Register = () => {
 
               <h4>
                 Unlock your Project
-                <span className="text-default-800  font-bold ms-2">
-                  performance
-                </span>
+                <span className="text-default-800  font-bold ms-2">performance</span>
               </h4>
             </div>
             <div className="absolute left-0 bottom-[-130px] h-full w-full z-[-1]">
@@ -60,10 +60,7 @@ const Register = () => {
                 </div>
                 <div className="max-w-[225px] mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm">
                   Already registered?
-                  <Link
-                    href="/login"
-                    className="text-default-900  font-medium hover:underline"
-                  >
+                  <Link href="/login" className="text-default-900  font-medium hover:underline">
                     Sign In
                   </Link>
                 </div>
diff --git a/src/app/[locale]/auth/register2/layout.tsx b/src/app/[locale]/auth/register2/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/register2/layout.tsx
+++ b/src/app/[locale]/auth/register2/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/register2/page.tsx b/src/app/[locale]/auth/register2/page.tsx
index 65a1f1ad..f242dc74 100644
--- a/src/app/[locale]/auth/register2/page.tsx
+++ b/src/app/[locale]/auth/register2/page.tsx
@@ -1,8 +1,9 @@
-import { Link } from '@/i18n/navigation';
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
+import Logo from "@/components/logo";
 import RegForm from "@/components/partials/auth/reg-form";
 import Social from "@/components/partials/auth/social";
-import Image from "next/image";
-import Logo from "@/components/logo";
 
 // image import
 
@@ -36,10 +37,7 @@ const Register2 = () => {
                 </div>
                 <div className="max-w-[225px] mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm">
                   Already registered?
-                  <Link
-                    href="/login"
-                    className="text-default-900  font-medium hover:underline"
-                  >
+                  <Link href="/login" className="text-default-900  font-medium hover:underline">
                     Sign In
                   </Link>
                 </div>
@@ -74,8 +72,7 @@ const Register2 = () => {
 
  max-w-[525px] mx-auto pb-20 text-center"
                 >
-                  Unlock your Project{" "}
-                  <span className="text-white font-bold ms-1">performance</span>
+                  Unlock your Project <span className="text-white font-bold ms-1">performance</span>
                 </div>
               </div>
             </div>
diff --git a/src/app/[locale]/auth/register3/layout.tsx b/src/app/[locale]/auth/register3/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/register3/layout.tsx
+++ b/src/app/[locale]/auth/register3/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/register3/page.tsx b/src/app/[locale]/auth/register3/page.tsx
index 4ffeaa54..162ed820 100644
--- a/src/app/[locale]/auth/register3/page.tsx
+++ b/src/app/[locale]/auth/register3/page.tsx
@@ -1,8 +1,9 @@
-import { Link } from '@/i18n/navigation';
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
+import Logo from "@/components/logo";
 import RegForm from "@/components/partials/auth/reg-form";
 import Social from "@/components/partials/auth/social";
-import Image from "next/image";
-import Logo from "@/components/logo";
 
 const Register3 = () => {
   return (
@@ -38,9 +39,7 @@ s lg:w-1/2"
                 </Link>
               </div>
               <div className="text-center 2xl:mb-10 mb-5">
-                <h4 className="font-medium text-2xl text-default-900  mb-3">
-                  Sign up
-                </h4>
+                <h4 className="font-medium text-2xl text-default-900  mb-3">Sign up</h4>
                 <div className="text-default-500  text-base">
                   Create an account to start using Dashcode
                 </div>
@@ -56,18 +55,14 @@ s lg:w-1/2"
               </div>
               <div className="max-w-[225px] mx-auto font-normal text-default-500  2xl:mt-12 mt-6 uppercase text-sm">
                 Already registered?
-                <Link
-                  href="/"
-                  className="text-default-900  font-medium hover:underline"
-                >
+                <Link href="/" className="text-default-900  font-medium hover:underline">
                   Sign In
                 </Link>
               </div>
             </div>
           </div>
           <div className="absolute bottom-0 lg:block hidden text-white py-5 px-5 text-xl w-full">
-            Unlock your Project{" "}
-            <span className="text-white font-bold ms-1">performance</span>
+            Unlock your Project <span className="text-white font-bold ms-1">performance</span>
           </div>
         </div>
       </div>
diff --git a/src/app/[locale]/auth/registration/page.tsx b/src/app/[locale]/auth/registration/page.tsx
index d09248ed..9bd7c6dd 100644
--- a/src/app/[locale]/auth/registration/page.tsx
+++ b/src/app/[locale]/auth/registration/page.tsx
@@ -1,27 +1,45 @@
 "use client";
 
-import React from "react";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import React, { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
 import Image from "next/image";
-import { close, error, loading, registerConfirm } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { getDataByNIK, getDataByNRP, getDataJournalist, getDataPersonil, listCity, listDistricts, listInstitusi, listProvince, postRegistration, requestOTP, saveInstitutes, verifyOTP } from "@/lib/services/auth";
-import { yupResolver } from "@hookform/resolvers/yup";
 import { useParams, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm, SubmitHandler } from "react-hook-form";
+import { Link, useRouter } from "@/i18n/navigation";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useTranslations } from "next-intl";
+import { SubmitHandler, useForm } from "react-hook-form";
+import sanitizeHtml from "sanitize-html";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import * as Yup from "yup";
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
-import { Textarea } from "@/components/ui/textarea";
+
+import { close, error, loading, registerConfirm } from "@/config/swal";
+import {
+  getDataByNIK,
+  getDataByNRP,
+  getDataJournalist,
+  getDataPersonil,
+  listCity,
+  listDistricts,
+  listInstitusi,
+  listProvince,
+  postRegistration,
+  requestOTP,
+  saveInstitutes,
+  verifyOTP,
+} from "@/lib/services/auth";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Icon } from "@/components/ui/icon";
-import dynamic from "next/dynamic";
-import sanitizeHtml from "sanitize-html";
-import { useTranslations } from "next-intl";
+import { Input } from "@/components/ui/input";
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@/components/ui/input-otp";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 
 type Inputs = {
   example: string;
@@ -106,9 +124,11 @@ const page = () => {
 
   const { register, handleSubmit, formState, setValue } = useForm<any>(formOptions);
 
-  const convertMinutesToMiliseconds = (minute: any) => minute * nMinuteSeconds * nSecondInMiliseconds;
+  const convertMinutesToMiliseconds = (minute: any) =>
+    minute * nMinuteSeconds * nSecondInMiliseconds;
 
-  const convertMilisecondsToHour = (miliseconds: any) => new Date(miliseconds).toISOString().slice(17, -5);
+  const convertMilisecondsToHour = (miliseconds: any) =>
+    new Date(miliseconds).toISOString().slice(17, -5);
 
   let [timerCount, setTimerCount] = useState(convertMinutesToMiliseconds(1));
   let interval: any;
@@ -340,7 +360,9 @@ const page = () => {
     if (Number(category) == 6 && journalistData) {
       setValue("firstName", journalistData.journalistName);
       setValue("memberIdentity", journalistData.certNumber);
-      const selectedProvince = province.find((o: any) => o.provName == journalistData.province?.toUpperCase());
+      const selectedProvince = province.find(
+        (o: any) => o.provName == journalistData.province?.toUpperCase()
+      );
 
       if (selectedProvince !== undefined) {
         setValue("provinsi", selectedProvince.id);
@@ -352,7 +374,8 @@ const page = () => {
   }
 
   const checkEmail = (e: any) => {
-    const regEmail = /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
+    const regEmail =
+      /^(([^\s"(),.:;<>@[\\\]]+(\.[^\s"(),.:;<>@[\\\]]+)*)|(".+"))@((\[(?:\d{1,3}\.){3}\d{1,3}])|(([\dA-Za-z\-]+\.)+[A-Za-z]{2,}))$/;
 
     if (regEmail.test(e)) {
       setEmailValidate("");
@@ -411,7 +434,9 @@ const page = () => {
           setValue("kota", selectedCity?.id);
         }
 
-        const selectedDistrict: any = districts.find((o: any) => o.disName == data.kec?.toUpperCase());
+        const selectedDistrict: any = districts.find(
+          (o: any) => o.disName == data.kec?.toUpperCase()
+        );
 
         if (selectedDistrict !== undefined) {
           setValue("kecamatan", selectedDistrict?.id);
@@ -509,11 +534,23 @@ const page = () => {
       <div className="lg:block hidden flex-1 overflow-hidden bg-[#f7f7f7] text-[40px] leading-[48px] text-default-600 relative z-[1]">
         <div className="max-w-[520px] pt-16 ps-20 ">
           <Link href="/" className="mb-6 inline-block">
-            <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
+            <Image
+              src="/assets/mediahub-logo.png"
+              alt=""
+              width={250}
+              height={250}
+              className="mb-10 w-full h-full"
+            />
           </Link>
         </div>
         <div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
-          <Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
+          <Image
+            src="/assets/vector-login.svg"
+            alt=""
+            width={300}
+            height={300}
+            className="mb-10 w-full h-full"
+          />
         </div>
       </div>
 
@@ -532,19 +569,25 @@ const page = () => {
           <div className="flex flex-row justify-center py-10">
             <ul className="flex flex-row items-center text-center">
               <li>
-                <div className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
+                <div
+                  className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepOneActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}
+                >
                   <b>1</b>
                 </div>
               </li>
               <div className="w-16 h-1 z-[1] bg-[#f32d2d] "></div>
               <li>
-                <div className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active bg-white border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
+                <div
+                  className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] border rounded-full ${stepTwoActive ? "active bg-white border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}
+                >
                   <b>2</b>
                 </div>
               </li>
               <div className="w-16 h-1 bg-[#f32d2d]"></div>
               <li>
-                <div className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] borde rounded-full ${stepThreeActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}>
+                <div
+                  className={`flex justify-center items-center text-center text-black bg-[#f32d2d] h-[40px] w-[40px] borde rounded-full ${stepThreeActive ? "active bg-white  border border-[#f32d2d] rounded-full text-[#f32d2d]" : ""}`}
+                >
                   <b>3</b>
                 </div>
               </li>
@@ -562,7 +605,9 @@ const page = () => {
                   : {}
               }
             >
-              <p className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold ">{stepThreeActive ? t("userData") : t("registerFirst")}</p>
+              <p className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold ">
+                {stepThreeActive ? t("userData") : t("registerFirst")}
+              </p>
               <p className="px-0 lg:px-12 text-sm lg:text-base mt-2">
                 {t("alreadyHave")}{" "}
                 <Link href="/auth" className="text-red-500">
@@ -580,12 +625,16 @@ const page = () => {
                   : {}
               }
             >
-              <p className="text-black dark:text-white text-2xl px-0 lg:px-20 font-semibold">{t("enterOTP")}</p>
+              <p className="text-black dark:text-white text-2xl px-0 lg:px-20 font-semibold">
+                {t("enterOTP")}
+              </p>
               <p className="text-red-500 text-sm px-0 lg:px-20">{t("checkInbox")}</p>
             </div>
           </div>
 
-          <div className={`flex flex-col gap-3 px-8 lg:px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
+          <div
+            className={`flex flex-col gap-3 px-8 lg:px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}
+          >
             <div
               className="flex flex-col px-0 lg:px-8"
               style={
@@ -624,7 +673,9 @@ const page = () => {
                   {t("otherIdentity")}
                 </option>
               </select>
-              <div className="hidden w-full mt-[0.25rem] text-lg text-[#dc3545]">{errors.association?.message}</div>
+              <div className="hidden w-full mt-[0.25rem] text-lg text-[#dc3545]">
+                {errors.association?.message}
+              </div>
             </div>
 
             {Number(category) == 7 ? (
@@ -632,7 +683,13 @@ const page = () => {
                 <label htmlFor="userIdentity" className="mb-3">
                   <b>{t("policeNumber")}</b> <span className="text-red-500">*</span>
                 </label>
-                <Input className="mt-3" autoComplete="off" placeholder="Masukan Nomor Registrasi Polri Anda" type="text" onChange={(event: any) => setPersonilNRP(event.target.value)} />
+                <Input
+                  className="mt-3"
+                  autoComplete="off"
+                  placeholder="Masukan Nomor Registrasi Polri Anda"
+                  type="text"
+                  onChange={(event: any) => setPersonilNRP(event.target.value)}
+                />
                 <p className="text-red-500">{userIdentityValidate}</p>
               </div>
             ) : (
@@ -652,7 +709,13 @@ const page = () => {
                 <Label htmlFor="journalistCertificate">
                   {t("journalistNumber")} <span className="text-red-500">*</span>
                 </Label>
-                <Input className="rounded-md py-3" autoComplete="off" placeholder={t("inputJournalist")} type="text" onChange={(event: any) => setJournalistCertificate(event.target.value)} />
+                <Input
+                  className="rounded-md py-3"
+                  autoComplete="off"
+                  placeholder={t("inputJournalist")}
+                  type="text"
+                  onChange={(event: any) => setJournalistCertificate(event.target.value)}
+                />
               </div>
             ) : (
               ""
@@ -661,27 +724,59 @@ const page = () => {
               <label htmlFor="email">
                 <b>Email</b> <span className="text-red-500">*</span>
               </label>
-              <Input className="w-full" autoComplete="off" placeholder={t("inputEmail")} type="email" onChange={(event) => checkEmail(event.target.value)} />
+              <Input
+                className="w-full"
+                autoComplete="off"
+                placeholder={t("inputEmail")}
+                type="email"
+                onChange={(event) => checkEmail(event.target.value)}
+              />
               <p className="text-sm text-red-500 mt-1">{emailValidate}</p>
             </div>
           </div>
 
-          <div className={`flex flex-col mt-4 px-8 lg:px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}>
+          <div
+            className={`flex flex-col mt-4 px-8 lg:px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}
+          >
             <div className="flex justify-center mb-6">
               <InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
                 <InputOTPGroup>
-                  <InputOTPSlot index={0} onChange={(e: any) => setOtp1(e.target.value)} onKeyUp={handleTypeOTP} />
-                  <InputOTPSlot index={1} onChange={(e: any) => setOtp2(e.target.value)} onKeyUp={handleTypeOTP} />
+                  <InputOTPSlot
+                    index={0}
+                    onChange={(e: any) => setOtp1(e.target.value)}
+                    onKeyUp={handleTypeOTP}
+                  />
+                  <InputOTPSlot
+                    index={1}
+                    onChange={(e: any) => setOtp2(e.target.value)}
+                    onKeyUp={handleTypeOTP}
+                  />
                 </InputOTPGroup>
                 <InputOTPSeparator />
                 <InputOTPGroup>
-                  <InputOTPSlot index={2} onChange={(e: any) => setOtp3(e.target.value)} onKeyUp={handleTypeOTP} />
-                  <InputOTPSlot index={3} onChange={(e: any) => setOtp4(e.target.value)} onKeyUp={handleTypeOTP} />
+                  <InputOTPSlot
+                    index={2}
+                    onChange={(e: any) => setOtp3(e.target.value)}
+                    onKeyUp={handleTypeOTP}
+                  />
+                  <InputOTPSlot
+                    index={3}
+                    onChange={(e: any) => setOtp4(e.target.value)}
+                    onKeyUp={handleTypeOTP}
+                  />
                 </InputOTPGroup>
                 <InputOTPSeparator />
                 <InputOTPGroup>
-                  <InputOTPSlot index={4} onChange={(e: any) => setOtp5(e.target.value)} onKeyUp={handleTypeOTP} />
-                  <InputOTPSlot index={5} onChange={(e: any) => setOtp6(e.target.value)} onKeyUp={handleTypeOTP} />
+                  <InputOTPSlot
+                    index={4}
+                    onChange={(e: any) => setOtp5(e.target.value)}
+                    onKeyUp={handleTypeOTP}
+                  />
+                  <InputOTPSlot
+                    index={5}
+                    onChange={(e: any) => setOtp6(e.target.value)}
+                    onKeyUp={handleTypeOTP}
+                  />
                 </InputOTPGroup>
               </InputOTP>
             </div>
@@ -689,10 +784,16 @@ const page = () => {
               <b>{otpValidate}</b>
             </p>
             <div className="flex flex-row px-0 lg:px-28 justify-between items-center my-4">
-              <a className="bg-slate-300 dark:bg-black text-center rounded-lg mr-1 w-[200px] py-2 text-base cursor-pointer" onClick={() => handleResendOTP()}>
+              <a
+                className="bg-slate-300 dark:bg-black text-center rounded-lg mr-1 w-[200px] py-2 text-base cursor-pointer"
+                onClick={() => handleResendOTP()}
+              >
                 {t("resending")} ({convertMilisecondsToHour(timerCount)})
               </a>
-              <a className="bg-red-700 w-[200px] py-2 text-center text-white rounded-lg ml-1  cursor-pointer" onClick={() => handleVerifyOTP()}>
+              <a
+                className="bg-red-700 w-[200px] py-2 text-center text-white rounded-lg ml-1  cursor-pointer"
+                onClick={() => handleVerifyOTP()}
+              >
                 {t("next")}
               </a>
             </div>
@@ -724,7 +825,13 @@ const page = () => {
                 <Label className="mb-2">
                   {t("fullName")} <span className="text-red-500">*</span>
                 </Label>
-                <Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder={t("enterFullName")} />
+                <Input
+                  type="text"
+                  autoComplete="off"
+                  className={` ${errors.firstName ? "block" : ""}`}
+                  {...register("firstName")}
+                  placeholder={t("enterFullName")}
+                />
                 <div className="text-red-500">{errors.firstName?.message}</div>
               </div>
               <div className="mb-4 px-0 lg:px-[34px]">
@@ -753,7 +860,14 @@ const page = () => {
                 <Label className="mb-2">
                   Email <span className="text-red-500">*</span>
                 </Label>
-                <Input type="email" autoComplete="off" className={`${errors.email ? "block" : "text-white"}`} {...register("email")} placeholder="Masukan Email Anda" disabled />
+                <Input
+                  type="email"
+                  autoComplete="off"
+                  className={`${errors.email ? "block" : "text-white"}`}
+                  {...register("email")}
+                  placeholder="Masukan Email Anda"
+                  disabled
+                />
                 <div className="text-red-500">{errors.email?.message}</div>
               </div>
             </div>
@@ -761,14 +875,25 @@ const page = () => {
               <Label className="mb-2">
                 {t("number")} <span className="text-red-500">*</span>
               </Label>
-              <Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder={t("enterNumber")} />
+              <Input
+                type="number"
+                autoComplete="off"
+                className={`mb-3 ${errors.phoneNumber ? "block" : ""}`}
+                {...register("phoneNumber")}
+                placeholder={t("enterNumber")}
+              />
               <div className="text-red-500">{errors.phoneNumber?.message}</div>
             </div>
             <div className="mb-4 px-0 lg:px-[34px]">
               <Label htmlFor="address" className="mb-2">
                 {t("address")} <span className="text-red-500">*</span>
               </Label>
-              <Textarea className={` ${errors.address ? "block" : ""}`} {...register("address")} placeholder={t("insertAddress")} rows={3} />
+              <Textarea
+                className={` ${errors.address ? "block" : ""}`}
+                {...register("address")}
+                placeholder={t("insertAddress")}
+                rows={3}
+              />
               <div className="text-red-500">{errors.address?.message}</div>
             </div>
             {Number(category) == 6 ? (
@@ -777,7 +902,11 @@ const page = () => {
                   <Label htmlFor="provinsi" className="mb-2">
                     {t("institutions")} <span className="text-red-500">*</span>
                   </Label>
-                  <select className="mb-3 p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer" id="provinsi" onChange={(event) => handleInstituteOption(event)}>
+                  <select
+                    className="mb-3 p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer"
+                    id="provinsi"
+                    onChange={(event) => handleInstituteOption(event)}
+                  >
                     <option disabled selected>
                       {t("selectInst")}
                     </option>
@@ -804,13 +933,25 @@ const page = () => {
                   <Label htmlFor="alamat" className="mb-2">
                     {t("instName")} <span className="text-red-500">*</span>
                   </Label>
-                  <Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
+                  <Input
+                    className="mb-3"
+                    autoComplete="off"
+                    placeholder="Masukan Nama Lengkap Institusi Anda"
+                    type="text"
+                    onChange={(event) => setCustomInstituteName(event.target.value)}
+                  />
                 </div>
                 <div>
                   <Label htmlFor="alamat" className="mb-2">
                     {t("instAddress")} <span className="text-red-500">*</span>
                   </Label>
-                  <Textarea className="mb-3" placeholder={t("addressInst")} rows={3} value={institusiAddress} onChange={(event) => setInstitusiAddress(event.target.value)} />
+                  <Textarea
+                    className="mb-3"
+                    placeholder={t("addressInst")}
+                    rows={3}
+                    value={institusiAddress}
+                    onChange={(event) => setInstitusiAddress(event.target.value)}
+                  />
                 </div>
               </div>
             ) : (
@@ -863,7 +1004,11 @@ const page = () => {
               <label htmlFor="kecamatan" className="mb-2">
                 {t("subdistrict")} <span className="text-red-500">*</span>
               </label>
-              <select className={`p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer ${errors.kecamatan ? "block" : ""}`} {...register("kecamatan")} id="kecamatan">
+              <select
+                className={`p-2 border text-sm text-slate-400 rounded-md border-slate-300 bg-white cursor-pointer ${errors.kecamatan ? "block" : ""}`}
+                {...register("kecamatan")}
+                id="kecamatan"
+              >
                 <option disabled selected>
                   {t("selectSub")}
                 </option>
@@ -927,11 +1072,20 @@ const page = () => {
                   }}
                   required
                 />
-                <div className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer" onClick={togglePasswordType}>
-                  {passwordType === "password" ? <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" /> : <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />}{" "}
+                <div
+                  className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer"
+                  onClick={togglePasswordType}
+                >
+                  {passwordType === "password" ? (
+                    <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" />
+                  ) : (
+                    <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />
+                  )}{" "}
                 </div>
               </div>
-              {errors.password?.message && <div className="text-destructive mt-2 text-sm">{errors.password.message}</div>}
+              {errors.password?.message && (
+                <div className="text-destructive mt-2 text-sm">{errors.password.message}</div>
+              )}
             </div>
             {/* <div className="flex flex-col">
               <label htmlFor="password" className="mb-2">
@@ -985,8 +1139,15 @@ const page = () => {
                   }}
                   required
                 />
-                <div className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer" onClick={togglePasswordType}>
-                  {passwordConf === "same password" ? <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" /> : <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />}{" "}
+                <div
+                  className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer"
+                  onClick={togglePasswordType}
+                >
+                  {passwordConf === "same password" ? (
+                    <Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" />
+                  ) : (
+                    <Icon icon="heroicons:eye-slash" className="w-5 h-5 text-default-400" />
+                  )}{" "}
                 </div>
               </div>
               <div className="text-red-500">{warningPassConf}</div>
@@ -1033,7 +1194,9 @@ const page = () => {
                 </a>
               </p>
             </div>
-            <div className={`mb-5 mt-7 px-[34px] w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
+            <div
+              className={`mb-5 mt-7 px-[34px] w-full text-center flex justify-center ${formProfile == true || stepTwoActive ? "hidden" : ""}`}
+            >
               {/* <a className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-full" onClick={() => handleSendOTP()}> */}
               <a
                 className="border cursor-pointer border-red-500 px-4 py-3 rounded-lg text-white bg-[#dc3545] w-[550px]"
@@ -1056,7 +1219,10 @@ const page = () => {
                 : {}
             }
           >
-            <Button type="submit" className="border w-[550px] text-center bg-red-700 text-white hover:bg-white hover:text-red-700 ">
+            <Button
+              type="submit"
+              className="border w-[550px] text-center bg-red-700 text-white hover:bg-white hover:text-red-700 "
+            >
               {t("register")}
             </Button>
           </div>
diff --git a/src/app/[locale]/auth/under-construction/layout.tsx b/src/app/[locale]/auth/under-construction/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/under-construction/layout.tsx
+++ b/src/app/[locale]/auth/under-construction/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/under-construction/page.tsx b/src/app/[locale]/auth/under-construction/page.tsx
index 4f867903..0bfbd750 100644
--- a/src/app/[locale]/auth/under-construction/page.tsx
+++ b/src/app/[locale]/auth/under-construction/page.tsx
@@ -1,8 +1,9 @@
-import Logo from "@/components/partials/auth/logo";
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import Image from "next/image";
-import { Link } from '@/i18n/navigation';
+import Logo from "@/components/partials/auth/logo";
 
 const UnderConstructionPage = () => {
   return (
@@ -24,9 +25,7 @@ const UnderConstructionPage = () => {
       <div className="container">
         <div className="flex justify-center flex-wrap items-center min-h-screen flex-col text-center">
           <Image height={500} width={500} src="/images/svg/img-2.svg" alt="" />
-          <h4 className="text-3xl font-medium text-default-900  mb-2">
-            We are under maintenance.
-          </h4>
+          <h4 className="text-3xl font-medium text-default-900  mb-2">We are under maintenance.</h4>
           <p className="font-normal text-base text-default-500 ">
             We’re making the system more awesome. <br />
             We’ll be back shortly.
diff --git a/src/app/[locale]/auth/under-maintenance/layout.tsx b/src/app/[locale]/auth/under-maintenance/layout.tsx
index 6e956709..398682f9 100644
--- a/src/app/[locale]/auth/under-maintenance/layout.tsx
+++ b/src/app/[locale]/auth/under-maintenance/layout.tsx
@@ -2,7 +2,8 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
+  description:
+    "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;
diff --git a/src/app/[locale]/auth/under-maintenance/page.tsx b/src/app/[locale]/auth/under-maintenance/page.tsx
index 282d0400..832e0e96 100644
--- a/src/app/[locale]/auth/under-maintenance/page.tsx
+++ b/src/app/[locale]/auth/under-maintenance/page.tsx
@@ -1,8 +1,9 @@
-import Logo from "@/components/partials/auth/logo";
+import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import Image from "next/image";
-import { Link } from '@/i18n/navigation';
+import Logo from "@/components/partials/auth/logo";
 
 const UnderMaintenance = () => {
   return (
@@ -24,9 +25,7 @@ const UnderMaintenance = () => {
       <div className="container">
         <div className="flex justify-center flex-wrap items-center min-h-screen flex-col text-center">
           <Image height={500} width={500} src="/images/svg/img-2.svg" alt="" />
-          <h4 className="text-3xl font-medium text-default-900  mb-2">
-            We are under maintenance.
-          </h4>
+          <h4 className="text-3xl font-medium text-default-900  mb-2">We are under maintenance.</h4>
           <p className="font-normal text-base text-default-500 ">
             We’re making the system more awesome. <br />
             We’ll be back shortly.
diff --git a/src/app/[locale]/error.tsx b/src/app/[locale]/error.tsx
index 704ebd60..a12f86ba 100644
--- a/src/app/[locale]/error.tsx
+++ b/src/app/[locale]/error.tsx
@@ -1,24 +1,27 @@
-"use client"; // Error components must be Client Components
+"use client";
 
-
-import { Button } from "@/components/ui/button";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+// Error components must be Client Components
 import { Info } from "lucide-react";
 
-export default function Error({ error, reset }: {
-    error: Error & { digest?: string }
-    reset: () => void
-}) {
-    return (
-        <div className="space-y-4">
-            <Alert color="destructive" variant="soft">
-                <Info className="h-5 w-5" />
-                <AlertDescription>Something went wrong!</AlertDescription>
-            </Alert>
-            <Button onClick={() => reset()} color="destructive" size="sm">
-                Try again
-            </Button>
-        </div>
-    );
-}
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
 
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <Alert color="destructive" variant="soft">
+        <Info className="h-5 w-5" />
+        <AlertDescription>Something went wrong!</AlertDescription>
+      </Alert>
+      <Button onClick={() => reset()} color="destructive" size="sm">
+        Try again
+      </Button>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
index f97b3572..3df44809 100644
--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
 import { notFound } from "next/navigation";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import { locales } from "@/config/locales";
+import { dmSans } from "@/config/fonts";
 import { ThemeProvider } from "@/providers/theme-provider";
 import MountedProvider from "@/providers/mounted.provider";
 import { Toaster } from "@/components/ui/toaster";
@@ -12,8 +12,7 @@ import DirectionProvider from "@/providers/direction-provider";
 import AuthProvider from "@/providers/auth.provider";
 import LoadScript from "@/lib/utils/globals";
 import "@/styles/globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
+import "./globals.css";
 
 export function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
@@ -35,7 +34,7 @@ export default async function LocaleLayout({
   const messages = await getMessages();
 
   return (
-    <html lang={locale}>
+    <html lang={locale} className={dmSans.variable}>
       <head>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
@@ -43,13 +42,9 @@ export default async function LocaleLayout({
           href="https://fonts.gstatic.com"
           crossOrigin="anonymous"
         />
-        <link
-          href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap"
-          rel="stylesheet"
-        />
         <LoadScript />
       </head>
-      <body className={`${inter.className} dashcode-app`}>
+      <body className="dashcode-app font-sans">
         <NextIntlClientProvider messages={messages} locale={locale}>
           <AuthProvider>
             <ThemeProvider attribute="class" defaultTheme="light">
diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
index dee41b43..826839af 100644
--- a/src/app/[locale]/not-found.tsx
+++ b/src/app/[locale]/not-found.tsx
@@ -1,27 +1,27 @@
-'use client';
+"use client";
 
-import { Link } from '@/i18n/navigation';
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
 
 export default function NotFound() {
-    return (
-        <div className="min-h-screen flex flex-col justify-center items-center text-center py-20 bg-background">
-            <Image src="/images/all-img/404-2.svg" alt="" height={300} width={300} />
-            <div className="max-w-[546px] mx-auto w-full mt-12">
-                <h4 className="text-default-900 mb-4">Page not found</h4>
-                <div className="dark:text-white text-base font-normal mb-10">
-                    The page you are looking for might have been removed had its name
-                    changed or is temporarily unavailable.
-                </div>
-            </div>
-            <div className="max-w-[300px] mx-auto w-full">
-                <Link
-                    href="/analytics"
-                    className="btn bg-white hover:bg-opacity-75 transition-all duration-150 block text-center"
-                >
-                    Go to homepage
-                </Link>
-            </div>
+  return (
+    <div className="min-h-screen flex flex-col justify-center items-center text-center py-20 bg-background">
+      <Image src="/images/all-img/404-2.svg" alt="" height={300} width={300} />
+      <div className="max-w-[546px] mx-auto w-full mt-12">
+        <h4 className="text-default-900 mb-4">Page not found</h4>
+        <div className="dark:text-white text-base font-normal mb-10">
+          The page you are looking for might have been removed had its name changed or is
+          temporarily unavailable.
         </div>
-    );
-}
\ No newline at end of file
+      </div>
+      <div className="max-w-[300px] mx-auto w-full">
+        <Link
+          href="/analytics"
+          className="btn bg-white hover:bg-opacity-75 transition-all duration-150 block text-center"
+        >
+          Go to homepage
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index d1db166d..0f3d5041 100644
--- a/src/app/[locale]/page.tsx
+++ b/src/app/[locale]/page.tsx
@@ -1,12 +1,13 @@
-"use client"
+"use client";
 
-import SearchSection from "@/components/features/landing-page/search-section";
+import MountedProvider from "@/providers/mounted.provider";
+import { ReactLenis } from "@studio-freight/react-lenis";
+import { Locale, useTranslations } from "next-intl";
+
+import Footer from "@/components/features/landing-page/footer";
 import HeroNew from "@/components/features/landing-page/hero-new";
 import Navbar from "@/components/features/landing-page/navbar";
-import Footer from "@/components/features/landing-page/footer";
-import { ReactLenis } from "@studio-freight/react-lenis";
-import MountedProvider from "@/providers/mounted.provider";
-import {Locale, useTranslations} from 'next-intl';
+import SearchSection from "@/components/features/landing-page/search-section";
 
 export default function Home() {
   const t = useTranslations("Index");
diff --git a/src/app/api/chat/[id]/route.ts b/src/app/api/chat/[id]/route.ts
index 548ccfa4..053c5f58 100644
--- a/src/app/api/chat/[id]/route.ts
+++ b/src/app/api/chat/[id]/route.ts
@@ -1,30 +1,31 @@
-import { NextResponse, NextRequest } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
+
 import { chats, type Chat } from "../data";
 
 export async function POST(request: NextRequest, response: NextResponse) {
   try {
-    let id = "55fe838e-9a09-4caf-a591-559803309ef1"
-    let senderId = "e2c1a571-5f7e-4f56-9020-13f98b0eaba"
-    let message ="ami n ew"
+    let id = "55fe838e-9a09-4caf-a591-559803309ef1";
+    let senderId = "e2c1a571-5f7e-4f56-9020-13f98b0eaba";
+    let message = "ami n ew";
     let activeChat = chats.find((item) => item.id === id);
 
-  const newMessageData = {
-    message,
-    time: new Date(),
-    senderId: senderId,
-    replayMetadata: false,
-  };
-  if (!activeChat) {
-    activeChat = {
-      id: id,
-      userId: senderId,
-      unseenMsgs: 0,
-      chat: [newMessageData],
+    const newMessageData = {
+      message,
+      time: new Date(),
+      senderId: senderId,
+      replayMetadata: false,
     };
-    chats.push(activeChat);
-  } else {
-    activeChat.chat.push(newMessageData as any);
-  }
+    if (!activeChat) {
+      activeChat = {
+        id: id,
+        userId: senderId,
+        unseenMsgs: 0,
+        chat: [newMessageData],
+      };
+      chats.push(activeChat);
+    } else {
+      activeChat.chat.push(newMessageData as any);
+    }
     return NextResponse.json({
       status: "success",
       message: "Message sent successfully",
diff --git a/src/app/api/chat/data.ts b/src/app/api/chat/data.ts
index 7b9abf9c..f215ea13 100644
--- a/src/app/api/chat/data.ts
+++ b/src/app/api/chat/data.ts
@@ -1,20 +1,19 @@
-const previousDay = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
-const dayBeforePreviousDay = new Date(
-  new Date().getTime() - 24 * 60 * 60 * 1000 * 2
-);
-
 import avatar1 from "@/public/images/users/user-1.jpg";
-import avatar2 from "@/public/images/users/user-2.jpg";
-import avatar3 from "@/public/images/users/user-3.jpg";
-import avatar4 from "@/public/images/users/user-4.jpg";
-import avatar5 from "@/public/images/users/user-5.jpg";
-import avatar6 from "@/public/images/users/user-6.jpg";
 import avatar7 from "@/public/images/users/user-1.jpg";
+import avatar2 from "@/public/images/users/user-2.jpg";
 import avatar8 from "@/public/images/users/user-2.jpg";
+import avatar3 from "@/public/images/users/user-3.jpg";
 import avatar9 from "@/public/images/users/user-3.jpg";
+import avatar4 from "@/public/images/users/user-4.jpg";
 import avatar10 from "@/public/images/users/user-4.jpg";
+import avatar5 from "@/public/images/users/user-5.jpg";
 import avatar11 from "@/public/images/users/user-5.jpg";
+import avatar6 from "@/public/images/users/user-6.jpg";
 import { faker } from "@faker-js/faker";
+
+const previousDay = new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
+const dayBeforePreviousDay = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 2);
+
 export const profileUser = {
   id: "e2c1a571-5f7e-4f56-9020-13f98b0eaba2",
   avatar: avatar1,
@@ -258,31 +257,28 @@ export const chats = [
   },
 ];
 
-
 export const getContacts = async () => {
-  return contacts
-}
+  return contacts;
+};
 
 // get chats by contact id
 export const getChatsByContactId = async (contactId: string) => {
-  
-   const chat = chats.find(chat => chat.id === contactId)
- const contact =   contacts.find(contact => contact.id === contactId)
-    return {
-        chat,
-        contact
-    }
-}
-// get contact by id 
+  const chat = chats.find((chat) => chat.id === contactId);
+  const contact = contacts.find((contact) => contact.id === contactId);
+  return {
+    chat,
+    contact,
+  };
+};
+// get contact by id
 export const getContactById = async (contactId: string) => {
-  return contacts.find(contact => contact.id === contactId)
-}
-
+  return contacts.find((contact) => contact.id === contactId);
+};
 
 // get profile user
 export const getProfileUser = async () => {
-  return profileUser
-}
-export type Chat = typeof chats[number];
-export type Contact = typeof contacts[number];
-export type ProfileUser = typeof profileUser;
\ No newline at end of file
+  return profileUser;
+};
+export type Chat = (typeof chats)[number];
+export type Contact = (typeof contacts)[number];
+export type ProfileUser = typeof profileUser;
diff --git a/src/app/api/email/[id]/route.ts b/src/app/api/email/[id]/route.ts
index 7cdb05b3..6f9c2b9e 100644
--- a/src/app/api/email/[id]/route.ts
+++ b/src/app/api/email/[id]/route.ts
@@ -1,5 +1,5 @@
-import { NextResponse } from "next/server";
-import { NextRequest } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
+
 import { mails } from "../data";
 
 export async function GET(request: NextRequest, response: any) {
diff --git a/src/app/api/email/data.ts b/src/app/api/email/data.ts
index e354c3dc..95b37a79 100644
--- a/src/app/api/email/data.ts
+++ b/src/app/api/email/data.ts
@@ -10,7 +10,7 @@ export const mails = [
     category: "primary",
     label: "work",
   },
- 
+
   // {
   //   id: 3,
   //   name: "Rhyloo",
@@ -326,4 +326,4 @@ export const mails = [
   // },
 ];
 
-export type Mail = (typeof mails)[number]
\ No newline at end of file
+export type Mail = (typeof mails)[number];
diff --git a/src/app/api/email/route.ts b/src/app/api/email/route.ts
index b4ec0a91..a9de13fa 100644
--- a/src/app/api/email/route.ts
+++ b/src/app/api/email/route.ts
@@ -1,5 +1,5 @@
-import { NextResponse } from "next/server";
-import { NextRequest } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
+
 import { mails } from "./data";
 
 export async function GET(request: NextRequest, response: NextResponse) {
diff --git a/src/app/api/user/data.ts b/src/app/api/user/data.ts
index f1d17b83..7a86945f 100644
--- a/src/app/api/user/data.ts
+++ b/src/app/api/user/data.ts
@@ -1,4 +1,5 @@
 import avatar3 from "@/public/images/avatar/avatar-3.png";
+
 export const user = [
   {
     id: 1,
diff --git a/src/app/api/user/register/route.ts b/src/app/api/user/register/route.ts
index 6b20bb7e..80d095b0 100644
--- a/src/app/api/user/register/route.ts
+++ b/src/app/api/user/register/route.ts
@@ -1,6 +1,8 @@
-import { NextResponse, NextRequest } from "next/server";
-import { user } from "../data";
+import { NextRequest, NextResponse } from "next/server";
 import avatar3 from "@/public/images/avatar/avatar-3.png";
+
+import { user } from "../data";
+
 export async function POST(request: NextRequest, response: any) {
   try {
     let reqBody = await request.json();
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d56e17d3..03bcd6e5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import {ReactNode} from 'react';
+import { ReactNode } from "react";
 
 type Props = {
   children: ReactNode;
@@ -6,6 +6,6 @@ type Props = {
 
 // Since we have a `not-found.tsx` page on the root, a layout file
 // is required, even if it's just passing children through.
-export default function RootLayout({children}: Props) {
+export default function RootLayout({ children }: Props) {
   return children;
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9456d77d..e75dc0b2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,6 @@
-import {redirect} from 'next/navigation';
+import { redirect } from "next/navigation";
 
 // This page only renders when the app is built statically (output: 'export')
 export default function RootPage() {
-  redirect('/in');
+  redirect("/in");
 }
diff --git a/src/components/features/blocks/earning-block.tsx b/src/components/features/blocks/earning-block.tsx
index 93075f36..45e88079 100644
--- a/src/components/features/blocks/earning-block.tsx
+++ b/src/components/features/blocks/earning-block.tsx
@@ -1,18 +1,22 @@
-"use client"
+"use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { Card, CardContent } from '@/components/ui/card';
-import { useTheme } from "next-themes";
-import { cn } from "@/lib/utils/utils"
 import { useTranslations } from "next-intl";
+import { useTheme } from "next-themes";
+
+import { cn } from "@/lib/utils/utils";
+import { Card, CardContent } from "@/components/ui/card";
+
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 interface EarningBlockProps {
-  title?: string,
+  title?: string;
   className?: string;
   colors?: string[];
   series?: number[];
   labels?: string[];
   height?: number;
-  chartType?: 'donut' | 'pie' | 'radialBar';
+  chartType?: "donut" | "pie" | "radialBar";
   total?: number | string;
   percentage?: string;
 }
@@ -45,7 +49,7 @@ const EarningBlock = ({
       fontWeight: 400,
       labels: {
         colors: mode === "dark" ? "#cbd5e1" : "#0f172a",
-    }
+      },
     },
 
     plotOptions: {
@@ -75,23 +79,21 @@ const EarningBlock = ({
               label: "",
               formatter() {
                 return "70";
-              }
-            }
-          }
-        }
-      }
-    }
+              },
+            },
+          },
+        },
+      },
+    },
   };
-    const t = useTranslations("EcommerceDashboard");
+  const t = useTranslations("EcommerceDashboard");
   return (
     <Card className={cn("", className)}>
       <CardContent className="py-3 px-4">
         <div className="flex flex-col gap-2 md:flex-row items-center">
           <div className="flex-1">
             <div className="text-sm text-default-600  mb-1.5">{title}</div>
-            <div className="text-lg text-default-900  font-medium mb-1.5">
-              {total}
-            </div>
+            <div className="text-lg text-default-900  font-medium mb-1.5">{total}</div>
             <div className="font-normal text-xs text-default-600 whitespace-nowrap">
               <span className="text-primary me-1">{percentage}</span>
               {t("statistics_graph_desc")}
@@ -112,4 +114,4 @@ const EarningBlock = ({
   );
 };
 
-export default EarningBlock;
\ No newline at end of file
+export default EarningBlock;
diff --git a/src/components/features/blocks/orders-block.tsx b/src/components/features/blocks/orders-block.tsx
index 354f4587..e66e03af 100644
--- a/src/components/features/blocks/orders-block.tsx
+++ b/src/components/features/blocks/orders-block.tsx
@@ -1,19 +1,23 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"));
-import { cn } from "@/lib/utils/utils"
-import { Card, CardContent } from "@/components/ui/card";
 import { useTheme } from "next-themes";
+
+import { cn } from "@/lib/utils/utils";
+import { Card, CardContent } from "@/components/ui/card";
+
+const Chart = dynamic(() => import("react-apexcharts"));
+
 interface OrdersnBlockProps {
   className?: string;
   series?: number[];
   chartColor?: string;
-  chartType?: 'area' | 'bar' | 'line' | 'pie' | 'donut' | 'radialBar'
-  opacity?: number,
-  title?: string,
-  total?: number | string,
-  height?: number,
-  percentageContent?: React.ReactNode
+  chartType?: "area" | "bar" | "line" | "pie" | "donut" | "radialBar";
+  opacity?: number;
+  title?: string;
+  total?: number | string;
+  height?: number;
+  percentageContent?: React.ReactNode;
 }
 
 const OrdersBlock = ({
@@ -25,13 +29,13 @@ const OrdersBlock = ({
   title = "Order Block",
   total,
   height = 42,
-  percentageContent = <span className="text-warning">-60% </span>
+  percentageContent = <span className="text-warning">-60% </span>,
 }: OrdersnBlockProps) => {
   const { theme: mode } = useTheme();
   const chartSeries = [
     {
-      data: series
-    }
+      data: series,
+    },
   ];
 
   const options: any = {
@@ -47,7 +51,7 @@ const OrdersBlock = ({
       },
       sparkline: {
         enabled: true,
-      }
+      },
     },
 
     plotOptions: {
@@ -109,28 +113,17 @@ const OrdersBlock = ({
         low: 0,
         offsetX: 0,
         show: false,
-      }
-    }
+      },
+    },
   };
   return (
     <Card className={cn("p-4", className)}>
       <CardContent className="p-0 ">
-        {
-          title && (
-            <div className="text-sm text-default-600 mb-1.5">
-              {title}
-            </div>
-          )
-        }
-        {total && (
-          <div className="text-lg text-default-900 font-medium mb-1.5">
-            {total}
-          </div>
-        )
-        }
+        {title && <div className="text-sm text-default-600 mb-1.5">{title}</div>}
+        {total && <div className="text-lg text-default-900 font-medium mb-1.5">{total}</div>}
         <div className="font-normal text-xs text-default-600">
           {percentageContent}
-        <span className="ms-1">From last Week</span>
+          <span className="ms-1">From last Week</span>
         </div>
         <div className="mt-5">
           <Chart
@@ -142,8 +135,8 @@ const OrdersBlock = ({
           />
         </div>
       </CardContent>
-    </Card >
+    </Card>
   );
 };
 
-export default OrdersBlock;
\ No newline at end of file
+export default OrdersBlock;
diff --git a/src/components/features/blocks/progress-block.tsx b/src/components/features/blocks/progress-block.tsx
index af8c7393..7645bd21 100644
--- a/src/components/features/blocks/progress-block.tsx
+++ b/src/components/features/blocks/progress-block.tsx
@@ -1,18 +1,22 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
-import { cn } from "@/lib/utils/utils"
 import { useTheme } from "next-themes";
+
+import { cn } from "@/lib/utils/utils";
+
 import { Card, CardContent } from "../../ui/card";
 
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 interface ProgressBlockProps {
-  title?: string,
+  title?: string;
   className?: string;
   colors?: string[];
   series?: number[];
   labels?: string[];
   height?: number;
-  chartType?: 'donut' | 'pie' | 'radialBar';
+  chartType?: "donut" | "pie" | "radialBar";
 }
 
 const ProgressBlock = ({
@@ -22,7 +26,8 @@ const ProgressBlock = ({
   labels = ["Complete", "Left"],
   series = [70, 30],
   chartType = "donut",
-  colors = ["#0CE7FA", "#E2F6FD"] }: ProgressBlockProps) => {
+  colors = ["#0CE7FA", "#E2F6FD"],
+}: ProgressBlockProps) => {
   const { theme: mode } = useTheme();
 
   const options: any = {
@@ -69,34 +74,26 @@ const ProgressBlock = ({
               label: "",
               formatter() {
                 return "70";
-              }
-            }
-          }
-        }
-      }
-    }
+              },
+            },
+          },
+        },
+      },
+    },
   };
 
   return (
     <Card className={cn("", className)}>
       <CardContent className="py-[18px] px-4">
-        {
-          title &&
+        {title && (
           <div className="text-default-500 dark:text-default-900  text-sm font-medium mb-3">
             {title}
           </div>
-        }
-        <Chart
-          options={options}
-          series={series}
-          type={chartType}
-          height={height}
-          width={"100%"}
-        />
+        )}
+        <Chart options={options} series={series} type={chartType} height={height} width={"100%"} />
       </CardContent>
     </Card>
   );
 };
 
 export default ProgressBlock;
-
diff --git a/src/components/features/blocks/statistics-block.tsx b/src/components/features/blocks/statistics-block.tsx
index 14daffdc..8d7c03cb 100644
--- a/src/components/features/blocks/statistics-block.tsx
+++ b/src/components/features/blocks/statistics-block.tsx
@@ -1,8 +1,11 @@
-"use client"
+"use client";
+
 import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils/utils"
-import { Card, CardContent } from "@/components/ui/card";
 import { useTheme } from "next-themes";
+
+import { cn } from "@/lib/utils/utils";
+import { Card, CardContent } from "@/components/ui/card";
+
 const Chart = dynamic(() => import("react-apexcharts"));
 interface StatsBlock {
   className?: string;
@@ -10,13 +13,12 @@ interface StatsBlock {
   total?: number | string;
   series?: number[];
   chartColor?: string;
-  chartType?: 'area' | 'bar' | 'line' | 'pie' | 'donut' | 'radialBar';
-  opacity?: number
+  chartType?: "area" | "bar" | "line" | "pie" | "donut" | "radialBar";
+  opacity?: number;
 }
 
 const defaultData = [800, 600, 1000, 800, 600, 1000, 800, 900];
 
-
 const StatisticsBlock = ({
   title = " Static Block",
   total,
@@ -24,14 +26,13 @@ const StatisticsBlock = ({
   series = defaultData,
   chartColor = "#00EBFF",
   chartType = "area",
-  opacity = 0.1
-
+  opacity = 0.1,
 }: StatsBlock) => {
   const { theme: mode } = useTheme();
   const chartSeries = [
     {
-      data: series
-    }
+      data: series,
+    },
   ];
 
   const options: any = {
@@ -93,30 +94,19 @@ const StatisticsBlock = ({
         low: 0,
         offsetX: 0,
         show: false,
-      }
-    }
+      },
+    },
   };
   return (
     <Card className={cn("  ", className)}>
       <CardContent className=" py-[18px] px-4 ">
-
         <div className="flex gap-6">
           <div className="flex-none">
-            <Chart
-              options={options}
-              series={chartSeries}
-              type={chartType}
-              height={48}
-              width={48}
-            />
+            <Chart options={options} series={chartSeries} type={chartType} height={48} width={48} />
           </div>
           <div className="flex-1">
-            <div className="text-default-800  text-sm mb-1 font-medium">
-              {title}
-            </div>
-            <div className="text-default-900  text-lg font-medium">
-              {total}
-            </div>
+            <div className="text-default-800  text-sm mb-1 font-medium">{title}</div>
+            <div className="text-default-900  text-lg font-medium">{total}</div>
           </div>
         </div>
       </CardContent>
@@ -124,4 +114,4 @@ const StatisticsBlock = ({
   );
 };
 
-export { StatisticsBlock };
\ No newline at end of file
+export { StatisticsBlock };
diff --git a/src/components/features/blocks/status-block.tsx b/src/components/features/blocks/status-block.tsx
index d37493c9..b5ffb169 100644
--- a/src/components/features/blocks/status-block.tsx
+++ b/src/components/features/blocks/status-block.tsx
@@ -1,9 +1,13 @@
-"use client"
+"use client";
+
 import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils/utils"
-import { Card, CardContent } from "@/components/ui/card";
-const Chart = dynamic(() => import("react-apexcharts"));
 import { useTheme } from "next-themes";
+
+import { cn } from "@/lib/utils/utils";
+import { Card, CardContent } from "@/components/ui/card";
+
+const Chart = dynamic(() => import("react-apexcharts"));
+
 interface StatusBlockProps {
   className?: string;
   icon?: React.ReactNode;
@@ -12,9 +16,9 @@ interface StatusBlockProps {
   series?: number[];
   chartColor?: string;
   iconWrapperClass?: string;
-  chartType?: 'area' | 'bar' | 'line' | 'pie' | 'donut' | 'radialBar'
-  reverse?: boolean
-  opacity?: number
+  chartType?: "area" | "bar" | "line" | "pie" | "donut" | "radialBar";
+  reverse?: boolean;
+  opacity?: number;
 }
 
 const StatusBlock = ({
@@ -27,13 +31,13 @@ const StatusBlock = ({
   iconWrapperClass,
   chartType = "area",
   reverse = false,
-  opacity = 0.1
+  opacity = 0.1,
 }: StatusBlockProps) => {
   const { theme: mode } = useTheme();
   const chartSeries = [
     {
-      data: series
-    }
+      data: series,
+    },
   ];
 
   const options: any = {
@@ -101,55 +105,43 @@ const StatusBlock = ({
         low: 0,
         offsetX: 0,
         show: false,
-      }
-    }
+      },
+    },
   };
   return (
-    <Card className={cn('', className,)}>
+    <Card className={cn("", className)}>
       <CardContent className="p-4">
-        <div className={cn('flex gap-3', {
-          'flex-row-reverse': reverse
-        })}>
-          {
-            icon &&
+        <div
+          className={cn("flex gap-3", {
+            "flex-row-reverse": reverse,
+          })}
+        >
+          {icon && (
             <div className="flex-none">
               <div
-                className={cn("h-12 w-12 rounded-full flex flex-col items-center justify-center text-2xl bg-default/10", iconWrapperClass)}
+                className={cn(
+                  "h-12 w-12 rounded-full flex flex-col items-center justify-center text-2xl bg-default/10",
+                  iconWrapperClass
+                )}
               >
                 {icon}
               </div>
             </div>
-          }
+          )}
 
           {(title || total) && (
             <div className="flex-1">
-              {title && (
-                <div className="text-default-600 text-sm font-medium">
-                  {title}
-                </div>
-              )}
-              {total && (
-                <div className="text-default-900 text-lg font-medium">
-                  {total}
-                </div>
-              )}
+              {title && <div className="text-default-600 text-sm font-medium">{title}</div>}
+              {total && <div className="text-default-900 text-lg font-medium">{total}</div>}
             </div>
           )}
-
         </div>
         <div className="ms-auto max-w-[124px]">
-          <Chart
-            options={options}
-            series={chartSeries}
-            type={chartType}
-            height={41}
-            width={124}
-          />
+          <Chart options={options} series={chartSeries} type={chartType} height={41} width={124} />
         </div>
       </CardContent>
-    </Card >
-
+    </Card>
   );
 };
 
-export { StatusBlock };
\ No newline at end of file
+export { StatusBlock };
diff --git a/src/components/features/blocks/upgrade-block.tsx b/src/components/features/blocks/upgrade-block.tsx
index c9b23dfd..ad39c149 100644
--- a/src/components/features/blocks/upgrade-block.tsx
+++ b/src/components/features/blocks/upgrade-block.tsx
@@ -1,5 +1,4 @@
-
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 interface UpgradeProps {
   image?: any;
@@ -8,13 +7,8 @@ interface UpgradeProps {
 }
 const UpgradeBlock = ({ children, className }: UpgradeProps) => {
   return (
-    <div
-      className={cn("p-6 relative bg-default-900  rounded-2xl", className)}
-    >
-      {children}
-    </div>
+    <div className={cn("p-6 relative bg-default-900  rounded-2xl", className)}>{children}</div>
   );
 };
 
-
-export { UpgradeBlock };
\ No newline at end of file
+export { UpgradeBlock };
diff --git a/src/components/features/blocks/welcome-block.tsx b/src/components/features/blocks/welcome-block.tsx
index 9e8157b1..8528177c 100644
--- a/src/components/features/blocks/welcome-block.tsx
+++ b/src/components/features/blocks/welcome-block.tsx
@@ -1,27 +1,30 @@
+import { cn } from "@/lib/utils/utils";
 
-import { cn } from "@/lib/utils/utils"
 interface WelcomeProps {
   image?: any;
   children: React.ReactNode;
   badge?: string;
   className?: string;
 }
-const WelcomeBlock = ({ children, className, }: WelcomeProps) => {
+const WelcomeBlock = ({ children, className }: WelcomeProps) => {
+  return (
+    <div className={cn("bg-no-repeat bg-cover bg-center p-4 rounded-md relative z-10", className)}>
+      {children}
+    </div>
+  );
+};
+
+const BlockBadge = ({ children, className }: { children: React.ReactNode; className?: string }) => {
   return (
     <div
-      className={cn('bg-no-repeat bg-cover bg-center p-4 rounded-md relative z-10', className)}
+      className={cn(
+        "absolute z-10 top-1/2 -translate-y-1/2   end-6 mt-2 h-12 w-12 bg-primary-foreground dark:bg-default-900 dark:text-default-100 rounded-full text-xs font-medium flex flex-col items-center justify-center",
+        className
+      )}
     >
       {children}
     </div>
   );
 };
 
-const BlockBadge = ({ children, className }: { children: React.ReactNode, className?: string }) => {
-  return (
-    <div className={cn('absolute z-10 top-1/2 -translate-y-1/2   end-6 mt-2 h-12 w-12 bg-primary-foreground dark:bg-default-900 dark:text-default-100 rounded-full text-xs font-medium flex flex-col items-center justify-center', className)} >
-      {children}
-    </div >
-  )
-}
-
-export { WelcomeBlock, BlockBadge };
\ No newline at end of file
+export { WelcomeBlock, BlockBadge };
diff --git a/src/components/features/ecommarce/product-counter-button.tsx b/src/components/features/ecommarce/product-counter-button.tsx
index 55db4b73..cca5bab8 100644
--- a/src/components/features/ecommarce/product-counter-button.tsx
+++ b/src/components/features/ecommarce/product-counter-button.tsx
@@ -1,41 +1,48 @@
-'use client'
-import React from 'react'
-import { Icon } from "@/components/ui/icon"
-import { cn } from "@/lib/utils/utils"
+"use client";
+
+import React from "react";
+
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
 
 const ProductCounterButton = ({ className }: { className?: string }) => {
-    const [count, setCount] = React.useState<number>(1)
-    const handleIncreaseQuantity = () => {
-
-        if (count < 10) {
-            setCount(count + 1)
-        }
-
+  const [count, setCount] = React.useState<number>(1);
+  const handleIncreaseQuantity = () => {
+    if (count < 10) {
+      setCount(count + 1);
     }
-    const handleDecreaseQuantity = () => {
-
-        if (count > 0) {
-            setCount(count - 1)
-        }
+  };
+  const handleDecreaseQuantity = () => {
+    if (count > 0) {
+      setCount(count - 1);
     }
-    return (
-        <div className={cn('flex-1 h-8 md:max-w-[112px] max-w-[95px] flex border   delay-150 ease-in-out  divide-x-[1px] rtl:divide-x-reverse text-sm font-normal divide-border  rounded', className)}>
-            <button className="md:px-3 px-2 disabled:cursor-not-allowed" onClick={handleDecreaseQuantity}
-                disabled={count === 0}
-            >
-                <Icon icon="eva:minus-fill" className="text-default-700" />
-            </button>
-            <span className="flex-1 text-xs  text-center flex items-center justify-center text-default-700">
-                {count}
-            </span>
-            <button
-                disabled={count === 10}
-                onClick={handleIncreaseQuantity}
-                className="md:px-3 px-2 disabled:cursor-not-allowed">
-                <Icon icon="eva:plus-fill" className="text-default-700" />
-            </button>
-        </div>
-    )
-}
+  };
+  return (
+    <div
+      className={cn(
+        "flex-1 h-8 md:max-w-[112px] max-w-[95px] flex border   delay-150 ease-in-out  divide-x-[1px] rtl:divide-x-reverse text-sm font-normal divide-border  rounded",
+        className
+      )}
+    >
+      <button
+        className="md:px-3 px-2 disabled:cursor-not-allowed"
+        onClick={handleDecreaseQuantity}
+        disabled={count === 0}
+      >
+        <Icon icon="eva:minus-fill" className="text-default-700" />
+      </button>
+      <span className="flex-1 text-xs  text-center flex items-center justify-center text-default-700">
+        {count}
+      </span>
+      <button
+        disabled={count === 10}
+        onClick={handleIncreaseQuantity}
+        className="md:px-3 px-2 disabled:cursor-not-allowed"
+      >
+        <Icon icon="eva:plus-fill" className="text-default-700" />
+      </button>
+    </div>
+  );
+};
 
-export default ProductCounterButton
\ No newline at end of file
+export default ProductCounterButton;
diff --git a/src/components/features/editor/custom-editor.js b/src/components/features/editor/custom-editor.js
index d3e7a7d6..f28746b2 100644
--- a/src/components/features/editor/custom-editor.js
+++ b/src/components/features/editor/custom-editor.js
@@ -15,13 +15,27 @@ function CustomEditor(props) {
         props.onChange(data);
       }}
       config={{
-        toolbar: [ 'heading', 'fontsize', 'bold', 'italic', 'link', 'numberedList', 'bulletedList', 'undo', 'redo', 'alignment', 'outdent', 'indent', 'blockQuote', 'insertTable', 'codeBlock', 'sourceEditing']
+        toolbar: [
+          "heading",
+          "fontsize",
+          "bold",
+          "italic",
+          "link",
+          "numberedList",
+          "bulletedList",
+          "undo",
+          "redo",
+          "alignment",
+          "outdent",
+          "indent",
+          "blockQuote",
+          "insertTable",
+          "codeBlock",
+          "sourceEditing",
+        ],
       }}
     />
   );
 }
 
 export default CustomEditor;
-
-
-
diff --git a/src/components/features/form/account-report/account-report-form.tsx b/src/components/features/form/account-report/account-report-form.tsx
index a479ca9b..651c4c89 100644
--- a/src/components/features/form/account-report/account-report-form.tsx
+++ b/src/components/features/form/account-report/account-report-form.tsx
@@ -1,15 +1,29 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import { useTranslations } from "next-intl";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { createTask, createTaskTa, getTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { loading } from "@/lib/utils/swal";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -19,32 +33,18 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import {
-  createTask,
-  createTaskTa,
-  getTask,
-  getUserLevelForAssignments,
-} from "@/lib/services/task";
-import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
-import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Textarea } from "@/components/ui/textarea";
-import { FormLabel } from "@/components/ui/form";
-import { getUserReports, saveUserReportsAction } from "@/lib/services/report/report";
-import { postBlog } from "@/lib/services/blog/blog";
+
 import { Link } from "@/i18n/navigation";
 
+import { postBlog } from "@/lib/services/blog/blog";
+import { detailMedia } from "@/lib/services/curated-content/curated-content";
+import { getUserReports, saveUserReportsAction } from "@/lib/services/report/report";
+import { FormLabel } from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
+
 const reportSchema = z.object({
   reportedBy: z.string().min(1, { message: "Judul diperlukan" }),
   user: z.string().min(1, { message: "Judul diperlukan" }),
@@ -176,13 +176,10 @@ export default function FormAccountReport() {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
         console.log("polda", response?.data?.data?.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -194,10 +191,7 @@ export default function FormAccountReport() {
     fetchPoldaPolres();
   }, []);
 
-  const handleUnitChange = (
-    key: keyof typeof unitSelection,
-    value: boolean
-  ) => {
+  const handleUnitChange = (key: keyof typeof unitSelection, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -308,9 +302,7 @@ export default function FormAccountReport() {
                   )}
                 />
                 {errors.reportedBy?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.reportedBy.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.reportedBy.message}</p>
                 )}
               </div>
               <div className="space-y-2 mt-3 w-6/12">
@@ -339,16 +331,11 @@ export default function FormAccountReport() {
                   control={control}
                   name="message"
                   render={({ field: { onChange, value } }) => (
-                    <Textarea
-                      defaultValue={detail?.message}
-                      placeholder="Enter Title"
-                    />
+                    <Textarea defaultValue={detail?.message} placeholder="Enter Title" />
                   )}
                 />
                 {errors.message?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.message.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.message.message}</p>
                 )}
               </div>
               <div className="mt-3 space-y-2 w-6/12">
diff --git a/src/components/features/form/blog/blog--detail-form.tsx b/src/components/features/form/blog/blog--detail-form.tsx
index 9decc964..06e2e7bb 100644
--- a/src/components/features/form/blog/blog--detail-form.tsx
+++ b/src/components/features/form/blog/blog--detail-form.tsx
@@ -1,15 +1,30 @@
 "use client";
+
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import * as z from "zod";
+
+import { getBlog, postBlog } from "@/lib/services/blog/blog";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+} from "@/lib/services/content/content";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,28 +32,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-} from "@/lib/services/content/content";
-import { getBlog, postBlog } from "@/lib/services/blog/blog";
-import { Badge } from "@/components/ui/badge";
-import dynamic from "next/dynamic";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   slug: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  narration: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  narration: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   categoryName: z.string().min(1, { message: "Kategori diperlukan" }),
 });
 
@@ -232,9 +232,7 @@ export default function FormBlogDetail() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
 
@@ -248,9 +246,7 @@ export default function FormBlogDetail() {
                     )}
                   />
                   {errors.narration?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.narration.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.narration.message}</p>
                   )}
                 </div>
                 <div className=" py-3">
@@ -270,9 +266,7 @@ export default function FormBlogDetail() {
                       )}
                     />
                     {errors.slug?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.slug.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.slug.message}</p>
                     )}
                   </div>
                 </div>
@@ -293,9 +287,7 @@ export default function FormBlogDetail() {
                       )}
                     />
                     {errors.meta?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.meta.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.meta.message}</p>
                     )}
                   </div>
                 </div>
@@ -330,10 +322,7 @@ export default function FormBlogDetail() {
                 </Card>
               </div>
               <div className="px-3 py-3 mt-6">
-                <label
-                  htmlFor="kategori"
-                  className="block text-sm font-medium text-gray-700"
-                >
+                <label htmlFor="kategori" className="block text-sm font-medium text-gray-700">
                   Kategori
                 </label>
                 <Controller
@@ -352,10 +341,7 @@ export default function FormBlogDetail() {
                       </SelectTrigger>
                       <SelectContent>
                         {categories.map((category) => (
-                          <SelectItem
-                            key={category.id}
-                            value={category.categoryName}
-                          >
+                          <SelectItem key={category.id} value={category.categoryName}>
                             {category.categoryName}
                           </SelectItem>
                         ))}
@@ -369,10 +355,7 @@ export default function FormBlogDetail() {
                   <Label>Tag</Label>
                   <div className="flex flex-wrap gap-2">
                     {detail?.tags?.split(",").map((tag, index) => (
-                      <Badge
-                        key={index}
-                        className="border rounded-md  px-2 py-2"
-                      >
+                      <Badge key={index} className="border rounded-md  px-2 py-2">
                         {tag.trim()}
                       </Badge>
                     ))}
diff --git a/src/components/features/form/blog/blog--update-form.tsx b/src/components/features/form/blog/blog--update-form.tsx
index 612c0821..79e42c11 100644
--- a/src/components/features/form/blog/blog--update-form.tsx
+++ b/src/components/features/form/blog/blog--update-form.tsx
@@ -1,15 +1,31 @@
 "use client";
+
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import * as z from "zod";
+
+import { getBlog, postBlog, uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+} from "@/lib/services/content/content";
+import { loading } from "@/lib/utils/swal";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,29 +33,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-} from "@/lib/services/content/content";
-import { getBlog, postBlog, uploadThumbnailBlog } from "@/lib/services/blog/blog";
-import { Badge } from "@/components/ui/badge";
-import dynamic from "next/dynamic";
-import { loading } from "@/lib/utils/swal";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   slug: z.string().min(1, { message: "Judul diperlukan" }),
   metadata: z.string().min(1, { message: "Judul diperlukan" }),
-  narration: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  narration: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   categoryId: z.string().min(1, { message: "Kategori diperlukan" }),
 });
 
@@ -259,9 +259,7 @@ export default function FormBlogUpdate() {
   };
 
   const handleEditTag = (index: number, newValue: string) => {
-    setTags((prevTags) =>
-      prevTags.map((tag, i) => (i === index ? newValue : tag))
-    );
+    setTags((prevTags) => prevTags.map((tag, i) => (i === index ? newValue : tag)));
   };
 
   return (
@@ -289,9 +287,7 @@ export default function FormBlogUpdate() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
 
@@ -301,16 +297,11 @@ export default function FormBlogUpdate() {
                     control={control}
                     name="narration"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={detail?.narration || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={detail?.narration || value} />
                     )}
                   />
                   {errors.narration?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.narration.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.narration.message}</p>
                   )}
                 </div>
                 <div className=" py-3">
@@ -330,9 +321,7 @@ export default function FormBlogUpdate() {
                       )}
                     />
                     {errors.slug?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.slug.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.slug.message}</p>
                     )}
                   </div>
                 </div>
@@ -353,9 +342,7 @@ export default function FormBlogUpdate() {
                       )}
                     />
                     {errors.metadata?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.metadata.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.metadata.message}</p>
                     )}
                   </div>
                 </div>
@@ -366,20 +353,12 @@ export default function FormBlogUpdate() {
             <Card className="h-[600px] sm:h-[850px] lg:h-[700px]">
               <div className="px-3 py-3">
                 <Label htmlFor="fileInput">Gambar Utama</Label>
-                <input
-                  id="fileInput"
-                  type="file"
-                  onChange={handleImageChange}
-                />
+                <input id="fileInput" type="file" onChange={handleImageChange} />
 
                 {preview ? (
                   // Menampilkan pratinjau gambar yang baru dipilih
                   <div className="mt-3 px-3">
-                    <img
-                      src={preview}
-                      alt="Thumbnail Preview"
-                      className="w-full h-auto rounded"
-                    />
+                    <img src={preview} alt="Thumbnail Preview" className="w-full h-auto rounded" />
                   </div>
                 ) : (
                   // Menampilkan gambar dari `detail.thumbnailLink` jika tidak ada file yang dipilih
@@ -398,10 +377,7 @@ export default function FormBlogUpdate() {
                 )}
               </div>
               <div className="px-3 py-3 mt-6">
-                <label
-                  htmlFor="kategori"
-                  className="block text-sm font-medium text-gray-700"
-                >
+                <label htmlFor="kategori" className="block text-sm font-medium text-gray-700">
                   Kategori
                 </label>
                 <Controller
@@ -476,11 +452,7 @@ export default function FormBlogUpdate() {
                 </Button>
               </div> */}
               <div className="mt-4">
-                <Button
-                  type="submit"
-                  color="primary"
-                  onClick={() => handleSave()}
-                >
+                <Button type="submit" color="primary" onClick={() => handleSave()}>
                   Submit
                 </Button>
               </div>
diff --git a/src/components/features/form/blog/blog-form.tsx b/src/components/features/form/blog/blog-form.tsx
index f872f372..353cee46 100644
--- a/src/components/features/form/blog/blog-form.tsx
+++ b/src/components/features/form/blog/blog-form.tsx
@@ -1,15 +1,31 @@
 "use client";
+
+import { error } from "console";
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useRouter } from "next/navigation";
+import * as z from "zod";
+
+import { postBlog, uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+} from "@/lib/services/content/content";
+import { loading } from "@/lib/utils/swal";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,29 +33,13 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-} from "@/lib/services/content/content";
-import { postBlog, uploadThumbnailBlog } from "@/lib/services/blog/blog";
-import dynamic from "next/dynamic";
-import { error } from "console";
-import { loading } from "@/lib/utils/swal";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   slug: z.string().min(1, { message: "Judul diperlukan" }),
   meta: z.string().min(1, { message: "Judul diperlukan" }),
-  narration: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  narration: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
 });
 
 type Category = {
@@ -304,9 +304,7 @@ export default function FormBlog() {
                   )}
                 />
                 {errors.narration?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.narration.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.narration.message}</p>
                 )}
               </div>
               <div className=" py-3">
@@ -326,9 +324,7 @@ export default function FormBlog() {
                     )}
                   />
                   {errors.slug?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.slug.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.slug.message}</p>
                   )}
                 </div>
               </div>
@@ -349,9 +345,7 @@ export default function FormBlog() {
                     )}
                   />
                   {errors.meta?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.meta.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.meta.message}</p>
                   )}
                 </div>
               </div>
@@ -366,18 +360,11 @@ export default function FormBlog() {
             </div>
             {preview && (
               <div className="mt-3 px-3">
-                <img
-                  src={preview}
-                  alt="Thumbnail Preview"
-                  className="w-full h-auto rounded"
-                />
+                <img src={preview} alt="Thumbnail Preview" className="w-full h-auto rounded" />
               </div>
             )}
             <div className="px-3 py-3">
-              <label
-                htmlFor="kategori"
-                className="block text-sm font-medium text-gray-700"
-              >
+              <label htmlFor="kategori" className="block text-sm font-medium text-gray-700">
                 Kategori
               </label>
               <Select
@@ -448,20 +435,12 @@ export default function FormBlog() {
           </Card>
           <div className="flex flex-row justify-end gap-3">
             <div className="mt-4">
-              <Button
-                type="submit"
-                color="success"
-                onClick={() => handlePublish()}
-              >
+              <Button type="submit" color="success" onClick={() => handlePublish()}>
                 Publish
               </Button>
             </div>
             <div className="mt-4">
-              <Button
-                type="submit"
-                color="primary"
-                onClick={() => handleSave()}
-              >
+              <Button type="submit" color="primary" onClick={() => handleSave()}>
                 Submit
               </Button>
             </div>
diff --git a/src/components/features/form/broadcast/content-blast-form.tsx b/src/components/features/form/broadcast/content-blast-form.tsx
index 7de150a3..d6967a77 100644
--- a/src/components/features/form/broadcast/content-blast-form.tsx
+++ b/src/components/features/form/broadcast/content-blast-form.tsx
@@ -1,39 +1,26 @@
 "use client";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
+
+import { useEffect, useRef, useState } from "react";
+import { useParams } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import withReactContent from "sweetalert2-react-content";
+import JoditEditor from "jodit-react";
+import { useForm } from "react-hook-form";
+import Select from "react-select";
+import makeAnimated from "react-select/animated";
 import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { z } from "zod";
 
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-
-import {
-  getLocaleTime,
-  getLocaleTimestamp,
-  textEllipsis,
-} from "@/lib/utils/globals";
+import { error } from "@/config/swal";
 import {
   detailMediaSummary,
   getMediaBlastCampaignList,
   saveMediaBlastBroadcast,
   saveMediaBlastCampaign,
 } from "@/lib/services/broadcast/broadcast";
-import { error } from "@/config/swal";
-import { useRouter } from "@/i18n/navigation";
-import JoditEditor from "jodit-react";
-import { useEffect, useRef, useState } from "react";
-import { useParams } from "next/navigation";
-import Select from "react-select";
-import makeAnimated from "react-select/animated";
-import { Textarea } from "@/components/ui/textarea";
+import { getLocaleTime, getLocaleTimestamp, textEllipsis } from "@/lib/utils/globals";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -41,6 +28,9 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { Form, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 
 const animatedComponent = makeAnimated();
 
@@ -146,10 +136,7 @@ export default function ContentBlast(props: { type: string }) {
         }</h3><p style='padding:0 20px;margin:0;margin-bottom:10px'>
               ${textEllipsis(details?.description, 150)}</p></div></div>`;
         form.setValue("title", `${details?.title}`);
-        form.setValue(
-          "url",
-          details?.pageUrl || "https://mediahub.polri.go.id"
-        );
+        form.setValue("url", details?.pageUrl || "https://mediahub.polri.go.id");
         if (type == "wa") {
           body = `${textEllipsis(details?.description, 150)}`;
           form.setValue("detail", body);
@@ -186,10 +173,7 @@ export default function ContentBlast(props: { type: string }) {
 
   return (
     <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit)}
-        className="space-y-3 bg-white rounded-sm p-4"
-      >
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
         <p className="fonnt-semibold">Broadcast</p>
         <FormField
           control={form.control}
@@ -216,11 +200,7 @@ export default function ContentBlast(props: { type: string }) {
           render={({ field }) => (
             <FormItem>
               <FormLabel>Subject</FormLabel>
-              <Input
-                value={field.value}
-                placeholder="Masukkan Judul"
-                onChange={field.onChange}
-              />
+              <Input value={field.value} placeholder="Masukkan Judul" onChange={field.onChange} />
 
               <FormMessage />
             </FormItem>
@@ -248,13 +228,7 @@ export default function ContentBlast(props: { type: string }) {
           )}
         />
         <div className="flex flex-row gap-2 mt-4 pt-4">
-          <Button
-            size="md"
-            type="button"
-            variant="outline"
-            color="destructive"
-            className="text-xs"
-          >
+          <Button size="md" type="button" variant="outline" color="destructive" className="text-xs">
             Cancel
           </Button>
           <Button size="md" type="submit" color="primary" className="text-xs">
@@ -267,21 +241,14 @@ export default function ContentBlast(props: { type: string }) {
               <DialogTitle>Email Terkirim</DialogTitle>
             </DialogHeader>
             <div className="flex flex-col justify-center items-center gap-3 mb-3 text-sm">
-              <img
-                src="/assets/img/illust-for-broadcast-sent.png"
-                className="w-[70%]"
-              />
+              <img src="/assets/img/illust-for-broadcast-sent.png" className="w-[70%]" />
               Untuk melihat Email Terkirim silahkan cek menu “Sent”!
             </div>
             <DialogFooter className="flex justify-center">
               <Button type="button" color="success">
                 Menu "Sent"
               </Button>
-              <Button
-                type="button"
-                onClick={() => router.push("/admin/broadcast")}
-                color="primary"
-              >
+              <Button type="button" onClick={() => router.push("/admin/broadcast")} color="primary">
                 Okay
               </Button>
             </DialogFooter>
diff --git a/src/components/features/form/communication/collaboration-form.tsx b/src/components/features/form/communication/collaboration-form.tsx
index 42a756d5..2abf70f8 100644
--- a/src/components/features/form/communication/collaboration-form.tsx
+++ b/src/components/features/form/communication/collaboration-form.tsx
@@ -1,32 +1,29 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { SelectContent, SelectItem, SelectTrigger, SelectValue } from "@radix-ui/react-select";
+import JoditEditor from "jodit-react";
+import { Controller, useForm } from "react-hook-form";
+import Select from "react-select";
+import makeAnimated from "react-select/animated";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useRouter } from "next/navigation";
-import JoditEditor from "jodit-react";
+import * as z from "zod";
+
 import {
   getCuratorUser,
   getTicketingPriority,
   saveTicketing,
   saveTicketingInternal,
 } from "@/lib/services/communication/communication";
-import makeAnimated from "react-select/animated";
-import Select from "react-select";
-import {
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@radix-ui/react-select";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { SelectGroup } from "@/components/ui/select";
-import dynamic from "next/dynamic";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -70,12 +67,8 @@ export default function FormCollaboration() {
   const [mainType, setMainType] = useState<number>(1);
   const [type, setType] = useState<string>("1");
   const [options, setOptions] = useState<Option[]>([]);
-  const [ticketPriority, setTicketPriority] = useState<
-    { value: number; label: string }[]
-  >([]);
-  const [selectedOption, setSelectedOption] = useState<Option | undefined>(
-    undefined
-  );
+  const [ticketPriority, setTicketPriority] = useState<{ value: number; label: string }[]>([]);
+  const [selectedOption, setSelectedOption] = useState<Option | undefined>(undefined);
   const animatedComponent = makeAnimated();
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [selectedTarget, setSelectedTarget] = useState<number | null>(null);
@@ -240,9 +233,7 @@ export default function FormCollaboration() {
                 <Select
                   id="target-select"
                   options={ticketPriority}
-                  onChange={(selectedOption) =>
-                    setSelectedTarget(Number(selectedOption?.value))
-                  }
+                  onChange={(selectedOption) => setSelectedTarget(Number(selectedOption?.value))}
                   placeholder="Pilih"
                   styles={{
                     control: (base) => ({
@@ -279,9 +270,7 @@ export default function FormCollaboration() {
                 )}
               />
               {errors.naration?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.naration.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.naration.message}</p>
               )}
             </div>
           </div>
diff --git a/src/components/features/form/communication/escalation-detail-form.tsx b/src/components/features/form/communication/escalation-detail-form.tsx
index 3a28f0d2..2a106161 100644
--- a/src/components/features/form/communication/escalation-detail-form.tsx
+++ b/src/components/features/form/communication/escalation-detail-form.tsx
@@ -1,24 +1,17 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { id } from "date-fns/locale";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import * as z from "zod";
+
 import {
   getEscalationDiscussion,
   getTicketingDetail,
@@ -26,11 +19,20 @@ import {
   getTicketingInternalDiscussion,
   saveTicketInternalReply,
 } from "@/lib/services/communication/communication";
-import { Textarea } from "@/components/ui/textarea";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Link } from "@/i18n/navigation";
 import { loading } from "@/lib/utils/swal";
-import { id } from "date-fns/locale";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -150,9 +152,7 @@ export default function FormDetailEscalation() {
 
                 <div>
                   <p>
-                    <span className="font-bold">
-                      {detail?.commentFromUserName}
-                    </span>
+                    <span className="font-bold">{detail?.commentFromUserName}</span>
                     {` `}
                     mengirimkan pesan untuk{` `}
                     <Link
@@ -208,10 +208,7 @@ export default function FormDetailEscalation() {
           </div>
           <div className="mt-5 px-3">
             <Label>Prioritas</Label>
-            <Select
-              onValueChange={setSelectedPriority}
-              value={detail?.priority?.name}
-            >
+            <Select onValueChange={setSelectedPriority} value={detail?.priority?.name}>
               <SelectTrigger size="md" className="w-3/12">
                 <SelectValue placeholder="Pilih" />
               </SelectTrigger>
@@ -255,10 +252,7 @@ export default function FormDetailEscalation() {
           </div>
 
           <div className="mx-3">
-            <label
-              htmlFor="replyMessage"
-              className="block text-gray-700 font-medium mb-2"
-            >
+            <label htmlFor="replyMessage" className="block text-gray-700 font-medium mb-2">
               Tulis Tanggapan Anda
             </label>
             <textarea
diff --git a/src/components/features/form/communication/escalation-detail-new-form.tsx b/src/components/features/form/communication/escalation-detail-new-form.tsx
index b3bbaebc..25a01ae0 100644
--- a/src/components/features/form/communication/escalation-detail-new-form.tsx
+++ b/src/components/features/form/communication/escalation-detail-new-form.tsx
@@ -1,24 +1,19 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Description } from "@radix-ui/react-toast";
+import { id } from "date-fns/locale";
+import { ChevronDownIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import * as z from "zod";
+
 import {
   getCuratorUser,
   getEscalationDiscussion,
@@ -30,21 +25,25 @@ import {
   saveTicketInternalReply,
   saveTicketsQuestion,
 } from "@/lib/services/communication/communication";
-import { Textarea } from "@/components/ui/textarea";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Link } from "@/i18n/navigation";
-import { loading } from "@/lib/utils/swal";
-import { id } from "date-fns/locale";
-import { DetailTicket } from "../ticketing/info-lainnya-types";
-import { Description } from "@radix-ui/react-toast";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ChevronDownIcon } from "lucide-react";
 import { getOperatorUser } from "@/lib/services/management-user/management-user";
+import { loading } from "@/lib/utils/swal";
 import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+import { DetailTicket } from "../ticketing/info-lainnya-types";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -91,16 +90,14 @@ export default function FormQuestionsDetail() {
   const [detailTickets, setDetailTickets] = useState<DetailTicket | null>(null);
   const [selectedPriority, setSelectedPriority] = useState("");
   const [selectedStatus, setSelectedStatus] = useState("");
-  const [operatorOpt, setOperatorOpt] = useState<
-    { id: string; label: string; value: string }[]
-  >([]);
+  const [operatorOpt, setOperatorOpt] = useState<{ id: string; label: string; value: string }[]>(
+    []
+  );
   const [curatorOpt, setCuratorOpt] = useState<
     { id: string; label: string; value: string; badge: string }[]
   >([]);
   const [selectedOperator, setSelectedOperator] = useState<string[]>([]);
-  const [selectedOperatorEscalation, setSelectedOperatorEscalation] = useState<
-    string[]
-  >([]);
+  const [selectedOperatorEscalation, setSelectedOperatorEscalation] = useState<string[]>([]);
   // const [replies, setReplies] = useState([
   //   // {
   //   //   id: 1,
@@ -156,9 +153,7 @@ export default function FormQuestionsDetail() {
 
       // Ambil escalationTeams seperti ":891:"
       if (detail?.escalationTeams) {
-        const teamIds = detail.escalationTeams
-          .split(":")
-          .filter((id: string) => id); // hapus string kosong
+        const teamIds = detail.escalationTeams.split(":").filter((id: string) => id); // hapus string kosong
         setSelectedOperatorEscalation(teamIds); // set ke state
       }
 
@@ -182,9 +177,7 @@ export default function FormQuestionsDetail() {
 
         // 👇 Parse `assignedTeams` ke dalam array string
         if (detailTickets?.assignedTeams) {
-          const assigned = detailTickets.assignedTeams
-            .split(":")
-            .filter((id: string) => id); // hapus string kosong
+          const assigned = detailTickets.assignedTeams.split(":").filter((id: string) => id); // hapus string kosong
           setSelectedOperator(assigned);
         }
       }
@@ -329,9 +322,7 @@ export default function FormQuestionsDetail() {
 
                 <div>
                   <p>
-                    <span className="font-bold">
-                      {detail?.commentFromUserName}
-                    </span>
+                    <span className="font-bold">{detail?.commentFromUserName}</span>
                     {` `}
                     mengirimkan pesan untuk{` `}
                     <Link
@@ -387,10 +378,7 @@ export default function FormQuestionsDetail() {
           </div>
           <div className="mt-5 px-3">
             <Label>Prioritas</Label>
-            <Select
-              onValueChange={setSelectedPriority}
-              value={detail?.priority?.name}
-            >
+            <Select onValueChange={setSelectedPriority} value={detail?.priority?.name}>
               <SelectTrigger size="md" className="w-3/12">
                 <SelectValue placeholder="Pilih" />
               </SelectTrigger>
@@ -409,9 +397,7 @@ export default function FormQuestionsDetail() {
               {selectedOperator.length > 0 && (
                 <div className="flex flex-col gap-2 mb-2">
                   {selectedOperator.map((id) => {
-                    const label = operatorOpt.find(
-                      (op: any) => op.value === id
-                    )?.label;
+                    const label = operatorOpt.find((op: any) => op.value === id)?.label;
                     return (
                       <div
                         key={id}
@@ -421,9 +407,7 @@ export default function FormQuestionsDetail() {
                         <button
                           type="button"
                           onClick={() =>
-                            setSelectedOperator((prev) =>
-                              prev.filter((val) => val !== id)
-                            )
+                            setSelectedOperator((prev) => prev.filter((val) => val !== id))
                           }
                           className="ml-2 text-gray-500 hover:text-red-600"
                         >
@@ -455,14 +439,9 @@ export default function FormQuestionsDetail() {
                           checked={selectedOperator.includes(op.value)}
                           onChange={(e) => {
                             if (e.target.checked) {
-                              setSelectedOperator((prev) => [
-                                ...prev,
-                                op.value,
-                              ]);
+                              setSelectedOperator((prev) => [...prev, op.value]);
                             } else {
-                              setSelectedOperator((prev) =>
-                                prev.filter((val) => val !== op.value)
-                              );
+                              setSelectedOperator((prev) => prev.filter((val) => val !== op.value));
                             }
                           }}
                         />
@@ -495,9 +474,7 @@ export default function FormQuestionsDetail() {
               {selectedOperatorEscalation.length > 0 && (
                 <div className="flex flex-col gap-2 mb-2">
                   {selectedOperatorEscalation.map((id) => {
-                    const operator = curatorOpt.find(
-                      (op: any) => op.value === id
-                    );
+                    const operator = curatorOpt.find((op: any) => op.value === id);
 
                     if (!operator) return null;
 
@@ -509,9 +486,7 @@ export default function FormQuestionsDetail() {
                         <div>
                           <div className="font-semibold">{operator.label}</div>
                           {operator.badge && (
-                            <div className="text-xs text-gray-500">
-                              {operator.badge}
-                            </div>
+                            <div className="text-xs text-gray-500">{operator.badge}</div>
                           )}
                         </div>
                         <button
@@ -547,9 +522,7 @@ export default function FormQuestionsDetail() {
                       setReplyMessage((prev) => ({
                         ...prev,
                         [item.id]:
-                          prev[item.id] !== undefined
-                            ? ""
-                            : `@${item.messageFrom?.fullname} `,
+                          prev[item.id] !== undefined ? "" : `@${item.messageFrom?.fullname} `,
                       }))
                     }
                     className="text-blue-600"
@@ -599,9 +572,7 @@ export default function FormQuestionsDetail() {
                 {/* List Balasan */}
                 {item.children?.map((child: any) => (
                   <div key={child.id} className="ml-4 mt-2 border-l pl-4">
-                    <p className="font-semibold">
-                      {child.messageFrom?.fullname}
-                    </p>
+                    <p className="font-semibold">{child.messageFrom?.fullname}</p>
                     <p>{child.message}</p>
                     <small className="text-gray-500">{child.createdAt}</small>
                   </div>
@@ -611,10 +582,7 @@ export default function FormQuestionsDetail() {
 
             {/* Form Tanggapan Baru */}
             <div className="mt-4">
-              <label
-                htmlFor="replyMessage"
-                className="block text-gray-700 font-medium mb-2"
-              >
+              <label htmlFor="replyMessage" className="block text-gray-700 font-medium mb-2">
                 Tulis Tanggapan Anda
               </label>
               <textarea
diff --git a/src/components/features/form/communication/escalation-forward-form.tsx b/src/components/features/form/communication/escalation-forward-form.tsx
index 82b75f92..2ef02584 100644
--- a/src/components/features/form/communication/escalation-forward-form.tsx
+++ b/src/components/features/form/communication/escalation-forward-form.tsx
@@ -1,23 +1,21 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Description } from "@radix-ui/react-toast";
+import { id } from "date-fns/locale";
+import { ChevronDownIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
+import Select from "react-select";
+import makeAnimated from "react-select/animated";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import * as z from "zod";
+
 import {
   getCuratorUser,
   getEscalationDiscussion,
@@ -28,22 +26,18 @@ import {
   saveTicketInternalReply,
   saveTicketsQuestion,
 } from "@/lib/services/communication/communication";
-import { Textarea } from "@/components/ui/textarea";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Link } from "@/i18n/navigation";
-import { loading } from "@/lib/utils/swal";
-import { id } from "date-fns/locale";
-import { DetailTicket } from "../ticketing/info-lainnya-types";
-import { Description } from "@radix-ui/react-toast";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ChevronDownIcon } from "lucide-react";
 import { getOperatorUser } from "@/lib/services/management-user/management-user";
-import makeAnimated from "react-select/animated";
-import Select from "react-select";
+import { loading } from "@/lib/utils/swal";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+import { DetailTicket } from "../ticketing/info-lainnya-types";
 
 interface Option {
   id: string;
@@ -98,20 +92,16 @@ export default function FormQuestionsForward() {
 
   const [detailTickets, setDetailTickets] = useState<DetailTicket | null>(null);
   // const [selectedPriority, setSelectedPriority] = useState("");
-  const [selectedPriority, setSelectedPriority] = useState<OptionType | null>(
-    null
-  );
+  const [selectedPriority, setSelectedPriority] = useState<OptionType | null>(null);
   const [replyMessage, setReplyMessage] = useState("");
   const [selectedStatus, setSelectedStatus] = useState("");
-  const [operatorOpt, setOperatorOpt] = useState<
-    { id: string; label: string; value: string }[]
-  >([]);
+  const [operatorOpt, setOperatorOpt] = useState<{ id: string; label: string; value: string }[]>(
+    []
+  );
   const [selectedOperator, setSelectedOperator] = useState<string[]>([]);
   const [options, setOptions] = useState<Option[]>([]);
   const animatedComponent = makeAnimated();
-  const [selectedOption, setSelectedOption] = useState<Option | undefined>(
-    undefined
-  );
+  const [selectedOption, setSelectedOption] = useState<Option | undefined>(undefined);
   const [replies, setReplies] = useState([
     {
       id: 1,
@@ -286,9 +276,7 @@ export default function FormQuestionsForward() {
 
                 <div>
                   <p>
-                    <span className="font-bold">
-                      {detail?.commentFromUserName}
-                    </span>
+                    <span className="font-bold">{detail?.commentFromUserName}</span>
                     {` `}
                     mengirimkan pesan untuk{` `}
                     <Link
@@ -357,9 +345,7 @@ export default function FormQuestionsForward() {
               {selectedOperator.length > 0 && (
                 <div className="flex flex-col gap-2 mb-2">
                   {selectedOperator.map((id) => {
-                    const label = operatorOpt.find(
-                      (op: any) => op.value === id
-                    )?.label;
+                    const label = operatorOpt.find((op: any) => op.value === id)?.label;
                     return (
                       <div
                         key={id}
@@ -369,9 +355,7 @@ export default function FormQuestionsForward() {
                         <button
                           type="button"
                           onClick={() =>
-                            setSelectedOperator((prev) =>
-                              prev.filter((val) => val !== id)
-                            )
+                            setSelectedOperator((prev) => prev.filter((val) => val !== id))
                           }
                           className="ml-2 text-gray-500 hover:text-red-600"
                         >
@@ -403,14 +387,9 @@ export default function FormQuestionsForward() {
                           checked={selectedOperator.includes(op.value)}
                           onChange={(e) => {
                             if (e.target.checked) {
-                              setSelectedOperator((prev) => [
-                                ...prev,
-                                op.value,
-                              ]);
+                              setSelectedOperator((prev) => [...prev, op.value]);
                             } else {
-                              setSelectedOperator((prev) =>
-                                prev.filter((val) => val !== op.value)
-                              );
+                              setSelectedOperator((prev) => prev.filter((val) => val !== op.value));
                             }
                           }}
                         />
@@ -442,9 +421,7 @@ export default function FormQuestionsForward() {
               <Controller
                 control={control}
                 name="description"
-                render={({ field }) => (
-                  <Textarea {...field} placeholder="Masukkan description" />
-                )}
+                render={({ field }) => <Textarea {...field} placeholder="Masukkan description" />}
               />
             </div>
 
diff --git a/src/components/features/form/communication/internal-detail-form.tsx b/src/components/features/form/communication/internal-detail-form.tsx
index 684195ee..00625f9f 100644
--- a/src/components/features/form/communication/internal-detail-form.tsx
+++ b/src/components/features/form/communication/internal-detail-form.tsx
@@ -1,16 +1,27 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { list } from "postcss";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
+import * as z from "zod";
+
+import {
+  getTicketingInternalDetail,
+  getTicketingInternalDiscussion,
+  saveTicketInternalReply,
+} from "@/lib/services/communication/communication";
+import { htmlToString } from "@/lib/utils/globals";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -18,15 +29,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import {
-  getTicketingInternalDetail,
-  getTicketingInternalDiscussion,
-  saveTicketInternalReply,
-} from "@/lib/services/communication/communication";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { list } from "postcss";
-import { htmlToString } from "@/lib/utils/globals";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -94,9 +96,7 @@ export default function FormDetailInternal() {
 
   const [detail, setDetail] = useState<taskDetail>();
   const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
-  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(
-    null
-  );
+  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(null);
   const [replyVisible, setReplyVisible] = useState(false);
   const [replyMessage, setReplyMessage] = useState("");
   const [selectedPriority, setSelectedPriority] = useState("");
@@ -205,11 +205,7 @@ export default function FormDetailInternal() {
                 placeholder="Tulis pesan di sini..."
               />
               <div className="flex justify-end gap-3 my-2">
-                <Button
-                  onClick={() => setReplyVisible(false)}
-                  color="default"
-                  variant="outline"
-                >
+                <Button onClick={() => setReplyVisible(false)} color="default" variant="outline">
                   Batal
                 </Button>
                 <Button onClick={handleSendReply} color="primary">
@@ -229,13 +225,9 @@ export default function FormDetailInternal() {
                   <Icon icon="qlementine-icons:user-16" width={36} />
                   <div>
                     <p>
-                      <span className="font-bold text-sm">
-                        {list?.messageFrom?.fullname}
-                      </span>{" "}
+                      <span className="font-bold text-sm">{list?.messageFrom?.fullname}</span>{" "}
                       mengirimkan pesan untuk{" "}
-                      <span className="font-bold text-sm">
-                        {list?.messageTo?.fullname}
-                      </span>
+                      <span className="font-bold text-sm">{list?.messageTo?.fullname}</span>
                     </p>
                     <p className="text-xs">
                       {`${new Date(list?.createdAt).getDate()}-${
@@ -259,26 +251,18 @@ export default function FormDetailInternal() {
                         {ticketInternal?.createdBy?.fullname}
                       </span>{" "}
                       mengirimkan pesan untuk{" "}
-                      <span className="font-bold text-sm">
-                        {ticketInternal?.sendTo?.fullname}
-                      </span>
+                      <span className="font-bold text-sm">{ticketInternal?.sendTo?.fullname}</span>
                     </p>
                     <p className="text-xs">
                       {`${new Date(ticketInternal?.createdAt).getDate()}-${
                         new Date(ticketInternal?.createdAt).getMonth() + 1
-                      }-${new Date(
+                      }-${new Date(ticketInternal?.createdAt).getFullYear()} ${new Date(
                         ticketInternal?.createdAt
-                      ).getFullYear()} ${new Date(
-                        ticketInternal?.createdAt
-                      ).getHours()}:${new Date(
-                        ticketInternal?.createdAt
-                      ).getMinutes()}`}
+                      ).getHours()}:${new Date(ticketInternal?.createdAt).getMinutes()}`}
                     </p>
                   </div>
                 </div>
-                <p className="p-4 bg-white text-sm">
-                  {htmlToString(ticketInternal.message)}
-                </p>
+                <p className="p-4 bg-white text-sm">{htmlToString(ticketInternal.message)}</p>
               </div>
             )}
           </div>
@@ -309,10 +293,7 @@ export default function FormDetailInternal() {
             </div>
             <div className="mt-5 px-3">
               <Label>Prioritas</Label>
-              <Select
-                onValueChange={setSelectedPriority}
-                value={detail?.priority?.name}
-              >
+              <Select onValueChange={setSelectedPriority} value={detail?.priority?.name}>
                 <SelectTrigger size="md">
                   <SelectValue placeholder="Pilih" />
                 </SelectTrigger>
@@ -325,10 +306,7 @@ export default function FormDetailInternal() {
             </div>
             <div className="mt-5 px-3 mb-3">
               <Label>Status</Label>
-              <Select
-                onValueChange={setSelectedStatus}
-                value={detail?.status?.name}
-              >
+              <Select onValueChange={setSelectedStatus} value={detail?.status?.name}>
                 <SelectTrigger size="md">
                   <SelectValue placeholder="Pilih" />
                 </SelectTrigger>
diff --git a/src/components/features/form/communication/internal-edit-form.tsx b/src/components/features/form/communication/internal-edit-form.tsx
index 365f172f..77b7ad1b 100644
--- a/src/components/features/form/communication/internal-edit-form.tsx
+++ b/src/components/features/form/communication/internal-edit-form.tsx
@@ -1,16 +1,27 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import * as z from "zod";
+
+import {
+  getTicketingInternalDetail,
+  getTicketingInternalDiscussion,
+  saveTicketing,
+  saveTicketInternalReply,
+} from "@/lib/services/communication/communication";
+import { htmlToString } from "@/lib/utils/globals";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -18,16 +29,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import {
-  getTicketingInternalDetail,
-  getTicketingInternalDiscussion,
-  saveTicketing,
-  saveTicketInternalReply,
-} from "@/lib/services/communication/communication";
 import { Textarea } from "@/components/ui/textarea";
-import { htmlToString } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
 
 const taskSchema = z.object({
   // description: z.string().min(2, {
@@ -212,11 +214,7 @@ export default function FormEditInternal() {
                 placeholder="Tulis pesan di sini..."
               />
               <div className="flex justify-end gap-3 mt-2">
-                <Button
-                  onClick={() => setReplyVisible(false)}
-                  color="default"
-                  variant="outline"
-                >
+                <Button onClick={() => setReplyVisible(false)} color="default" variant="outline">
                   Batal
                 </Button>
                 <Button onClick={handleSendReply} color="primary">
@@ -236,23 +234,14 @@ export default function FormEditInternal() {
 
                   <div>
                     <p>
-                      <span className="font-bold">
-                        {list?.messageFrom?.fullname}
-                      </span>{" "}
-                      mengirimkan pesan untuk{" "}
-                      <span className="font-bold">
-                        {list?.messageTo?.fullname}
-                      </span>
+                      <span className="font-bold">{list?.messageFrom?.fullname}</span> mengirimkan
+                      pesan untuk <span className="font-bold">{list?.messageTo?.fullname}</span>
                     </p>
-                    <p className="text-xs">{`${new Date(
-                      list?.createdAt
-                    ).getDate()}-${
+                    <p className="text-xs">{`${new Date(list?.createdAt).getDate()}-${
                       new Date(list?.createdAt).getMonth() + 1
                     }-${new Date(list?.createdAt).getFullYear()} ${new Date(
                       list?.createdAt
-                    ).getHours()}:${new Date(
-                      list?.createdAt
-                    ).getMinutes()}`}</p>
+                    ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}</p>
                   </div>
                 </div>
                 <p className="pl-3 bg-white py-2">{list.message}</p>
@@ -287,10 +276,7 @@ export default function FormEditInternal() {
               </div>
               <div className="mt-5 px-3">
                 <Label>Prioritas</Label>
-                <Select
-                  onValueChange={setSelectedPriority}
-                  value={selectedPriority}
-                >
+                <Select onValueChange={setSelectedPriority} value={selectedPriority}>
                   <SelectTrigger size="md">
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
@@ -303,10 +289,7 @@ export default function FormEditInternal() {
               </div>
               <div className="mt-5 px-3 mb-3">
                 <Label>Status</Label>
-                <Select
-                  onValueChange={setSelectedStatus}
-                  value={selectedStatus}
-                >
+                <Select onValueChange={setSelectedStatus} value={selectedStatus}>
                   <SelectTrigger size="md">
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
diff --git a/src/components/features/form/communication/internal-form.tsx b/src/components/features/form/communication/internal-form.tsx
index 5c166018..84e116f4 100644
--- a/src/components/features/form/communication/internal-form.tsx
+++ b/src/components/features/form/communication/internal-form.tsx
@@ -1,32 +1,28 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { SelectContent, SelectItem, SelectTrigger, SelectValue } from "@radix-ui/react-select";
+import JoditEditor from "jodit-react";
+import { Controller, useForm } from "react-hook-form";
+import Select from "react-select";
+import makeAnimated from "react-select/animated";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useRouter } from "next/navigation";
+import * as z from "zod";
 
-import JoditEditor from "jodit-react";
 import {
   getCuratorUser,
   getTicketingPriority,
   saveTicketingInternal,
 } from "@/lib/services/communication/communication";
-import makeAnimated from "react-select/animated";
-import Select from "react-select";
-import {
-  SelectTrigger,
-  SelectValue,
-  SelectContent,
-  SelectItem,
-} from "@radix-ui/react-select";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import { SelectGroup } from "@/components/ui/select";
-import dynamic from "next/dynamic";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -72,9 +68,7 @@ export default function FormInternal() {
   const [type, setType] = useState<string>("1");
   const [options, setOptions] = useState<Option[]>([]);
   const [ticketPriority, setTicketPriority] = useState([]);
-  const [selectedOption, setSelectedOption] = useState<Option | undefined>(
-    undefined
-  );
+  const [selectedOption, setSelectedOption] = useState<Option | undefined>(undefined);
   const animatedComponent = makeAnimated();
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [selectedTarget, setSelectedTarget] = useState("");
@@ -228,9 +222,7 @@ export default function FormInternal() {
                 <Select
                   id="target-select"
                   options={priority}
-                  onChange={(selectedOption) =>
-                    setSelectedTarget(selectedOption?.value || "")
-                  }
+                  onChange={(selectedOption) => setSelectedTarget(selectedOption?.value || "")}
                   placeholder="Pilih"
                   styles={{
                     control: (base) => ({
@@ -265,9 +257,7 @@ export default function FormInternal() {
                 )}
               />
               {errors.naration?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.naration.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.naration.message}</p>
               )}
             </div>
           </div>
diff --git a/src/components/features/form/communication/questions-reply-form.tsx b/src/components/features/form/communication/questions-reply-form.tsx
index 0b14e3a5..4364c043 100644
--- a/src/components/features/form/communication/questions-reply-form.tsx
+++ b/src/components/features/form/communication/questions-reply-form.tsx
@@ -1,24 +1,20 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Description } from "@radix-ui/react-toast";
+import { ChevronDownIcon } from "lucide-react";
+import { list, parse } from "postcss";
+import { Controller, useForm } from "react-hook-form";
+import { useMediaQuery } from "react-responsive";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import * as z from "zod";
+
 import {
   deleteTicket,
   getQuestionTicket,
@@ -31,24 +27,26 @@ import {
   saveTicketReply,
   saveTicketsQuestion,
 } from "@/lib/services/communication/communication";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { list, parse } from "postcss";
-import { htmlToString } from "@/lib/utils/globals";
-import { Textarea } from "@/components/ui/textarea";
-import { error } from "@/lib/utils/swal";
-import { useRouter } from "next/navigation";
-import { useMediaQuery } from "react-responsive";
-import { DetailTicket } from "../ticketing/info-lainnya-types";
-import InfoLainnyaModal from "../ticketing/info-lainnya";
-import { Description } from "@radix-ui/react-toast";
-import { Link } from "@/i18n/navigation";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ChevronDownIcon } from "lucide-react";
 import { getOperatorUser } from "@/lib/services/management-user/management-user";
+import { htmlToString } from "@/lib/utils/globals";
+import { error } from "@/lib/utils/swal";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+import InfoLainnyaModal from "../ticketing/info-lainnya";
+import { DetailTicket } from "../ticketing/info-lainnya-types";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -121,11 +119,8 @@ export default function FormQuestionsReply() {
   });
   const [detail, setDetail] = useState<taskDetail>();
   const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
-  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(
-    null
-  );
-  const [detailTicketsQuestions, setDetailTicketsQuestions] =
-    useState<internalDetail | null>(null);
+  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(null);
+  const [detailTicketsQuestions, setDetailTicketsQuestions] = useState<internalDetail | null>(null);
   const [detailTickets, setDetailTickets] = useState<DetailTicket | null>(null);
   const [replyVisible, setReplyVisible] = useState(false);
   const [replyMessage, setReplyMessage] = useState("");
@@ -134,9 +129,9 @@ export default function FormQuestionsReply() {
   const [openEmergencyModal, setOpenEmergencyModal] = useState(false);
   const [replyValue, setReplyValue] = useState<number>(0);
   const [replyText, setReplyText] = useState<string>("");
-  const [operatorOpt, setOperatorOpt] = useState<
-    { id: string; label: string; value: string }[]
-  >([]);
+  const [operatorOpt, setOperatorOpt] = useState<{ id: string; label: string; value: string }[]>(
+    []
+  );
   const [selectedOperator, setSelectedOperator] = useState<string[]>([]);
   const {
     control,
@@ -367,11 +362,7 @@ export default function FormQuestionsReply() {
                 placeholder="Tulis pesan di sini..."
               />
               <div className="flex justify-end gap-3 my-2">
-                <Button
-                  onClick={() => setReplyVisible(false)}
-                  color="default"
-                  variant="outline"
-                >
+                <Button onClick={() => setReplyVisible(false)} color="default" variant="outline">
                   Batal
                 </Button>
                 <Button onClick={handleSendReply} color="primary">
@@ -392,13 +383,8 @@ export default function FormQuestionsReply() {
                     <Icon icon="qlementine-icons:user-16" width={36} />
                     <div>
                       <p className="text-sm">
-                        <span className="font-bold">
-                          {list?.user?.fullname}
-                        </span>{" "}
-                        mengirimkan balasan{" "}
-                        <span className="font-bold">
-                          {list?.messageTo?.fullname}
-                        </span>
+                        <span className="font-bold">{list?.user?.fullname}</span> mengirimkan
+                        balasan <span className="font-bold">{list?.messageTo?.fullname}</span>
                       </p>
                       <p className="text-xs">
                         {new Date(list.createdAt).toLocaleString("id-ID", {
@@ -418,13 +404,8 @@ export default function FormQuestionsReply() {
                     </div>
                     <div>
                       <p className="text-sm">
-                        <span className="font-bold">
-                          {list?.user?.fullname}
-                        </span>{" "}
-                        mengirimkan balasan{" "}
-                        <span className="font-bold">
-                          {list?.messageTo?.fullname}
-                        </span>
+                        <span className="font-bold">{list?.user?.fullname}</span> mengirimkan
+                        balasan <span className="font-bold">{list?.messageTo?.fullname}</span>
                       </p>
                       <p className="text-xs">
                         {new Date(list.createdAt).toLocaleString("id-ID", {
@@ -452,37 +433,23 @@ export default function FormQuestionsReply() {
                         {detailTicketsQuestions?.commentFromUserName}
                       </span>{" "}
                       mengirimkan komentar untuk{" "}
-                      <span className="font-bold text-sm">
-                        {detailTicketsQuestions?.feedTitle}
-                      </span>
+                      <span className="font-bold text-sm">{detailTicketsQuestions?.feedTitle}</span>
                     </p>
                     <p className="text-xs">
-                      {`${new Date(
+                      {`${new Date(detailTicketsQuestions?.createdAt).getDate()}-${
+                        new Date(detailTicketsQuestions?.createdAt).getMonth() + 1
+                      }-${new Date(detailTicketsQuestions?.createdAt).getFullYear()} ${new Date(
                         detailTicketsQuestions?.createdAt
-                      ).getDate()}-${
-                        new Date(detailTicketsQuestions?.createdAt).getMonth() +
-                        1
-                      }-${new Date(
-                        detailTicketsQuestions?.createdAt
-                      ).getFullYear()} ${new Date(
-                        detailTicketsQuestions?.createdAt
-                      ).getHours()}:${new Date(
-                        detailTicketsQuestions?.createdAt
-                      ).getMinutes()}`}
+                      ).getHours()}:${new Date(detailTicketsQuestions?.createdAt).getMinutes()}`}
                     </p>
                   </div>
                 </div>
                 <div className="p-4 bg-white text-sm">
                   <p>{htmlToString(detailTicketsQuestions.message)}</p>
-                  {detailTickets?.typeId === 6 &&
-                  detailTickets?.emergencyIssue ? (
+                  {detailTickets?.typeId === 6 && detailTickets?.emergencyIssue ? (
                     <div className="row mx-0 mb-3 emergency-attachments">
                       <div className="mt-3 mr-4">
-                        <Button
-                          color="primary"
-                          size="md"
-                          onClick={openEmergencyIssueDetail}
-                        >
+                        <Button color="primary" size="md" onClick={openEmergencyIssueDetail}>
                           Info Lainnya
                         </Button>
                       </div>
@@ -524,10 +491,7 @@ export default function FormQuestionsReply() {
 
               <div className="mt-5 px-3">
                 <Label>Prioritas</Label>
-                <Select
-                  onValueChange={setSelectedPriority}
-                  value={selectedPriority}
-                >
+                <Select onValueChange={setSelectedPriority} value={selectedPriority}>
                   <SelectTrigger size="md">
                     <SelectValue placeholder="Pilih Prioritas" />
                   </SelectTrigger>
@@ -546,9 +510,7 @@ export default function FormQuestionsReply() {
                 {selectedOperator.length > 0 && (
                   <div className="flex flex-col gap-2 mb-2">
                     {selectedOperator.map((id) => {
-                      const label = operatorOpt.find(
-                        (op: any) => op.value === id
-                      )?.label;
+                      const label = operatorOpt.find((op: any) => op.value === id)?.label;
                       return (
                         <div
                           key={id}
@@ -558,9 +520,7 @@ export default function FormQuestionsReply() {
                           <button
                             type="button"
                             onClick={() =>
-                              setSelectedOperator((prev) =>
-                                prev.filter((val) => val !== id)
-                              )
+                              setSelectedOperator((prev) => prev.filter((val) => val !== id))
                             }
                             className="ml-2 text-gray-500 hover:text-red-600"
                           >
@@ -575,10 +535,7 @@ export default function FormQuestionsReply() {
                 {/* Popover Checkbox Dropdown */}
                 <Popover>
                   <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
-                      className="w-full justify-between"
-                    >
+                    <Button variant="outline" className="w-full justify-between">
                       Pilih Operator
                       <ChevronDownIcon className="ml-2 h-4 w-4" />
                     </Button>
@@ -595,10 +552,7 @@ export default function FormQuestionsReply() {
                             checked={selectedOperator.includes(op.value)}
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedOperator((prev) => [
-                                  ...prev,
-                                  op.value,
-                                ]);
+                                setSelectedOperator((prev) => [...prev, op.value]);
                               } else {
                                 setSelectedOperator((prev) =>
                                   prev.filter((val) => val !== op.value)
@@ -619,9 +573,7 @@ export default function FormQuestionsReply() {
                 <Controller
                   control={control}
                   name="description"
-                  render={({ field }) => (
-                    <Textarea {...field} placeholder="Masukkan description" />
-                  )}
+                  render={({ field }) => <Textarea {...field} placeholder="Masukkan description" />}
                 />
               </div>
 
diff --git a/src/components/features/form/content/audio-detail-form.tsx b/src/components/features/form/content/audio-detail-form.tsx
index e293600d..b102d36a 100644
--- a/src/components/features/form/content/audio-detail-form.tsx
+++ b/src/components/features/form/content/audio-detail-form.tsx
@@ -1,28 +1,18 @@
 "use client";
+
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { MailIcon, Music } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
 import {
   createMedia,
   getTagsBySubCategoryId,
@@ -32,8 +22,21 @@ import {
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
-import { MailIcon, Music } from "lucide-react";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -41,29 +44,29 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
+
+import dynamic from "next/dynamic";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import WavesurferPlayer from "@wavesurfer/react";
+import { useTranslations } from "next-intl";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+import WaveSurfer from "wavesurfer.js";
+
+import { loading } from "@/config/swal";
+import { error } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import {
-  DialogHeader,
-  DialogFooter,
   Dialog,
   DialogContent,
+  DialogFooter,
+  DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
-import { loading } from "@/config/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { error } from "@/lib/utils/swal";
-import dynamic from "next/dynamic";
-import WavesurferPlayer from "@wavesurfer/react";
-import WaveSurfer from "wavesurfer.js";
-import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -181,12 +184,7 @@ export default function FormAudioDetail() {
   // };
 
   useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
+    if (userLevelId != undefined && roleId != undefined && userLevelId == "216" && roleId == "3") {
       setIsUserMabesApprover(true);
     }
   }, [userLevelId, roleId]);
@@ -214,9 +212,7 @@ export default function FormAudioDetail() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -255,15 +251,11 @@ export default function FormAudioDetail() {
         setupPlacementCheck(details?.files?.length);
 
         if (details.publishedForObject) {
-          const publisherIds = details.publishedForObject.map(
-            (obj: any) => obj.id
-          );
+          const publisherIds = details.publishedForObject.map((obj: any) => obj.id);
           setSelectedPublishers(publisherIds);
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -273,8 +265,7 @@ export default function FormAudioDetail() {
 
         const filesData = details.files || [];
         const audioFiles = filesData.filter(
-          (file: any) =>
-            file.contentType && file.contentType.startsWith("video/webm")
+          (file: any) => file.contentType && file.contentType.startsWith("video/webm")
         );
 
         const fileUrls = audioFiles.map((file: { secondaryUrl: string }) =>
@@ -379,11 +370,7 @@ export default function FormAudioDetail() {
     setRejectedFiles(rejects);
   }
 
-  const setupPlacement = (
-    index: number,
-    placement: string,
-    checked: boolean
-  ) => {
+  const setupPlacement = (index: number, placement: string, checked: boolean) => {
     let temp = [...filePlacements];
     if (checked) {
       if (placement === "all") {
@@ -412,12 +399,7 @@ export default function FormAudioDetail() {
     setFilePlacements(temp);
   };
 
-  const handleMain = (
-    type: string,
-    url: string,
-    names: string,
-    format: string
-  ) => {
+  const handleMain = (type: string, url: string, names: string, format: string) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
       type,
@@ -473,9 +455,7 @@ export default function FormAudioDetail() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -512,9 +492,7 @@ export default function FormAudioDetail() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
 
@@ -539,18 +517,12 @@ export default function FormAudioDetail() {
                       onClick={onPlayPause}
                       disabled={isPlaying}
                       className={`flex items-center gap-2 ${
-                        isPlaying
-                          ? "bg-gray-300 cursor-not-allowed"
-                          : "bg-primary text-white"
+                        isPlaying ? "bg-gray-300 cursor-not-allowed" : "bg-primary text-white"
                       } p-2 rounded`}
                     >
                       {isPlaying ? "Pause" : "Play"}
                       <Icon
-                        icon={
-                          isPlaying
-                            ? "carbon:pause-outline"
-                            : "famicons:play-sharp"
-                        }
+                        icon={isPlaying ? "carbon:pause-outline" : "famicons:play-sharp"}
                         className="h-5 w-5"
                       />
                     </Button>
@@ -578,9 +550,7 @@ export default function FormAudioDetail() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
@@ -589,16 +559,11 @@ export default function FormAudioDetail() {
                 <div className="space-y-2">
                   <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
-                    {detail?.tags
-                      ?.split(",")
-                      .map((tag: string, index: number) => (
-                        <Badge
-                          key={index}
-                          className="border rounded-md  px-2 py-2"
-                        >
-                          {tag.trim()}
-                        </Badge>
-                      ))}
+                    {detail?.tags?.split(",").map((tag: string, index: number) => (
+                      <Badge key={index} className="border rounded-md  px-2 py-2">
+                        {tag.trim()}
+                      </Badge>
+                    ))}
                   </div>
                 </div>
               </div>
@@ -659,11 +624,7 @@ export default function FormAudioDetail() {
                   ""
                 ) : (
                   <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("2")} color="primary" type="button">
                       <Icon icon="fa:check" className="mr-3" /> {t("accept")}
                     </Button>
                     <Button
@@ -671,14 +632,9 @@ export default function FormAudioDetail() {
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
+                      <Icon icon="fa:comment-o" className="mr-3" /> {t("revision")}
                     </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("4")} color="destructive" type="button">
                       <Icon icon="fa:times" className="mr-3" />
                       {t("reject")}
                     </Button>
@@ -695,19 +651,12 @@ export default function FormAudioDetail() {
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
-                        <div
-                          key={file.id}
-                          className="flex flex-row gap-2 items-center"
-                        >
+                        <div key={file.id} className="flex flex-row gap-2 items-center">
                           <img src={file.url} className="w-[200px]" />
                           <div className="flex flex-col gap-2 w-full">
                             <div className="flex justify-between text-sm">
                               {file.fileName}
-                              <a
-                                onClick={() =>
-                                  handleDeleteFileApproval(file.id)
-                                }
-                              >
+                              <a onClick={() => handleDeleteFileApproval(file.id)}>
                                 <Icon icon="humbleicons:times" color="red" />
                               </a>
                             </div>
@@ -717,9 +666,7 @@ export default function FormAudioDetail() {
                                   <Checkbox
                                     id="terms"
                                     value="all"
-                                    checked={filePlacements[index]?.includes(
-                                      "all"
-                                    )}
+                                    checked={filePlacements[index]?.includes("all")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "all", Boolean(e))
                                     }
@@ -734,9 +681,7 @@ export default function FormAudioDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "mabes"
-                                    )}
+                                    checked={filePlacements[index]?.includes("mabes")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "mabes", Boolean(e))
                                     }
@@ -751,9 +696,7 @@ export default function FormAudioDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "polda"
-                                    )}
+                                    checked={filePlacements[index]?.includes("polda")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "polda", Boolean(e))
                                     }
@@ -769,15 +712,9 @@ export default function FormAudioDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "international"
-                                    )}
+                                    checked={filePlacements[index]?.includes("international")}
                                     onCheckedChange={(e) =>
-                                      setupPlacement(
-                                        index,
-                                        "international",
-                                        Boolean(e)
-                                      )
+                                      setupPlacement(index, "international", Boolean(e))
                                     }
                                   />
                                   <label
@@ -803,38 +740,22 @@ export default function FormAudioDetail() {
                   {status == "3" || status == "4" ? (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Kualitas media kurang baik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Kualitas media kurang baik" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Kualitas media kurang baik")
-                        }
+                        onClick={() => setDescription("Kualitas media kurang baik")}
                       >
                         Kualitas media kurang baik
                       </Badge>
 
                       <Badge
-                        color={
-                          description === "Deskripsi kurang lengkap"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Deskripsi kurang lengkap" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Deskripsi kurang lengkap")
-                        }
+                        onClick={() => setDescription("Deskripsi kurang lengkap")}
                       >
                         Deskripsi kurang lengkap
                       </Badge>
                       <Badge
-                        color={
-                          description === "Judul kurang tepat"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Judul kurang tepat" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Judul kurang tepat")}
                       >
@@ -844,22 +765,14 @@ export default function FormAudioDetail() {
                   ) : (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Konten sangat bagus"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten sangat bagus" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten sangat bagus")}
                       >
                         Konten sangat bagus
                       </Badge>
                       <Badge
-                        color={
-                          description === "Konten menarik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten menarik" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten menarik")}
                       >
@@ -868,11 +781,7 @@ export default function FormAudioDetail() {
                     </div>
                   )}
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      color="primary"
-                      onClick={() => submit()}
-                    >
+                    <Button type="button" color="primary" onClick={() => submit()}>
                       {t("submit")}
                     </Button>
                     <Button
diff --git a/src/components/features/form/content/audio-form.tsx b/src/components/features/form/content/audio-form.tsx
index 395fbc27..6c361d70 100644
--- a/src/components/features/form/content/audio-form.tsx
+++ b/src/components/features/form/content/audio-form.tsx
@@ -1,22 +1,47 @@
 "use client";
-import React, {
-  ChangeEvent,
-  useEffect,
-  useRef,
-  Fragment,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { redirect, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { Upload } from "tus-js-client";
+import { Icon } from "@iconify/react";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CloudUpload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error, loading } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/lib/services/content/ai";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -24,37 +49,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-  uploadThumbnail,
-} from "@/lib/services/content/content";
-import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  generateDataArticle,
-  getDetailArticle,
-  getGenerateKeywords,
-  getGenerateTitle,
-} from "@/lib/services/content/ai";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { error, loading } from "@/config/swal";
-import { Item } from "@radix-ui/react-dropdown-menu";
-import dynamic from "next/dynamic";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -107,9 +103,7 @@ export default function FormAudio() {
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
   const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
@@ -335,10 +329,7 @@ export default function FormAudio() {
         throw new Error("Timeout: Artikel belum selesai diproses.");
       };
       const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(
-        /<img[^>]*>/g,
-        ""
-      );
+      const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
@@ -391,9 +382,7 @@ export default function FormAudio() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -414,11 +403,7 @@ export default function FormAudio() {
         setPublishedFor([]);
       } else {
         // Select all checkboxes
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
+        setPublishedFor(options.filter((opt: any) => opt.id !== "all").map((opt: any) => opt.id));
       }
     } else {
       const updatedPublishedFor = publishedFor.includes(id)
@@ -540,12 +525,7 @@ export default function FormAudio() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -578,11 +558,7 @@ export default function FormAudio() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -663,10 +639,7 @@ export default function FormAudio() {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -748,10 +721,7 @@ export default function FormAudio() {
                     </SelectTrigger>
                     <SelectContent>
                       {categories.map((category) => (
-                        <SelectItem
-                          key={category.id}
-                          value={category.id.toString()}
-                        >
+                        <SelectItem key={category.id} value={category.id.toString()}>
                           {category.name}
                         </SelectItem>
                       ))}
@@ -766,9 +736,7 @@ export default function FormAudio() {
                     defaultChecked={isSwitchOn}
                     color="primary"
                     id="c2"
-                    onCheckedChange={(checked: boolean) =>
-                      setIsSwitchOn(checked)
-                    }
+                    onCheckedChange={(checked: boolean) => setIsSwitchOn(checked)}
                   />
                 </div>
               </div>
@@ -795,12 +763,8 @@ export default function FormAudio() {
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="friendly">Friendly</SelectItem>
-                          <SelectItem value="profesional">
-                            Profesional
-                          </SelectItem>
-                          <SelectItem value="informational">
-                            Informational
-                          </SelectItem>
+                          <SelectItem value="profesional">Profesional</SelectItem>
+                          <SelectItem value="informational">Informational</SelectItem>
                           <SelectItem value="neutral">Neutral</SelectItem>
                           <SelectItem value="witty">Witty</SelectItem>
                         </SelectContent>
@@ -813,15 +777,9 @@ export default function FormAudio() {
                           <SelectValue placeholder="Pilih" />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="news">
-                            News (300 - 900 words)
-                          </SelectItem>
-                          <SelectItem value="info">
-                            Info (900 - 2000 words)
-                          </SelectItem>
-                          <SelectItem value="detail">
-                            Detail (2000 - 5000 words)
-                          </SelectItem>
+                          <SelectItem value="news">News (300 - 900 words)</SelectItem>
+                          <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
+                          <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -884,9 +842,7 @@ export default function FormAudio() {
                         {isLoading ? "Generating..." : "Generate"}
                       </Button>
                     </div>
-                    <p className="font-semibold">
-                      {t("Keywords to include in the text")}
-                    </p>
+                    <p className="font-semibold">{t("Keywords to include in the text")}</p>
                     <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
@@ -951,12 +907,7 @@ export default function FormAudio() {
                             target="_blank"
                             rel="noopener noreferrer"
                           >
-                            <Button
-                              className="mb-2"
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
+                            <Button className="mb-2" size="sm" variant={"outline"} color="primary">
                               {t("update")}
                             </Button>
                           </Link>
@@ -977,17 +928,12 @@ export default function FormAudio() {
                         <p className="text-gray-500">Loading Proses Data...</p>
                       </div>
                     ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={articleBody || value} />
                     )
                   }
                 />
                 {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.description.message}</p>
                 )}
               </div>
               <div className="py-3 space-y-2">
@@ -1021,10 +967,7 @@ export default function FormAudio() {
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
                         </div>
-                        <Button
-                          color="destructive"
-                          onClick={handleRemoveAllFiles}
-                        >
+                        <Button color="destructive" onClick={handleRemoveAllFiles}>
                           {t("remove-all")}
                         </Button>
                       </div>
@@ -1054,9 +997,7 @@ export default function FormAudio() {
                   )}
                 />
                 {errors.creatorName?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.creatorName.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                 )}
               </div>
             </div>
@@ -1098,8 +1039,7 @@ export default function FormAudio() {
                       checked={
                         option.id === "all"
                           ? publishedFor.length ===
-                            options.filter((opt: any) => opt.id !== "all")
-                              .length
+                            options.filter((opt: any) => opt.id !== "all").length
                           : publishedFor.includes(option.id)
                       }
                       onCheckedChange={() => handleCheckboxChange(option.id)}
diff --git a/src/components/features/form/content/audio-update-form.tsx b/src/components/features/form/content/audio-update-form.tsx
index ea929a10..a07cde49 100644
--- a/src/components/features/form/content/audio-update-form.tsx
+++ b/src/components/features/form/content/audio-update-form.tsx
@@ -1,34 +1,27 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import ReactAudioPlayer from "react-audio-player";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { FreeMode, Navigation, Thumbs } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { getCsrfToken } from "@/lib/services/auth";
 import {
   createMedia,
   deleteFile,
@@ -37,25 +30,26 @@ import {
   uploadThumbnail,
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon } from "lucide-react";
-import { Swiper, SwiperSlide } from "swiper/react";
-import ReactAudioPlayer from "react-audio-player";
-import { FreeMode, Navigation, Thumbs } from "swiper/modules";
-import { useDropzone } from "react-dropzone";
-import Image from "next/image";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import { error } from "@/lib/utils/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 
 const audioSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -194,9 +188,7 @@ export default function FormAudioUpdate() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -228,9 +220,7 @@ export default function FormAudioUpdate() {
   };
 
   const handleEditTag = (index: number, newValue: string) => {
-    setTags((prevTags) =>
-      prevTags.map((tag, i) => (i === index ? newValue : tag))
-    );
+    setTags((prevTags) => prevTags.map((tag, i) => (i === index ? newValue : tag)));
   };
 
   useEffect(() => {
@@ -261,9 +251,7 @@ export default function FormAudioUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -309,12 +297,8 @@ export default function FormAudioUpdate() {
   const handleCheckboxChange = (id: string) => {
     if (id === "all") {
       // Select all options except "all"
-      const allOptions = options
-        .filter((opt) => opt.id !== "all")
-        .map((opt) => opt.id);
-      setPublishedFor(
-        publishedFor.length === allOptions.length ? [] : allOptions
-      );
+      const allOptions = options.filter((opt) => opt.id !== "all").map((opt) => opt.id);
+      setPublishedFor(publishedFor.length === allOptions.length ? [] : allOptions);
     } else {
       // Toggle individual option
       setPublishedFor((prev) =>
@@ -380,12 +364,7 @@ export default function FormAudioUpdate() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -418,11 +397,7 @@ export default function FormAudioUpdate() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -519,9 +494,7 @@ export default function FormAudioUpdate() {
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
-          <div className="text-sm text-card-foreground">
-            {file.fileName || file.name}
-          </div>
+          <div className="text-sm text-card-foreground">{file.fileName || file.name}</div>
           <div className="text-xs font-light text-muted-foreground">
             {Math.round(file.size / 100) / 10 > 1000 ? (
               <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
@@ -564,8 +537,8 @@ export default function FormAudioUpdate() {
           : [...currentSelections, value];
 
         // If all individual options are selected, include "all" automatically
-        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
-          (opt) => updatedSelections.includes(opt)
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+          updatedSelections.includes(opt)
         );
         return {
           ...prev,
@@ -617,9 +590,7 @@ export default function FormAudioUpdate() {
       }
 
       // Jika berhasil, hapus file dari state lokal
-      setFiles((prevFiles: any) =>
-        prevFiles.filter((file: any) => file.id !== id)
-      );
+      setFiles((prevFiles: any) => prevFiles.filter((file: any) => file.id !== id));
       success();
     } catch (err) {
       error("Terjadi kesalahan saat menghapus file");
@@ -651,9 +622,7 @@ export default function FormAudioUpdate() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -693,9 +662,7 @@ export default function FormAudioUpdate() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
                 <div className="py-3 space-y-2">
@@ -740,16 +707,10 @@ export default function FormAudioUpdate() {
                     ) : null}
                     {files.length > 0 && (
                       <div className="mt-4">
-                        <Label className="text-lg font-semibold">
-                          {" "}
-                          {t("file-media")}
-                        </Label>
+                        <Label className="text-lg font-semibold"> {t("file-media")}</Label>
                         <div className="grid gap-4">
                           {files.map((file: any) => (
-                            <div
-                              key={file.id}
-                              className="flex items-center border p-2 rounded-md"
-                            >
+                            <div key={file.id} className="flex items-center border p-2 rounded-md">
                               <img
                                 src={file.thumbnailFileUrl}
                                 alt={file.fileName}
@@ -771,15 +732,8 @@ export default function FormAudioUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("all")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "all"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("all")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "all")}
                                       className="form-checkbox"
                                     />
                                     <span>{t("all")}</span>
@@ -789,14 +743,9 @@ export default function FormAudioUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("nasional")}
+                                      checked={selectedOptions[file.id]?.includes("nasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "nasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "nasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -807,15 +756,8 @@ export default function FormAudioUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("wilayah")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "wilayah"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("wilayah")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "wilayah")}
                                       className="form-checkbox"
                                     />
                                     <span>Wilayah</span>
@@ -825,14 +767,9 @@ export default function FormAudioUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("internasional")}
+                                      checked={selectedOptions[file.id]?.includes("internasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "internasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "internasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -869,9 +806,7 @@ export default function FormAudioUpdate() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
diff --git a/src/components/features/form/content/audio-update-seo.tsx b/src/components/features/form/content/audio-update-seo.tsx
index e6a24732..bce07e45 100644
--- a/src/components/features/form/content/audio-update-seo.tsx
+++ b/src/components/features/form/content/audio-update-seo.tsx
@@ -1,30 +1,25 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Gauge } from "@mui/x-charts/Gauge";
+import { ArcElement, Chart as ChartJS, ChartOptions, Legend, Tooltip } from "chart.js";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
+import { Pie } from "react-chartjs-2";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
 
-import Cookies from "js-cookie";
+import { getCsrfToken } from "@/lib/services/auth";
+import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
 import {
   createMedia,
   deleteFile,
@@ -34,41 +29,33 @@ import {
   uploadThumbnail,
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
 import { error, loading } from "@/lib/utils/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/editor/view-editor";
-import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
-import { Gauge } from "@mui/x-charts/Gauge";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Pie } from "react-chartjs-2";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend,
-  ChartOptions,
-} from "chart.js";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import ViewEditor from "@/components/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -167,9 +154,7 @@ export default function FormAudioSeo() {
   const [optimizedData, setOptimizedData] = useState<string[]>([]);
   const [errorsData, setErrorData] = useState<string[]>([]);
 
-  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(
-    detail?.category.id
-  );
+  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(detail?.category.id);
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
     mabes: false,
@@ -240,9 +225,7 @@ export default function FormAudioSeo() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -309,8 +292,7 @@ export default function FormAudioSeo() {
       ];
       setWarningSEO(warningList);
       let optimizedList = [
-        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization
-          ?.optimized,
+        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.optimized,
         ...res.data.data?.seo_analysis?.analysis?.content_quality?.optimized,
       ];
       setOptimizedSEO(optimizedList);
@@ -405,12 +387,7 @@ export default function FormAudioSeo() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -443,11 +420,7 @@ export default function FormAudioSeo() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -556,9 +529,7 @@ export default function FormAudioSeo() {
       }
 
       // Jika berhasil, hapus file dari state lokal
-      setFiles((prevFiles: any) =>
-        prevFiles.filter((file: any) => file.id !== id)
-      );
+      setFiles((prevFiles: any) => prevFiles.filter((file: any) => file.id !== id));
       success();
     } catch (err) {
       error("Terjadi kesalahan saat menghapus file");
@@ -594,17 +565,11 @@ export default function FormAudioSeo() {
                   <div className="flex flex-row gap-3 w-full">
                     <div className="w-full">
                       <Label htmlFor="username">Main Keyword</Label>
-                      <Textarea
-                        id="mainKeyword"
-                        value={articleData?.mainKeyword}
-                      />
+                      <Textarea id="mainKeyword" value={articleData?.mainKeyword} />
                     </div>
                     <div className="w-full">
                       <Label htmlFor="username">Additional Keyword</Label>
-                      <Textarea
-                        id="additionalKeywords"
-                        value={articleData?.additionalKeywords}
-                      />
+                      <Textarea id="additionalKeywords" value={articleData?.additionalKeywords} />
                     </div>
                   </div>
                   <div className="flex flex-row gap-3 w-full">
@@ -614,10 +579,7 @@ export default function FormAudioSeo() {
                     </div>
                     <div className="w-full">
                       <Label htmlFor="username">Meta Description</Label>
-                      <Textarea
-                        id="metaDescription"
-                        value={articleData?.metaDescription}
-                      />
+                      <Textarea id="metaDescription" value={articleData?.metaDescription} />
                     </div>
                   </div>
                   <div className="py-3">
@@ -626,16 +588,11 @@ export default function FormAudioSeo() {
                       control={control}
                       name="description"
                       render={({ field: { onChange, value } }) => (
-                        <CustomEditor
-                          onChange={onChange}
-                          initialData={articleBody}
-                        />
+                        <CustomEditor onChange={onChange} initialData={articleBody} />
                       )}
                     />
                     {errors.description?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.description.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.description.message}</p>
                     )}
                   </div>
                 </CardContent>
@@ -654,10 +611,7 @@ export default function FormAudioSeo() {
                 </div>
                 <div className="space-y-1">
                   <Accordion type="single" collapsible className="w-full ">
-                    <AccordionItem
-                      value="error"
-                      className="border border-red-600"
-                    >
+                    <AccordionItem value="error" className="border border-red-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-red-600" />
@@ -677,10 +631,7 @@ export default function FormAudioSeo() {
                       </AccordionContent>
                     </AccordionItem>
 
-                    <AccordionItem
-                      value="warning"
-                      className="border border-yellow-600"
-                    >
+                    <AccordionItem value="warning" className="border border-yellow-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-yellow-600" />
@@ -700,10 +651,7 @@ export default function FormAudioSeo() {
                       </AccordionContent>
                     </AccordionItem>
 
-                    <AccordionItem
-                      value="optimized"
-                      className="border border-green-600"
-                    >
+                    <AccordionItem value="optimized" className="border border-green-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-green-600" />
@@ -735,16 +683,11 @@ export default function FormAudioSeo() {
                     control={control}
                     name="description"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody}
-                      />
+                      <CustomEditor onChange={onChange} initialData={articleBody} />
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
               </CardContent>
diff --git a/src/components/features/form/content/image-ai-form.tsx b/src/components/features/form/content/image-ai-form.tsx
index 576be020..1754679a 100644
--- a/src/components/features/form/content/image-ai-form.tsx
+++ b/src/components/features/form/content/image-ai-form.tsx
@@ -1,15 +1,39 @@
 "use client";
+
+import { register } from "module";
+import { title } from "process";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { Controller, useForm } from "react-hook-form";
+import style from "styled-jsx/style";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useRouter } from "next/navigation";
+import * as z from "zod";
+
+import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/lib/services/content/ai";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/lib/services/content/content";
+import { loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,38 +41,14 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-  uploadThumbnail,
-} from "@/lib/services/content/content";
-import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import { loading } from "@/lib/utils/swal";
-import {
-  generateDataArticle,
-  getDetailArticle,
-  getGenerateKeywords,
-  getGenerateTitle,
-} from "@/lib/services/content/ai";
-import { title } from "process";
-import style from "styled-jsx/style";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
   mainKeyword: z.string().min(1, { message: "Judul diperlukan" }),
   seo: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -92,9 +92,7 @@ export default function FormImageAI() {
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
   const [detailData, setDetailData] = useState<any>(null);
   const [articleImages, setArticleImages] = useState<string[]>([]);
 
@@ -260,10 +258,7 @@ export default function FormImageAI() {
     const res = await getDetailArticle(id);
     const articleData = res?.data?.data;
 
-    const cleanArticleBody = articleData?.articleBody?.replace(
-      /<img[^>]*>/g,
-      ""
-    );
+    const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");
     const articleImagesData = articleData?.imagesUrl?.split(",");
 
     setArticleBody(cleanArticleBody || "");
@@ -305,9 +300,7 @@ export default function FormImageAI() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           setSelectedCategory(findCategory.id);
@@ -414,9 +407,7 @@ export default function FormImageAI() {
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="single-article">
-                      single Article
-                    </SelectItem>
+                    <SelectItem value="single-article">single Article</SelectItem>
                     <SelectItem value="bulk-article">Bulk Article</SelectItem>
                     <SelectItem value="speech-text">Speech to Text</SelectItem>
                   </SelectContent>
@@ -437,10 +428,7 @@ export default function FormImageAI() {
                     </SelectTrigger>
                     <SelectContent>
                       {categories.map((category) => (
-                        <SelectItem
-                          key={category.id}
-                          value={category.id.toString()}
-                        >
+                        <SelectItem key={category.id} value={category.id.toString()}>
                           {category.name}
                         </SelectItem>
                       ))}
@@ -470,9 +458,7 @@ export default function FormImageAI() {
                     <SelectContent>
                       <SelectItem value="friendly">Friendly</SelectItem>
                       <SelectItem value="profesional">Profesional</SelectItem>
-                      <SelectItem value="informational">
-                        Informational
-                      </SelectItem>
+                      <SelectItem value="informational">Informational</SelectItem>
                       <SelectItem value="neutral">Neutral</SelectItem>
                       <SelectItem value="witty">Witty</SelectItem>
                     </SelectContent>
@@ -485,15 +471,9 @@ export default function FormImageAI() {
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="news">
-                        News (300 - 900 words)
-                      </SelectItem>
-                      <SelectItem value="info">
-                        Info (900 - 2000 words)
-                      </SelectItem>
-                      <SelectItem value="detail">
-                        Detail (2000 - 5000 words)
-                      </SelectItem>
+                      <SelectItem value="news">News (300 - 900 words)</SelectItem>
+                      <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
+                      <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                     </SelectContent>
                   </Select>
                 </div>
@@ -556,14 +536,11 @@ export default function FormImageAI() {
                     {isLoading ? "Generating..." : "Generate"}
                   </Button>
                 </div>
-                <p className="font-semibold">
-                  Kata kunci untuk disertakan dalam teks
-                </p>
+                <p className="font-semibold">Kata kunci untuk disertakan dalam teks</p>
                 <p className="text-sm">
-                  JIka Anda tidak Memberikan kata kunci, kami akan secara
-                  otomatis membuat kata kunci yang relevan dari kata kunci utama
-                  untuk setiap bagian dan menggunakannya untuk membuat artikel.
-                  Untuk menambahkan kata kunci baru, ketik &apos;, + kata
+                  JIka Anda tidak Memberikan kata kunci, kami akan secara otomatis membuat kata
+                  kunci yang relevan dari kata kunci utama untuk setiap bagian dan menggunakannya
+                  untuk membuat artikel. Untuk menambahkan kata kunci baru, ketik &apos;, + kata
                   kunci&apos;.
                 </p>
                 <div className="mt-3">
@@ -592,11 +569,7 @@ export default function FormImageAI() {
               </div>
               <div>
                 <div className="my-5">
-                  <Button
-                    variant={"outline"}
-                    color="primary"
-                    onClick={handleGenerateArtikel}
-                  >
+                  <Button variant={"outline"} color="primary" onClick={handleGenerateArtikel}>
                     Generate Article
                   </Button>
                 </div>
@@ -607,9 +580,7 @@ export default function FormImageAI() {
                       <Button
                         key={index}
                         className={`btn m-1 ${
-                          selectedArticleId === id
-                            ? "btn-warning"
-                            : "btn-success"
+                          selectedArticleId === id ? "btn-warning" : "btn-success"
                         }`}
                         onClick={() => handleArticleIdClick(id)}
                         variant={"outline"}
@@ -630,20 +601,15 @@ export default function FormImageAI() {
                           fileTypeId === "1"
                             ? "image"
                             : fileTypeId === "2"
-                            ? "video"
-                            : fileTypeId === "3"
-                            ? "text"
-                            : "audio"
+                              ? "video"
+                              : fileTypeId === "3"
+                                ? "text"
+                                : "audio"
                         }/update-new/${selectedArticleId}`}
                         target="_blank"
                         rel="noopener noreferrer"
                       >
-                        <Button
-                          className="mb-2"
-                          size="sm"
-                          variant={"outline"}
-                          color="primary"
-                        >
+                        <Button className="mb-2" size="sm" variant={"outline"} color="primary">
                           Edit
                         </Button>
                       </a>
@@ -663,20 +629,14 @@ export default function FormImageAI() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
               </div>
               <div className="py-3">
                 <Label>Attachment</Label>
 
-                <Input
-                  id="fileInput"
-                  type="file"
-                  onChange={handleImageChange}
-                />
+                <Input id="fileInput" type="file" onChange={handleImageChange} />
 
                 <div className="flex flex-row items-center gap-3 py-3">
                   <Label>Gunakan Watermark</Label>
@@ -686,11 +646,7 @@ export default function FormImageAI() {
                 </div>
                 {preview && (
                   <div className="mt-3 px-3">
-                    <img
-                      src={preview}
-                      alt="Thumbnail Preview"
-                      className="w-32 h-auto rounded"
-                    />
+                    <img src={preview} alt="Thumbnail Preview" className="w-32 h-auto rounded" />
                   </div>
                 )}
               </div>
@@ -718,9 +674,7 @@ export default function FormImageAI() {
                   )}
                 />
                 {errors.creatorName?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.creatorName.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                 )}
               </div>
             </div>
diff --git a/src/components/features/form/content/image-detail-form.tsx b/src/components/features/form/content/image-detail-form.tsx
index 8a9416f5..6164222e 100644
--- a/src/components/features/form/content/image-detail-form.tsx
+++ b/src/components/features/form/content/image-detail-form.tsx
@@ -1,28 +1,18 @@
 "use client";
+
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { MailIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
 import {
   createMedia,
   getTagsBySubCategoryId,
@@ -33,8 +23,21 @@ import {
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
-import { MailIcon } from "lucide-react";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -42,29 +45,29 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
+
+import dynamic from "next/dynamic";
+import { useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+
+import { close, loading, successCallback } from "@/config/swal";
+import { error } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import {
-  DialogHeader,
-  DialogFooter,
   Dialog,
   DialogContent,
+  DialogFooter,
+  DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
-import { close, loading, successCallback } from "@/config/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { error } from "@/lib/utils/swal";
-import dynamic from "next/dynamic";
-import { useRouter } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setting/unit-mapping";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -165,12 +168,7 @@ export default function FormImageDetail() {
   });
 
   useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
+    if (userLevelId != undefined && roleId != undefined && userLevelId == "216" && roleId == "3") {
       setIsUserMabesApprover(true);
     }
   }, [userLevelId, roleId]);
@@ -198,9 +196,7 @@ export default function FormImageDetail() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -239,15 +235,11 @@ export default function FormImageDetail() {
         setupPlacementCheck(details?.files?.length);
 
         if (details.publishedForObject) {
-          const publisherIds = details.publishedForObject.map(
-            (obj: any) => obj.id
-          );
+          const publisherIds = details.publishedForObject.map((obj: any) => obj.id);
           setSelectedPublishers(publisherIds);
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -349,11 +341,7 @@ export default function FormImageDetail() {
     return false;
   }
 
-  const setupPlacement = (
-    index: number,
-    placement: string,
-    checked: boolean
-  ) => {
+  const setupPlacement = (index: number, placement: string, checked: boolean) => {
     let temp = [...filePlacements];
     if (checked) {
       if (placement === "all") {
@@ -389,12 +377,7 @@ export default function FormImageDetail() {
     rejects.push(id);
     setRejectedFiles(rejects);
   }
-  const handleMain = (
-    type: string,
-    url: string,
-    names: string,
-    format: string
-  ) => {
+  const handleMain = (type: string, url: string, names: string, format: string) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
       type,
@@ -449,9 +432,7 @@ export default function FormImageDetail() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -488,9 +469,7 @@ export default function FormImageDetail() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
                 <div className="space-y-2">
@@ -558,9 +537,7 @@ export default function FormImageDetail() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
@@ -578,16 +555,11 @@ export default function FormImageDetail() {
                 <div className="space-y-2">
                   <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
-                    {detail?.tags
-                      ?.split(",")
-                      .map((tag: string, index: number) => (
-                        <Badge
-                          key={index}
-                          className="border rounded-md  px-2 py-2"
-                        >
-                          {tag.trim()}
-                        </Badge>
-                      ))}
+                    {detail?.tags?.split(",").map((tag: string, index: number) => (
+                      <Badge key={index} className="border rounded-md  px-2 py-2">
+                        {tag.trim()}
+                      </Badge>
+                    ))}
                   </div>
                 </div>
               </div>
@@ -646,11 +618,7 @@ export default function FormImageDetail() {
 
               {detail?.isPublish == false && detail.isPublishOnPolda == true ? (
                 <div className="flex flex-col gap-2 p-3">
-                  <Button
-                    onClick={() => publishToMabes()}
-                    type="button"
-                    color="primary"
-                  >
+                  <Button onClick={() => publishToMabes()} type="button" color="primary">
                     <Icon icon="fa:check" className="mr-3" /> Publish
                   </Button>
                 </div>
@@ -680,11 +648,7 @@ export default function FormImageDetail() {
                   ""
                 ) : (
                   <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("2")} color="primary" type="button">
                       <Icon icon="fa:check" className="mr-3" />
                       {t("accept")}
                     </Button>
@@ -693,14 +657,9 @@ export default function FormImageDetail() {
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
+                      <Icon icon="fa:comment-o" className="mr-3" /> {t("revision")}
                     </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("4")} color="destructive" type="button">
                       <Icon icon="fa:times" className="mr-3" />
                       {t("reject")}
                     </Button>
@@ -717,19 +676,12 @@ export default function FormImageDetail() {
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
-                        <div
-                          key={file.id}
-                          className="flex flex-row gap-2 items-center"
-                        >
+                        <div key={file.id} className="flex flex-row gap-2 items-center">
                           <img src={file.url} className="w-[200px]" />
                           <div className="flex flex-col gap-2 w-full">
                             <div className="flex justify-between text-sm">
                               {file.fileName}
-                              <a
-                                onClick={() =>
-                                  handleDeleteFileApproval(file.id)
-                                }
-                              >
+                              <a onClick={() => handleDeleteFileApproval(file.id)}>
                                 <Icon icon="humbleicons:times" color="red" />
                               </a>
                             </div>
@@ -739,9 +691,7 @@ export default function FormImageDetail() {
                                   <Checkbox
                                     id="terms"
                                     value="all"
-                                    checked={filePlacements[index]?.includes(
-                                      "all"
-                                    )}
+                                    checked={filePlacements[index]?.includes("all")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "all", Boolean(e))
                                     }
@@ -756,9 +706,7 @@ export default function FormImageDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "mabes"
-                                    )}
+                                    checked={filePlacements[index]?.includes("mabes")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "mabes", Boolean(e))
                                     }
@@ -773,9 +721,7 @@ export default function FormImageDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "polda"
-                                    )}
+                                    checked={filePlacements[index]?.includes("polda")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "polda", Boolean(e))
                                     }
@@ -790,9 +736,7 @@ export default function FormImageDetail() {
                                     <UnitMapping
                                       unit="Polda"
                                       isDetail={false}
-                                      sendDataToParent={(data: any) =>
-                                        setSelectedPolda(data)
-                                      }
+                                      sendDataToParent={(data: any) => setSelectedPolda(data)}
                                     />
                                   )}
                                 </div>
@@ -800,15 +744,9 @@ export default function FormImageDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "international"
-                                    )}
+                                    checked={filePlacements[index]?.includes("international")}
                                     onCheckedChange={(e) =>
-                                      setupPlacement(
-                                        index,
-                                        "international",
-                                        Boolean(e)
-                                      )
+                                      setupPlacement(index, "international", Boolean(e))
                                     }
                                   />
                                   <label
@@ -834,38 +772,22 @@ export default function FormImageDetail() {
                   {status == "3" || status == "4" ? (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Kualitas media kurang baik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Kualitas media kurang baik" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Kualitas media kurang baik")
-                        }
+                        onClick={() => setDescription("Kualitas media kurang baik")}
                       >
                         Kualitas media kurang baik
                       </Badge>
 
                       <Badge
-                        color={
-                          description === "Deskripsi kurang lengkap"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Deskripsi kurang lengkap" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Deskripsi kurang lengkap")
-                        }
+                        onClick={() => setDescription("Deskripsi kurang lengkap")}
                       >
                         Deskripsi kurang lengkap
                       </Badge>
                       <Badge
-                        color={
-                          description === "Judul kurang tepat"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Judul kurang tepat" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Judul kurang tepat")}
                       >
@@ -875,22 +797,14 @@ export default function FormImageDetail() {
                   ) : (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Konten sangat bagus"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten sangat bagus" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten sangat bagus")}
                       >
                         Konten sangat bagus
                       </Badge>
                       <Badge
-                        color={
-                          description === "Konten menarik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten menarik" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten menarik")}
                       >
@@ -899,11 +813,7 @@ export default function FormImageDetail() {
                     </div>
                   )}
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      color="primary"
-                      onClick={() => submit()}
-                    >
+                    <Button type="button" color="primary" onClick={() => submit()}>
                       {t("submit")}
                     </Button>
                     <Button
diff --git a/src/components/features/form/content/image-form.tsx b/src/components/features/form/content/image-form.tsx
index 84ba16ff..66d76a19 100644
--- a/src/components/features/form/content/image-form.tsx
+++ b/src/components/features/form/content/image-form.tsx
@@ -1,22 +1,50 @@
 "use client";
-import React, {
-  ChangeEvent,
-  useEffect,
-  useRef,
-  Fragment,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { request } from "http";
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { redirect, useParams, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { options } from "@fullcalendar/core/preact.js";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { Upload } from "tus-js-client";
+import { Icon } from "@iconify/react";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import JoditEditor from "jodit-react";
+import { data } from "jquery";
+import Cookies from "js-cookie";
+import { CloudUpload } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useParams, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error, loading } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/lib/services/content/ai";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -24,40 +52,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-  uploadThumbnail,
-} from "@/lib/services/content/content";
-import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  generateDataArticle,
-  getDetailArticle,
-  getGenerateKeywords,
-  getGenerateTitle,
-} from "@/lib/services/content/ai";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { error, loading } from "@/config/swal";
-import { Item } from "@radix-ui/react-dropdown-menu";
-import { data } from "jquery";
-import { options } from "@fullcalendar/core/preact.js";
-import dynamic from "next/dynamic";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Link } from "@/i18n/navigation";
-import { request } from "http";
-import { useLocale, useTranslations } from "next-intl";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -112,9 +108,7 @@ export default function FormImage() {
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
   const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
@@ -344,10 +338,7 @@ export default function FormImage() {
         throw new Error("Timeout: Artikel belum selesai diproses.");
       };
       const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(
-        /<img[^>]*>/g,
-        ""
-      );
+      const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
@@ -400,9 +391,7 @@ export default function FormImage() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -423,11 +412,7 @@ export default function FormImage() {
         setPublishedFor([]);
       } else {
         // Select all checkboxes
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
+        setPublishedFor(options.filter((opt: any) => opt.id !== "all").map((opt: any) => opt.id));
       }
     } else {
       const updatedPublishedFor = publishedFor.includes(id)
@@ -548,12 +533,7 @@ export default function FormImage() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -586,11 +566,7 @@ export default function FormImage() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -671,10 +647,7 @@ export default function FormImage() {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -756,10 +729,7 @@ export default function FormImage() {
                     </SelectTrigger>
                     <SelectContent>
                       {categories.map((category) => (
-                        <SelectItem
-                          key={category.id}
-                          value={category.id.toString()}
-                        >
+                        <SelectItem key={category.id} value={category.id.toString()}>
                           {category.name}
                         </SelectItem>
                       ))}
@@ -774,9 +744,7 @@ export default function FormImage() {
                     defaultChecked={isSwitchOn}
                     color="primary"
                     id="c2"
-                    onCheckedChange={(checked: boolean) =>
-                      setIsSwitchOn(checked)
-                    }
+                    onCheckedChange={(checked: boolean) => setIsSwitchOn(checked)}
                   />
                 </div>
               </div>
@@ -803,12 +771,8 @@ export default function FormImage() {
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="friendly">Friendly</SelectItem>
-                          <SelectItem value="profesional">
-                            Profesional
-                          </SelectItem>
-                          <SelectItem value="informational">
-                            Informational
-                          </SelectItem>
+                          <SelectItem value="profesional">Profesional</SelectItem>
+                          <SelectItem value="informational">Informational</SelectItem>
                           <SelectItem value="neutral">Neutral</SelectItem>
                           <SelectItem value="witty">Witty</SelectItem>
                         </SelectContent>
@@ -821,15 +785,9 @@ export default function FormImage() {
                           <SelectValue placeholder="Pilih" />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="news">
-                            News (300 - 900 words)
-                          </SelectItem>
-                          <SelectItem value="info">
-                            Info (900 - 2000 words)
-                          </SelectItem>
-                          <SelectItem value="detail">
-                            Detail (2000 - 5000 words)
-                          </SelectItem>
+                          <SelectItem value="news">News (300 - 900 words)</SelectItem>
+                          <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
+                          <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -892,9 +850,7 @@ export default function FormImage() {
                         {isLoading ? "Generating..." : "Generate"}
                       </Button>
                     </div>
-                    <p className="font-semibold">
-                      {t("Keywords to include in the text")}
-                    </p>
+                    <p className="font-semibold">{t("Keywords to include in the text")}</p>
                     <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
@@ -982,17 +938,12 @@ export default function FormImage() {
                         <p className="text-gray-500">Loading Proses Data...</p>
                       </div>
                     ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={articleBody || value} />
                     )
                   }
                 />
                 {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.description.message}</p>
                 )}
               </div>
               <div className="py-3 space-y-2">
@@ -1011,9 +962,7 @@ export default function FormImage() {
                         {/* Drop files here or click to upload. */}
                         {t("drag-file")}
                       </h4>
-                      <div className=" text-xs text-muted-foreground">
-                        {t("upload-file-max")}
-                      </div>
+                      <div className=" text-xs text-muted-foreground">{t("upload-file-max")}</div>
                     </div>
                   </div>
                   {files.length ? (
@@ -1026,10 +975,7 @@ export default function FormImage() {
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
                         </div>
-                        <Button
-                          color="destructive"
-                          onClick={handleRemoveAllFiles}
-                        >
+                        <Button color="destructive" onClick={handleRemoveAllFiles}>
                           {t("remove-all")}
                         </Button>
                       </div>
@@ -1061,9 +1007,7 @@ export default function FormImage() {
                   )}
                 />
                 {errors.creatorName?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.creatorName.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                 )}
               </div>
             </div>
@@ -1104,8 +1048,7 @@ export default function FormImage() {
                       checked={
                         option.id === "all"
                           ? publishedFor.length ===
-                            options.filter((opt: any) => opt.id !== "all")
-                              .length
+                            options.filter((opt: any) => opt.id !== "all").length
                           : publishedFor.includes(option.id)
                       }
                       onCheckedChange={() => handleCheckboxChange(option.id)}
diff --git a/src/components/features/form/content/image-update-form.tsx b/src/components/features/form/content/image-update-form.tsx
index 534906d8..080426b3 100644
--- a/src/components/features/form/content/image-update-form.tsx
+++ b/src/components/features/form/content/image-update-form.tsx
@@ -1,34 +1,24 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { getCsrfToken } from "@/lib/services/auth";
 import {
   createMedia,
   deleteFile,
@@ -38,22 +28,26 @@ import {
   uploadThumbnail,
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
 import { error, loading } from "@/lib/utils/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { useTranslations } from "next-intl";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -144,9 +138,7 @@ export default function FormImageUpdate() {
     { id: "8", name: "KSP" },
   ];
 
-  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(
-    detail?.category.id
-  );
+  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(detail?.category.id);
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
     mabes: false,
@@ -226,9 +218,7 @@ export default function FormImageUpdate() {
   };
 
   const handleEditTag = (index: number, newValue: string) => {
-    setTags((prevTags) =>
-      prevTags.map((tag, i) => (i === index ? newValue : tag))
-    );
+    setTags((prevTags) => prevTags.map((tag, i) => (i === index ? newValue : tag)));
   };
 
   const getCategories = async () => {
@@ -240,9 +230,7 @@ export default function FormImageUpdate() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -285,9 +273,7 @@ export default function FormImageUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -327,12 +313,8 @@ export default function FormImageUpdate() {
   const handleCheckboxChange = (id: string) => {
     if (id === "all") {
       // Select all options except "all"
-      const allOptions = options
-        .filter((opt) => opt.id !== "all")
-        .map((opt) => opt.id);
-      setPublishedFor(
-        publishedFor.length === allOptions.length ? [] : allOptions
-      );
+      const allOptions = options.filter((opt) => opt.id !== "all").map((opt) => opt.id);
+      setPublishedFor(publishedFor.length === allOptions.length ? [] : allOptions);
     } else {
       // Toggle individual option
       setPublishedFor((prev) =>
@@ -404,12 +386,7 @@ export default function FormImageUpdate() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -442,11 +419,7 @@ export default function FormImageUpdate() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -543,9 +516,7 @@ export default function FormImageUpdate() {
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
-          <div className="text-sm text-card-foreground">
-            {file.fileName || file.name}
-          </div>
+          <div className="text-sm text-card-foreground">{file.fileName || file.name}</div>
           <div className="text-xs font-light text-muted-foreground">
             {Math.round(file.size / 100) / 10 > 1000 ? (
               <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
@@ -588,8 +559,8 @@ export default function FormImageUpdate() {
           : [...currentSelections, value];
 
         // If all individual options are selected, include "all" automatically
-        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
-          (opt) => updatedSelections.includes(opt)
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+          updatedSelections.includes(opt)
         );
         return {
           ...prev,
@@ -641,9 +612,7 @@ export default function FormImageUpdate() {
       }
 
       // Jika berhasil, hapus file dari state lokal
-      setFiles((prevFiles: any) =>
-        prevFiles.filter((file: any) => file.id !== id)
-      );
+      setFiles((prevFiles: any) => prevFiles.filter((file: any) => file.id !== id));
       success();
     } catch (err) {
       error("Terjadi kesalahan saat menghapus file");
@@ -675,9 +644,7 @@ export default function FormImageUpdate() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -692,8 +659,7 @@ export default function FormImageUpdate() {
                     >
                       <SelectTrigger size="md">
                         <SelectValue placeholder="Pilih">
-                          {categories.find((cat) => cat.id === selectedTarget)
-                            ?.name || "Pilih"}
+                          {categories.find((cat) => cat.id === selectedTarget)?.name || "Pilih"}
                         </SelectValue>
                       </SelectTrigger>
                       <SelectContent>
@@ -720,9 +686,7 @@ export default function FormImageUpdate() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
                 <div className="py-3 space-y-2">
@@ -741,9 +705,7 @@ export default function FormImageUpdate() {
                           {/* Drop files here or click to upload. */}
                           {t("drag-file")}
                         </h4>
-                        <div className=" text-xs text-muted-foreground">
-                          {t("upload-file-max")}
-                        </div>
+                        <div className=" text-xs text-muted-foreground">{t("upload-file-max")}</div>
                       </div>
                     </div>
                     {files.length ? (
@@ -767,16 +729,10 @@ export default function FormImageUpdate() {
                     ) : null}
                     {files.length > 0 && (
                       <div className="mt-4">
-                        <Label className="text-lg font-semibold">
-                          {" "}
-                          {t("file-media")}
-                        </Label>
+                        <Label className="text-lg font-semibold"> {t("file-media")}</Label>
                         <div className="grid gap-4">
                           {files.map((file: any) => (
-                            <div
-                              key={file.id}
-                              className="flex items-center border p-2 rounded-md"
-                            >
+                            <div key={file.id} className="flex items-center border p-2 rounded-md">
                               <img
                                 src={file.thumbnailFileUrl}
                                 alt={file.fileName}
@@ -798,15 +754,8 @@ export default function FormImageUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("all")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "all"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("all")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "all")}
                                       className="form-checkbox"
                                     />
                                     <span>{t("all")}</span>
@@ -816,14 +765,9 @@ export default function FormImageUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("nasional")}
+                                      checked={selectedOptions[file.id]?.includes("nasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "nasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "nasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -834,15 +778,8 @@ export default function FormImageUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("wilayah")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "wilayah"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("wilayah")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "wilayah")}
                                       className="form-checkbox"
                                     />
                                     <span>Wilayah</span>
@@ -852,14 +789,9 @@ export default function FormImageUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("internasional")}
+                                      checked={selectedOptions[file.id]?.includes("internasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "internasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "internasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -896,9 +828,7 @@ export default function FormImageUpdate() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
diff --git a/src/components/features/form/content/image-update-seo.tsx b/src/components/features/form/content/image-update-seo.tsx
index 6832fcd4..34e9f950 100644
--- a/src/components/features/form/content/image-update-seo.tsx
+++ b/src/components/features/form/content/image-update-seo.tsx
@@ -1,30 +1,27 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Gauge } from "@mui/x-charts/Gauge";
+import { ArcElement, Chart as ChartJS, ChartOptions, Legend, Tooltip } from "chart.js";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Pie } from "react-chartjs-2";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
 
-import Cookies from "js-cookie";
+import { getCsrfToken } from "@/lib/services/auth";
+import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
 import {
   createMedia,
   deleteFile,
@@ -34,43 +31,33 @@ import {
   uploadThumbnail,
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
 import { error, loading } from "@/lib/utils/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/editor/view-editor";
-import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
-import { Gauge } from "@mui/x-charts/Gauge";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Pie } from "react-chartjs-2";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend,
-  ChartOptions,
-} from "chart.js";
-import { useTranslations } from "next-intl";
-import { Link } from "@/i18n/navigation";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import ViewEditor from "@/components/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -170,9 +157,7 @@ export default function FormImageSeo() {
   const [optimizedData, setOptimizedData] = useState<string[]>([]);
   const [errorsData, setErrorData] = useState<string[]>([]);
 
-  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(
-    detail?.category.id
-  );
+  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(detail?.category.id);
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
     mabes: false,
@@ -243,9 +228,7 @@ export default function FormImageSeo() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -312,8 +295,7 @@ export default function FormImageSeo() {
       ];
       setWarningSEO(warningList);
       let optimizedList = [
-        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization
-          ?.optimized,
+        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.optimized,
         ...res.data.data?.seo_analysis?.analysis?.content_quality?.optimized,
       ];
       setOptimizedSEO(optimizedList);
@@ -408,12 +390,7 @@ export default function FormImageSeo() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -446,11 +423,7 @@ export default function FormImageSeo() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -559,9 +532,7 @@ export default function FormImageSeo() {
       }
 
       // Jika berhasil, hapus file dari state lokal
-      setFiles((prevFiles: any) =>
-        prevFiles.filter((file: any) => file.id !== id)
-      );
+      setFiles((prevFiles: any) => prevFiles.filter((file: any) => file.id !== id));
       success();
     } catch (err) {
       error("Terjadi kesalahan saat menghapus file");
@@ -598,33 +569,21 @@ export default function FormImageSeo() {
                     <div className="flex flex-row gap-3 w-full">
                       <div className="w-full">
                         <Label htmlFor="username">Main Keyword</Label>
-                        <Textarea
-                          id="mainKeyword"
-                          value={articleData?.mainKeyword}
-                        />
+                        <Textarea id="mainKeyword" value={articleData?.mainKeyword} />
                       </div>
                       <div className="w-full">
                         <Label htmlFor="username">Additional Keyword</Label>
-                        <Textarea
-                          id="additionalKeywords"
-                          value={articleData?.additionalKeywords}
-                        />
+                        <Textarea id="additionalKeywords" value={articleData?.additionalKeywords} />
                       </div>
                     </div>
                     <div className="flex flex-row gap-3 w-full">
                       <div className="w-full">
                         <Label htmlFor="username">Meta Title</Label>
-                        <Textarea
-                          id="metaTitle"
-                          value={articleData?.metaTitle}
-                        />
+                        <Textarea id="metaTitle" value={articleData?.metaTitle} />
                       </div>
                       <div className="w-full">
                         <Label htmlFor="username">Meta Description</Label>
-                        <Textarea
-                          id="metaDescription"
-                          value={articleData?.metaDescription}
-                        />
+                        <Textarea id="metaDescription" value={articleData?.metaDescription} />
                       </div>
                     </div>
                     <div className="py-3">
@@ -633,16 +592,11 @@ export default function FormImageSeo() {
                         control={control}
                         name="description"
                         render={({ field: { onChange, value } }) => (
-                          <CustomEditor
-                            onChange={onChange}
-                            initialData={articleBody}
-                          />
+                          <CustomEditor onChange={onChange} initialData={articleBody} />
                         )}
                       />
                       {errors.description?.message && (
-                        <p className="text-red-400 text-sm">
-                          {errors.description.message}
-                        </p>
+                        <p className="text-red-400 text-sm">{errors.description.message}</p>
                       )}
                     </div>
                   </CardContent>
@@ -661,10 +615,7 @@ export default function FormImageSeo() {
                   </div>
                   <div className="space-y-1">
                     <Accordion type="single" collapsible className="w-full ">
-                      <AccordionItem
-                        value="error"
-                        className="border border-red-600"
-                      >
+                      <AccordionItem value="error" className="border border-red-600">
                         <AccordionTrigger>
                           <div className="flex items-center">
                             <XIcon className="text-red-600" />
@@ -684,10 +635,7 @@ export default function FormImageSeo() {
                         </AccordionContent>
                       </AccordionItem>
 
-                      <AccordionItem
-                        value="warning"
-                        className="border border-yellow-600"
-                      >
+                      <AccordionItem value="warning" className="border border-yellow-600">
                         <AccordionTrigger>
                           <div className="flex items-center">
                             <XIcon className="text-yellow-600" />
@@ -707,10 +655,7 @@ export default function FormImageSeo() {
                         </AccordionContent>
                       </AccordionItem>
 
-                      <AccordionItem
-                        value="optimized"
-                        className="border border-green-600"
-                      >
+                      <AccordionItem value="optimized" className="border border-green-600">
                         <AccordionTrigger>
                           <div className="flex items-center">
                             <XIcon className="text-green-600" />
@@ -742,16 +687,11 @@ export default function FormImageSeo() {
                       control={control}
                       name="description"
                       render={({ field: { onChange, value } }) => (
-                        <CustomEditor
-                          onChange={onChange}
-                          initialData={articleBody}
-                        />
+                        <CustomEditor onChange={onChange} initialData={articleBody} />
                       )}
                     />
                     {errors.description?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.description.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.description.message}</p>
                     )}
                   </div>
                 </CardContent>
diff --git a/src/components/features/form/content/spit-convert-form.tsx b/src/components/features/form/content/spit-convert-form.tsx
index eb8bdc9b..a96c64bc 100644
--- a/src/components/features/form/content/spit-convert-form.tsx
+++ b/src/components/features/form/content/spit-convert-form.tsx
@@ -1,28 +1,18 @@
 "use client";
+
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { MailIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
 import {
   convertSPIT,
   createMedia,
@@ -34,8 +24,21 @@ import {
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
-import { MailIcon } from "lucide-react";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -43,13 +46,15 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
-import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+
 import { request } from "http";
-import { generateDataArticle, getDetailArticle } from "@/lib/services/content/ai";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
 import dynamic from "next/dynamic";
-import { error } from "@/lib/utils/swal";
 import { useTranslations } from "next-intl";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+
+import { generateDataArticle, getDetailArticle } from "@/lib/services/content/ai";
+import { error } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 
 const imageSchema = z.object({
   contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
@@ -128,9 +133,7 @@ export default function FormConvertSPIT() {
   const scheduleType = Cookies.get("scheduleType");
 
   const [categories, setCategories] = useState<Category[]>([]);
-  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(
-    null
-  );
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
   const [tags, setTags] = useState<any[]>([]);
   const [detail, setDetail] = useState<any>();
   const [refresh, setRefresh] = useState(false);
@@ -142,9 +145,7 @@ export default function FormConvertSPIT() {
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
   const t = useTranslations("Form");
   const [detailData, setDetailData] = useState<any>(null);
   const [selectedFileType, setSelectedFileType] = useState("original");
@@ -215,23 +216,13 @@ export default function FormConvertSPIT() {
   }, []);
 
   useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
+    if (userLevelId != undefined && roleId != undefined && userLevelId == "216" && roleId == "3") {
       setIsUserMabesApprover(true);
     }
   }, [userLevelId, roleId]);
 
   useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
+    if (userLevelId != undefined && roleId != undefined && userLevelId == "216" && roleId == "3") {
       setIsMabesApprover(true);
     }
   }, [userLevelId, roleId]);
@@ -245,9 +236,7 @@ export default function FormConvertSPIT() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -261,11 +250,7 @@ export default function FormConvertSPIT() {
     }
   };
 
-  const setupPlacement = (
-    index: number,
-    placement: string,
-    checked: boolean
-  ) => {
+  const setupPlacement = (index: number, placement: string, checked: boolean) => {
     let temp = [...filePlacements];
     if (checked) {
       if (placement === "all") {
@@ -318,9 +303,7 @@ export default function FormConvertSPIT() {
         );
         setDetailThumb(fileUrls);
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -361,11 +344,7 @@ export default function FormConvertSPIT() {
       if (publishedFor.includes("all")) {
         setPublishedFor([]);
       } else {
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
+        setPublishedFor(options.filter((opt: any) => opt.id !== "all").map((opt: any) => opt.id));
       }
     } else {
       const updatedPublishedFor = publishedFor.includes(id)
@@ -434,9 +413,7 @@ export default function FormConvertSPIT() {
       temp.push([]);
     }
     const description =
-      selectedFileType === "original"
-        ? data.contentDescription
-        : data.contentRewriteDescription;
+      selectedFileType === "original" ? data.contentDescription : data.contentRewriteDescription;
 
     const requestData = {
       spitId: id,
@@ -553,10 +530,7 @@ export default function FormConvertSPIT() {
         throw new Error("Timeout: Artikel belum selesai diproses.");
       };
       const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(
-        /<img[^>]*>/g,
-        ""
-      );
+      const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
@@ -637,9 +611,7 @@ export default function FormConvertSPIT() {
                     )}
                   />
                   {errors.contentTitle?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.contentTitle.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.contentTitle.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -676,9 +648,7 @@ export default function FormConvertSPIT() {
                   >
                     <div className="">
                       <RadioGroupItem value="original" id="original-file" />
-                      <Label htmlFor="original-file">
-                        Select Original File
-                      </Label>
+                      <Label htmlFor="original-file">Select Original File</Label>
                     </div>
                     <div className="py-3 space-y-2">
                       <Label>{t("description")}</Label>
@@ -699,9 +669,7 @@ export default function FormConvertSPIT() {
                         )}
                       />
                       {errors.contentDescription?.message && (
-                        <p className="text-red-400 text-sm">
-                          {errors.contentDescription.message}
-                        </p>
+                        <p className="text-red-400 text-sm">{errors.contentDescription.message}</p>
                       )}
                     </div>
                     <div className="my-2">
@@ -734,9 +702,7 @@ export default function FormConvertSPIT() {
                         )}
                         <div className="flex items-center space-x-2 mt-3">
                           <RadioGroupItem value="rewrite" id="rewrite-file" />
-                          <Label htmlFor="rewrite-file">
-                            Select File Rewrite
-                          </Label>
+                          <Label htmlFor="rewrite-file">Select File Rewrite</Label>
                         </div>
                         <div className="py-3 space-y-2">
                           <Label>{t("file-rewrite")}</Label>
@@ -746,9 +712,7 @@ export default function FormConvertSPIT() {
                             render={({ field: { onChange, value } }) =>
                               isLoadingData ? (
                                 <div className="flex justify-center items-center h-40">
-                                  <p className="text-gray-500">
-                                    Loading Proses Data...
-                                  </p>
+                                  <p className="text-gray-500">Loading Proses Data...</p>
                                 </div>
                               ) : (
                                 <CustomEditor
@@ -819,83 +783,53 @@ export default function FormConvertSPIT() {
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="all-content"
-                        onCheckedChange={(e) =>
-                          handleSelectAll("all", Boolean(e))
-                        }
+                        onCheckedChange={(e) => handleSelectAll("all", Boolean(e))}
                       />
-                      <label
-                        htmlFor="all-content"
-                        className="text-xs font-medium"
-                      >
+                      <label htmlFor="all-content" className="text-xs font-medium">
                         {t("all")}
                       </label>
                     </div>
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="all-nasional"
-                        onCheckedChange={(e) =>
-                          handleSelectAll("mabes", Boolean(e))
-                        }
+                        onCheckedChange={(e) => handleSelectAll("mabes", Boolean(e))}
                       />
-                      <label
-                        htmlFor="all-nasional"
-                        className="text-xs font-medium"
-                      >
+                      <label htmlFor="all-nasional" className="text-xs font-medium">
                         {t("all")} Nasional
                       </label>
                     </div>
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="all-wilayah"
-                        onCheckedChange={(e) =>
-                          handleSelectAll("polda", Boolean(e))
-                        }
+                        onCheckedChange={(e) => handleSelectAll("polda", Boolean(e))}
                       />
-                      <label
-                        htmlFor="all-wilayah"
-                        className="text-xs font-medium"
-                      >
+                      <label htmlFor="all-wilayah" className="text-xs font-medium">
                         {t("all")} Wilayah
                       </label>
                     </div>
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="all-international"
-                        onCheckedChange={(e) =>
-                          handleSelectAll("international", Boolean(e))
-                        }
+                        onCheckedChange={(e) => handleSelectAll("international", Boolean(e))}
                       />
-                      <label
-                        htmlFor="all-international"
-                        className="text-xs font-medium"
-                      >
+                      <label htmlFor="all-international" className="text-xs font-medium">
                         {t("all")} Internasional
                       </label>
                     </div>
                   </div>
                 )}
                 {files?.map((file, index) => (
-                  <div
-                    key={file.contentId}
-                    className="flex flex-row gap-2 items-center my-3"
-                  >
-                    <img
-                      src={file.contentFile}
-                      className="w-[180px] rounded-md"
-                    />
+                  <div key={file.contentId} className="flex flex-row gap-2 items-center my-3">
+                    <img src={file.contentFile} className="w-[180px] rounded-md" />
                     <div className="flex flex-col gap-2 w-full pl-4">
-                      <div className="flex justify-between text-sm">
-                        {file.fileName}
-                      </div>
+                      <div className="flex justify-between text-sm">{file.fileName}</div>
                       <div className="flex flex-wrap gap-2">
                         <div className="flex items-center space-x-2">
                           <Checkbox
                             id="terms"
                             value="all"
                             checked={filePlacements[index]?.includes("all")}
-                            onCheckedChange={(e) =>
-                              setupPlacement(index, "all", Boolean(e))
-                            }
+                            onCheckedChange={(e) => setupPlacement(index, "all", Boolean(e))}
                           />
                           <label
                             htmlFor="terms"
@@ -908,9 +842,7 @@ export default function FormConvertSPIT() {
                           <Checkbox
                             id="terms"
                             checked={filePlacements[index]?.includes("mabes")}
-                            onCheckedChange={(e) =>
-                              setupPlacement(index, "mabes", Boolean(e))
-                            }
+                            onCheckedChange={(e) => setupPlacement(index, "mabes", Boolean(e))}
                           />
                           <label
                             htmlFor="terms"
@@ -923,9 +855,7 @@ export default function FormConvertSPIT() {
                           <Checkbox
                             id="terms"
                             checked={filePlacements[index]?.includes("polda")}
-                            onCheckedChange={(e) =>
-                              setupPlacement(index, "polda", Boolean(e))
-                            }
+                            onCheckedChange={(e) => setupPlacement(index, "polda", Boolean(e))}
                           />
                           <label
                             htmlFor="terms"
@@ -938,9 +868,7 @@ export default function FormConvertSPIT() {
                         <div className="flex items-center space-x-2">
                           <Checkbox
                             id="terms"
-                            checked={filePlacements[index]?.includes(
-                              "international"
-                            )}
+                            checked={filePlacements[index]?.includes("international")}
                             onCheckedChange={(e) =>
                               setupPlacement(index, "international", Boolean(e))
                             }
@@ -978,9 +906,7 @@ export default function FormConvertSPIT() {
                     )}
                   />
                   {errors.contentCreator?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.contentCreator.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.contentCreator.message}</p>
                   )}
                 </div>
               </div>
@@ -998,16 +924,11 @@ export default function FormConvertSPIT() {
                 <div className="space-y-2">
                   <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
-                    {detail?.contentTag
-                      ?.split(",")
-                      .map((tag: any, index: any) => (
-                        <Badge
-                          key={index}
-                          className="border rounded-md  px-2 py-2"
-                        >
-                          {tag.trim()}
-                        </Badge>
-                      ))}
+                    {detail?.contentTag?.split(",").map((tag: any, index: any) => (
+                      <Badge key={index} className="border rounded-md  px-2 py-2">
+                        {tag.trim()}
+                      </Badge>
+                    ))}
                   </div>
                 </div>
               </div>
@@ -1021,8 +942,7 @@ export default function FormConvertSPIT() {
                         checked={
                           option.id === "all"
                             ? publishedFor.length ===
-                              options.filter((opt: any) => opt.id !== "all")
-                                .length
+                              options.filter((opt: any) => opt.id !== "all").length
                             : publishedFor.includes(option.id)
                         }
                         onCheckedChange={() => handleCheckboxChange(option.id)}
diff --git a/src/components/features/form/content/teks-detail-form.tsx b/src/components/features/form/content/teks-detail-form.tsx
index 6244c268..c76a06b5 100644
--- a/src/components/features/form/content/teks-detail-form.tsx
+++ b/src/components/features/form/content/teks-detail-form.tsx
@@ -1,28 +1,18 @@
 "use client";
+
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { MailIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
 import {
   createMedia,
   getTagsBySubCategoryId,
@@ -32,8 +22,21 @@ import {
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
-import { MailIcon } from "lucide-react";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -41,27 +44,27 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
+
+import dynamic from "next/dynamic";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+
+import { loading } from "@/config/swal";
+import { error } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import {
-  DialogHeader,
-  DialogFooter,
   Dialog,
   DialogContent,
+  DialogFooter,
+  DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
-import { loading } from "@/config/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { error } from "@/lib/utils/swal";
-import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -166,12 +169,7 @@ export default function FormTeksDetail() {
   // };
 
   useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
+    if (userLevelId != undefined && roleId != undefined && userLevelId == "216" && roleId == "3") {
       setIsUserMabesApprover(true);
     }
   }, [userLevelId, roleId]);
@@ -199,9 +197,7 @@ export default function FormTeksDetail() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -239,15 +235,11 @@ export default function FormTeksDetail() {
         });
 
         if (details.publishedForObject) {
-          const publisherIds = details.publishedForObject.map(
-            (obj: any) => obj.id
-          );
+          const publisherIds = details.publishedForObject.map((obj: any) => obj.id);
           setSelectedPublishers(publisherIds);
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -349,11 +341,7 @@ export default function FormTeksDetail() {
     return false;
   }
 
-  const setupPlacement = (
-    index: number,
-    placement: string,
-    checked: boolean
-  ) => {
+  const setupPlacement = (index: number, placement: string, checked: boolean) => {
     let temp = [...filePlacements];
     if (checked) {
       if (placement === "all") {
@@ -389,12 +377,7 @@ export default function FormTeksDetail() {
     rejects.push(id);
     setRejectedFiles(rejects);
   }
-  const handleMain = (
-    type: string,
-    url: string,
-    names: string,
-    format: string
-  ) => {
+  const handleMain = (type: string, url: string, names: string, format: string) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
       type,
@@ -442,9 +425,7 @@ export default function FormTeksDetail() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -481,9 +462,7 @@ export default function FormTeksDetail() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
                 <div className="space-y-2">
@@ -497,9 +476,7 @@ export default function FormTeksDetail() {
                     >
                       {detailThumb?.map((data: any, index: number) => (
                         <SwiperSlide key={index}>
-                          {[".jpg", ".jpeg", ".png", ".webp"].includes(
-                            data.format
-                          ) ? (
+                          {[".jpg", ".jpeg", ".png", ".webp"].includes(data.format) ? (
                             // Menampilkan gambar
                             <img
                               className="object-fill h-full w-full rounded-md"
@@ -513,9 +490,7 @@ export default function FormTeksDetail() {
                               src={data.url}
                               title={data.fileName || "PDF File"}
                             />
-                          ) : [".docx", ".ppt", ".pptx"].includes(
-                              data.format
-                            ) ? (
+                          ) : [".docx", ".ppt", ".pptx"].includes(data.format) ? (
                             // Menampilkan file dokumen menggunakan Office Viewer
                             <iframe
                               className="w-full h-96 rounded-md"
@@ -548,9 +523,7 @@ export default function FormTeksDetail() {
                       >
                         {detailThumb?.map((data: any, index: number) => (
                           <SwiperSlide key={index}>
-                            {[".jpg", ".jpeg", ".png", ".webp"].includes(
-                              data.format
-                            ) ? (
+                            {[".jpg", ".jpeg", ".png", ".webp"].includes(data.format) ? (
                               <img
                                 className="object-cover h-[60px] w-[80px]"
                                 src={data.url}
@@ -589,9 +562,7 @@ export default function FormTeksDetail() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
@@ -609,16 +580,11 @@ export default function FormTeksDetail() {
                 <div className="space-y-2">
                   <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
-                    {detail?.tags
-                      ?.split(",")
-                      .map((tag: string, index: number) => (
-                        <Badge
-                          key={index}
-                          className="border rounded-md  px-2 py-2"
-                        >
-                          {tag.trim()}
-                        </Badge>
-                      ))}
+                    {detail?.tags?.split(",").map((tag: string, index: number) => (
+                      <Badge key={index} className="border rounded-md  px-2 py-2">
+                        {tag.trim()}
+                      </Badge>
+                    ))}
                   </div>
                 </div>
               </div>
@@ -679,11 +645,7 @@ export default function FormTeksDetail() {
                   ""
                 ) : (
                   <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("2")} color="primary" type="button">
                       <Icon icon="fa:check" className="mr-3" /> {t("accept")}
                     </Button>
                     <Button
@@ -691,14 +653,9 @@ export default function FormTeksDetail() {
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
+                      <Icon icon="fa:comment-o" className="mr-3" /> {t("revision")}
                     </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("4")} color="destructive" type="button">
                       <Icon icon="fa:times" className="mr-3" />
                       {t("reject")}
                     </Button>
@@ -715,19 +672,12 @@ export default function FormTeksDetail() {
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
-                        <div
-                          key={file.id}
-                          className="flex flex-row gap-2 items-center"
-                        >
+                        <div key={file.id} className="flex flex-row gap-2 items-center">
                           <img src={file.url} className="w-[200px]" />
                           <div className="flex flex-col gap-2 w-full">
                             <div className="flex justify-between text-sm">
                               {file.fileName}
-                              <a
-                                onClick={() =>
-                                  handleDeleteFileApproval(file.id)
-                                }
-                              >
+                              <a onClick={() => handleDeleteFileApproval(file.id)}>
                                 <Icon icon="humbleicons:times" color="red" />
                               </a>
                             </div>
@@ -737,9 +687,7 @@ export default function FormTeksDetail() {
                                   <Checkbox
                                     id="terms"
                                     value="all"
-                                    checked={filePlacements[index]?.includes(
-                                      "all"
-                                    )}
+                                    checked={filePlacements[index]?.includes("all")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "all", Boolean(e))
                                     }
@@ -754,9 +702,7 @@ export default function FormTeksDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "mabes"
-                                    )}
+                                    checked={filePlacements[index]?.includes("mabes")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "mabes", Boolean(e))
                                     }
@@ -771,9 +717,7 @@ export default function FormTeksDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "polda"
-                                    )}
+                                    checked={filePlacements[index]?.includes("polda")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "polda", Boolean(e))
                                     }
@@ -789,15 +733,9 @@ export default function FormTeksDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "international"
-                                    )}
+                                    checked={filePlacements[index]?.includes("international")}
                                     onCheckedChange={(e) =>
-                                      setupPlacement(
-                                        index,
-                                        "international",
-                                        Boolean(e)
-                                      )
+                                      setupPlacement(index, "international", Boolean(e))
                                     }
                                   />
                                   <label
@@ -823,38 +761,22 @@ export default function FormTeksDetail() {
                   {status == "3" || status == "4" ? (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Kualitas media kurang baik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Kualitas media kurang baik" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Kualitas media kurang baik")
-                        }
+                        onClick={() => setDescription("Kualitas media kurang baik")}
                       >
                         Kualitas media kurang baik
                       </Badge>
 
                       <Badge
-                        color={
-                          description === "Deskripsi kurang lengkap"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Deskripsi kurang lengkap" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Deskripsi kurang lengkap")
-                        }
+                        onClick={() => setDescription("Deskripsi kurang lengkap")}
                       >
                         Deskripsi kurang lengkap
                       </Badge>
                       <Badge
-                        color={
-                          description === "Judul kurang tepat"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Judul kurang tepat" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Judul kurang tepat")}
                       >
@@ -864,22 +786,14 @@ export default function FormTeksDetail() {
                   ) : (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Konten sangat bagus"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten sangat bagus" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten sangat bagus")}
                       >
                         Konten sangat bagus
                       </Badge>
                       <Badge
-                        color={
-                          description === "Konten menarik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten menarik" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten menarik")}
                       >
@@ -888,11 +802,7 @@ export default function FormTeksDetail() {
                     </div>
                   )}
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      color="primary"
-                      onClick={() => submit()}
-                    >
+                    <Button type="button" color="primary" onClick={() => submit()}>
                       {t("submit")}
                     </Button>
                     <Button
diff --git a/src/components/features/form/content/teks-form.tsx b/src/components/features/form/content/teks-form.tsx
index 75c6a408..c51f7b0d 100644
--- a/src/components/features/form/content/teks-form.tsx
+++ b/src/components/features/form/content/teks-form.tsx
@@ -1,22 +1,47 @@
 "use client";
-import React, {
-  ChangeEvent,
-  useEffect,
-  useRef,
-  Fragment,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { redirect, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { Upload } from "tus-js-client";
+import { Icon } from "@iconify/react";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CloudUpload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error, loading } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/lib/services/content/ai";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -24,37 +49,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-  uploadThumbnail,
-} from "@/lib/services/content/content";
-import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  generateDataArticle,
-  getDetailArticle,
-  getGenerateKeywords,
-  getGenerateTitle,
-} from "@/lib/services/content/ai";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { error, loading } from "@/config/swal";
-import { Item } from "@radix-ui/react-dropdown-menu";
-import dynamic from "next/dynamic";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 interface FileWithPreview extends File {
   preview: string;
@@ -106,9 +102,7 @@ export default function FormTeks() {
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
   const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
@@ -334,10 +328,7 @@ export default function FormTeks() {
         throw new Error("Timeout: Artikel belum selesai diproses.");
       };
       const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(
-        /<img[^>]*>/g,
-        ""
-      );
+      const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
@@ -390,9 +381,7 @@ export default function FormTeks() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -413,11 +402,7 @@ export default function FormTeks() {
         setPublishedFor([]);
       } else {
         // Select all checkboxes
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
+        setPublishedFor(options.filter((opt: any) => opt.id !== "all").map((opt: any) => opt.id));
       }
     } else {
       const updatedPublishedFor = publishedFor.includes(id)
@@ -538,12 +523,7 @@ export default function FormTeks() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -576,11 +556,7 @@ export default function FormTeks() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -661,10 +637,7 @@ export default function FormTeks() {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -746,10 +719,7 @@ export default function FormTeks() {
                     </SelectTrigger>
                     <SelectContent>
                       {categories.map((category) => (
-                        <SelectItem
-                          key={category.id}
-                          value={category.id.toString()}
-                        >
+                        <SelectItem key={category.id} value={category.id.toString()}>
                           {category.name}
                         </SelectItem>
                       ))}
@@ -764,9 +734,7 @@ export default function FormTeks() {
                     defaultChecked={isSwitchOn}
                     color="primary"
                     id="c2"
-                    onCheckedChange={(checked: boolean) =>
-                      setIsSwitchOn(checked)
-                    }
+                    onCheckedChange={(checked: boolean) => setIsSwitchOn(checked)}
                   />
                 </div>
               </div>
@@ -793,12 +761,8 @@ export default function FormTeks() {
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="friendly">Friendly</SelectItem>
-                          <SelectItem value="profesional">
-                            Profesional
-                          </SelectItem>
-                          <SelectItem value="informational">
-                            Informational
-                          </SelectItem>
+                          <SelectItem value="profesional">Profesional</SelectItem>
+                          <SelectItem value="informational">Informational</SelectItem>
                           <SelectItem value="neutral">Neutral</SelectItem>
                           <SelectItem value="witty">Witty</SelectItem>
                         </SelectContent>
@@ -811,15 +775,9 @@ export default function FormTeks() {
                           <SelectValue placeholder="Pilih" />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="news">
-                            News (300 - 900 words)
-                          </SelectItem>
-                          <SelectItem value="info">
-                            Info (900 - 2000 words)
-                          </SelectItem>
-                          <SelectItem value="detail">
-                            Detail (2000 - 5000 words)
-                          </SelectItem>
+                          <SelectItem value="news">News (300 - 900 words)</SelectItem>
+                          <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
+                          <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -882,9 +840,7 @@ export default function FormTeks() {
                         {isLoading ? "Generating..." : "Generate"}
                       </Button>
                     </div>
-                    <p className="font-semibold">
-                      {t("Keywords to include in the text")}
-                    </p>
+                    <p className="font-semibold">{t("Keywords to include in the text")}</p>
                     <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
@@ -948,12 +904,7 @@ export default function FormTeks() {
                             target="_blank"
                             rel="noopener noreferrer"
                           >
-                            <Button
-                              className="mb-2"
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
+                            <Button className="mb-2" size="sm" variant={"outline"} color="primary">
                               {t("update")}
                             </Button>
                           </Link>
@@ -974,17 +925,12 @@ export default function FormTeks() {
                         <p className="text-gray-500">Loading Proses Data...</p>
                       </div>
                     ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={articleBody || value} />
                     )
                   }
                 />
                 {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.description.message}</p>
                 )}
               </div>
               <div className="py-3 space-y-2">
@@ -1018,10 +964,7 @@ export default function FormTeks() {
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
                         </div>
-                        <Button
-                          color="destructive"
-                          onClick={handleRemoveAllFiles}
-                        >
+                        <Button color="destructive" onClick={handleRemoveAllFiles}>
                           {t("remove-all")}
                         </Button>
                       </div>
@@ -1053,9 +996,7 @@ export default function FormTeks() {
                   )}
                 />
                 {errors.creatorName?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.creatorName.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                 )}
               </div>
             </div>
@@ -1097,8 +1038,7 @@ export default function FormTeks() {
                       checked={
                         option.id === "all"
                           ? publishedFor.length ===
-                            options.filter((opt: any) => opt.id !== "all")
-                              .length
+                            options.filter((opt: any) => opt.id !== "all").length
                           : publishedFor.includes(option.id)
                       }
                       onCheckedChange={() => handleCheckboxChange(option.id)}
diff --git a/src/components/features/form/content/teks-update-form.tsx b/src/components/features/form/content/teks-update-form.tsx
index db7cc528..208a05b1 100644
--- a/src/components/features/form/content/teks-update-form.tsx
+++ b/src/components/features/form/content/teks-update-form.tsx
@@ -1,34 +1,24 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { getCsrfToken } from "@/lib/services/auth";
 import {
   createMedia,
   getTagsBySubCategoryId,
@@ -36,22 +26,26 @@ import {
   uploadThumbnail,
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon } from "lucide-react";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
 import { error, loading } from "@/lib/utils/swal";
-import { Upload } from "tus-js-client";
-import { getCsrfToken } from "@/lib/services/auth";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
 
 const teksSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -210,9 +204,7 @@ export default function FormTeksUpdate() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -254,9 +246,7 @@ export default function FormTeksUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -296,12 +286,8 @@ export default function FormTeksUpdate() {
   const handleCheckboxChange = (id: string) => {
     if (id === "all") {
       // Select all options except "all"
-      const allOptions = options
-        .filter((opt) => opt.id !== "all")
-        .map((opt) => opt.id);
-      setPublishedFor(
-        publishedFor.length === allOptions.length ? [] : allOptions
-      );
+      const allOptions = options.filter((opt) => opt.id !== "all").map((opt) => opt.id);
+      setPublishedFor(publishedFor.length === allOptions.length ? [] : allOptions);
     } else {
       // Toggle individual option
       setPublishedFor((prev) =>
@@ -373,12 +359,7 @@ export default function FormTeksUpdate() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -411,11 +392,7 @@ export default function FormTeksUpdate() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -505,10 +482,7 @@ export default function FormTeksUpdate() {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -555,8 +529,8 @@ export default function FormTeksUpdate() {
           : [...currentSelections, value];
 
         // If all individual options are selected, include "all" automatically
-        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
-          (opt) => updatedSelections.includes(opt)
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+          updatedSelections.includes(opt)
         );
         return {
           ...prev,
@@ -586,9 +560,7 @@ export default function FormTeksUpdate() {
   };
 
   const handleEditTag = (index: number, newValue: string) => {
-    setTags((prevTags) =>
-      prevTags.map((tag, i) => (i === index ? newValue : tag))
-    );
+    setTags((prevTags) => prevTags.map((tag, i) => (i === index ? newValue : tag)));
   };
 
   return (
@@ -616,9 +588,7 @@ export default function FormTeksUpdate() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -657,9 +627,7 @@ export default function FormTeksUpdate() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
                 <div className="py-3 space-y-2">
@@ -693,10 +661,7 @@ export default function FormTeksUpdate() {
                               <Switch defaultChecked color="primary" id="c2" />
                             </div>
                           </div>
-                          <Button
-                            color="destructive"
-                            onClick={handleRemoveAllFiles}
-                          >
+                          <Button color="destructive" onClick={handleRemoveAllFiles}>
                             {t("remove-all")}
                           </Button>
                         </div>
@@ -704,16 +669,10 @@ export default function FormTeksUpdate() {
                     ) : null}
                     {files.length > 0 && (
                       <div className="mt-4 space-y-2">
-                        <Label className="text-lg font-semibold">
-                          {" "}
-                          {t("file-media")}
-                        </Label>
+                        <Label className="text-lg font-semibold"> {t("file-media")}</Label>
                         <div className="grid gap-4">
                           {files.map((file: any) => (
-                            <div
-                              key={file.id}
-                              className="flex items-center border p-2 rounded-md"
-                            >
+                            <div key={file.id} className="flex items-center border p-2 rounded-md">
                               <img
                                 src={file.thumbnailFileUrl}
                                 alt={file.fileName}
@@ -735,15 +694,8 @@ export default function FormTeksUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("all")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "all"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("all")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "all")}
                                       className="form-checkbox"
                                     />
                                     <span>{t("all")}</span>
@@ -753,14 +705,9 @@ export default function FormTeksUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("nasional")}
+                                      checked={selectedOptions[file.id]?.includes("nasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "nasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "nasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -771,15 +718,8 @@ export default function FormTeksUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("wilayah")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "wilayah"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("wilayah")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "wilayah")}
                                       className="form-checkbox"
                                     />
                                     <span>Wilayah</span>
@@ -789,14 +729,9 @@ export default function FormTeksUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("internasional")}
+                                      checked={selectedOptions[file.id]?.includes("internasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "internasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "internasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -833,9 +768,7 @@ export default function FormTeksUpdate() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
@@ -894,8 +827,7 @@ export default function FormTeksUpdate() {
                         checked={
                           option.id === "all"
                             ? publishedFor.length ===
-                              options.filter((opt: any) => opt.id !== "all")
-                                .length
+                              options.filter((opt: any) => opt.id !== "all").length
                             : publishedFor.includes(option.id)
                         }
                         onCheckedChange={() => handleCheckboxChange(option.id)}
diff --git a/src/components/features/form/content/teks-update-seo.tsx b/src/components/features/form/content/teks-update-seo.tsx
index 37109683..d666a8a9 100644
--- a/src/components/features/form/content/teks-update-seo.tsx
+++ b/src/components/features/form/content/teks-update-seo.tsx
@@ -1,30 +1,25 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Gauge } from "@mui/x-charts/Gauge";
+import { ArcElement, Chart as ChartJS, ChartOptions, Legend, Tooltip } from "chart.js";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
+import { Pie } from "react-chartjs-2";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
 
-import Cookies from "js-cookie";
+import { getCsrfToken } from "@/lib/services/auth";
+import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
 import {
   createMedia,
   deleteFile,
@@ -34,41 +29,33 @@ import {
   uploadThumbnail,
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
 import { error, loading } from "@/lib/utils/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/editor/view-editor";
-import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
-import { Gauge } from "@mui/x-charts/Gauge";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Pie } from "react-chartjs-2";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend,
-  ChartOptions,
-} from "chart.js";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import ViewEditor from "@/components/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -167,9 +154,7 @@ export default function FormTeksSeo() {
   const [optimizedData, setOptimizedData] = useState<string[]>([]);
   const [errorsData, setErrorData] = useState<string[]>([]);
 
-  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(
-    detail?.category.id
-  );
+  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(detail?.category.id);
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
     mabes: false,
@@ -240,9 +225,7 @@ export default function FormTeksSeo() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -309,8 +292,7 @@ export default function FormTeksSeo() {
       ];
       setWarningSEO(warningList);
       let optimizedList = [
-        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization
-          ?.optimized,
+        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.optimized,
         ...res.data.data?.seo_analysis?.analysis?.content_quality?.optimized,
       ];
       setOptimizedSEO(optimizedList);
@@ -405,12 +387,7 @@ export default function FormTeksSeo() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -443,11 +420,7 @@ export default function FormTeksSeo() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -556,9 +529,7 @@ export default function FormTeksSeo() {
       }
 
       // Jika berhasil, hapus file dari state lokal
-      setFiles((prevFiles: any) =>
-        prevFiles.filter((file: any) => file.id !== id)
-      );
+      setFiles((prevFiles: any) => prevFiles.filter((file: any) => file.id !== id));
       success();
     } catch (err) {
       error("Terjadi kesalahan saat menghapus file");
@@ -594,17 +565,11 @@ export default function FormTeksSeo() {
                   <div className="flex flex-row gap-3 w-full">
                     <div className="w-full">
                       <Label htmlFor="username">Main Keyword</Label>
-                      <Textarea
-                        id="mainKeyword"
-                        value={articleData?.mainKeyword}
-                      />
+                      <Textarea id="mainKeyword" value={articleData?.mainKeyword} />
                     </div>
                     <div className="w-full">
                       <Label htmlFor="username">Additional Keyword</Label>
-                      <Textarea
-                        id="additionalKeywords"
-                        value={articleData?.additionalKeywords}
-                      />
+                      <Textarea id="additionalKeywords" value={articleData?.additionalKeywords} />
                     </div>
                   </div>
                   <div className="flex flex-row gap-3 w-full">
@@ -614,10 +579,7 @@ export default function FormTeksSeo() {
                     </div>
                     <div className="w-full">
                       <Label htmlFor="username">Meta Description</Label>
-                      <Textarea
-                        id="metaDescription"
-                        value={articleData?.metaDescription}
-                      />
+                      <Textarea id="metaDescription" value={articleData?.metaDescription} />
                     </div>
                   </div>
                   <div className="py-3">
@@ -626,16 +588,11 @@ export default function FormTeksSeo() {
                       control={control}
                       name="description"
                       render={({ field: { onChange, value } }) => (
-                        <CustomEditor
-                          onChange={onChange}
-                          initialData={articleBody}
-                        />
+                        <CustomEditor onChange={onChange} initialData={articleBody} />
                       )}
                     />
                     {errors.description?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.description.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.description.message}</p>
                     )}
                   </div>
                 </CardContent>
@@ -654,10 +611,7 @@ export default function FormTeksSeo() {
                 </div>
                 <div className="space-y-1">
                   <Accordion type="single" collapsible className="w-full ">
-                    <AccordionItem
-                      value="error"
-                      className="border border-red-600"
-                    >
+                    <AccordionItem value="error" className="border border-red-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-red-600" />
@@ -677,10 +631,7 @@ export default function FormTeksSeo() {
                       </AccordionContent>
                     </AccordionItem>
 
-                    <AccordionItem
-                      value="warning"
-                      className="border border-yellow-600"
-                    >
+                    <AccordionItem value="warning" className="border border-yellow-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-yellow-600" />
@@ -700,10 +651,7 @@ export default function FormTeksSeo() {
                       </AccordionContent>
                     </AccordionItem>
 
-                    <AccordionItem
-                      value="optimized"
-                      className="border border-green-600"
-                    >
+                    <AccordionItem value="optimized" className="border border-green-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-green-600" />
@@ -735,16 +683,11 @@ export default function FormTeksSeo() {
                     control={control}
                     name="description"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody}
-                      />
+                      <CustomEditor onChange={onChange} initialData={articleBody} />
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
               </CardContent>
diff --git a/src/components/features/form/content/video-detail-form.tsx b/src/components/features/form/content/video-detail-form.tsx
index e6e42eac..b119f77d 100644
--- a/src/components/features/form/content/video-detail-form.tsx
+++ b/src/components/features/form/content/video-detail-form.tsx
@@ -1,28 +1,18 @@
 "use client";
+
+import { register } from "module";
 import React, { ChangeEvent, useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { MailIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
 import {
   createMedia,
   getTagsBySubCategoryId,
@@ -32,8 +22,21 @@ import {
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
-import { MailIcon } from "lucide-react";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -41,28 +44,28 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
+
+import dynamic from "next/dynamic";
+import { useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
 import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
+
+import { loading } from "@/config/swal";
+import { error } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import {
-  DialogHeader,
-  DialogFooter,
   Dialog,
   DialogContent,
+  DialogFooter,
+  DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Textarea } from "@/components/ui/textarea";
-import { loading } from "@/config/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { error } from "@/lib/utils/swal";
-import dynamic from "next/dynamic";
-import { useRouter } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -166,12 +169,7 @@ export default function FormVideoDetail() {
   // };
 
   useEffect(() => {
-    if (
-      userLevelId != undefined &&
-      roleId != undefined &&
-      userLevelId == "216" &&
-      roleId == "3"
-    ) {
+    if (userLevelId != undefined && roleId != undefined && userLevelId == "216" && roleId == "3") {
       setIsUserMabesApprover(true);
     }
   }, [userLevelId, roleId]);
@@ -199,9 +197,7 @@ export default function FormVideoDetail() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -231,15 +227,11 @@ export default function FormVideoDetail() {
         });
 
         if (details.publishedForObject) {
-          const publisherIds = details.publishedForObject.map(
-            (obj: any) => obj.id
-          );
+          const publisherIds = details.publishedForObject.map((obj: any) => obj.id);
           setSelectedPublishers(publisherIds);
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -338,11 +330,7 @@ export default function FormVideoDetail() {
     return temp;
   };
 
-  const setupPlacement = (
-    index: number,
-    placement: string,
-    checked: boolean
-  ) => {
+  const setupPlacement = (index: number, placement: string, checked: boolean) => {
     let temp = [...filePlacements];
     if (checked) {
       if (placement === "all") {
@@ -378,12 +366,7 @@ export default function FormVideoDetail() {
     rejects.push(id);
     setRejectedFiles(rejects);
   }
-  const handleMain = (
-    type: string,
-    url: string,
-    names: string,
-    format: string
-  ) => {
+  const handleMain = (type: string, url: string, names: string, format: string) => {
     console.log("Test 3 :", type, url, names, format);
     setMain({
       type,
@@ -433,9 +416,7 @@ export default function FormVideoDetail() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -472,9 +453,7 @@ export default function FormVideoDetail() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
                 <div className="space-y-2">
@@ -544,9 +523,7 @@ export default function FormVideoDetail() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
@@ -564,16 +541,11 @@ export default function FormVideoDetail() {
                 <div className="space-y-2">
                   <Label>{t("tags")}</Label>
                   <div className="flex flex-wrap gap-2">
-                    {detail?.tags
-                      ?.split(",")
-                      .map((tag: string, index: number) => (
-                        <Badge
-                          key={index}
-                          className="border rounded-md  px-2 py-2"
-                        >
-                          {tag.trim()}
-                        </Badge>
-                      ))}
+                    {detail?.tags?.split(",").map((tag: string, index: number) => (
+                      <Badge key={index} className="border rounded-md  px-2 py-2">
+                        {tag.trim()}
+                      </Badge>
+                    ))}
                   </div>
                 </div>
               </div>
@@ -634,11 +606,7 @@ export default function FormVideoDetail() {
                   ""
                 ) : (
                   <div className="flex flex-col gap-2 p-3">
-                    <Button
-                      onClick={() => actionApproval("2")}
-                      color="primary"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("2")} color="primary" type="button">
                       <Icon icon="fa:check" className="mr-3" /> {t("accept")}
                     </Button>
                     <Button
@@ -646,14 +614,9 @@ export default function FormVideoDetail() {
                       className="bg-orange-400 hover:bg-orange-300"
                       type="button"
                     >
-                      <Icon icon="fa:comment-o" className="mr-3" />{" "}
-                      {t("revision")}
+                      <Icon icon="fa:comment-o" className="mr-3" /> {t("revision")}
                     </Button>
-                    <Button
-                      onClick={() => actionApproval("4")}
-                      color="destructive"
-                      type="button"
-                    >
+                    <Button onClick={() => actionApproval("4")} color="destructive" type="button">
                       <Icon icon="fa:times" className="mr-3" />
                       {t("reject")}
                     </Button>
@@ -670,19 +633,12 @@ export default function FormVideoDetail() {
                   </DialogHeader>
                   {status == "2"
                     ? files?.map((file, index) => (
-                        <div
-                          key={file.id}
-                          className="flex flex-row gap-2 items-center"
-                        >
+                        <div key={file.id} className="flex flex-row gap-2 items-center">
                           <img src={file.url} className="w-[200px]" />
                           <div className="flex flex-col gap-2 w-full">
                             <div className="flex justify-between text-sm">
                               {file.fileName}
-                              <a
-                                onClick={() =>
-                                  handleDeleteFileApproval(file.id)
-                                }
-                              >
+                              <a onClick={() => handleDeleteFileApproval(file.id)}>
                                 <Icon icon="humbleicons:times" color="red" />
                               </a>
                             </div>
@@ -692,9 +648,7 @@ export default function FormVideoDetail() {
                                   <Checkbox
                                     id="terms"
                                     value="all"
-                                    checked={filePlacements[index]?.includes(
-                                      "all"
-                                    )}
+                                    checked={filePlacements[index]?.includes("all")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "all", Boolean(e))
                                     }
@@ -709,9 +663,7 @@ export default function FormVideoDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "mabes"
-                                    )}
+                                    checked={filePlacements[index]?.includes("mabes")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "mabes", Boolean(e))
                                     }
@@ -726,9 +678,7 @@ export default function FormVideoDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "polda"
-                                    )}
+                                    checked={filePlacements[index]?.includes("polda")}
                                     onCheckedChange={(e) =>
                                       setupPlacement(index, "polda", Boolean(e))
                                     }
@@ -744,15 +694,9 @@ export default function FormVideoDetail() {
                                 <div className="flex items-center space-x-2">
                                   <Checkbox
                                     id="terms"
-                                    checked={filePlacements[index]?.includes(
-                                      "international"
-                                    )}
+                                    checked={filePlacements[index]?.includes("international")}
                                     onCheckedChange={(e) =>
-                                      setupPlacement(
-                                        index,
-                                        "international",
-                                        Boolean(e)
-                                      )
+                                      setupPlacement(index, "international", Boolean(e))
                                     }
                                   />
                                   <label
@@ -778,38 +722,22 @@ export default function FormVideoDetail() {
                   {status == "3" || status == "4" ? (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Kualitas media kurang baik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Kualitas media kurang baik" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Kualitas media kurang baik")
-                        }
+                        onClick={() => setDescription("Kualitas media kurang baik")}
                       >
                         Kualitas media kurang baik
                       </Badge>
 
                       <Badge
-                        color={
-                          description === "Deskripsi kurang lengkap"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Deskripsi kurang lengkap" ? "primary" : "default"}
                         className="cursor-pointer"
-                        onClick={() =>
-                          setDescription("Deskripsi kurang lengkap")
-                        }
+                        onClick={() => setDescription("Deskripsi kurang lengkap")}
                       >
                         Deskripsi kurang lengkap
                       </Badge>
                       <Badge
-                        color={
-                          description === "Judul kurang tepat"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Judul kurang tepat" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Judul kurang tepat")}
                       >
@@ -819,22 +747,14 @@ export default function FormVideoDetail() {
                   ) : (
                     <div className="flex flex-row gap-2">
                       <Badge
-                        color={
-                          description === "Konten sangat bagus"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten sangat bagus" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten sangat bagus")}
                       >
                         Konten sangat bagus
                       </Badge>
                       <Badge
-                        color={
-                          description === "Konten menarik"
-                            ? "primary"
-                            : "default"
-                        }
+                        color={description === "Konten menarik" ? "primary" : "default"}
                         className="cursor-pointer"
                         onClick={() => setDescription("Konten menarik")}
                       >
@@ -843,18 +763,10 @@ export default function FormVideoDetail() {
                     </div>
                   )}
                   <DialogFooter>
-                    <Button
-                      type="button"
-                      color="primary"
-                      onClick={() => submit()}
-                    >
+                    <Button type="button" color="primary" onClick={() => submit()}>
                       {t("submit")}
                     </Button>
-                    <Button
-                      type="button"
-                      color="destructive"
-                      onClick={() => setModalOpen(false)}
-                    >
+                    <Button type="button" color="destructive" onClick={() => setModalOpen(false)}>
                       {t("cancel")}
                     </Button>
                   </DialogFooter>
diff --git a/src/components/features/form/content/video-form.tsx b/src/components/features/form/content/video-form.tsx
index 8463daef..6ed26542 100644
--- a/src/components/features/form/content/video-form.tsx
+++ b/src/components/features/form/content/video-form.tsx
@@ -1,22 +1,47 @@
 "use client";
-import React, {
-  ChangeEvent,
-  useEffect,
-  useRef,
-  Fragment,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { redirect, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { Upload } from "tus-js-client";
+import { Icon } from "@iconify/react";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CloudUpload } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error, loading } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/lib/services/content/ai";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -24,37 +49,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-  uploadThumbnail,
-} from "@/lib/services/content/content";
-import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  generateDataArticle,
-  getDetailArticle,
-  getGenerateKeywords,
-  getGenerateTitle,
-} from "@/lib/services/content/ai";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react";
-import { CloudUpload } from "lucide-react";
-import Image from "next/image";
-import { error, loading } from "@/config/swal";
-import { Item } from "@radix-ui/react-dropdown-menu";
-import dynamic from "next/dynamic";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
 
 const CustomEditor = dynamic(
   () => {
@@ -107,9 +103,7 @@ export default function FormVideo() {
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
   const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
@@ -335,10 +329,7 @@ export default function FormVideo() {
         throw new Error("Timeout: Artikel belum selesai diproses.");
       };
       const articleData = await waitForStatusUpdate();
-      const cleanArticleBody = articleData?.articleBody?.replace(
-        /<img[^>]*>/g,
-        ""
-      );
+      const cleanArticleBody = articleData?.articleBody?.replace(/<img[^>]*>/g, "");
       const articleImagesData = articleData?.imagesUrl?.split(",");
       setArticleBody(cleanArticleBody || "");
       setDetailData(articleData);
@@ -391,9 +382,7 @@ export default function FormVideo() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -414,11 +403,7 @@ export default function FormVideo() {
         setPublishedFor([]);
       } else {
         // Select all checkboxes
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
+        setPublishedFor(options.filter((opt: any) => opt.id !== "all").map((opt: any) => opt.id));
       }
     } else {
       const updatedPublishedFor = publishedFor.includes(id)
@@ -539,12 +524,7 @@ export default function FormVideo() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -576,11 +556,7 @@ export default function FormVideo() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -661,10 +637,7 @@ export default function FormVideo() {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -745,10 +718,7 @@ export default function FormVideo() {
                     </SelectTrigger>
                     <SelectContent>
                       {categories.map((category) => (
-                        <SelectItem
-                          key={category.id}
-                          value={category.id.toString()}
-                        >
+                        <SelectItem key={category.id} value={category.id.toString()}>
                           {category.name}
                         </SelectItem>
                       ))}
@@ -763,9 +733,7 @@ export default function FormVideo() {
                     defaultChecked={isSwitchOn}
                     color="primary"
                     id="c2"
-                    onCheckedChange={(checked: boolean) =>
-                      setIsSwitchOn(checked)
-                    }
+                    onCheckedChange={(checked: boolean) => setIsSwitchOn(checked)}
                   />
                 </div>
               </div>
@@ -792,12 +760,8 @@ export default function FormVideo() {
                         </SelectTrigger>
                         <SelectContent>
                           <SelectItem value="friendly">Friendly</SelectItem>
-                          <SelectItem value="profesional">
-                            Profesional
-                          </SelectItem>
-                          <SelectItem value="informational">
-                            Informational
-                          </SelectItem>
+                          <SelectItem value="profesional">Profesional</SelectItem>
+                          <SelectItem value="informational">Informational</SelectItem>
                           <SelectItem value="neutral">Neutral</SelectItem>
                           <SelectItem value="witty">Witty</SelectItem>
                         </SelectContent>
@@ -810,15 +774,9 @@ export default function FormVideo() {
                           <SelectValue placeholder="Pilih" />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="news">
-                            News (300 - 900 words)
-                          </SelectItem>
-                          <SelectItem value="info">
-                            Info (900 - 2000 words)
-                          </SelectItem>
-                          <SelectItem value="detail">
-                            Detail (2000 - 5000 words)
-                          </SelectItem>
+                          <SelectItem value="news">News (300 - 900 words)</SelectItem>
+                          <SelectItem value="info">Info (900 - 2000 words)</SelectItem>
+                          <SelectItem value="detail">Detail (2000 - 5000 words)</SelectItem>
                         </SelectContent>
                       </Select>
                     </div>
@@ -881,9 +839,7 @@ export default function FormVideo() {
                         {isLoading ? "Generating..." : "Generate"}
                       </Button>
                     </div>
-                    <p className="font-semibold">
-                      {t("Keywords to include in the text")}
-                    </p>
+                    <p className="font-semibold">{t("Keywords to include in the text")}</p>
                     <p className="text-sm">{t("title-key")}</p>
                     <div className="mt-3">
                       <Textarea
@@ -947,12 +903,7 @@ export default function FormVideo() {
                             target="_blank"
                             rel="noopener noreferrer"
                           >
-                            <Button
-                              className="mb-2"
-                              size="sm"
-                              variant={"outline"}
-                              color="primary"
-                            >
+                            <Button className="mb-2" size="sm" variant={"outline"} color="primary">
                               {t("update")}
                             </Button>
                           </Link>
@@ -973,17 +924,12 @@ export default function FormVideo() {
                         <p className="text-gray-500">Loading Proses Data...</p>
                       </div>
                     ) : (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody || value}
-                      />
+                      <CustomEditor onChange={onChange} initialData={articleBody || value} />
                     )
                   }
                 />
                 {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.description.message}</p>
                 )}
               </div>
               <div className="py-3 space-y-2">
@@ -1017,10 +963,7 @@ export default function FormVideo() {
                             <Switch defaultChecked color="primary" id="c2" />
                           </div>
                         </div>
-                        <Button
-                          color="destructive"
-                          onClick={handleRemoveAllFiles}
-                        >
+                        <Button color="destructive" onClick={handleRemoveAllFiles}>
                           {t("remove-all")}
                         </Button>
                       </div>
@@ -1052,9 +995,7 @@ export default function FormVideo() {
                   )}
                 />
                 {errors.creatorName?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.creatorName.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                 )}
               </div>
             </div>
@@ -1064,11 +1005,7 @@ export default function FormVideo() {
             </div> */}
             {preview && (
               <div className="mt-3 px-3">
-                <img
-                  src={preview}
-                  alt="Thumbnail Preview"
-                  className="w-full h-auto rounded"
-                />
+                <img src={preview} alt="Thumbnail Preview" className="w-full h-auto rounded" />
               </div>
             )}
             <div className="px-3 py-3 space-y-2">
@@ -1109,8 +1046,7 @@ export default function FormVideo() {
                       checked={
                         option.id === "all"
                           ? publishedFor.length ===
-                            options.filter((opt: any) => opt.id !== "all")
-                              .length
+                            options.filter((opt: any) => opt.id !== "all").length
                           : publishedFor.includes(option.id)
                       }
                       onCheckedChange={() => handleCheckboxChange(option.id)}
diff --git a/src/components/features/form/content/video-update-form.tsx b/src/components/features/form/content/video-update-form.tsx
index 1525648a..140fda2c 100644
--- a/src/components/features/form/content/video-update-form.tsx
+++ b/src/components/features/form/content/video-update-form.tsx
@@ -1,34 +1,18 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
-import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
+import { Swiper, SwiperSlide } from "swiper/react";
+import * as z from "zod";
+
 import {
   createMedia,
   deleteFile,
@@ -38,8 +22,21 @@ import {
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon } from "lucide-react";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -47,22 +44,22 @@ import "swiper/css/pagination";
 import "swiper/css/thumbs";
 import "swiper/css";
 import "swiper/css/navigation";
-import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
-import { files } from "@/app/[locale]/(protected)/app/projects/[id]/data";
-import { useDropzone } from "react-dropzone";
+
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+import { useDropzone } from "react-dropzone";
+import { FreeMode, Navigation, Pagination, Thumbs } from "swiper/modules";
 import { Upload } from "tus-js-client";
+
 import { getCsrfToken } from "@/lib/services/auth";
 import { error, loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
+import { files } from "@/app/[locale]/(protected)/app/projects/[id]/data";
 
 const videoSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -222,9 +219,7 @@ export default function FormVideoUpdate() {
   };
 
   const handleEditTag = (index: number, newValue: string) => {
-    setTags((prevTags) =>
-      prevTags.map((tag, i) => (i === index ? newValue : tag))
-    );
+    setTags((prevTags) => prevTags.map((tag, i) => (i === index ? newValue : tag)));
   };
 
   const getCategories = async () => {
@@ -236,9 +231,7 @@ export default function FormVideoUpdate() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -280,9 +273,7 @@ export default function FormVideoUpdate() {
           setTags(details.tags.split(",").map((tag: string) => tag.trim()));
         }
 
-        const matchingCategory = categories.find(
-          (category) => category.id === details.categoryId
-        );
+        const matchingCategory = categories.find((category) => category.id === details.categoryId);
 
         if (matchingCategory) {
           setSelectedTarget(matchingCategory.name);
@@ -328,12 +319,8 @@ export default function FormVideoUpdate() {
   const handleCheckboxChange = (id: string) => {
     if (id === "all") {
       // Select all options except "all"
-      const allOptions = options
-        .filter((opt) => opt.id !== "all")
-        .map((opt) => opt.id);
-      setPublishedFor(
-        publishedFor.length === allOptions.length ? [] : allOptions
-      );
+      const allOptions = options.filter((opt) => opt.id !== "all").map((opt) => opt.id);
+      setPublishedFor(publishedFor.length === allOptions.length ? [] : allOptions);
     } else {
       // Toggle individual option
       setPublishedFor((prev) =>
@@ -416,12 +403,7 @@ export default function FormVideoUpdate() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -453,11 +435,7 @@ export default function FormVideoUpdate() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -538,9 +516,7 @@ export default function FormVideoUpdate() {
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
-          <div className="text-sm text-card-foreground">
-            {file.fileName || file.name}
-          </div>
+          <div className="text-sm text-card-foreground">{file.fileName || file.name}</div>
           <div className="text-xs font-light text-muted-foreground">
             {Math.round(file.size / 100) / 10 > 1000 ? (
               <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
@@ -583,8 +559,8 @@ export default function FormVideoUpdate() {
           : [...currentSelections, value];
 
         // If all individual options are selected, include "all" automatically
-        const isAllSelected = ["nasional", "wilayah", "internasional"].every(
-          (opt) => updatedSelections.includes(opt)
+        const isAllSelected = ["nasional", "wilayah", "internasional"].every((opt) =>
+          updatedSelections.includes(opt)
         );
         return {
           ...prev,
@@ -636,9 +612,7 @@ export default function FormVideoUpdate() {
       }
 
       // Jika berhasil, hapus file dari state lokal
-      setFiles((prevFiles: any) =>
-        prevFiles.filter((file: any) => file.id !== id)
-      );
+      setFiles((prevFiles: any) => prevFiles.filter((file: any) => file.id !== id));
       success();
     } catch (err) {
       error("Terjadi kesalahan saat menghapus file");
@@ -670,9 +644,7 @@ export default function FormVideoUpdate() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex items-center">
@@ -712,9 +684,7 @@ export default function FormVideoUpdate() {
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
                 <div className="py-3 space-y-2">
@@ -759,16 +729,10 @@ export default function FormVideoUpdate() {
                     ) : null}
                     {files.length > 0 && (
                       <div className="mt-4 space-y-2">
-                        <Label className="text-lg font-semibold">
-                          {" "}
-                          {t("file-media")}
-                        </Label>
+                        <Label className="text-lg font-semibold"> {t("file-media")}</Label>
                         <div className="grid gap-4">
                           {files.map((file: any) => (
-                            <div
-                              key={file.id}
-                              className="flex items-center border p-2 rounded-md"
-                            >
+                            <div key={file.id} className="flex items-center border p-2 rounded-md">
                               <img
                                 src={file.thumbnailFileUrl}
                                 alt={file.fileName}
@@ -790,15 +754,8 @@ export default function FormVideoUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("all")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "all"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("all")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "all")}
                                       className="form-checkbox"
                                     />
                                     <span>{t("all")}</span>
@@ -808,14 +765,9 @@ export default function FormVideoUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("nasional")}
+                                      checked={selectedOptions[file.id]?.includes("nasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "nasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "nasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -826,15 +778,8 @@ export default function FormVideoUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("wilayah")}
-                                      onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "wilayah"
-                                        )
-                                      }
+                                      checked={selectedOptions[file.id]?.includes("wilayah")}
+                                      onChange={() => handleCheckboxChangeImage(file.id, "wilayah")}
                                       className="form-checkbox"
                                     />
                                     <span>Wilayah</span>
@@ -844,14 +789,9 @@ export default function FormVideoUpdate() {
                                   <Label className="flex items-center space-x-2">
                                     <input
                                       type="checkbox"
-                                      checked={selectedOptions[
-                                        file.id
-                                      ]?.includes("internasional")}
+                                      checked={selectedOptions[file.id]?.includes("internasional")}
                                       onChange={() =>
-                                        handleCheckboxChangeImage(
-                                          file.id,
-                                          "internasional"
-                                        )
+                                        handleCheckboxChangeImage(file.id, "internasional")
                                       }
                                       className="form-checkbox"
                                     />
@@ -888,9 +828,7 @@ export default function FormVideoUpdate() {
                     )}
                   />
                   {errors.creatorName?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.creatorName.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                   )}
                 </div>
               </div>
diff --git a/src/components/features/form/content/video-update-seo.tsx b/src/components/features/form/content/video-update-seo.tsx
index 044401fd..daa5e273 100644
--- a/src/components/features/form/content/video-update-seo.tsx
+++ b/src/components/features/form/content/video-update-seo.tsx
@@ -1,30 +1,25 @@
 "use client";
-import React, {
-  ChangeEvent,
-  Fragment,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Gauge } from "@mui/x-charts/Gauge";
+import { ArcElement, Chart as ChartJS, ChartOptions, Legend, Tooltip } from "chart.js";
+import Cookies from "js-cookie";
+import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
+import { Pie } from "react-chartjs-2";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
 
-import Cookies from "js-cookie";
+import { getCsrfToken } from "@/lib/services/auth";
+import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
 import {
   createMedia,
   deleteFile,
@@ -34,41 +29,33 @@ import {
   uploadThumbnail,
 } from "@/lib/services/content/content";
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
-import { Badge } from "@/components/ui/badge";
-import { CloudUpload, MailIcon, PieChart, XIcon } from "lucide-react";
-import dynamic from "next/dynamic";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
 import { error, loading } from "@/lib/utils/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/editor/view-editor";
-import { getDetailArticle, getSeoScore } from "@/lib/services/content/ai";
-import { Gauge } from "@mui/x-charts/Gauge";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Pie } from "react-chartjs-2";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
-  Chart as ChartJS,
-  ArcElement,
-  Tooltip,
-  Legend,
-  ChartOptions,
-} from "chart.js";
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import ViewEditor from "@/components/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
-  description: z
-    .string()
-    .min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
+  description: z.string().min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
   creatorName: z.string().min(1, { message: "Creator diperlukan" }),
   // tags: z.string().min(1, { message: "Judul diperlukan" }),
 });
@@ -167,9 +154,7 @@ export default function FormVideoSeo() {
   const [optimizedData, setOptimizedData] = useState<string[]>([]);
   const [errorsData, setErrorData] = useState<string[]>([]);
 
-  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(
-    detail?.category.id
-  );
+  const [selectedTarget, setSelectedTarget] = useState<string | undefined>(detail?.category.id);
   const [unitSelection, setUnitSelection] = useState({
     allUnit: false,
     mabes: false,
@@ -240,9 +225,7 @@ export default function FormVideoSeo() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -309,8 +292,7 @@ export default function FormVideoSeo() {
       ];
       setWarningSEO(warningList);
       let optimizedList = [
-        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization
-          ?.optimized,
+        ...res.data.data?.seo_analysis?.analysis?.keyword_optimization?.optimized,
         ...res.data.data?.seo_analysis?.analysis?.content_quality?.optimized,
       ];
       setOptimizedSEO(optimizedList);
@@ -405,12 +387,7 @@ export default function FormVideoSeo() {
     });
   };
 
-  async function uploadResumableFile(
-    idx: number,
-    id: string,
-    file: any,
-    duration: string
-  ) {
+  async function uploadResumableFile(idx: number, id: string, file: any, duration: string) {
     console.log(idx, id, file, duration);
 
     // const placements = getPlacement(file.placements);
@@ -443,11 +420,7 @@ export default function FormVideoSeo() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         progressInfo[idx].percentage = uploadPersen;
         counterUpdateProgress++;
@@ -556,9 +529,7 @@ export default function FormVideoSeo() {
       }
 
       // Jika berhasil, hapus file dari state lokal
-      setFiles((prevFiles: any) =>
-        prevFiles.filter((file: any) => file.id !== id)
-      );
+      setFiles((prevFiles: any) => prevFiles.filter((file: any) => file.id !== id));
       success();
     } catch (err) {
       error("Terjadi kesalahan saat menghapus file");
@@ -594,17 +565,11 @@ export default function FormVideoSeo() {
                   <div className="flex flex-row gap-3 w-full">
                     <div className="w-full">
                       <Label htmlFor="username">Main Keyword</Label>
-                      <Textarea
-                        id="mainKeyword"
-                        value={articleData?.mainKeyword}
-                      />
+                      <Textarea id="mainKeyword" value={articleData?.mainKeyword} />
                     </div>
                     <div className="w-full">
                       <Label htmlFor="username">Additional Keyword</Label>
-                      <Textarea
-                        id="additionalKeywords"
-                        value={articleData?.additionalKeywords}
-                      />
+                      <Textarea id="additionalKeywords" value={articleData?.additionalKeywords} />
                     </div>
                   </div>
                   <div className="flex flex-row gap-3 w-full">
@@ -614,10 +579,7 @@ export default function FormVideoSeo() {
                     </div>
                     <div className="w-full">
                       <Label htmlFor="username">Meta Description</Label>
-                      <Textarea
-                        id="metaDescription"
-                        value={articleData?.metaDescription}
-                      />
+                      <Textarea id="metaDescription" value={articleData?.metaDescription} />
                     </div>
                   </div>
                   <div className="py-3">
@@ -626,16 +588,11 @@ export default function FormVideoSeo() {
                       control={control}
                       name="description"
                       render={({ field: { onChange, value } }) => (
-                        <CustomEditor
-                          onChange={onChange}
-                          initialData={articleBody}
-                        />
+                        <CustomEditor onChange={onChange} initialData={articleBody} />
                       )}
                     />
                     {errors.description?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.description.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.description.message}</p>
                     )}
                   </div>
                 </CardContent>
@@ -654,10 +611,7 @@ export default function FormVideoSeo() {
                 </div>
                 <div className="space-y-1">
                   <Accordion type="single" collapsible className="w-full ">
-                    <AccordionItem
-                      value="error"
-                      className="border border-red-600"
-                    >
+                    <AccordionItem value="error" className="border border-red-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-red-600" />
@@ -677,10 +631,7 @@ export default function FormVideoSeo() {
                       </AccordionContent>
                     </AccordionItem>
 
-                    <AccordionItem
-                      value="warning"
-                      className="border border-yellow-600"
-                    >
+                    <AccordionItem value="warning" className="border border-yellow-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-yellow-600" />
@@ -700,10 +651,7 @@ export default function FormVideoSeo() {
                       </AccordionContent>
                     </AccordionItem>
 
-                    <AccordionItem
-                      value="optimized"
-                      className="border border-green-600"
-                    >
+                    <AccordionItem value="optimized" className="border border-green-600">
                       <AccordionTrigger>
                         <div className="flex items-center">
                           <XIcon className="text-green-600" />
@@ -735,16 +683,11 @@ export default function FormVideoSeo() {
                     control={control}
                     name="description"
                     render={({ field: { onChange, value } }) => (
-                      <CustomEditor
-                        onChange={onChange}
-                        initialData={articleBody}
-                      />
+                      <CustomEditor onChange={onChange} initialData={articleBody} />
                     )}
                   />
                   {errors.description?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.description.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.description.message}</p>
                   )}
                 </div>
               </CardContent>
diff --git a/src/components/features/form/contest/contest-detail-form.tsx b/src/components/features/form/contest/contest-detail-form.tsx
index 5798cd12..a85d8076 100644
--- a/src/components/features/form/contest/contest-detail-form.tsx
+++ b/src/components/features/form/contest/contest-detail-form.tsx
@@ -1,42 +1,32 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { format, parseISO } from "date-fns";
+import JoditEditor from "jodit-react";
+import Cookies from "js-cookie";
+import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { duration } from "moment";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import {
-  createTask,
-  getTask,
-  getUserLevelForAssignments,
-} from "@/lib/services/task";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { getCsrfToken } from "@/lib/services/auth";
 import { getContestById, postCreateContest } from "@/lib/services/contest/contest";
-import page from "@/app/[locale]/page";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+import { createTask, getTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { getOnlyDate } from "@/lib/utils/globals";
+import { error, loading } from "@/lib/utils/swal";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
-import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
-import { format, parseISO } from "date-fns";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { DateRange } from "react-day-picker";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -44,15 +34,20 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import dynamic from "next/dynamic";
-import Cookies from "js-cookie";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import page from "@/app/[locale]/page";
+
 import FileUploader from "../shared/file-uploader";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import { error, loading } from "@/lib/utils/swal";
-import { Upload } from "tus-js-client";
-import { getCsrfToken } from "@/lib/services/auth";
-import { getOnlyDate } from "@/lib/utils/globals";
-import { duration } from "moment";
 
 const contestSchema = z.object({
   theme: z.string().min(1, { message: "Judul diperlukan" }),
@@ -174,13 +169,10 @@ export default function FormContestDetail() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -466,11 +458,7 @@ export default function FormContestDetail() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -503,20 +491,10 @@ export default function FormContestDetail() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/shared/contest");
     }
   }
@@ -571,9 +549,7 @@ export default function FormContestDetail() {
                 )}
               />
               {errors.hastagCode?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.hastagCode.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.hastagCode.message}</p>
               )}
             </div>
             {/* Input Title */}
@@ -617,8 +593,7 @@ export default function FormContestDetail() {
                         {date?.from ? (
                           date.to ? (
                             <>
-                              {format(date.from, "yyyy-MM-dd")} -{" "}
-                              {format(date.to, "yyyy-MM-dd")}
+                              {format(date.from, "yyyy-MM-dd")} - {format(date.to, "yyyy-MM-dd")}
                             </>
                           ) : (
                             format(date.from, "yyyy-MM-dd")
@@ -639,9 +614,7 @@ export default function FormContestDetail() {
                           if (newDate?.from) {
                             const formattedDate = [
                               format(newDate.from, "yyyy-MM-dd"),
-                              newDate.to
-                                ? format(newDate.to, "yyyy-MM-dd")
-                                : "",
+                              newDate.to ? format(newDate.to, "yyyy-MM-dd") : "",
                             ].filter(Boolean); // Hanya menyimpan yang tidak undefined
                             onChange(formattedDate); // Simpan ke React Hook Form
                           } else {
@@ -655,9 +628,7 @@ export default function FormContestDetail() {
                 )}
               />
               {errors.duration?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.duration.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.duration.message}</p>
               )}
             </div>
             <div className="mt-5">
@@ -668,13 +639,9 @@ export default function FormContestDetail() {
                     <Checkbox
                       id={key}
                       checked={taskOutput[key as keyof typeof taskOutput]}
-                      onCheckedChange={(value) =>
-                        setTaskOutput({ ...taskOutput, [key]: value })
-                      }
+                      onCheckedChange={(value) => setTaskOutput({ ...taskOutput, [key]: value })}
                     />
-                    <Label htmlFor={key}>
-                      {key.charAt(0).toUpperCase() + key.slice(1)}
-                    </Label>
+                    <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                   </div>
                 ))}
               </div>
@@ -691,9 +658,7 @@ export default function FormContestDetail() {
                         setUnitSelection({ ...unitSelection, [key]: value })
                       }
                     />
-                    <Label htmlFor={key}>
-                      {key.charAt(0).toUpperCase() + key.slice(1)}
-                    </Label>
+                    <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                   </div>
                 ))}
                 <div className="  pl-1">
@@ -705,9 +670,7 @@ export default function FormContestDetail() {
                     </DialogTrigger>
                     <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
                       <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
+                        <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                       </DialogHeader>
                       <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
                         {listDest.map((polda: any) => (
@@ -715,9 +678,7 @@ export default function FormContestDetail() {
                             <Label className="flex items-center">
                               <Checkbox
                                 checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChange(polda.id)
-                                }
+                                onCheckedChange={() => handleCheckboxChange(polda.id)}
                                 className="mr-3"
                               />
                               {polda.name}
@@ -736,23 +697,18 @@ export default function FormContestDetail() {
                               <div className="ml-6 mt-2">
                                 <Label className="block">
                                   <Checkbox
-                                    checked={polda?.subDestination?.every(
-                                      (polres: any) =>
-                                        checkedLevels.has(polres.id)
+                                    checked={polda?.subDestination?.every((polres: any) =>
+                                      checkedLevels.has(polres.id)
                                     )}
                                     onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
+                                      const updatedLevels = new Set(checkedLevels);
+                                      polda?.subDestination?.forEach((polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
                                         }
-                                      );
+                                      });
                                       setCheckedLevels(updatedLevels);
                                     }}
                                     className="mr-2"
@@ -763,9 +719,7 @@ export default function FormContestDetail() {
                                   <Label key={polres.id} className="block mt-1">
                                     <Checkbox
                                       checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChange(polres.id)
-                                      }
+                                      onCheckedChange={() => handleCheckboxChange(polres.id)}
                                       className="mr-2"
                                     />
                                     {polres.name}
@@ -788,16 +742,11 @@ export default function FormContestDetail() {
                 control={control}
                 name="description"
                 render={({ field: { onChange, value } }) => (
-                  <CustomEditor
-                    onChange={onChange}
-                    initialData={detail?.description || value}
-                  />
+                  <CustomEditor onChange={onChange} initialData={detail?.description || value} />
                 )}
               />
               {errors.description?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.description.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.description.message}</p>
               )}
             </div>
             <div className="mt-7">
@@ -806,16 +755,11 @@ export default function FormContestDetail() {
                 control={control}
                 name="scoringFormula"
                 render={({ field: { onChange, value } }) => (
-                  <CustomEditor
-                    onChange={onChange}
-                    initialData={detail?.scoringFormula || value}
-                  />
+                  <CustomEditor onChange={onChange} initialData={detail?.scoringFormula || value} />
                 )}
               />
               {errors.scoringFormula?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.scoringFormula.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.scoringFormula.message}</p>
               )}
             </div>
             <div className="space-y-1.5 mt-5">
@@ -873,17 +817,12 @@ export default function FormContestDetail() {
                     }}
                     maxSize={100}
                     label="Upload file dengan format .mp3 atau .wav."
-                    onDrop={(files) =>
-                      setAudioFiles((prev) => [...prev, ...files])
-                    }
+                    onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                     className="mt-2"
                   />
                 </div>
                 {audioFiles?.map((audio: any, idx: any) => (
-                  <div
-                    key={idx}
-                    className="flex flex-row justify-between items-center"
-                  >
+                  <div key={idx} className="flex flex-row justify-between items-center">
                     <p>Voice Note</p>
                     <Button
                       type="button"
@@ -906,9 +845,7 @@ export default function FormContestDetail() {
                         className="border rounded p-2 w-full"
                         placeholder={`Masukkan link berita ${index + 1}`}
                         value={link}
-                        onChange={(e) =>
-                          handleLinkChange(index, e.target.value)
-                        }
+                        onChange={(e) => handleLinkChange(index, e.target.value)}
                       />
                       {links.length > 1 && (
                         <button
diff --git a/src/components/features/form/media-tracking/media-tracking-form.tsx b/src/components/features/form/media-tracking/media-tracking-form.tsx
index 7222854f..1b6ad650 100644
--- a/src/components/features/form/media-tracking/media-tracking-form.tsx
+++ b/src/components/features/form/media-tracking/media-tracking-form.tsx
@@ -1,25 +1,24 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
 import {
   createTask,
   createTaskTa,
@@ -27,6 +26,12 @@ import {
   getUserLevelForAssignments,
   getUserLevelForExpert,
 } from "@/lib/services/task";
+import { loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -34,33 +39,29 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import FileUploader from "@/components/features/form/shared/file-uploader";
-import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils/utils"
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import FileUploader from "@/components/features/form/shared/file-uploader";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
+import { Link } from "@/i18n/navigation";
+
 import {
   AdministrationLevelList,
   getListCompetencies,
   getListExperiences,
 } from "@/lib/services/management-user/management-user";
-import { Link } from "@/i18n/navigation";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
diff --git a/src/components/features/form/media-tracking/search-audio-card.tsx b/src/components/features/form/media-tracking/search-audio-card.tsx
index b6559660..1a04710f 100644
--- a/src/components/features/form/media-tracking/search-audio-card.tsx
+++ b/src/components/features/form/media-tracking/search-audio-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function SearchAudioComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function SearchAudioComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -60,9 +55,7 @@ export default function SearchAudioComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -80,13 +73,9 @@ export default function SearchAudioComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -98,9 +87,7 @@ export default function SearchAudioComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -116,12 +103,8 @@ export default function SearchAudioComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
@@ -166,8 +149,7 @@ export default function SearchAudioComponent(props: {
                     <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
                       {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
                       {audio?.timezone ? audio?.timezone : "WIB"} |{" "}
-                      <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                      {audio?.clickCount}{" "}
+                      <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}{" "}
                     </div>
                     <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
                       {audio?.title}
diff --git a/src/components/features/form/media-tracking/search-document-card.tsx b/src/components/features/form/media-tracking/search-document-card.tsx
index 83b6ec8d..3c0dadcf 100644
--- a/src/components/features/form/media-tracking/search-document-card.tsx
+++ b/src/components/features/form/media-tracking/search-document-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function SearchDocumentComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function SearchDocumentComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -60,9 +55,7 @@ export default function SearchDocumentComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -80,13 +73,9 @@ export default function SearchDocumentComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -98,9 +87,7 @@ export default function SearchDocumentComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -116,12 +103,8 @@ export default function SearchDocumentComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
diff --git a/src/components/features/form/media-tracking/search-image-card.tsx b/src/components/features/form/media-tracking/search-image-card.tsx
index bf83a670..732279e4 100644
--- a/src/components/features/form/media-tracking/search-image-card.tsx
+++ b/src/components/features/form/media-tracking/search-image-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function SearchImageComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function SearchImageComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -59,9 +54,7 @@ export default function SearchImageComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -79,13 +72,9 @@ export default function SearchImageComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -97,9 +86,7 @@ export default function SearchImageComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -115,12 +102,8 @@ export default function SearchImageComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
@@ -156,8 +139,7 @@ export default function SearchImageComponent(props: {
                   <p className="flex flex-row items-center text-sm gap-2">
                     {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                     {image?.timezone ? image?.timezone : "WIB"}|{" "}
-                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                    {image?.clickCount}{" "}
+                    <Icon icon="formkit:eye" width="15" height="15" /> {image?.clickCount}{" "}
                   </p>
                 </div>
               </Link>
diff --git a/src/components/features/form/media-tracking/search-video-card.tsx b/src/components/features/form/media-tracking/search-video-card.tsx
index eb5a5205..42562335 100644
--- a/src/components/features/form/media-tracking/search-video-card.tsx
+++ b/src/components/features/form/media-tracking/search-video-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function SearchVideoComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function SearchVideoComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -60,9 +55,7 @@ export default function SearchVideoComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -80,13 +73,9 @@ export default function SearchVideoComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -98,9 +87,7 @@ export default function SearchVideoComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -116,12 +103,8 @@ export default function SearchVideoComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
@@ -157,8 +140,7 @@ export default function SearchVideoComponent(props: {
                   <p className="flex flex-row items-center text-[10px] gap-2">
                     {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
                     {video?.timezone ? video?.timezone : "WIB"} |{" "}
-                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                    {video.clickCount}{" "}
+                    <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
                   </p>
                 </div>
               </Link>
diff --git a/src/components/features/form/planning/mediahub-publish.tsx b/src/components/features/form/planning/mediahub-publish.tsx
index 0e6cd9c3..5b46cf3e 100644
--- a/src/components/features/form/planning/mediahub-publish.tsx
+++ b/src/components/features/form/planning/mediahub-publish.tsx
@@ -1,31 +1,27 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Description } from "@radix-ui/react-toast";
+import { format } from "date-fns";
+import { id } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { createTask, getUserLevelForAssignments } from "@/lib/services/task";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
-import { id } from "date-fns/locale";
+import * as z from "zod";
+
 import { getPlanningById, publishPlanning } from "@/lib/services/planning/planning";
+import { createTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { cn } from "@/lib/utils/utils";
+import { AlertDialogHeader } from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -35,10 +31,16 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { AlertDialogHeader } from "@/components/ui/alert-dialog";
-import { Description } from "@radix-ui/react-toast";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -126,13 +128,10 @@ export default function PublishMediahub() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -156,9 +155,7 @@ export default function PublishMediahub() {
         }
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
-          );
+          const levels = new Set(details.assignedToLevel.split(",").map(Number));
           setCheckedLevels(levels);
         }
       }
@@ -181,9 +178,7 @@ export default function PublishMediahub() {
 
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
-      const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
-      );
+      const outputSet = new Set(detail.assignedToTopLevel.split(",").map(Number));
       setUnitSelection({
         allUnit: outputSet.has(0),
         mabes: outputSet.has(1),
@@ -346,13 +341,9 @@ export default function PublishMediahub() {
                       <Checkbox
                         id={key}
                         checked={taskOutput[key as keyof typeof taskOutput]}
-                        onCheckedChange={(value) =>
-                          setTaskOutput({ ...taskOutput, [key]: value })
-                        }
+                        onCheckedChange={(value) => setTaskOutput({ ...taskOutput, [key]: value })}
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -367,16 +358,12 @@ export default function PublishMediahub() {
                       <div className="flex items-center gap-2" key={key}>
                         <Checkbox
                           id={key}
-                          checked={
-                            unitSelection[key as keyof typeof unitSelection]
-                          }
+                          checked={unitSelection[key as keyof typeof unitSelection]}
                           onCheckedChange={(value) =>
                             setUnitSelection({ ...unitSelection, [key]: value })
                           }
                         />
-                        <Label htmlFor={key}>
-                          {key.charAt(0).toUpperCase() + key.slice(1)}
-                        </Label>
+                        <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                       </div>
                     ))}
                   </div>
@@ -397,9 +384,7 @@ export default function PublishMediahub() {
                           <Label className="flex items-center">
                             <Checkbox
                               checked={checkedLevels.has(polda.id)}
-                              onCheckedChange={() =>
-                                handleCheckboxChange(polda.id)
-                              }
+                              onCheckedChange={() => handleCheckboxChange(polda.id)}
                               className="mr-3"
                             />
                             {polda.name}
@@ -418,23 +403,18 @@ export default function PublishMediahub() {
                             <div className="ml-6 mt-2">
                               <Label className="block">
                                 <Checkbox
-                                  checked={polda?.subDestination?.every(
-                                    (polres: any) =>
-                                      checkedLevels.has(polres.id)
+                                  checked={polda?.subDestination?.every((polres: any) =>
+                                    checkedLevels.has(polres.id)
                                   )}
                                   onCheckedChange={(isChecked) => {
-                                    const updatedLevels = new Set(
-                                      checkedLevels
-                                    );
-                                    polda?.subDestination?.forEach(
-                                      (polres: any) => {
-                                        if (isChecked) {
-                                          updatedLevels.add(polres.id);
-                                        } else {
-                                          updatedLevels.delete(polres.id);
-                                        }
+                                    const updatedLevels = new Set(checkedLevels);
+                                    polda?.subDestination?.forEach((polres: any) => {
+                                      if (isChecked) {
+                                        updatedLevels.add(polres.id);
+                                      } else {
+                                        updatedLevels.delete(polres.id);
                                       }
-                                    );
+                                    });
                                     setCheckedLevels(updatedLevels);
                                   }}
                                   className="mr-2"
@@ -445,9 +425,7 @@ export default function PublishMediahub() {
                                 <Label key={polres.id} className="block mt-1">
                                   <Checkbox
                                     checked={checkedLevels.has(polres.id)}
-                                    onCheckedChange={() =>
-                                      handleCheckboxChange(polres.id)
-                                    }
+                                    onCheckedChange={() => handleCheckboxChange(polres.id)}
                                     className="mr-2"
                                   />
                                   {polres.name}
@@ -495,11 +473,7 @@ export default function PublishMediahub() {
                         !startDate && "text-muted-foreground"
                       )}
                     >
-                      {startDate ? (
-                        format(startDate, "PP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
+                      {startDate ? format(startDate, "PP") : <span>Pick a date</span>}
                       <CalendarIcon className="h-4 w-4" />
                     </Button>
                   </div>
@@ -511,16 +485,11 @@ export default function PublishMediahub() {
                   control={control}
                   name="description"
                   render={({ field: { onChange, value } }) => (
-                    <CustomEditor
-                      onChange={onChange}
-                      initialData={detail?.description || value}
-                    />
+                    <CustomEditor onChange={onChange} initialData={detail?.description || value} />
                   )}
                 />
                 {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.description.message}</p>
                 )}
               </div>
             </div>
diff --git a/src/components/features/form/planning/medsos-publish.tsx b/src/components/features/form/planning/medsos-publish.tsx
index e7cbed30..79b8728c 100644
--- a/src/components/features/form/planning/medsos-publish.tsx
+++ b/src/components/features/form/planning/medsos-publish.tsx
@@ -1,31 +1,25 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { format } from "date-fns";
+import { id } from "date-fns/locale";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { createTask, getUserLevelForAssignments } from "@/lib/services/task";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-import { CalendarIcon, ChevronDown, ChevronUp } from "lucide-react";
-import { id } from "date-fns/locale";
+import * as z from "zod";
+
 import { getPlanningById, publishPlanning } from "@/lib/services/planning/planning";
+import { createTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -33,8 +27,16 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -121,13 +123,10 @@ export default function PublishMedsos() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -151,9 +150,7 @@ export default function PublishMedsos() {
         }
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
-          );
+          const levels = new Set(details.assignedToLevel.split(",").map(Number));
           setCheckedLevels(levels);
         }
       }
@@ -176,9 +173,7 @@ export default function PublishMedsos() {
 
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
-      const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
-      ); // Membagi string ke dalam array dan mengonversi ke nomor
+      const outputSet = new Set(detail.assignedToTopLevel.split(",").map(Number)); // Membagi string ke dalam array dan mengonversi ke nomor
       setUnitSelection({
         allUnit: outputSet.has(0),
         mabes: outputSet.has(1),
@@ -339,13 +334,9 @@ export default function PublishMedsos() {
                       <Checkbox
                         id={key}
                         checked={taskOutput[key as keyof typeof taskOutput]}
-                        onCheckedChange={(value) =>
-                          setTaskOutput({ ...taskOutput, [key]: value })
-                        }
+                        onCheckedChange={(value) => setTaskOutput({ ...taskOutput, [key]: value })}
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -360,16 +351,12 @@ export default function PublishMedsos() {
                       <div className="flex items-center gap-2" key={key}>
                         <Checkbox
                           id={key}
-                          checked={
-                            unitSelection[key as keyof typeof unitSelection]
-                          }
+                          checked={unitSelection[key as keyof typeof unitSelection]}
                           onCheckedChange={(value) =>
                             setUnitSelection({ ...unitSelection, [key]: value })
                           }
                         />
-                        <Label htmlFor={key}>
-                          {key.charAt(0).toUpperCase() + key.slice(1)}
-                        </Label>
+                        <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                       </div>
                     ))}
                   </div>
@@ -390,9 +377,7 @@ export default function PublishMedsos() {
                           <Label className="flex items-center">
                             <Checkbox
                               checked={checkedLevels.has(polda.id)}
-                              onCheckedChange={() =>
-                                handleCheckboxChange(polda.id)
-                              }
+                              onCheckedChange={() => handleCheckboxChange(polda.id)}
                               className="mr-3"
                             />
                             {polda.name}
@@ -411,23 +396,18 @@ export default function PublishMedsos() {
                             <div className="ml-6 mt-2">
                               <Label className="block">
                                 <Checkbox
-                                  checked={polda?.subDestination?.every(
-                                    (polres: any) =>
-                                      checkedLevels.has(polres.id)
+                                  checked={polda?.subDestination?.every((polres: any) =>
+                                    checkedLevels.has(polres.id)
                                   )}
                                   onCheckedChange={(isChecked) => {
-                                    const updatedLevels = new Set(
-                                      checkedLevels
-                                    );
-                                    polda?.subDestination?.forEach(
-                                      (polres: any) => {
-                                        if (isChecked) {
-                                          updatedLevels.add(polres.id);
-                                        } else {
-                                          updatedLevels.delete(polres.id);
-                                        }
+                                    const updatedLevels = new Set(checkedLevels);
+                                    polda?.subDestination?.forEach((polres: any) => {
+                                      if (isChecked) {
+                                        updatedLevels.add(polres.id);
+                                      } else {
+                                        updatedLevels.delete(polres.id);
                                       }
-                                    );
+                                    });
                                     setCheckedLevels(updatedLevels);
                                   }}
                                   className="mr-2"
@@ -438,9 +418,7 @@ export default function PublishMedsos() {
                                 <Label key={polres.id} className="block mt-1">
                                   <Checkbox
                                     checked={checkedLevels.has(polres.id)}
-                                    onCheckedChange={() =>
-                                      handleCheckboxChange(polres.id)
-                                    }
+                                    onCheckedChange={() => handleCheckboxChange(polres.id)}
                                     className="mr-2"
                                   />
                                   {polres.name}
@@ -488,11 +466,7 @@ export default function PublishMedsos() {
                         !startDate && "text-muted-foreground"
                       )}
                     >
-                      {startDate ? (
-                        format(startDate, "PP")
-                      ) : (
-                        <span>Pick a date</span>
-                      )}
+                      {startDate ? format(startDate, "PP") : <span>Pick a date</span>}
                       <CalendarIcon className="h-4 w-4" />
                     </Button>
                   </div>
@@ -504,16 +478,11 @@ export default function PublishMedsos() {
                   control={control}
                   name="description"
                   render={({ field: { onChange, value } }) => (
-                    <CustomEditor
-                      onChange={onChange}
-                      initialData={detail?.description || value}
-                    />
+                    <CustomEditor onChange={onChange} initialData={detail?.description || value} />
                   )}
                 />
                 {errors.description?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.description.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.description.message}</p>
                 )}
               </div>
             </div>
diff --git a/src/components/features/form/repeater.tsx b/src/components/features/form/repeater.tsx
index 7412b7f6..3d758881 100644
--- a/src/components/features/form/repeater.tsx
+++ b/src/components/features/form/repeater.tsx
@@ -1,11 +1,13 @@
 "use client";
+
 import React from "react";
-import { useForm, useFieldArray, SubmitHandler } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Icon } from "@/components/ui/icon";
+import { Link } from "@/i18n/navigation";
+import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
+
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Link } from '@/i18n/navigation';
 
 interface FormValues {
   test: {
@@ -40,9 +42,7 @@ const Repeater = () => {
   return (
     <div>
       <div className="bg-default-50 -mx-6 px-6 py-6">
-        <div className="mb-6 text-default-600 text-xs font-medium uppercase">
-          Items info-500
-        </div>
+        <div className="mb-6 text-default-600 text-xs font-medium uppercase">Items info-500</div>
 
         <div>
           <form onSubmit={handleSubmit(onSubmit)}>
@@ -59,9 +59,7 @@ const Repeater = () => {
                     placeholder="First Name"
                     {...register(`test.${index}.firstName`, { required: true })}
                   />
-                  {errors.test?.[index]?.firstName && (
-                    <span>This field is required</span>
-                  )}
+                  {errors.test?.[index]?.firstName && <span>This field is required</span>}
                 </div>
 
                 <div className="space-y-2">
@@ -72,9 +70,7 @@ const Repeater = () => {
                     placeholder="Last Name"
                     {...register(`test.${index}.lastName`, { required: true })}
                   />
-                  {errors.test?.[index]?.lastName && (
-                    <span>This field is required</span>
-                  )}
+                  {errors.test?.[index]?.lastName && <span>This field is required</span>}
                 </div>
 
                 <div className="flex justify-between items-end space-x-5">
@@ -86,9 +82,7 @@ const Repeater = () => {
                       placeholder="Phone"
                       {...register(`test.${index}.phone`, { required: true })}
                     />
-                    {errors.test?.[index]?.phone && (
-                      <span>This field is required</span>
-                    )}
+                    {errors.test?.[index]?.phone && <span>This field is required</span>}
                   </div>
                   {index > 0 && (
                     <div className="flex-none relative">
diff --git a/src/components/features/form/schedule/event-detail-form.tsx b/src/components/features/form/schedule/event-detail-form.tsx
index 1ad82795..ec630657 100644
--- a/src/components/features/form/schedule/event-detail-form.tsx
+++ b/src/components/features/form/schedule/event-detail-form.tsx
@@ -1,33 +1,33 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { CalendarIcon, Clock1, Eye, MapPin, Plus, User2 } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon, Clock1, Eye, MapPin, Plus, User2 } from "lucide-react";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, parseISO, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
-import MapHome from "@/components/ui/maps/MapHome";
-import { Textarea } from "@/components/ui/textarea";
-import { error, loading } from "@/lib/utils/swal";
+
+import { Link } from "@/i18n/navigation";
+import { formatDate } from "@fullcalendar/core/index.js";
 import Cookies from "js-cookie";
+
 import {
   detailSchedule,
   getListScheduleAttachment,
@@ -35,15 +35,16 @@ import {
   listScheduleToday,
   postSchedule,
 } from "@/lib/services/schedule/schedule";
+import { error, loading } from "@/lib/utils/swal";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { formatDate } from "@fullcalendar/core/index.js";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Link } from "@/i18n/navigation";
+import MapHome from "@/components/ui/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -185,11 +186,7 @@ export default function FormEventDetail() {
                   control={control}
                   name="title"
                   render={({ field }) => (
-                    <Input
-                      type="text"
-                      value={detail?.title}
-                      onChange={field.onChange}
-                    />
+                    <Input type="text" value={detail?.title} onChange={field.onChange} />
                   )}
                 />
                 {errors.title?.message && (
@@ -205,9 +202,7 @@ export default function FormEventDetail() {
                       defaultChecked={isLiveStreamingEnabled}
                       color="primary"
                       id="c2"
-                      onCheckedChange={(checked) =>
-                        setIsLiveStreamingEnabled(checked)
-                      }
+                      onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                     />
                   </div>
                 </div>
@@ -229,9 +224,7 @@ export default function FormEventDetail() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
               )}
@@ -253,8 +246,7 @@ export default function FormEventDetail() {
                         {date?.from ? (
                           date.to ? (
                             <>
-                              {format(date.from, "LLL dd, y")} -{" "}
-                              {format(date.to, "LLL dd, y")}
+                              {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                             </>
                           ) : (
                             format(date.from, "LLL dd, y")
@@ -281,18 +273,10 @@ export default function FormEventDetail() {
                   <div>
                     <div className="flex flex-row items-center">
                       <div className="col-6">
-                        <Input
-                          value={startTime}
-                          type="time"
-                          onChange={handleStartTime}
-                        />
+                        <Input value={startTime} type="time" onChange={handleStartTime} />
                       </div>
                       <div className="col-6">
-                        <Input
-                          value={endTime}
-                          type="time"
-                          onChange={handleEndTime}
-                        />
+                        <Input value={endTime} type="time" onChange={handleEndTime} />
                       </div>
                     </div>
                   </div>
@@ -300,10 +284,7 @@ export default function FormEventDetail() {
               </div>
               <div className="mt-6">
                 {/* Kirim setValue ke MapHome */}
-                <MapHome
-                  draggable
-                  setLocation={(location) => setValue("location", location)}
-                />
+                <MapHome draggable setLocation={(location) => setValue("location", location)} />
               </div>
               <div>
                 <Controller
@@ -318,13 +299,9 @@ export default function FormEventDetail() {
                     />
                   )}
                 />
-                <div className="invalid-feedback">
-                  {errors.location?.message}
-                </div>
+                <div className="invalid-feedback">{errors.location?.message}</div>
               </div>
-              <p className="text-sm my-2 font-semibold mt-6">
-                DI SAMPAIKAN OLEH
-              </p>
+              <p className="text-sm my-2 font-semibold mt-6">DI SAMPAIKAN OLEH</p>
               <div className="flex flex-col ">
                 <div className="mt-1 space-y-2">
                   <Label>Nama Pangkat</Label>
@@ -342,9 +319,7 @@ export default function FormEventDetail() {
                     )}
                   />
                   {errors.level?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.level.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.level.message}</p>
                   )}
                 </div>
               </div>
@@ -365,9 +340,7 @@ export default function FormEventDetail() {
                     )}
                   />
                   {errors.name?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.name.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.name.message}</p>
                   )}
                 </div>
               </div>
@@ -381,9 +354,7 @@ export default function FormEventDetail() {
                   </div>
                 </DialogTrigger>
                 <DialogContent className="max-w-md p-6 bg-white rounded-lg shadow-lg h-[420px] w-[700px]">
-                  <h2 className="text-lg font-semibold">
-                    Pilih Jenis Lampiran
-                  </h2>
+                  <h2 className="text-lg font-semibold">Pilih Jenis Lampiran</h2>
                   <div className="space-y-4 gap-y-4">
                     {[
                       {
@@ -409,30 +380,17 @@ export default function FormEventDetail() {
                     ].map((item) => (
                       <a
                         key={item.type}
-                        onClick={() =>
-                          handleDestinationUpload(
-                            item.type,
-                            id,
-                            setOpen,
-                            router
-                          )
-                        }
+                        onClick={() => handleDestinationUpload(item.type, id, setOpen, router)}
                       >
                         <div className="flex flex-row items-center space-x-4">
                           <div className="flex flex-col w-4/12 items-center">
-                            <img
-                              src={item.img}
-                              alt={item.label}
-                              className="w-12 h-12"
-                            />
-                            <h3 className="text-base font-semibold">
-                              {item.label}
-                            </h3>
+                            <img src={item.img} alt={item.label} className="w-12 h-12" />
+                            <h3 className="text-base font-semibold">{item.label}</h3>
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa {item.label.toLowerCase()}{" "}
-                              dengan format sesuai yang didukung.
+                              Unggah media berupa {item.label.toLowerCase()} dengan format sesuai
+                              yang didukung.
                             </p>
                           </div>
                         </div>
@@ -459,9 +417,7 @@ export default function FormEventDetail() {
             <tbody>
               {lampiran.map((item, index) => (
                 <tr key={index} className="border-t border-gray-300">
-                  <td className="p-3 text-blue-600 cursor-pointer">
-                    {item.title}
-                  </td>
+                  <td className="p-3 text-blue-600 cursor-pointer">{item.title}</td>
                   <td className="p-3">{item.fileTypeName}</td>
                   <td className="p-3 text-blue-600">Konfersi Ai</td>
                   <td className="p-3">
@@ -470,20 +426,16 @@ export default function FormEventDetail() {
                         Number(item.fileTypeId) == 1
                           ? `/contributor/content/image/detail/${item.id}`
                           : Number(item.fileTypeId) == 2
-                          ? `/contributor/content/video/detail/${item.id}`
-                          : Number(item.fileTypeId) == 3
-                          ? `/contributor/content/teks/detail/${item.id}`
-                          : `/contributor/content/audio/detail/${item.id}`
+                            ? `/contributor/content/video/detail/${item.id}`
+                            : Number(item.fileTypeId) == 3
+                              ? `/contributor/content/teks/detail/${item.id}`
+                              : `/contributor/content/audio/detail/${item.id}`
                       }
                       target="_blank"
                       className="btn"
                       rel="noreferrer"
                     >
-                      <Eye
-                        className={
-                          item.type === 1 ? "text-blue-600" : "text-black"
-                        }
-                      />
+                      <Eye className={item.type === 1 ? "text-blue-600" : "text-black"} />
                     </Link>
                   </td>
                 </tr>
@@ -501,9 +453,7 @@ export default function FormEventDetail() {
         <Accordion type="single" collapsible>
           {/* Jadwal Hari Ini */}
           <AccordionItem value="today">
-            <AccordionTrigger className="font-semibold">
-              Jadwal Hari Ini
-            </AccordionTrigger>
+            <AccordionTrigger className="font-semibold">Jadwal Hari Ini</AccordionTrigger>
             <AccordionContent>
               {todayList?.length > 0 ? (
                 <ul className="list-disc ml-4">
@@ -521,9 +471,7 @@ export default function FormEventDetail() {
 
           {/* Jadwal Selanjutnya */}
           <AccordionItem value="next">
-            <AccordionTrigger className="font-semibold">
-              Jadwal Selanjutnya
-            </AccordionTrigger>
+            <AccordionTrigger className="font-semibold">Jadwal Selanjutnya</AccordionTrigger>
             <AccordionContent>
               {nextDayList?.length > 0 ? (
                 <div className="list-disc ">
@@ -532,8 +480,7 @@ export default function FormEventDetail() {
                       <li className="text-base font-semibold">{item.title}</li>
                       <p className="text-sm ml-5 flex my-2">
                         <CalendarIcon size={20} />
-                        {formatDate(item?.startDate)}-
-                        {formatDate(item?.endDate)}
+                        {formatDate(item?.startDate)}-{formatDate(item?.endDate)}
                       </p>
                       <p className="text-sm ml-5 flex my-2">
                         <Clock1 size={20} />
diff --git a/src/components/features/form/schedule/event-form.tsx b/src/components/features/form/schedule/event-form.tsx
index 34c0492a..c6934452 100644
--- a/src/components/features/form/schedule/event-form.tsx
+++ b/src/components/features/form/schedule/event-form.tsx
@@ -1,14 +1,26 @@
 "use client";
+
 import React, { useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, Plus } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -16,30 +28,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
 import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon, Plus } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
 import { register } from "module";
+import { useRouter } from "@/i18n/navigation";
+import Cookies from "js-cookie";
+
+import { postSchedule } from "@/lib/services/schedule/schedule";
+import { error } from "@/lib/utils/swal";
 import MapHome from "@/components/ui/maps/MapHome";
 import { Textarea } from "@/components/ui/textarea";
-import { error } from "@/lib/utils/swal";
-import Cookies from "js-cookie";
-import { postSchedule } from "@/lib/services/schedule/schedule";
-import { useRouter } from "@/i18n/navigation";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -202,9 +203,7 @@ export default function FormEvent() {
                       defaultChecked={isLiveStreamingEnabled}
                       color="primary"
                       id="c2"
-                      onCheckedChange={(checked) =>
-                        setIsLiveStreamingEnabled(checked)
-                      }
+                      onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                     />
                   </div>
                 </div>
@@ -226,9 +225,7 @@ export default function FormEvent() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
               )}
@@ -250,8 +247,7 @@ export default function FormEvent() {
                         {date?.from ? (
                           date.to ? (
                             <>
-                              {format(date.from, "LLL dd, y")} -{" "}
-                              {format(date.to, "LLL dd, y")}
+                              {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                             </>
                           ) : (
                             format(date.from, "LLL dd, y")
@@ -297,10 +293,7 @@ export default function FormEvent() {
               </div>
               <div>
                 {/* Kirim setValue ke MapHome */}
-                <MapHome
-                  draggable
-                  setLocation={(location) => setValue("location", location)}
-                />
+                <MapHome draggable setLocation={(location) => setValue("location", location)} />
               </div>
               <div>
                 <Controller
@@ -315,9 +308,7 @@ export default function FormEvent() {
                     />
                   )}
                 />
-                <div className="invalid-feedback">
-                  {errors.location?.message}
-                </div>
+                <div className="invalid-feedback">{errors.location?.message}</div>
               </div>
               <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
               <div className="flex flex-col ">
@@ -337,9 +328,7 @@ export default function FormEvent() {
                     )}
                   />
                   {errors.level?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.level.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.level.message}</p>
                   )}
                 </div>
               </div>
@@ -360,9 +349,7 @@ export default function FormEvent() {
                     )}
                   />
                   {errors.name?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.name.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.name.message}</p>
                   )}
                 </div>
               </div>
diff --git a/src/components/features/form/schedule/event-update-form.tsx b/src/components/features/form/schedule/event-update-form.tsx
index 62687ba4..942437f9 100644
--- a/src/components/features/form/schedule/event-update-form.tsx
+++ b/src/components/features/form/schedule/event-update-form.tsx
@@ -1,36 +1,37 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { CalendarIcon, Plus } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon, Plus } from "lucide-react";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, parseISO, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
+import { Link } from "@/i18n/navigation";
+import Cookies from "js-cookie";
+
+import { detailSchedule, postSchedule } from "@/lib/services/schedule/schedule";
+import { error, loading } from "@/lib/utils/swal";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import MapHome from "@/components/ui/maps/MapHome";
 import { Textarea } from "@/components/ui/textarea";
-import { error, loading } from "@/lib/utils/swal";
-import Cookies from "js-cookie";
-import { detailSchedule, postSchedule } from "@/lib/services/schedule/schedule";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Link } from "@/i18n/navigation";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -196,17 +197,11 @@ export default function FormEventUpdate() {
                     control={control}
                     name="title"
                     render={({ field }) => (
-                      <Input
-                        type="text"
-                        defaultValue={detail?.title}
-                        onChange={field.onChange}
-                      />
+                      <Input type="text" defaultValue={detail?.title} onChange={field.onChange} />
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex flex-row items-center">
@@ -218,9 +213,7 @@ export default function FormEventUpdate() {
                         defaultChecked={isLiveStreamingEnabled}
                         color="primary"
                         id="c2"
-                        onCheckedChange={(checked) =>
-                          setIsLiveStreamingEnabled(checked)
-                        }
+                        onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                       />
                     </div>
                   </div>
@@ -242,9 +235,7 @@ export default function FormEventUpdate() {
                       )}
                     />
                     {errors.title?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.title.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.title.message}</p>
                     )}
                   </div>
                 )}
@@ -266,8 +257,7 @@ export default function FormEventUpdate() {
                           {date?.from ? (
                             date.to ? (
                               <>
-                                {format(date.from, "LLL dd, y")} -{" "}
-                                {format(date.to, "LLL dd, y")}
+                                {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                               </>
                             ) : (
                               format(date.from, "LLL dd, y")
@@ -294,18 +284,10 @@ export default function FormEventUpdate() {
                     <div>
                       <div className="flex flex-row items-center">
                         <div className="col-6">
-                          <Input
-                            value={startTime}
-                            type="time"
-                            onChange={handleStartTime}
-                          />
+                          <Input value={startTime} type="time" onChange={handleStartTime} />
                         </div>
                         <div className="col-6">
-                          <Input
-                            value={endTime}
-                            type="time"
-                            onChange={handleEndTime}
-                          />
+                          <Input value={endTime} type="time" onChange={handleEndTime} />
                         </div>
                       </div>
                     </div>
@@ -313,10 +295,7 @@ export default function FormEventUpdate() {
                 </div>
                 <div>
                   {/* Kirim setValue ke MapHome */}
-                  <MapHome
-                    draggable
-                    setLocation={(location) => setValue("location", location)}
-                  />
+                  <MapHome draggable setLocation={(location) => setValue("location", location)} />
                 </div>
                 <div>
                   <Controller
@@ -331,9 +310,7 @@ export default function FormEventUpdate() {
                       />
                     )}
                   />
-                  <div className="invalid-feedback">
-                    {errors.location?.message}
-                  </div>
+                  <div className="invalid-feedback">{errors.location?.message}</div>
                 </div>
                 <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
                 <div className="flex flex-col ">
@@ -353,9 +330,7 @@ export default function FormEventUpdate() {
                       )}
                     />
                     {errors.level?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.level.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.level.message}</p>
                     )}
                   </div>
                 </div>
@@ -376,9 +351,7 @@ export default function FormEventUpdate() {
                       )}
                     />
                     {errors.name?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.name.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.name.message}</p>
                     )}
                   </div>
                 </div>
@@ -392,9 +365,7 @@ export default function FormEventUpdate() {
                     </div>
                   </DialogTrigger>
                   <DialogContent className="max-w-md p-6 bg-white rounded-lg shadow-lg h-[420px] w-[700px]">
-                    <h2 className="text-lg font-semibold">
-                      Pilih Jenis Lampiran
-                    </h2>
+                    <h2 className="text-lg font-semibold">Pilih Jenis Lampiran</h2>
                     <div className=" space-y-4 gap-y-4">
                       <Link href={"/contributor/schedule/media/video/create"}>
                         <div className="flex flex-row items-center space-x-4">
@@ -404,15 +375,12 @@ export default function FormEventUpdate() {
                               alt={"item.label"}
                               className="w-12 h-12"
                             />
-                            <h3 className="text-base font-semibold">
-                              Audio Visual
-                            </h3>
+                            <h3 className="text-base font-semibold">Audio Visual</h3>
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
@@ -429,9 +397,8 @@ export default function FormEventUpdate() {
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
@@ -448,9 +415,8 @@ export default function FormEventUpdate() {
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
@@ -467,9 +433,8 @@ export default function FormEventUpdate() {
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
diff --git a/src/components/features/form/schedule/pers-release--detail-form.tsx b/src/components/features/form/schedule/pers-release--detail-form.tsx
index d352f951..3b450f17 100644
--- a/src/components/features/form/schedule/pers-release--detail-form.tsx
+++ b/src/components/features/form/schedule/pers-release--detail-form.tsx
@@ -1,33 +1,34 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { CalendarIcon, Clock1, Eye, MapPin, Plus, User2 } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon, Clock1, Eye, MapPin, Plus, User2 } from "lucide-react";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, parseISO, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
-import MapHome from "@/components/ui/maps/MapHome";
-import { Textarea } from "@/components/ui/textarea";
-import { error, loading } from "@/lib/utils/swal";
+
+import { Link } from "@/i18n/navigation";
+import { formatDate } from "@fullcalendar/core/index.js";
+import $ from "jquery";
 import Cookies from "js-cookie";
+
 import {
   detailSchedule,
   getListScheduleAttachment,
@@ -35,6 +36,15 @@ import {
   listScheduleToday,
   postSchedule,
 } from "@/lib/services/schedule/schedule";
+import { error, loading } from "@/lib/utils/swal";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import MapHome from "@/components/ui/maps/MapHome";
 import {
   Select,
   SelectContent,
@@ -42,16 +52,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { formatDate } from "@fullcalendar/core/index.js";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Link } from "@/i18n/navigation";
-import $ from "jquery";
+import { Textarea } from "@/components/ui/textarea";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -195,11 +196,7 @@ export default function FormDetailPressRillis() {
                   control={control}
                   name="title"
                   render={({ field }) => (
-                    <Input
-                      type="text"
-                      value={detail?.title}
-                      onChange={field.onChange}
-                    />
+                    <Input type="text" value={detail?.title} onChange={field.onChange} />
                   )}
                 />
                 {errors.title?.message && (
@@ -215,9 +212,7 @@ export default function FormDetailPressRillis() {
                       defaultChecked={isLiveStreamingEnabled}
                       color="primary"
                       id="c2"
-                      onCheckedChange={(checked) =>
-                        setIsLiveStreamingEnabled(checked)
-                      }
+                      onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                     />
                   </div>
                 </div>
@@ -239,9 +234,7 @@ export default function FormDetailPressRillis() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
               )}
@@ -263,8 +256,7 @@ export default function FormDetailPressRillis() {
                         {date?.from ? (
                           date.to ? (
                             <>
-                              {format(date.from, "LLL dd, y")} -{" "}
-                              {format(date.to, "LLL dd, y")}
+                              {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                             </>
                           ) : (
                             format(date.from, "LLL dd, y")
@@ -291,18 +283,10 @@ export default function FormDetailPressRillis() {
                   <div>
                     <div className="flex flex-row items-center">
                       <div className="col-6">
-                        <Input
-                          value={startTime}
-                          type="time"
-                          onChange={handleStartTime}
-                        />
+                        <Input value={startTime} type="time" onChange={handleStartTime} />
                       </div>
                       <div className="col-6">
-                        <Input
-                          value={endTime}
-                          type="time"
-                          onChange={handleEndTime}
-                        />
+                        <Input value={endTime} type="time" onChange={handleEndTime} />
                       </div>
                     </div>
                   </div>
@@ -310,10 +294,7 @@ export default function FormDetailPressRillis() {
               </div>
               <div className="mt-6">
                 {/* Kirim setValue ke MapHome */}
-                <MapHome
-                  draggable
-                  setLocation={(location) => setValue("location", location)}
-                />
+                <MapHome draggable setLocation={(location) => setValue("location", location)} />
               </div>
               <div>
                 <Controller
@@ -328,9 +309,7 @@ export default function FormDetailPressRillis() {
                     />
                   )}
                 />
-                <div className="invalid-feedback">
-                  {errors.location?.message}
-                </div>
+                <div className="invalid-feedback">{errors.location?.message}</div>
               </div>
               <div className="mt-6 space-y-2">
                 <Label>Invitation</Label>
@@ -339,19 +318,13 @@ export default function FormDetailPressRillis() {
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="kompas">
-                      PT. kompas Cyber Media{" "}
-                    </SelectItem>
-                    <SelectItem value="trans">
-                      PT. Trans Digital Media
-                    </SelectItem>
+                    <SelectItem value="kompas">PT. kompas Cyber Media </SelectItem>
+                    <SelectItem value="trans">PT. Trans Digital Media</SelectItem>
                     <SelectItem value="mnc">MNC</SelectItem>
                   </SelectContent>
                 </Select>
               </div>
-              <p className="text-sm my-2 font-semibold mt-6">
-                DI SAMPAIKAN OLEH
-              </p>
+              <p className="text-sm my-2 font-semibold mt-6">DI SAMPAIKAN OLEH</p>
               <div className="flex flex-col ">
                 <div className="mt-1 space-y-2">
                   <Label>Nama Pangkat</Label>
@@ -369,9 +342,7 @@ export default function FormDetailPressRillis() {
                     )}
                   />
                   {errors.level?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.level.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.level.message}</p>
                   )}
                 </div>
               </div>
@@ -392,9 +363,7 @@ export default function FormDetailPressRillis() {
                     )}
                   />
                   {errors.name?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.name.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.name.message}</p>
                   )}
                 </div>
               </div>
@@ -408,9 +377,7 @@ export default function FormDetailPressRillis() {
                   </div>
                 </DialogTrigger>
                 <DialogContent className="max-w-md p-6 bg-white rounded-lg shadow-lg h-[420px] w-[700px]">
-                  <h2 className="text-lg font-semibold">
-                    Pilih Jenis Lampiran
-                  </h2>
+                  <h2 className="text-lg font-semibold">Pilih Jenis Lampiran</h2>
                   <div className="space-y-4 gap-y-4">
                     {[
                       {
@@ -436,30 +403,17 @@ export default function FormDetailPressRillis() {
                     ].map((item) => (
                       <a
                         key={item.type}
-                        onClick={() =>
-                          handleDestinationUpload(
-                            item.type,
-                            id,
-                            setOpen,
-                            router
-                          )
-                        }
+                        onClick={() => handleDestinationUpload(item.type, id, setOpen, router)}
                       >
                         <div className="flex flex-row items-center space-x-4">
                           <div className="flex flex-col w-4/12 items-center">
-                            <img
-                              src={item.img}
-                              alt={item.label}
-                              className="w-12 h-12"
-                            />
-                            <h3 className="text-base font-semibold">
-                              {item.label}
-                            </h3>
+                            <img src={item.img} alt={item.label} className="w-12 h-12" />
+                            <h3 className="text-base font-semibold">{item.label}</h3>
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa {item.label.toLowerCase()}{" "}
-                              dengan format sesuai yang didukung.
+                              Unggah media berupa {item.label.toLowerCase()} dengan format sesuai
+                              yang didukung.
                             </p>
                           </div>
                         </div>
@@ -485,9 +439,7 @@ export default function FormDetailPressRillis() {
               <tbody>
                 {lampiran.map((item, index) => (
                   <tr key={index} className="border-t border-gray-300">
-                    <td className="p-3 text-blue-600 cursor-pointer">
-                      {item.title}
-                    </td>
+                    <td className="p-3 text-blue-600 cursor-pointer">{item.title}</td>
                     <td className="p-3">{item.fileTypeName}</td>
                     <td className="p-3 text-blue-600">Konfersi Ai</td>
                     <td className="p-3">
@@ -496,20 +448,16 @@ export default function FormDetailPressRillis() {
                           Number(item.fileTypeId) == 1
                             ? `/contributor/content/image/detail/${item.id}`
                             : Number(item.fileTypeId) == 2
-                            ? `/contributor/content/video/detail/${item.id}`
-                            : Number(item.fileTypeId) == 3
-                            ? `/contributor/content/teks/detail/${item.id}`
-                            : `/contributor/content/audio/detail/${item.id}`
+                              ? `/contributor/content/video/detail/${item.id}`
+                              : Number(item.fileTypeId) == 3
+                                ? `/contributor/content/teks/detail/${item.id}`
+                                : `/contributor/content/audio/detail/${item.id}`
                         }
                         target="_blank"
                         className="btn"
                         rel="noreferrer"
                       >
-                        <Eye
-                          className={
-                            item.type === 1 ? "text-blue-600" : "text-black"
-                          }
-                        />
+                        <Eye className={item.type === 1 ? "text-blue-600" : "text-black"} />
                       </Link>
                     </td>
                   </tr>
@@ -528,9 +476,7 @@ export default function FormDetailPressRillis() {
         <Accordion type="single" collapsible>
           {/* Jadwal Hari Ini */}
           <AccordionItem value="today">
-            <AccordionTrigger className="font-semibold">
-              Jadwal Hari Ini
-            </AccordionTrigger>
+            <AccordionTrigger className="font-semibold">Jadwal Hari Ini</AccordionTrigger>
             <AccordionContent>
               {todayList?.length > 0 ? (
                 <ul className="list-disc ml-4">
@@ -548,9 +494,7 @@ export default function FormDetailPressRillis() {
 
           {/* Jadwal Selanjutnya */}
           <AccordionItem value="next">
-            <AccordionTrigger className="font-semibold">
-              Jadwal Selanjutnya
-            </AccordionTrigger>
+            <AccordionTrigger className="font-semibold">Jadwal Selanjutnya</AccordionTrigger>
             <AccordionContent>
               {nextDayList?.length > 0 ? (
                 <div className="list-disc ">
@@ -559,8 +503,7 @@ export default function FormDetailPressRillis() {
                       <li className="text-base font-semibold">{item.title}</li>
                       <p className="text-sm ml-5 flex my-2">
                         <CalendarIcon size={20} />
-                        {formatDate(item?.startDate)}-
-                        {formatDate(item?.endDate)}
+                        {formatDate(item?.startDate)}-{formatDate(item?.endDate)}
                       </p>
                       <p className="text-sm ml-5 flex my-2">
                         <Clock1 size={20} />
diff --git a/src/components/features/form/schedule/pers-release--update-form.tsx b/src/components/features/form/schedule/pers-release--update-form.tsx
index aee5e5de..7a7ad733 100644
--- a/src/components/features/form/schedule/pers-release--update-form.tsx
+++ b/src/components/features/form/schedule/pers-release--update-form.tsx
@@ -1,34 +1,36 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { CalendarIcon, Plus } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon, Plus } from "lucide-react";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, parseISO, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
-import MapHome from "@/components/ui/maps/MapHome";
-import { Textarea } from "@/components/ui/textarea";
-import { error, loading } from "@/lib/utils/swal";
+
+import { Link } from "@/i18n/navigation";
 import Cookies from "js-cookie";
+
 import { detailSchedule, postSchedule } from "@/lib/services/schedule/schedule";
+import { error, loading } from "@/lib/utils/swal";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import MapHome from "@/components/ui/maps/MapHome";
 import {
   Select,
   SelectContent,
@@ -36,8 +38,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { Link } from "@/i18n/navigation";
+import { Textarea } from "@/components/ui/textarea";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -203,17 +204,11 @@ export default function FormUpdatePressRelease() {
                     control={control}
                     name="title"
                     render={({ field }) => (
-                      <Input
-                        type="text"
-                        defaultValue={detail?.title}
-                        onChange={field.onChange}
-                      />
+                      <Input type="text" defaultValue={detail?.title} onChange={field.onChange} />
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex flex-row items-center">
@@ -225,9 +220,7 @@ export default function FormUpdatePressRelease() {
                         defaultChecked={isLiveStreamingEnabled}
                         color="primary"
                         id="c2"
-                        onCheckedChange={(checked) =>
-                          setIsLiveStreamingEnabled(checked)
-                        }
+                        onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                       />
                     </div>
                   </div>
@@ -249,9 +242,7 @@ export default function FormUpdatePressRelease() {
                       )}
                     />
                     {errors.title?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.title.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.title.message}</p>
                     )}
                   </div>
                 )}
@@ -273,8 +264,7 @@ export default function FormUpdatePressRelease() {
                           {date?.from ? (
                             date.to ? (
                               <>
-                                {format(date.from, "LLL dd, y")} -{" "}
-                                {format(date.to, "LLL dd, y")}
+                                {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                               </>
                             ) : (
                               format(date.from, "LLL dd, y")
@@ -301,18 +291,10 @@ export default function FormUpdatePressRelease() {
                     <div>
                       <div className="flex flex-row items-center">
                         <div className="col-6">
-                          <Input
-                            value={startTime}
-                            type="time"
-                            onChange={handleStartTime}
-                          />
+                          <Input value={startTime} type="time" onChange={handleStartTime} />
                         </div>
                         <div className="col-6">
-                          <Input
-                            value={endTime}
-                            type="time"
-                            onChange={handleEndTime}
-                          />
+                          <Input value={endTime} type="time" onChange={handleEndTime} />
                         </div>
                       </div>
                     </div>
@@ -320,10 +302,7 @@ export default function FormUpdatePressRelease() {
                 </div>
                 <div>
                   {/* Kirim setValue ke MapHome */}
-                  <MapHome
-                    draggable
-                    setLocation={(location) => setValue("location", location)}
-                  />
+                  <MapHome draggable setLocation={(location) => setValue("location", location)} />
                 </div>
                 <div>
                   <Controller
@@ -338,9 +317,7 @@ export default function FormUpdatePressRelease() {
                       />
                     )}
                   />
-                  <div className="invalid-feedback">
-                    {errors.location?.message}
-                  </div>
+                  <div className="invalid-feedback">{errors.location?.message}</div>
                 </div>
                 <div className="mt-5 space-y-2">
                   <Label>Invitation</Label>
@@ -349,12 +326,8 @@ export default function FormUpdatePressRelease() {
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="kompas">
-                        PT. kompas Cyber Media{" "}
-                      </SelectItem>
-                      <SelectItem value="trans">
-                        PT. Trans Digital Media
-                      </SelectItem>
+                      <SelectItem value="kompas">PT. kompas Cyber Media </SelectItem>
+                      <SelectItem value="trans">PT. Trans Digital Media</SelectItem>
                       <SelectItem value="mnc">MNC</SelectItem>
                     </SelectContent>
                   </Select>
@@ -377,9 +350,7 @@ export default function FormUpdatePressRelease() {
                       )}
                     />
                     {errors.level?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.level.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.level.message}</p>
                     )}
                   </div>
                 </div>
@@ -400,9 +371,7 @@ export default function FormUpdatePressRelease() {
                       )}
                     />
                     {errors.name?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.name.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.name.message}</p>
                     )}
                   </div>
                 </div>
@@ -416,9 +385,7 @@ export default function FormUpdatePressRelease() {
                     </div>
                   </DialogTrigger>
                   <DialogContent className="max-w-md p-6 bg-white rounded-lg shadow-lg h-[420px] w-[700px]">
-                    <h2 className="text-lg font-semibold">
-                      Pilih Jenis Lampiran
-                    </h2>
+                    <h2 className="text-lg font-semibold">Pilih Jenis Lampiran</h2>
                     <div className=" space-y-4 gap-y-4">
                       <Link href={"/contributor/schedule/media/video/create"}>
                         <div className="flex flex-row items-center space-x-4">
@@ -428,15 +395,12 @@ export default function FormUpdatePressRelease() {
                               alt={"item.label"}
                               className="w-12 h-12"
                             />
-                            <h3 className="text-base font-semibold">
-                              Audio Visual
-                            </h3>
+                            <h3 className="text-base font-semibold">Audio Visual</h3>
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
@@ -453,9 +417,8 @@ export default function FormUpdatePressRelease() {
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
@@ -472,9 +435,8 @@ export default function FormUpdatePressRelease() {
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
@@ -491,9 +453,8 @@ export default function FormUpdatePressRelease() {
                           </div>
                           <div className="w-8/12">
                             <p className="text-sm text-gray-600">
-                              Unggah media berupa video dengan format avi, wmv,
-                              atau mp4 dengan ukuran minimal 2mb dan maksimal
-                              500mb.
+                              Unggah media berupa video dengan format avi, wmv, atau mp4 dengan
+                              ukuran minimal 2mb dan maksimal 500mb.
                             </p>
                           </div>
                         </div>
diff --git a/src/components/features/form/schedule/pers-release-form.tsx b/src/components/features/form/schedule/pers-release-form.tsx
index 6f4b2f65..2a1d1cbd 100644
--- a/src/components/features/form/schedule/pers-release-form.tsx
+++ b/src/components/features/form/schedule/pers-release-form.tsx
@@ -1,15 +1,27 @@
 "use client";
+
 import React, { useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, Plus } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useRouter } from "next/navigation";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -17,29 +29,18 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
 import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon, Plus } from "lucide-react";
-import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
 import { register } from "module";
+import Cookies from "js-cookie";
+
+import { postSchedule } from "@/lib/services/schedule/schedule";
+import { error } from "@/lib/utils/swal";
 import MapHome from "@/components/ui/maps/MapHome";
 import { Textarea } from "@/components/ui/textarea";
-import { error } from "@/lib/utils/swal";
-import Cookies from "js-cookie";
-import { postSchedule } from "@/lib/services/schedule/schedule";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -202,9 +203,7 @@ export default function FormPressRelease() {
                       defaultChecked={isLiveStreamingEnabled}
                       color="primary"
                       id="c2"
-                      onCheckedChange={(checked) =>
-                        setIsLiveStreamingEnabled(checked)
-                      }
+                      onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                     />
                   </div>
                 </div>
@@ -226,9 +225,7 @@ export default function FormPressRelease() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
               )}
@@ -250,8 +247,7 @@ export default function FormPressRelease() {
                         {date?.from ? (
                           date.to ? (
                             <>
-                              {format(date.from, "LLL dd, y")} -{" "}
-                              {format(date.to, "LLL dd, y")}
+                              {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                             </>
                           ) : (
                             format(date.from, "LLL dd, y")
@@ -297,10 +293,7 @@ export default function FormPressRelease() {
               </div>
               <div>
                 {/* Kirim setValue ke MapHome */}
-                <MapHome
-                  draggable
-                  setLocation={(location) => setValue("location", location)}
-                />
+                <MapHome draggable setLocation={(location) => setValue("location", location)} />
               </div>
               <div>
                 <Controller
@@ -315,9 +308,7 @@ export default function FormPressRelease() {
                     />
                   )}
                 />
-                <div className="invalid-feedback">
-                  {errors.location?.message}
-                </div>
+                <div className="invalid-feedback">{errors.location?.message}</div>
               </div>
               <div className="mt-5 space-y-2">
                 <Label>Invitation</Label>
@@ -326,12 +317,8 @@ export default function FormPressRelease() {
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="kompas">
-                      PT. kompas Cyber Media{" "}
-                    </SelectItem>
-                    <SelectItem value="trans">
-                      PT. Trans Digital Media
-                    </SelectItem>
+                    <SelectItem value="kompas">PT. kompas Cyber Media </SelectItem>
+                    <SelectItem value="trans">PT. Trans Digital Media</SelectItem>
                     <SelectItem value="mnc">MNC</SelectItem>
                   </SelectContent>
                 </Select>
@@ -354,9 +341,7 @@ export default function FormPressRelease() {
                     )}
                   />
                   {errors.level?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.level.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.level.message}</p>
                   )}
                 </div>
               </div>
@@ -377,9 +362,7 @@ export default function FormPressRelease() {
                     )}
                   />
                   {errors.name?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.name.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.name.message}</p>
                   )}
                 </div>
               </div>
diff --git a/src/components/features/form/schedule/press-conference-detail-form.tsx b/src/components/features/form/schedule/press-conference-detail-form.tsx
index e1471af1..9864fe8f 100644
--- a/src/components/features/form/schedule/press-conference-detail-form.tsx
+++ b/src/components/features/form/schedule/press-conference-detail-form.tsx
@@ -1,47 +1,48 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { CalendarIcon, Clock1, Locate, MapPin, User2 } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon, Clock1, Locate, MapPin, User2 } from "lucide-react";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, parseISO, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
-import MapHome from "@/components/ui/maps/MapHome";
-import { Textarea } from "@/components/ui/textarea";
-import { error, loading } from "@/lib/utils/swal";
+
+import { formatDate } from "@fullcalendar/core/index.js";
 import Cookies from "js-cookie";
+
 import {
   detailSchedule,
   listScheduleNext,
   listScheduleToday,
   postSchedule,
 } from "@/lib/services/schedule/schedule";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { error, loading } from "@/lib/utils/swal";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { formatDate } from "@fullcalendar/core/index.js";
+import MapHome from "@/components/ui/maps/MapHome";
+import { Textarea } from "@/components/ui/textarea";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -142,11 +143,7 @@ export default function FormDetailPressConference() {
                   control={control}
                   name="title"
                   render={({ field }) => (
-                    <Input
-                      type="text"
-                      value={detail?.title}
-                      onChange={field.onChange}
-                    />
+                    <Input type="text" value={detail?.title} onChange={field.onChange} />
                   )}
                 />
                 {errors.title?.message && (
@@ -162,9 +159,7 @@ export default function FormDetailPressConference() {
                       defaultChecked={isLiveStreamingEnabled}
                       color="primary"
                       id="c2"
-                      onCheckedChange={(checked) =>
-                        setIsLiveStreamingEnabled(checked)
-                      }
+                      onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                     />
                   </div>
                 </div>
@@ -186,9 +181,7 @@ export default function FormDetailPressConference() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
               )}
@@ -210,8 +203,7 @@ export default function FormDetailPressConference() {
                         {date?.from ? (
                           date.to ? (
                             <>
-                              {format(date.from, "LLL dd, y")} -{" "}
-                              {format(date.to, "LLL dd, y")}
+                              {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                             </>
                           ) : (
                             format(date.from, "LLL dd, y")
@@ -238,18 +230,10 @@ export default function FormDetailPressConference() {
                   <div>
                     <div className="flex flex-row items-center">
                       <div className="col-6">
-                        <Input
-                          value={startTime}
-                          type="time"
-                          onChange={handleStartTime}
-                        />
+                        <Input value={startTime} type="time" onChange={handleStartTime} />
                       </div>
                       <div className="col-6">
-                        <Input
-                          value={endTime}
-                          type="time"
-                          onChange={handleEndTime}
-                        />
+                        <Input value={endTime} type="time" onChange={handleEndTime} />
                       </div>
                     </div>
                   </div>
@@ -257,10 +241,7 @@ export default function FormDetailPressConference() {
               </div>
               <div className="mt-6">
                 {/* Kirim setValue ke MapHome */}
-                <MapHome
-                  draggable
-                  setLocation={(location) => setValue("location", location)}
-                />
+                <MapHome draggable setLocation={(location) => setValue("location", location)} />
               </div>
               <div>
                 <Controller
@@ -275,13 +256,9 @@ export default function FormDetailPressConference() {
                     />
                   )}
                 />
-                <div className="invalid-feedback">
-                  {errors.location?.message}
-                </div>
+                <div className="invalid-feedback">{errors.location?.message}</div>
               </div>
-              <p className="text-sm my-2 font-semiboldc mt-6">
-                DI SAMPAIKAN OLEH
-              </p>
+              <p className="text-sm my-2 font-semiboldc mt-6">DI SAMPAIKAN OLEH</p>
               <div className="flex flex-col ">
                 <div className="mt-1 space-y-2">
                   <Label>Nama Pangkat</Label>
@@ -299,9 +276,7 @@ export default function FormDetailPressConference() {
                     )}
                   />
                   {errors.level?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.level.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.level.message}</p>
                   )}
                 </div>
               </div>
@@ -322,9 +297,7 @@ export default function FormDetailPressConference() {
                     )}
                   />
                   {errors.name?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.name.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.name.message}</p>
                   )}
                 </div>
               </div>
@@ -344,9 +317,7 @@ export default function FormDetailPressConference() {
         <Accordion type="single" collapsible>
           {/* Jadwal Hari Ini */}
           <AccordionItem value="today">
-            <AccordionTrigger className="font-semibold">
-              Jadwal Hari Ini
-            </AccordionTrigger>
+            <AccordionTrigger className="font-semibold">Jadwal Hari Ini</AccordionTrigger>
             <AccordionContent>
               {todayList?.length > 0 ? (
                 <ul className="list-disc ml-4">
@@ -364,9 +335,7 @@ export default function FormDetailPressConference() {
 
           {/* Jadwal Selanjutnya */}
           <AccordionItem value="next">
-            <AccordionTrigger className="font-semibold">
-              Jadwal Selanjutnya
-            </AccordionTrigger>
+            <AccordionTrigger className="font-semibold">Jadwal Selanjutnya</AccordionTrigger>
             <AccordionContent>
               {nextDayList?.length > 0 ? (
                 <div className="list-disc ">
@@ -375,8 +344,7 @@ export default function FormDetailPressConference() {
                       <li className="text-base font-semibold">{item.title}</li>
                       <p className="text-sm ml-5 flex my-2">
                         <CalendarIcon size={20} />
-                        {formatDate(item?.startDate)}-
-                        {formatDate(item?.endDate)}
+                        {formatDate(item?.startDate)}-{formatDate(item?.endDate)}
                       </p>
                       <p className="text-sm ml-5 flex my-2">
                         <Clock1 size={20} />
diff --git a/src/components/features/form/schedule/press-conference-form.tsx b/src/components/features/form/schedule/press-conference-form.tsx
index c482601d..b7bedb41 100644
--- a/src/components/features/form/schedule/press-conference-form.tsx
+++ b/src/components/features/form/schedule/press-conference-form.tsx
@@ -1,35 +1,36 @@
 "use client";
+
 import React, { useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon } from "lucide-react";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
 import { register } from "module";
+import { useRouter } from "@/i18n/navigation";
+import Cookies from "js-cookie";
+
+import { postSchedule } from "@/lib/services/schedule/schedule";
+import { error } from "@/lib/utils/swal";
 import MapHome from "@/components/ui/maps/MapHome";
 import { Textarea } from "@/components/ui/textarea";
-import { error } from "@/lib/utils/swal";
-import Cookies from "js-cookie";
-import { postSchedule } from "@/lib/services/schedule/schedule";
-import { useRouter } from "@/i18n/navigation";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -175,9 +176,7 @@ export default function FormPressConference() {
                       defaultChecked={isLiveStreamingEnabled}
                       color="primary"
                       id="c2"
-                      onCheckedChange={(checked) =>
-                        setIsLiveStreamingEnabled(checked)
-                      }
+                      onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                     />
                   </div>
                 </div>
@@ -199,9 +198,7 @@ export default function FormPressConference() {
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
               )}
@@ -224,8 +221,7 @@ export default function FormPressConference() {
                         {date?.from ? (
                           date.to ? (
                             <>
-                              {format(date.from, "LLL dd, y")} -{" "}
-                              {format(date.to, "LLL dd, y")}
+                              {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                             </>
                           ) : (
                             format(date.from, "LLL dd, y")
@@ -271,10 +267,7 @@ export default function FormPressConference() {
               </div>
               <div>
                 {/* Kirim setValue ke MapHome */}
-                <MapHome
-                  draggable
-                  setLocation={(location) => setValue("location", location)}
-                />
+                <MapHome draggable setLocation={(location) => setValue("location", location)} />
               </div>
               <div>
                 <Controller
@@ -289,9 +282,7 @@ export default function FormPressConference() {
                     />
                   )}
                 />
-                <div className="invalid-feedback">
-                  {errors.location?.message}
-                </div>
+                <div className="invalid-feedback">{errors.location?.message}</div>
               </div>
               <p className="text-sm mt-4 font-semibold">DI SAMPAIKAN OLEH</p>
               <div className="flex flex-col ">
@@ -311,9 +302,7 @@ export default function FormPressConference() {
                     )}
                   />
                   {errors.level?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.level.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.level.message}</p>
                   )}
                 </div>
               </div>
@@ -334,9 +323,7 @@ export default function FormPressConference() {
                     )}
                   />
                   {errors.name?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.name.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.name.message}</p>
                   )}
                 </div>
               </div>
diff --git a/src/components/features/form/schedule/press-conference-update-form.tsx b/src/components/features/form/schedule/press-conference-update-form.tsx
index e1defa82..d92b3445 100644
--- a/src/components/features/form/schedule/press-conference-update-form.tsx
+++ b/src/components/features/form/schedule/press-conference-update-form.tsx
@@ -1,34 +1,35 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, parseISO, setDate } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import { Switch } from "@/components/ui/switch";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { CalendarIcon } from "lucide-react";
+import * as z from "zod";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, parseISO, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
+import Cookies from "js-cookie";
+
+import { detailSchedule, postSchedule } from "@/lib/services/schedule/schedule";
+import { error, loading } from "@/lib/utils/swal";
 import MapHome from "@/components/ui/maps/MapHome";
 import { Textarea } from "@/components/ui/textarea";
-import { error, loading } from "@/lib/utils/swal";
-import Cookies from "js-cookie";
-import { detailSchedule, postSchedule } from "@/lib/services/schedule/schedule";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -200,17 +201,11 @@ export default function FormUpdatePressConference() {
                     control={control}
                     name="title"
                     render={({ field }) => (
-                      <Input
-                        type="text"
-                        defaultValue={detail?.title}
-                        onChange={field.onChange}
-                      />
+                      <Input type="text" defaultValue={detail?.title} onChange={field.onChange} />
                     )}
                   />
                   {errors.title?.message && (
-                    <p className="text-red-400 text-sm">
-                      {errors.title.message}
-                    </p>
+                    <p className="text-red-400 text-sm">{errors.title.message}</p>
                   )}
                 </div>
                 <div className="flex flex-row items-center">
@@ -222,9 +217,7 @@ export default function FormUpdatePressConference() {
                         defaultChecked={isLiveStreamingEnabled}
                         color="primary"
                         id="c2"
-                        onCheckedChange={(checked) =>
-                          setIsLiveStreamingEnabled(checked)
-                        }
+                        onCheckedChange={(checked) => setIsLiveStreamingEnabled(checked)}
                       />
                     </div>
                   </div>
@@ -246,9 +239,7 @@ export default function FormUpdatePressConference() {
                       )}
                     />
                     {errors.title?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.title.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.title.message}</p>
                     )}
                   </div>
                 )}
@@ -270,8 +261,7 @@ export default function FormUpdatePressConference() {
                           {date?.from ? (
                             date.to ? (
                               <>
-                                {format(date.from, "LLL dd, y")} -{" "}
-                                {format(date.to, "LLL dd, y")}
+                                {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                               </>
                             ) : (
                               format(date.from, "LLL dd, y")
@@ -298,18 +288,10 @@ export default function FormUpdatePressConference() {
                     <div>
                       <div className="flex flex-row items-center">
                         <div className="col-6">
-                          <Input
-                            value={startTime}
-                            type="time"
-                            onChange={handleStartTime}
-                          />
+                          <Input value={startTime} type="time" onChange={handleStartTime} />
                         </div>
                         <div className="col-6">
-                          <Input
-                            value={endTime}
-                            type="time"
-                            onChange={handleEndTime}
-                          />
+                          <Input value={endTime} type="time" onChange={handleEndTime} />
                         </div>
                       </div>
                     </div>
@@ -337,9 +319,7 @@ export default function FormUpdatePressConference() {
                       />
                     )}
                   />
-                  <div className="invalid-feedback">
-                    {errors.location?.message}
-                  </div>
+                  <div className="invalid-feedback">{errors.location?.message}</div>
                 </div>
                 <p className="text-sm my-2 font-semibold">DI SAMPAIKAN OLEH</p>
                 <div className="flex flex-col ">
@@ -359,9 +339,7 @@ export default function FormUpdatePressConference() {
                       )}
                     />
                     {errors.level?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.level.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.level.message}</p>
                     )}
                   </div>
                 </div>
@@ -382,9 +360,7 @@ export default function FormUpdatePressConference() {
                       )}
                     />
                     {errors.name?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.name.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.name.message}</p>
                     )}
                   </div>
                 </div>
diff --git a/src/components/features/form/shared/accept-assignment-form.tsx b/src/components/features/form/shared/accept-assignment-form.tsx
index f912700e..77066946 100644
--- a/src/components/features/form/shared/accept-assignment-form.tsx
+++ b/src/components/features/form/shared/accept-assignment-form.tsx
@@ -1,31 +1,31 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { createTask, createTaskTa, getTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import {
-  createTask,
-  createTaskTa,
-  getTask,
-  getUserLevelForAssignments,
-} from "@/lib/services/task";
 import {
   Dialog,
   DialogContent,
@@ -33,27 +33,22 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import FileUploader from "@/components/features/form/shared/file-uploader";
-import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils/utils"
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import FileUploader from "@/components/features/form/shared/file-uploader";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 
 const taskSchema = z.object({
@@ -194,13 +189,10 @@ export default function FormAcceptAssignment() {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
         console.log("polda", response?.data?.data?.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -229,10 +221,7 @@ export default function FormAcceptAssignment() {
     return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
   };
 
-  const handleUnitChange = (
-    key: keyof typeof unitSelection,
-    value: boolean
-  ) => {
+  const handleUnitChange = (key: keyof typeof unitSelection, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -258,10 +247,7 @@ export default function FormAcceptAssignment() {
     }
   };
 
-  const handleExpertiseOutputChange = (
-    key: keyof typeof expertise,
-    value: boolean
-  ) => {
+  const handleExpertiseOutputChange = (key: keyof typeof expertise, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -290,10 +276,7 @@ export default function FormAcceptAssignment() {
     }
   };
 
-  const handleExpertOutputChange = (
-    key: keyof typeof expert,
-    value: boolean
-  ) => {
+  const handleExpertOutputChange = (key: keyof typeof expert, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -326,10 +309,7 @@ export default function FormAcceptAssignment() {
     initState();
   }, [id, refresh]);
 
-  const handleTaskOutputChange = (
-    key: keyof typeof taskOutput,
-    value: boolean
-  ) => {
+  const handleTaskOutputChange = (key: keyof typeof taskOutput, value: boolean) => {
     if (key === "all") {
       const newState = {
         all: value,
@@ -562,11 +542,7 @@ export default function FormAcceptAssignment() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -599,20 +575,10 @@ export default function FormAcceptAssignment() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task-ta");
     }
   }
@@ -682,15 +648,10 @@ export default function FormAcceptAssignment() {
                         id={key}
                         checked={taskOutput[key as keyof typeof taskOutput]}
                         onCheckedChange={(value) =>
-                          handleTaskOutputChange(
-                            key as keyof typeof taskOutput,
-                            value as boolean
-                          )
+                          handleTaskOutputChange(key as keyof typeof taskOutput, value as boolean)
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -702,19 +663,12 @@ export default function FormAcceptAssignment() {
                     <div className="flex items-center gap-2" key={key}>
                       <Checkbox
                         id={key}
-                        checked={
-                          unitSelection[key as keyof typeof unitSelection]
-                        }
+                        checked={unitSelection[key as keyof typeof unitSelection]}
                         onCheckedChange={(value) =>
-                          handleUnitChange(
-                            key as keyof typeof unitSelection,
-                            value as boolean
-                          )
+                          handleUnitChange(key as keyof typeof unitSelection, value as boolean)
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                   <div className=" lg:pl-3">
@@ -726,9 +680,7 @@ export default function FormAcceptAssignment() {
                       </DialogTrigger>
                       <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
                         <DialogHeader>
-                          <DialogTitle>
-                            Daftar Wilayah Polda dan Polres
-                          </DialogTitle>
+                          <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                         </DialogHeader>
                         <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
                           {listDest.map((polda: any) => (
@@ -736,9 +688,7 @@ export default function FormAcceptAssignment() {
                               <Label className="flex items-center">
                                 <Checkbox
                                   checked={checkedLevels.has(polda.id)}
-                                  onCheckedChange={() =>
-                                    handleCheckboxChange(polda.id)
-                                  }
+                                  onCheckedChange={() => handleCheckboxChange(polda.id)}
                                   className="mr-3"
                                 />
                                 {polda.name}
@@ -757,23 +707,18 @@ export default function FormAcceptAssignment() {
                                 <div className="ml-6 mt-2">
                                   <Label className="block">
                                     <Checkbox
-                                      checked={polda?.subDestination?.every(
-                                        (polres: any) =>
-                                          checkedLevels.has(polres.id)
+                                      checked={polda?.subDestination?.every((polres: any) =>
+                                        checkedLevels.has(polres.id)
                                       )}
                                       onCheckedChange={(isChecked) => {
-                                        const updatedLevels = new Set(
-                                          checkedLevels
-                                        );
-                                        polda?.subDestination?.forEach(
-                                          (polres: any) => {
-                                            if (isChecked) {
-                                              updatedLevels.add(polres.id);
-                                            } else {
-                                              updatedLevels.delete(polres.id);
-                                            }
+                                        const updatedLevels = new Set(checkedLevels);
+                                        polda?.subDestination?.forEach((polres: any) => {
+                                          if (isChecked) {
+                                            updatedLevels.add(polres.id);
+                                          } else {
+                                            updatedLevels.delete(polres.id);
                                           }
-                                        );
+                                        });
                                         setCheckedLevels(updatedLevels);
                                       }}
                                       className="mr-2"
@@ -781,15 +726,10 @@ export default function FormAcceptAssignment() {
                                     Pilih Semua Polres
                                   </Label>
                                   {polda?.subDestination?.map((polres: any) => (
-                                    <Label
-                                      key={polres.id}
-                                      className="block mt-1"
-                                    >
+                                    <Label key={polres.id} className="block mt-1">
                                       <Checkbox
                                         checked={checkedLevels.has(polres.id)}
-                                        onCheckedChange={() =>
-                                          handleCheckboxChange(polres.id)
-                                        }
+                                        onCheckedChange={() => handleCheckboxChange(polres.id)}
                                         className="mr-2"
                                       />
                                       {polres.name}
@@ -843,8 +783,7 @@ export default function FormAcceptAssignment() {
                       {date?.from ? (
                         date.to ? (
                           <>
-                            {format(date.from, "LLL dd, y")} -{" "}
-                            {format(date.to, "LLL dd, y")}
+                            {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                           </>
                         ) : (
                           format(date.from, "LLL dd, y")
@@ -876,9 +815,7 @@ export default function FormAcceptAssignment() {
                   )}
                 />
                 {errors.naration?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.naration.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.naration.message}</p>
                 )}
               </div>
               <div className="space-y-2.5 mt-5">
@@ -936,17 +873,12 @@ export default function FormAcceptAssignment() {
                       }}
                       maxSize={100}
                       label="Upload file dengan format .mp3 atau .wav."
-                      onDrop={(files) =>
-                        setAudioFiles((prev) => [...prev, ...files])
-                      }
+                      onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                       className="mt-2"
                     />
                   </div>
                   {audioFiles?.map((audio: any, idx: any) => (
-                    <div
-                      key={idx}
-                      className="flex flex-row justify-between items-center"
-                    >
+                    <div key={idx} className="flex flex-row justify-between items-center">
                       <p>{t("voice-note")}</p>
                       <Button
                         type="button"
@@ -969,9 +901,7 @@ export default function FormAcceptAssignment() {
                           className="border rounded p-2 w-full"
                           placeholder={`Masukkan link berita ${index + 1}`}
                           value={link}
-                          onChange={(e) =>
-                            handleLinkChange(index, e.target.value)
-                          }
+                          onChange={(e) => handleLinkChange(index, e.target.value)}
                         />
                         {links.length > 1 && (
                           <button
diff --git a/src/components/features/form/shared/ask-expert-form.tsx b/src/components/features/form/shared/ask-expert-form.tsx
index 76241316..4d47ccaf 100644
--- a/src/components/features/form/shared/ask-expert-form.tsx
+++ b/src/components/features/form/shared/ask-expert-form.tsx
@@ -1,25 +1,24 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
 import {
   createTask,
   createTaskTa,
@@ -27,6 +26,12 @@ import {
   getUserLevelForAssignments,
   getUserLevelForExpert,
 } from "@/lib/services/task";
+import { loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -34,27 +39,22 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import FileUploader from "@/components/features/form/shared/file-uploader";
-import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils/utils"
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import FileUploader from "@/components/features/form/shared/file-uploader";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 import { getListCompetencies } from "@/lib/services/management-user/management-user";
 
@@ -139,9 +139,7 @@ export default function FormAskExpert() {
   const [isRecording, setIsRecording] = useState(false);
   const [timer, setTimer] = useState<number>(120);
   const [userCompetencies, setUserCompetencies] = useState<any[]>([]);
-  const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(
-    new Set()
-  );
+  const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(new Set());
   const [listExpert, setListExpert] = useState<any[]>([]);
 
   const t = useTranslations("Form");
@@ -219,9 +217,7 @@ export default function FormAskExpert() {
         allExperts.push(...experts);
       }
 
-      const uniqueExperts = Array.from(
-        new Map(allExperts.map((e) => [e.id, e])).values()
-      );
+      const uniqueExperts = Array.from(new Map(allExperts.map((e) => [e.id, e])).values());
 
       setListExpert(uniqueExperts);
     };
@@ -431,11 +427,7 @@ export default function FormAskExpert() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -468,20 +460,10 @@ export default function FormAskExpert() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task-ta");
     }
   }
@@ -557,8 +539,7 @@ export default function FormAskExpert() {
                       {date?.from ? (
                         date.to ? (
                           <>
-                            {format(date.from, "LLL dd, y")} -{" "}
-                            {format(date.to, "LLL dd, y")}
+                            {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                           </>
                         ) : (
                           format(date.from, "LLL dd, y")
@@ -614,9 +595,7 @@ export default function FormAskExpert() {
                             <Label className="flex items-center">
                               <Checkbox
                                 checked={checkedLevels.has(expert.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChange(expert.id)
-                                }
+                                onCheckedChange={() => handleCheckboxChange(expert.id)}
                                 className="mr-3"
                               />
                               {expert.fullname}
@@ -639,9 +618,7 @@ export default function FormAskExpert() {
                   )}
                 />
                 {errors.naration?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.naration.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.naration.message}</p>
                 )}
               </div>
               <div className="space-y-2.5 mt-5">
@@ -699,17 +676,12 @@ export default function FormAskExpert() {
                       }}
                       maxSize={100}
                       label="Upload file dengan format .mp3 atau .wav."
-                      onDrop={(files) =>
-                        setAudioFiles((prev) => [...prev, ...files])
-                      }
+                      onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                       className="mt-2"
                     />
                   </div>
                   {audioFiles?.map((audio: any, idx: any) => (
-                    <div
-                      key={idx}
-                      className="flex flex-row justify-between items-center"
-                    >
+                    <div key={idx} className="flex flex-row justify-between items-center">
                       <p>{t("voice-note")}</p>
                       <Button
                         type="button"
@@ -732,9 +704,7 @@ export default function FormAskExpert() {
                           className="border rounded p-2 w-full"
                           placeholder={`Masukkan link berita ${index + 1}`}
                           value={link}
-                          onChange={(e) =>
-                            handleLinkChange(index, e.target.value)
-                          }
+                          onChange={(e) => handleLinkChange(index, e.target.value)}
                         />
                         {links.length > 1 && (
                           <button
diff --git a/src/components/features/form/shared/do-it-yourself-form.tsx b/src/components/features/form/shared/do-it-yourself-form.tsx
index 775ea0e6..aa9db571 100644
--- a/src/components/features/form/shared/do-it-yourself-form.tsx
+++ b/src/components/features/form/shared/do-it-yourself-form.tsx
@@ -1,31 +1,31 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { createTask, createTaskTa, getTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import {
-  createTask,
-  createTaskTa,
-  getTask,
-  getUserLevelForAssignments,
-} from "@/lib/services/task";
 import {
   Dialog,
   DialogContent,
@@ -33,27 +33,22 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import FileUploader from "@/components/features/form/shared/file-uploader";
-import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils/utils"
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import FileUploader from "@/components/features/form/shared/file-uploader";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
 import { detailMedia } from "@/lib/services/curated-content/curated-content";
 
 const taskSchema = z.object({
@@ -194,13 +189,10 @@ export default function FormDoItYourself() {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
         console.log("polda", response?.data?.data?.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -229,10 +221,7 @@ export default function FormDoItYourself() {
     return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
   };
 
-  const handleUnitChange = (
-    key: keyof typeof unitSelection,
-    value: boolean
-  ) => {
+  const handleUnitChange = (key: keyof typeof unitSelection, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -258,10 +247,7 @@ export default function FormDoItYourself() {
     }
   };
 
-  const handleExpertiseOutputChange = (
-    key: keyof typeof expertise,
-    value: boolean
-  ) => {
+  const handleExpertiseOutputChange = (key: keyof typeof expertise, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -290,10 +276,7 @@ export default function FormDoItYourself() {
     }
   };
 
-  const handleExpertOutputChange = (
-    key: keyof typeof expert,
-    value: boolean
-  ) => {
+  const handleExpertOutputChange = (key: keyof typeof expert, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -326,10 +309,7 @@ export default function FormDoItYourself() {
     initState();
   }, [id, refresh]);
 
-  const handleTaskOutputChange = (
-    key: keyof typeof taskOutput,
-    value: boolean
-  ) => {
+  const handleTaskOutputChange = (key: keyof typeof taskOutput, value: boolean) => {
     if (key === "all") {
       const newState = {
         all: value,
@@ -552,11 +532,7 @@ export default function FormDoItYourself() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -589,20 +565,10 @@ export default function FormDoItYourself() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task-ta");
     }
   }
@@ -672,15 +638,10 @@ export default function FormDoItYourself() {
                         id={key}
                         checked={taskOutput[key as keyof typeof taskOutput]}
                         onCheckedChange={(value) =>
-                          handleTaskOutputChange(
-                            key as keyof typeof taskOutput,
-                            value as boolean
-                          )
+                          handleTaskOutputChange(key as keyof typeof taskOutput, value as boolean)
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -724,8 +685,7 @@ export default function FormDoItYourself() {
                       {date?.from ? (
                         date.to ? (
                           <>
-                            {format(date.from, "LLL dd, y")} -{" "}
-                            {format(date.to, "LLL dd, y")}
+                            {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                           </>
                         ) : (
                           format(date.from, "LLL dd, y")
@@ -757,9 +717,7 @@ export default function FormDoItYourself() {
                   )}
                 />
                 {errors.naration?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.naration.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.naration.message}</p>
                 )}
               </div>
               <div className="space-y-2.5 mt-5">
@@ -817,17 +775,12 @@ export default function FormDoItYourself() {
                       }}
                       maxSize={100}
                       label="Upload file dengan format .mp3 atau .wav."
-                      onDrop={(files) =>
-                        setAudioFiles((prev) => [...prev, ...files])
-                      }
+                      onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                       className="mt-2"
                     />
                   </div>
                   {audioFiles?.map((audio: any, idx: any) => (
-                    <div
-                      key={idx}
-                      className="flex flex-row justify-between items-center"
-                    >
+                    <div key={idx} className="flex flex-row justify-between items-center">
                       <p>{t("voice-note")}</p>
                       <Button
                         type="button"
@@ -850,9 +803,7 @@ export default function FormDoItYourself() {
                           className="border rounded p-2 w-full"
                           placeholder={`Masukkan link berita ${index + 1}`}
                           value={link}
-                          onChange={(e) =>
-                            handleLinkChange(index, e.target.value)
-                          }
+                          onChange={(e) => handleLinkChange(index, e.target.value)}
                         />
                         {links.length > 1 && (
                           <button
diff --git a/src/components/features/form/shared/file-uploader.tsx b/src/components/features/form/shared/file-uploader.tsx
index e5fd8875..fdf3b996 100644
--- a/src/components/features/form/shared/file-uploader.tsx
+++ b/src/components/features/form/shared/file-uploader.tsx
@@ -1,128 +1,130 @@
 "use client";
+
 import { Fragment, useState } from "react";
-import { Icon } from "@iconify/react";
-import { Accept, useDropzone } from "react-dropzone";
-import { Button } from "@/components/ui/button";
 import Image from "next/image";
+import { Icon } from "@iconify/react";
 import { CloudUpload } from "lucide-react";
+import { Accept, useDropzone } from "react-dropzone";
+
+import { Button } from "@/components/ui/button";
 
 interface FileWithPreview extends File {
   preview: string;
 }
 
 interface FileUploaderProps {
-    onDrop: (files: FileWithPreview[]) => void;
-    accept: Accept;
-    maxSize: number;
-    label: string;
-    className?: string;
-    isMultiple?: boolean;
+  onDrop: (files: FileWithPreview[]) => void;
+  accept: Accept;
+  maxSize: number;
+  label: string;
+  className?: string;
+  isMultiple?: boolean;
 }
 
-const FileUploader = ({ onDrop, accept, maxSize, label, className = "", isMultiple = true }: FileUploaderProps) => {
-    const [files, setFiles] = useState<FileWithPreview[]>([]);
+const FileUploader = ({
+  onDrop,
+  accept,
+  maxSize,
+  label,
+  className = "",
+  isMultiple = true,
+}: FileUploaderProps) => {
+  const [files, setFiles] = useState<FileWithPreview[]>([]);
 
-    const { getRootProps, getInputProps } = useDropzone({
-        accept,
-        maxSize: maxSize * 1024 * 1024,
-        onDrop: (acceptedFiles) => {
-            const mappedFiles = acceptedFiles.map((file) => Object.assign(file));
-            setFiles((prevFiles) => [...prevFiles, ...mappedFiles]);
-            onDrop(mappedFiles);
-        },
-    });
+  const { getRootProps, getInputProps } = useDropzone({
+    accept,
+    maxSize: maxSize * 1024 * 1024,
+    onDrop: (acceptedFiles) => {
+      const mappedFiles = acceptedFiles.map((file) => Object.assign(file));
+      setFiles((prevFiles) => [...prevFiles, ...mappedFiles]);
+      onDrop(mappedFiles);
+    },
+  });
 
-    const renderFilePreview = (file: FileWithPreview) => {
-      if (file.type.startsWith("image")) {
-        return (
-          <Image
-            width={48}
-            height={48}
-            alt={file.name}
-            src={URL.createObjectURL(file)}
-            className=" rounded border p-0.5"
-          />
-        );
-      } else {
-        return <Icon icon="tabler:file-description" />;
-      }
-    };
-  
-    const handleRemoveFile = (file: FileWithPreview) => {
-      const uploadedFiles = files;
-      const filtered = uploadedFiles.filter((i) => i.name !== file.name);
-      setFiles([...filtered]);
-    };
+  const renderFilePreview = (file: FileWithPreview) => {
+    if (file.type.startsWith("image")) {
+      return (
+        <Image
+          width={48}
+          height={48}
+          alt={file.name}
+          src={URL.createObjectURL(file)}
+          className=" rounded border p-0.5"
+        />
+      );
+    } else {
+      return <Icon icon="tabler:file-description" />;
+    }
+  };
 
-    const handleRemoveAllFiles = () => {
-        setFiles([]);
-        onDrop([]);
-    };
-  
-    const fileList = files.map((file) => (
-      <div
-        key={file.name}
-        className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-      >
-        <div className="flex gap-3 items-center">
-          <div className="file-preview">{renderFilePreview(file)}</div>
-          <div>
-            <div className=" text-sm  text-card-foreground">{file.name}</div>
-            <div className=" text-xs font-light text-muted-foreground">
-              {Math.round(file.size / 100) / 10 > 1000 ? (
-                <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
-              ) : (
-                <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
-              )}
-              {" kb"}
-            </div>
+  const handleRemoveFile = (file: FileWithPreview) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  const handleRemoveAllFiles = () => {
+    setFiles([]);
+    onDrop([]);
+  };
+
+  const fileList = files.map((file) => (
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
+      <div className="flex gap-3 items-center">
+        <div className="file-preview">{renderFilePreview(file)}</div>
+        <div>
+          <div className=" text-sm  text-card-foreground">{file.name}</div>
+          <div className=" text-xs font-light text-muted-foreground">
+            {Math.round(file.size / 100) / 10 > 1000 ? (
+              <>{(Math.round(file.size / 100) / 10000).toFixed(1)}</>
+            ) : (
+              <>{(Math.round(file.size / 100) / 10).toFixed(1)}</>
+            )}
+            {" kb"}
           </div>
         </div>
-  
-        <Button
-          size="icon"
-          color="destructive"
-          variant="outline"
-          className=" border-none rounded-full"
-          onClick={() => handleRemoveFile(file)}
-        >
-          <Icon icon="tabler:x" className=" h-5 w-5" />
-        </Button>
       </div>
-    ));
-    
-    return (
+
+      <Button
+        size="icon"
+        color="destructive"
+        variant="outline"
+        className=" border-none rounded-full"
+        onClick={() => handleRemoveFile(file)}
+      >
+        <Icon icon="tabler:x" className=" h-5 w-5" />
+      </Button>
+    </div>
+  ));
+
+  return (
+    <Fragment>
+      <div {...getRootProps({ className: "dropzone" })} className={className}>
+        <input {...getInputProps()} />
+        <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+          <CloudUpload className="text-default-300 w-10 h-10" />
+          <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+            {/* Drop files here or click to upload. */}
+            Tarik file disini atau klik untuk upload.
+          </h4>
+          <div className=" text-xs text-muted-foreground">
+            ( {label}
+            Ukuran maksimal {maxSize} MB.)
+          </div>
+        </div>
+      </div>
+      {files.length ? (
         <Fragment>
-            <div {...getRootProps({ className: "dropzone" })} className={className}>
-                <input {...getInputProps()} />
-                <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
-                <CloudUpload className="text-default-300 w-10 h-10" />
-                <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
-                    {/* Drop files here or click to upload. */}
-                    Tarik file disini atau klik untuk upload. 
-                </h4>
-                <div className=" text-xs text-muted-foreground">
-                    ( {label}
-                    Ukuran maksimal {maxSize} MB.)
-                </div>
-                </div>
-            </div>
-            {files.length ? (
-                <Fragment>
-                    <div>{fileList}</div>
-                    <div className=" flex justify-between gap-2">
-                        <Button
-                        color="destructive"
-                        onClick={handleRemoveAllFiles}
-                        >
-                            Remove All
-                        </Button>
-                    </div>
-                </Fragment>
-            ) : null}
+          <div>{fileList}</div>
+          <div className=" flex justify-between gap-2">
+            <Button color="destructive" onClick={handleRemoveAllFiles}>
+              Remove All
+            </Button>
+          </div>
         </Fragment>
-    );
-}
+      ) : null}
+    </Fragment>
+  );
+};
 
-
-export default FileUploader;
\ No newline at end of file
+export default FileUploader;
diff --git a/src/components/features/form/survey/survey-detail.tsx b/src/components/features/form/survey/survey-detail.tsx
index 6447b21b..27bf7a6f 100644
--- a/src/components/features/form/survey/survey-detail.tsx
+++ b/src/components/features/form/survey/survey-detail.tsx
@@ -1,16 +1,15 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { z } from "zod";
-import { useForm, Controller } from "react-hook-form";
+import { useParams } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
 
 import { createSurveyData, getSurveyById } from "@/lib/services/survey/survey";
-
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Textarea } from "@/components/ui/textarea";
-import { Button } from "@/components/ui/button";
-import { useParams } from "next/navigation";
 
 const surveySchema = z.object({
   accessFrequency: z.string(),
@@ -58,28 +57,10 @@ export default function FormSurveyDetailPage() {
       "Baru pertama kali",
     ],
     uiExperienceDesign: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"],
-    uiExperienceNavigation: [
-      "Sangat mudah",
-      "Mudah",
-      "Cukup",
-      "Sulit",
-      "Sangat sulit",
-    ],
-    uiExperienceSpeed: [
-      "Sangat cepat",
-      "Cepat",
-      "Cukup",
-      "Lambat",
-      "Sangat lambat",
-    ],
+    uiExperienceNavigation: ["Sangat mudah", "Mudah", "Cukup", "Sulit", "Sangat sulit"],
+    uiExperienceSpeed: ["Sangat cepat", "Cepat", "Cukup", "Lambat", "Sangat lambat"],
     infoAccuracy: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"],
-    infoCompleteness: [
-      "Sangat lengkap",
-      "Lengkap",
-      "Cukup",
-      "Kurang lengkap",
-      "Tidak lengkap",
-    ],
+    infoCompleteness: ["Sangat lengkap", "Lengkap", "Cukup", "Kurang lengkap", "Tidak lengkap"],
     usefulness: [
       "Sangat membantu",
       "Membantu",
@@ -89,11 +70,7 @@ export default function FormSurveyDetailPage() {
     ],
   };
 
-  const renderControllerGroup = (
-    name: keyof SurveySchema,
-    question: string,
-    choices: string[]
-  ) => (
+  const renderControllerGroup = (name: keyof SurveySchema, question: string, choices: string[]) => (
     <div className="space-y-2">
       <p className="font-medium">{question}</p>
       <div className="grid grid-cols-2 gap-2">
@@ -114,11 +91,7 @@ export default function FormSurveyDetailPage() {
           />
         ))}
       </div>
-      {errors[name] && (
-        <p className="text-red-500 text-sm">
-          {errors[name]?.message as string}
-        </p>
-      )}
+      {errors[name] && <p className="text-red-500 text-sm">{errors[name]?.message as string}</p>}
     </div>
   );
 
@@ -147,10 +120,7 @@ export default function FormSurveyDetailPage() {
           if (details) {
             setValue("accessFrequency", details.accessFrequency || "");
             setValue("uiExperienceDesign", details.uiExperienceDesign || "");
-            setValue(
-              "uiExperienceNavigation",
-              details.uiExperienceNavigation || ""
-            );
+            setValue("uiExperienceNavigation", details.uiExperienceNavigation || "");
             setValue("uiExperienceSpeed", details.uiExperienceSpeed || "");
             setValue("infoAccuracy", details.infoAccuracy || "");
             setValue("infoCompleteness", details.infoCompleteness || "");
@@ -174,12 +144,10 @@ export default function FormSurveyDetailPage() {
 
   return (
     <div className="w-full mx-auto p-6">
-      <h1 className="text-2xl font-bold mb-2">
-        SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI
-      </h1>
+      <h1 className="text-2xl font-bold mb-2">SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI</h1>
       <p className="text-sm mb-6 text-gray-600">
-        Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan
-        kualitas layanan MediaHub Polri.
+        Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan
+        MediaHub Polri.
       </p>
 
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
@@ -190,9 +158,7 @@ export default function FormSurveyDetailPage() {
         )}
 
         <div>
-          <p className="font-medium">
-            2. Bagaimana pengalaman Anda dalam mengakses website ini?
-          </p>
+          <p className="font-medium">2. Bagaimana pengalaman Anda dalam mengakses website ini?</p>
           <div className="space-y-3 mt-2">
             {renderControllerGroup(
               "uiExperienceDesign",
@@ -214,8 +180,7 @@ export default function FormSurveyDetailPage() {
 
         <div>
           <p className="font-medium">
-            3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub
-            Polri?
+            3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub Polri?
           </p>
           <div className="space-y-3 mt-2">
             {renderControllerGroup(
diff --git a/src/components/features/form/task-ta/task-ta-detail-form.tsx b/src/components/features/form/task-ta/task-ta-detail-form.tsx
index bf246d02..48693a2b 100644
--- a/src/components/features/form/task-ta/task-ta-detail-form.tsx
+++ b/src/components/features/form/task-ta/task-ta-detail-form.tsx
@@ -1,25 +1,34 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import WavesurferPlayer from "@wavesurfer/react";
+import JoditEditor from "jodit-react";
+import {
+  ChevronDown,
+  ChevronUp,
+  Dock,
+  DotSquare,
+  ImageIcon,
+  Music,
+  Search,
+  TrashIcon,
+  VideoIcon,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
+import WaveSurfer from "wavesurfer.js";
+import * as z from "zod";
+
+import { successCallback } from "@/config/swal";
 import {
   acceptAssignment,
   createAssignmentResponse,
@@ -36,6 +45,12 @@ import {
   getTaskTa,
   getUserLevelForAssignments,
 } from "@/lib/services/task";
+import { close, error, loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -43,32 +58,20 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import {
-  ChevronDown,
-  ChevronUp,
-  Dock,
-  DotSquare,
-  ImageIcon,
-  Music,
-  Search,
-  TrashIcon,
-  VideoIcon,
-} from "lucide-react";
-import dynamic from "next/dynamic";
-import { Link } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/lib/utils/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { successCallback } from "@/config/swal";
-import FileUploader from "../shared/file-uploader";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import Image from "next/image";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import WavesurferPlayer from "@wavesurfer/react";
-import WaveSurfer from "wavesurfer.js";
+import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { useTranslations } from "next-intl";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+import FileUploader from "../shared/file-uploader";
 
 const taskSchema = z.object({
   uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -248,9 +251,7 @@ export default function FormTaskTaDetail() {
   const [listData, setListData] = useState([]);
   const [message, setMessage] = useState<string>("");
   const [sentAcceptance, setSentAcceptance] = useState<AcceptanceData[]>([]);
-  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>(
-    []
-  );
+  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>([]);
 
   const [totalPage, setTotalPage] = React.useState(1);
   const [dataTable, setDataTable] = React.useState<any[]>([]);
@@ -277,27 +278,19 @@ export default function FormTaskTaDetail() {
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
 
-  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedImage, setSelectedImage] = useState<string | null>(
     imageUploadedFiles?.[0]?.url || null
   );
-  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedVideo, setSelectedVideo] = useState<string | null>(
     videoUploadedFiles?.[0]?.url || null
   );
-  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedText, setSelectedText] = useState<string | null>(
     textUploadedFiles?.[0]?.url || null
   );
-  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedAudio, setSelectedAudio] = useState<string | null>(
     audioUploadedFiles?.[0]?.url || null
   );
@@ -326,10 +319,7 @@ export default function FormTaskTaDetail() {
   //   setPlatformTypeVisible(selectedValue === 2);
   // };
 
-  const handleExpertiseOutputChange = (
-    key: keyof typeof expertise,
-    value: boolean
-  ) => {
+  const handleExpertiseOutputChange = (key: keyof typeof expertise, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -358,10 +348,7 @@ export default function FormTaskTaDetail() {
     }
   };
 
-  const handleExpertOutputChange = (
-    key: keyof typeof expert,
-    value: boolean
-  ) => {
+  const handleExpertOutputChange = (key: keyof typeof expert, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -388,13 +375,10 @@ export default function FormTaskTaDetail() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -444,32 +428,20 @@ export default function FormTaskTaDetail() {
 
         if (details?.urls) {
           // Extract attachmentUrl from each object in urls
-          const urls = details.urls.map(
-            (urlObj: any) => urlObj.attachmentUrl || ""
-          );
+          const urls = details.urls.map((urlObj: any) => urlObj.attachmentUrl || "");
           setUrlInputs(urls); // Save the URLs to state
         }
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
-          );
+          const levels = new Set(details.assignedToLevel.split(",").map(Number));
           setCheckedLevels(levels);
         }
 
         const attachment = details?.files;
-        setImageUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 1)
-        );
-        setVideoUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 2)
-        );
-        setTextUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 3)
-        );
-        setAudioUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 4)
-        );
+        setImageUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 1));
+        setVideoUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 2));
+        setTextUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 3));
+        setAudioUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 4));
       }
     }
     initState();
@@ -477,9 +449,7 @@ export default function FormTaskTaDetail() {
   }, [id, refresh]);
 
   const handleUrlChange = (index: number, newUrl: string) => {
-    setUrlInputs((prev: any) =>
-      prev.map((url: any, idx: any) => (idx === index ? newUrl : url))
-    );
+    setUrlInputs((prev: any) => prev.map((url: any, idx: any) => (idx === index ? newUrl : url)));
   };
 
   useEffect(() => {
@@ -503,9 +473,7 @@ export default function FormTaskTaDetail() {
 
   useEffect(() => {
     if (detail?.expertCompetencies) {
-      const outputSet = new Set(
-        detail.expertCompetencies.split(",").map(String)
-      );
+      const outputSet = new Set(detail.expertCompetencies.split(",").map(String));
       setExpertiseOutput({
         semua: outputSet.has("0"),
         komunikasi: outputSet.has("1"),
@@ -722,10 +690,7 @@ export default function FormTaskTaDetail() {
     initState();
   }, [refreshAcceptance]);
 
-  const setFinishAcceptance = async (
-    id: number,
-    isFinish: boolean
-  ): Promise<void> => {
+  const setFinishAcceptance = async (id: number, isFinish: boolean): Promise<void> => {
     if (!isFinish) {
       loading();
 
@@ -752,19 +717,13 @@ export default function FormTaskTaDetail() {
             </tr>
           </thead>
           <tbody>
-            {(type === "terkirim" ? sentAcceptance : acceptAcceptance).map(
-              (item) => (
-                <tr key={item.id} className="border-b">
-                  <td className="px-4 py-2">
-                    {new Date(item.sentAt).toLocaleString()}
-                  </td>
-                  <td className="px-4 py-2">{item.userLevels.name}</td>
-                  <td className="px-4 py-2">
-                    {type === "terkirim" ? "Terkirim" : "Diterima"}
-                  </td>
-                </tr>
-              )
-            )}
+            {(type === "terkirim" ? sentAcceptance : acceptAcceptance).map((item) => (
+              <tr key={item.id} className="border-b">
+                <td className="px-4 py-2">{new Date(item.sentAt).toLocaleString()}</td>
+                <td className="px-4 py-2">{item.userLevels.name}</td>
+                <td className="px-4 py-2">{type === "terkirim" ? "Terkirim" : "Diterima"}</td>
+              </tr>
+            ))}
           </tbody>
         </table>
       )}
@@ -920,10 +879,7 @@ export default function FormTaskTaDetail() {
               <div>
                 <Dialog>
                   <DialogTrigger asChild>
-                    <Button
-                      color="primary"
-                      onClick={() => setModalType("terkirim")}
-                    >
+                    <Button color="primary" onClick={() => setModalType("terkirim")}>
                       {sentAcceptance?.length} {t("sent")}
                     </Button>
                   </DialogTrigger>
@@ -940,9 +896,7 @@ export default function FormTaskTaDetail() {
 
                   <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
                     <DialogHeader>
-                      <DialogTitle>
-                        {t("assignment-status-details")}
-                      </DialogTitle>
+                      <DialogTitle>{t("assignment-status-details")}</DialogTitle>
                     </DialogHeader>
 
                     {modalType === "terkirim" && getModalContent("terkirim")}
@@ -1023,9 +977,7 @@ export default function FormTaskTaDetail() {
                         }
                         disabled
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -1040,15 +992,10 @@ export default function FormTaskTaDetail() {
                         id={key}
                         checked={expert[key as keyof typeof expert]}
                         onCheckedChange={(value) =>
-                          handleExpertOutputChange(
-                            key as keyof typeof expert,
-                            value as boolean
-                          )
+                          handleExpertOutputChange(key as keyof typeof expert, value as boolean)
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -1072,9 +1019,7 @@ export default function FormTaskTaDetail() {
                 <Label htmlFor="attachment">{t("attachment")}</Label>
                 <div className="space-y-3">
                   <div>
-                    {videoUploadedFiles?.length > 0 && (
-                      <Label>{t("audio-visual")}</Label>
-                    )}
+                    {videoUploadedFiles?.length > 0 && <Label>{t("audio-visual")}</Label>}
                     <div>
                       {selectedVideo && (
                         <Card className="mt-2">
@@ -1100,9 +1045,7 @@ export default function FormTaskTaDetail() {
                               <VideoIcon />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1120,9 +1063,7 @@ export default function FormTaskTaDetail() {
                     </div>
                   </div>
                   <div>
-                    {imageUploadedFiles?.length > 0 && (
-                      <Label>{t("image")}</Label>
-                    )}
+                    {imageUploadedFiles?.length > 0 && <Label>{t("image")}</Label>}
                     <div>
                       {selectedImage && (
                         <Card className="mt-2">
@@ -1147,9 +1088,7 @@ export default function FormTaskTaDetail() {
                               <ImageIcon />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1168,9 +1107,7 @@ export default function FormTaskTaDetail() {
                     </div>
                   </div>
                   <div>
-                    {textUploadedFiles?.length > 0 && (
-                      <Label>{t("text")}</Label>
-                    )}
+                    {textUploadedFiles?.length > 0 && <Label>{t("text")}</Label>}
                     <div>
                       {selectedText && (
                         <Card className="mt-2">
@@ -1197,9 +1134,7 @@ export default function FormTaskTaDetail() {
                               <Dock />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1217,9 +1152,7 @@ export default function FormTaskTaDetail() {
                     </div>
                   </div>
                   <div>
-                    {audioUploadedFiles?.length > 0 && (
-                      <Label>{t("audio")}</Label>
-                    )}
+                    {audioUploadedFiles?.length > 0 && <Label>{t("audio")}</Label>}
                     <div>
                       {selectedAudio && (
                         <Card className="mt-2">
@@ -1239,18 +1172,12 @@ export default function FormTaskTaDetail() {
                             onClick={onPlayPause}
                             disabled={isPlaying}
                             className={`flex items-center gap-2 ${
-                              isPlaying
-                                ? "bg-gray-300 cursor-not-allowed"
-                                : "bg-primary text-white"
+                              isPlaying ? "bg-gray-300 cursor-not-allowed" : "bg-primary text-white"
                             } p-2 rounded`}
                           >
                             {isPlaying ? "Pause" : "Play"}
                             <Icon
-                              icon={
-                                isPlaying
-                                  ? "carbon:pause-outline"
-                                  : "famicons:play-sharp"
-                              }
+                              icon={isPlaying ? "carbon:pause-outline" : "famicons:play-sharp"}
                               className="h-5 w-5"
                             />
                           </Button>
@@ -1270,9 +1197,7 @@ export default function FormTaskTaDetail() {
                               <Music />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1322,8 +1247,7 @@ export default function FormTaskTaDetail() {
             <div className="flex flex-wrap lg:flex-row  justify-between gap-3 my-3">
               <div className="lg:px-1">
                 {detail?.isDone !== true &&
-                (Number(userLevelNumber) !== 3 ||
-                  Number(userLevelNumber) == 2) ? (
+                (Number(userLevelNumber) !== 3 || Number(userLevelNumber) == 2) ? (
                   <Button
                     color="primary"
                     variant={"outline"}
@@ -1353,8 +1277,7 @@ export default function FormTaskTaDetail() {
                     type="button"
                     className="btn btn-primary lg:mx-3"
                     style={
-                      statusAcceptance ||
-                      detail?.createdBy?.id !== Number(userId)
+                      statusAcceptance || detail?.createdBy?.id !== Number(userId)
                         ? {
                             display: "none",
                           }
@@ -1414,9 +1337,7 @@ export default function FormTaskTaDetail() {
                     </DialogTrigger>
                     <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
                       <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
+                        <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                       </DialogHeader>
                       <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
                         {listDest.map((polda: any) => (
@@ -1424,9 +1345,7 @@ export default function FormTaskTaDetail() {
                             <Label className="flex items-center">
                               <Checkbox
                                 // checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChangeFilter(polda.id)
-                                }
+                                onCheckedChange={() => handleCheckboxChangeFilter(polda.id)}
                                 className="mr-3"
                               />
                               {polda.name}
@@ -1450,18 +1369,14 @@ export default function FormTaskTaDetail() {
                                     //     checkedLevels.has(polres.id)
                                     // )}
                                     onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
+                                      const updatedLevels = new Set(checkedLevels);
+                                      polda?.subDestination?.forEach((polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
                                         }
-                                      );
+                                      });
                                       setCheckedLevels(updatedLevels);
                                     }}
                                     className="mr-2"
@@ -1472,9 +1387,7 @@ export default function FormTaskTaDetail() {
                                   <Label key={polres.id} className="block mt-1">
                                     <Checkbox
                                       // checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChangeFilter(polres.id)
-                                      }
+                                      onCheckedChange={() => handleCheckboxChangeFilter(polres.id)}
                                       className="mr-2"
                                     />
                                     {polres.name}
@@ -1508,10 +1421,10 @@ export default function FormTaskTaDetail() {
                                 Number(item?.fileType?.id) == 1
                                   ? `/contributor/content/image/detail/${item?.id}`
                                   : Number(item?.fileType?.id) == 2
-                                  ? `/contributor/content/video/detail/${item?.id}`
-                                  : Number(item?.fileType?.id) == 3
-                                  ? `/contributor/content/teks/detail/${item?.id}`
-                                  : `/contributor/content/audio/detail/${item?.id}`
+                                    ? `/contributor/content/video/detail/${item?.id}`
+                                    : Number(item?.fileType?.id) == 3
+                                      ? `/contributor/content/teks/detail/${item?.id}`
+                                      : `/contributor/content/audio/detail/${item?.id}`
                               }
                             >
                               {item.title}
@@ -1519,9 +1432,7 @@ export default function FormTaskTaDetail() {
                           </td>
                           <td className="px-4 py-2">{item.fileType.name}</td>
                           <td className="px-4 py-2">{item.category.name}</td>
-                          <td className="px-4 py-2">
-                            {item.creatorGroupLevelName}
-                          </td>
+                          <td className="px-4 py-2">{item.creatorGroupLevelName}</td>
                           <td className="px-4 py-2">{item.creatorName}</td>
                         </tr>
                       ))}
@@ -1539,11 +1450,7 @@ export default function FormTaskTaDetail() {
                     onChange={handleInputChange}
                   />
                   <div className="flex justify-end mt-3">
-                    <Button
-                      color="primary"
-                      onClick={() => postData()}
-                      type="button"
-                    >
+                    <Button color="primary" onClick={() => postData()} type="button">
                       Kirim Tanggapan
                     </Button>
                   </div>
@@ -1605,10 +1512,7 @@ export default function FormTaskTaDetail() {
                       {item.children?.length > 0 && (
                         <div className="ml-10 mt-2 flex flex-col">
                           {item.children.map((child: any) => (
-                            <div
-                              key={child.id}
-                              className="flex flex-col gap-3 mt-2"
-                            >
+                            <div key={child.id} className="flex flex-col gap-3 mt-2">
                               <div className="flex flex-row gap-3">
                                 <Avatar className="mt-2">
                                   <AvatarImage
@@ -1625,9 +1529,7 @@ export default function FormTaskTaDetail() {
                                       {formatDate(child.createdAt)}
                                     </span>
                                   </div>
-                                  <p className="text-gray-800 mt-1">
-                                    {child.message}
-                                  </p>
+                                  <p className="text-gray-800 mt-1">{child.message}</p>
                                   <div className="flex flex-row gap-2">
                                     <div
                                       className="flex items-center mt-1 text-blue-500 cursor-pointer"
@@ -1664,10 +1566,7 @@ export default function FormTaskTaDetail() {
                               {child.children?.length > 0 && (
                                 <div className="ml-10 mt-2 flex flex-col mb-3">
                                   {child.children.map((child2: any) => (
-                                    <div
-                                      key={child2.id}
-                                      className="flex flex-col gap-3 mt-2"
-                                    >
+                                    <div key={child2.id} className="flex flex-col gap-3 mt-2">
                                       <div className="flex flex-row gap-3 ">
                                         <Avatar className="mt-2">
                                           <AvatarImage
@@ -1684,20 +1583,14 @@ export default function FormTaskTaDetail() {
                                               {formatDate(child2.createdAt)}
                                             </span>
                                           </div>
-                                          <p className="text-gray-800 mt-1">
-                                            {child2.message}
-                                          </p>
+                                          <p className="text-gray-800 mt-1">{child2.message}</p>
                                           <div className="flex flex-row gap-2">
                                             <div
                                               className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                              onClick={() =>
-                                                deleteData(child2.id)
-                                              }
+                                              onClick={() => deleteData(child2.id)}
                                             >
                                               <TrashIcon className="w-4 h-4" />
-                                              <span className="ml-1">
-                                                Delete
-                                              </span>
+                                              <span className="ml-1">Delete</span>
                                             </div>
                                           </div>
                                         </div>
@@ -1716,8 +1609,7 @@ export default function FormTaskTaDetail() {
               </>
             )}
             <div className="flex lg:justify-center mt-4">
-              {detail?.createdBy?.id == Number(userId) &&
-              detail?.isDone !== true ? (
+              {detail?.createdBy?.id == Number(userId) && detail?.isDone !== true ? (
                 <>
                   <Button
                     type="button"
diff --git a/src/components/features/form/task-ta/task-ta-edit-form.tsx b/src/components/features/form/task-ta/task-ta-edit-form.tsx
index c74ec3cf..d68b0f9e 100644
--- a/src/components/features/form/task-ta/task-ta-edit-form.tsx
+++ b/src/components/features/form/task-ta/task-ta-edit-form.tsx
@@ -1,25 +1,23 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import WavesurferPlayer from "@wavesurfer/react";
+import JoditEditor from "jodit-react";
+import { ChevronDown, ChevronUp, Dock, ImageIcon, Music, VideoIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { getCsrfToken } from "@/lib/services/auth";
 import {
   createTask,
   createTaskTa,
@@ -27,6 +25,10 @@ import {
   getTaskTa,
   getUserLevelForAssignments,
 } from "@/lib/services/task";
+import { error, loading } from "@/lib/utils/swal";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -34,24 +36,18 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  ChevronDown,
-  ChevronUp,
-  Dock,
-  ImageIcon,
-  Music,
-  VideoIcon,
-} from "lucide-react";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
 import FileUploader from "../shared/file-uploader";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import Image from "next/image";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import WavesurferPlayer from "@wavesurfer/react";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { error, loading } from "@/lib/utils/swal";
-import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
 
 const taskSchema = z.object({
   // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -159,18 +155,10 @@ export default function FormTaskTaEdit() {
   const [isRecording, setIsRecording] = useState(false);
   const [timer, setTimer] = useState<number>(120);
 
-  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>([]);
+  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>([]);
+  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>([]);
+  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>([]);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -191,10 +179,7 @@ export default function FormTaskTaEdit() {
     resolver: zodResolver(taskSchema),
   });
 
-  const handleExpertiseOutputChange = (
-    key: keyof typeof expertise,
-    value: boolean
-  ) => {
+  const handleExpertiseOutputChange = (key: keyof typeof expertise, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -223,10 +208,7 @@ export default function FormTaskTaEdit() {
     }
   };
 
-  const handleExpertOutputChange = (
-    key: keyof typeof expert,
-    value: boolean
-  ) => {
+  const handleExpertOutputChange = (key: keyof typeof expert, value: boolean) => {
     if (key === "semua") {
       const newState = {
         semua: value,
@@ -253,13 +235,10 @@ export default function FormTaskTaEdit() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -285,25 +264,15 @@ export default function FormTaskTaEdit() {
         }
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
-          );
+          const levels = new Set(details.assignedToLevel.split(",").map(Number));
           setCheckedLevels(levels);
         }
 
         const attachment = details?.files;
-        setImageUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 1)
-        );
-        setVideoUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 2)
-        );
-        setTextUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 3)
-        );
-        setAudioUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 4)
-        );
+        setImageUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 1));
+        setVideoUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 2));
+        setTextUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 3));
+        setAudioUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 4));
 
         // Add more state setting here based on other fields like broadcastType, taskOutput, etc.
       }
@@ -312,9 +281,7 @@ export default function FormTaskTaEdit() {
   }, [id, refresh]);
 
   const handleUrlChange = (index: number, newUrl: string) => {
-    setUrlInputs((prev: any) =>
-      prev.map((url: any, idx: any) => (idx === index ? newUrl : url))
-    );
+    setUrlInputs((prev: any) => prev.map((url: any, idx: any) => (idx === index ? newUrl : url)));
   };
 
   useEffect(() => {
@@ -338,9 +305,7 @@ export default function FormTaskTaEdit() {
 
   useEffect(() => {
     if (detail?.expertCompetencies) {
-      const outputSet = new Set(
-        detail.expertCompetencies.split(",").map(String)
-      );
+      const outputSet = new Set(detail.expertCompetencies.split(",").map(String));
       setExpertiseOutput({
         semua: outputSet.has("0"),
         komunikasi: outputSet.has("1"),
@@ -397,10 +362,7 @@ export default function FormTaskTaEdit() {
     return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
   };
 
-  const handleUnitChange = (
-    key: keyof typeof unitSelection,
-    value: boolean
-  ) => {
+  const handleUnitChange = (key: keyof typeof unitSelection, value: boolean) => {
     if (key === "allUnit") {
       const newState = {
         allUnit: value,
@@ -426,10 +388,7 @@ export default function FormTaskTaEdit() {
     }
   };
 
-  const handleTaskOutputChange = (
-    key: keyof typeof taskOutput,
-    value: boolean
-  ) => {
+  const handleTaskOutputChange = (key: keyof typeof taskOutput, value: boolean) => {
     if (key === "all") {
       const newState = {
         all: value,
@@ -675,11 +634,7 @@ export default function FormTaskTaEdit() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -712,20 +667,10 @@ export default function FormTaskTaEdit() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task");
     }
   }
@@ -820,9 +765,7 @@ export default function FormTaskTaEdit() {
                           )
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -837,15 +780,10 @@ export default function FormTaskTaEdit() {
                         id={key}
                         checked={expert[key as keyof typeof expert]}
                         onCheckedChange={(value) =>
-                          handleExpertOutputChange(
-                            key as keyof typeof expert,
-                            value as boolean
-                          )
+                          handleExpertOutputChange(key as keyof typeof expert, value as boolean)
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -857,16 +795,11 @@ export default function FormTaskTaEdit() {
                   control={control}
                   name="naration"
                   render={({ field: { onChange, value } }) => (
-                    <CustomEditor
-                      onChange={onChange}
-                      initialData={detail?.narration || value}
-                    />
+                    <CustomEditor onChange={onChange} initialData={detail?.narration || value} />
                   )}
                 />
                 {errors.naration?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.naration.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.naration.message}</p>
                 )}
               </div>
               <div className="space-y-2.5 mt-5">
@@ -894,9 +827,7 @@ export default function FormTaskTaEdit() {
                               <VideoIcon />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -934,9 +865,7 @@ export default function FormTaskTaEdit() {
                               <ImageIcon />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -974,9 +903,7 @@ export default function FormTaskTaEdit() {
                               <Dock />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1011,9 +938,7 @@ export default function FormTaskTaEdit() {
                       }}
                       maxSize={100}
                       label="Upload file dengan format .mp3 atau .wav."
-                      onDrop={(files) =>
-                        setAudioFiles((prev) => [...prev, ...files])
-                      }
+                      onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                       className="mt-2"
                     />
                     {audioUploadedFiles?.map((file: any, index: number) => (
@@ -1027,9 +952,7 @@ export default function FormTaskTaEdit() {
                               <Music />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1064,17 +987,12 @@ export default function FormTaskTaEdit() {
                   <div className="mt-4 space-y-2">
                     <h2 className="text-lg font-bold">{t("news-links")}</h2>
                     {urlInputs.map((url: any, index: any) => (
-                      <div
-                        key={url.id}
-                        className="flex items-center gap-2 mt-2"
-                      >
+                      <div key={url.id} className="flex items-center gap-2 mt-2">
                         <input
                           type="url"
                           className="border rounded p-2 w-full"
                           defaultValue={url.attachmentUrl}
-                          onChange={(e) =>
-                            handleLinkChange(index, e.target.value)
-                          }
+                          onChange={(e) => handleLinkChange(index, e.target.value)}
                           placeholder={`Masukkan link berita ${index + 1}`}
                         />
                       </div>
diff --git a/src/components/features/form/task-ta/task-ta-form.tsx b/src/components/features/form/task-ta/task-ta-form.tsx
index 7681761e..1ec2496e 100644
--- a/src/components/features/form/task-ta/task-ta-form.tsx
+++ b/src/components/features/form/task-ta/task-ta-form.tsx
@@ -1,25 +1,24 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { addDays, format, setDate } from "date-fns";
+import JoditEditor from "jodit-react";
+import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { DateRange } from "react-day-picker";
+import { Controller, useForm } from "react-hook-form";
+import TimePicker from "react-time-picker";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
 import {
   createTask,
   createTaskTa,
@@ -27,6 +26,12 @@ import {
   getUserLevelForAssignments,
   getUserLevelForExpert,
 } from "@/lib/services/task";
+import { loading } from "@/lib/utils/swal";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -34,27 +39,22 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { CalendarIcon, ChevronDown, ChevronUp, Trash2 } from "lucide-react";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import FileUploader from "@/components/features/form/shared/file-uploader";
-import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils/utils"
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Calendar } from "@/components/ui/calendar";
-import { addDays, format, setDate } from "date-fns";
-import { DateRange } from "react-day-picker";
-import TimePicker from "react-time-picker";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import FileUploader from "@/components/features/form/shared/file-uploader";
+
 import "react-time-picker/dist/TimePicker.css";
 import "react-clock/dist/Clock.css";
+
 import {
   AdministrationLevelList,
   getListCompetencies,
@@ -135,9 +135,7 @@ export default function FormTaskTa() {
   const [userExperiences, setUserExperiences] = useState<any>();
   const [userLevels, setUserLevels] = useState<any>();
   const [userCompetencies, setUserCompetencies] = useState<any[]>([]);
-  const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(
-    new Set()
-  );
+  const [selectedCompetencies, setSelectedCompetencies] = useState<Set<number>>(new Set());
   const [listExpert, setListExpert] = useState<any[]>([]);
   const [checkedLevels, setCheckedLevels] = useState<Set<number>>(new Set());
   const [expandedPolda, setExpandedPolda] = useState([{}]);
@@ -217,9 +215,7 @@ export default function FormTaskTa() {
         allExperts.push(...experts);
       }
 
-      const uniqueExperts = Array.from(
-        new Map(allExperts.map((e) => [e.id, e])).values()
-      );
+      const uniqueExperts = Array.from(new Map(allExperts.map((e) => [e.id, e])).values());
 
       setListExpert(uniqueExperts);
     };
@@ -429,11 +425,7 @@ export default function FormTaskTa() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -466,20 +458,10 @@ export default function FormTaskTa() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task-ta");
     }
   }
@@ -569,8 +551,7 @@ export default function FormTaskTa() {
                     {date?.from ? (
                       date.to ? (
                         <>
-                          {format(date.from, "LLL dd, y")} -{" "}
-                          {format(date.to, "LLL dd, y")}
+                          {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
                         </>
                       ) : (
                         format(date.from, "LLL dd, y")
@@ -626,9 +607,7 @@ export default function FormTaskTa() {
                           <Label className="flex items-center">
                             <Checkbox
                               checked={checkedLevels.has(expert.id)}
-                              onCheckedChange={() =>
-                                handleCheckboxChange(expert.id)
-                              }
+                              onCheckedChange={() => handleCheckboxChange(expert.id)}
                               className="mr-3"
                             />
                             {expert.fullname}
@@ -650,9 +629,7 @@ export default function FormTaskTa() {
                 )}
               />
               {errors.naration?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.naration.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.naration.message}</p>
               )}
             </div>
             <div className="space-y-2.5 mt-5">
@@ -710,17 +687,12 @@ export default function FormTaskTa() {
                     }}
                     maxSize={100}
                     label="Upload file dengan format .mp3 atau .wav."
-                    onDrop={(files) =>
-                      setAudioFiles((prev) => [...prev, ...files])
-                    }
+                    onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                     className="mt-2"
                   />
                 </div>
                 {audioFiles?.map((audio: any, idx: any) => (
-                  <div
-                    key={idx}
-                    className="flex flex-row justify-between items-center"
-                  >
+                  <div key={idx} className="flex flex-row justify-between items-center">
                     <p>{t("voice-note")}</p>
                     <Button
                       type="button"
@@ -742,9 +714,7 @@ export default function FormTaskTa() {
                         className="border rounded p-2 w-full"
                         placeholder={`Masukkan link berita ${index + 1}`}
                         value={link}
-                        onChange={(e) =>
-                          handleLinkChange(index, e.target.value)
-                        }
+                        onChange={(e) => handleLinkChange(index, e.target.value)}
                       />
                       {links.length > 1 && (
                         <button
diff --git a/src/components/features/form/task-ta/task-ta-upload-form.tsx b/src/components/features/form/task-ta/task-ta-upload-form.tsx
index 9a41dca9..6da70bea 100644
--- a/src/components/features/form/task-ta/task-ta-upload-form.tsx
+++ b/src/components/features/form/task-ta/task-ta-upload-form.tsx
@@ -1,22 +1,52 @@
 "use client";
-import React, {
-  ChangeEvent,
-  useEffect,
-  useRef,
-  Fragment,
-  useState,
-} from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+
+import { request } from "http";
+import { register } from "module";
+import React, { ChangeEvent, Fragment, useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { redirect, useParams, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { options } from "@fullcalendar/core/preact.js";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
-import { Upload } from "tus-js-client";
+import { Icon } from "@iconify/react";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import JoditEditor from "jodit-react";
+import { data } from "jquery";
+import Cookies from "js-cookie";
+import { CloudUpload, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { useDropzone } from "react-dropzone";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { redirect, useParams, useRouter } from "next/navigation";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error, loading } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
+import {
+  generateDataArticle,
+  getDetailArticle,
+  getGenerateKeywords,
+  getGenerateTitle,
+} from "@/lib/services/content/ai";
+import {
+  createMedia,
+  getTagsBySubCategoryId,
+  listEnableCategory,
+  uploadThumbnail,
+} from "@/lib/services/content/content";
+import { getTaskTa } from "@/lib/services/task";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
   Select,
   SelectContent,
@@ -24,43 +54,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import { register } from "module";
 import { Switch } from "@/components/ui/switch";
-import Cookies from "js-cookie";
-import {
-  createMedia,
-  getTagsBySubCategoryId,
-  listEnableCategory,
-  uploadThumbnail,
-} from "@/lib/services/content/content";
-import { uploadThumbnailBlog } from "@/lib/services/blog/blog";
 import { Textarea } from "@/components/ui/textarea";
-import {
-  generateDataArticle,
-  getDetailArticle,
-  getGenerateKeywords,
-  getGenerateTitle,
-} from "@/lib/services/content/ai";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { useDropzone } from "react-dropzone";
-import { Icon } from "@iconify/react";
-import { CloudUpload, Trash2 } from "lucide-react";
-import Image from "next/image";
-import { error, loading } from "@/config/swal";
-import { Item } from "@radix-ui/react-dropdown-menu";
-import { data } from "jquery";
-import { options } from "@fullcalendar/core/preact.js";
-import dynamic from "next/dynamic";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Link } from "@/i18n/navigation";
-import { request } from "http";
-import { useTranslations } from "next-intl";
+
 import FileUploader from "../shared/file-uploader";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import { getTaskTa } from "@/lib/services/task";
 import { taskDetail } from "./task-ta-form";
 
 interface FileWithPreview extends File {
@@ -116,9 +113,7 @@ export default function FormTaskTaNew() {
   const [articleIds, setArticleIds] = useState<string[]>([]);
   const [isGeneratedArticle, setIsGeneratedArticle] = useState(false);
   const [articleBody, setArticleBody] = useState<string>("");
-  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(
-    null
-  );
+  const [selectedArticleId, setSelectedArticleId] = useState<string | null>(null);
   const [selectedMainKeyword, setSelectedMainKeyword] = useState("");
   const [selectedWritingStyle, setSelectedWritingStyle] = useState("");
   const [selectedSize, setSelectedSize] = useState("");
@@ -279,9 +274,7 @@ export default function FormTaskTaNew() {
       console.log("data category", resCategory);
 
       if (scheduleId && scheduleType === "3") {
-        const findCategory = resCategory.find((o) =>
-          o.name.toLowerCase().includes("pers rilis")
-        );
+        const findCategory = resCategory.find((o) => o.name.toLowerCase().includes("pers rilis"));
 
         if (findCategory) {
           // setValue("categoryId", findCategory.id);
@@ -302,11 +295,7 @@ export default function FormTaskTaNew() {
         setPublishedFor([]);
       } else {
         // Select all checkboxes
-        setPublishedFor(
-          options
-            .filter((opt: any) => opt.id !== "all")
-            .map((opt: any) => opt.id)
-        );
+        setPublishedFor(options.filter((opt: any) => opt.id !== "all").map((opt: any) => opt.id));
       }
     } else {
       const updatedPublishedFor = publishedFor.includes(id)
@@ -485,11 +474,7 @@ export default function FormTaskTaNew() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -522,20 +507,10 @@ export default function FormTaskTaNew() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task-ta");
     }
   }
@@ -601,10 +576,7 @@ export default function FormTaskTaNew() {
   };
 
   const fileList = files.map((file) => (
-    <div
-      key={file.name}
-      className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
-    >
+    <div key={file.name} className=" flex justify-between border px-3.5 py-3 my-6 rounded-md">
       <div className="flex gap-3 items-center">
         <div className="file-preview">{renderFilePreview(file)}</div>
         <div>
@@ -668,9 +640,7 @@ export default function FormTaskTaNew() {
                       )}
                     />
                     {errors.title?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.title.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.title.message}</p>
                     )}
                   </div>
 
@@ -704,10 +674,7 @@ export default function FormTaskTaNew() {
                         </SelectTrigger>
                         <SelectContent>
                           {categories.map((category) => (
-                            <SelectItem
-                              key={category.id}
-                              value={category.id.toString()}
-                            >
+                            <SelectItem key={category.id} value={category.id.toString()}>
                               {category.name}
                             </SelectItem>
                           ))}
@@ -724,22 +691,15 @@ export default function FormTaskTaNew() {
                       render={({ field: { onChange, value } }) =>
                         isLoadingData ? (
                           <div className="flex justify-center items-center h-40">
-                            <p className="text-gray-500">
-                              Loading Proses Data...
-                            </p>
+                            <p className="text-gray-500">Loading Proses Data...</p>
                           </div>
                         ) : (
-                          <CustomEditor
-                            onChange={onChange}
-                            initialData={articleBody || value}
-                          />
+                          <CustomEditor onChange={onChange} initialData={articleBody || value} />
                         )
                       }
                     />
                     {errors.description?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.description.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.description.message}</p>
                     )}
                   </div>
                   <div className="space-y-2.5 mt-5">
@@ -797,9 +757,7 @@ export default function FormTaskTaNew() {
                             accept={{ "mp3/*": [], "wav/*": [] }}
                             maxSize={100}
                             label="Upload file dengan format .mp3 atau .wav."
-                            onDrop={(files) =>
-                              setAudioFiles((prev) => [...prev, ...files])
-                            }
+                            onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                             className="mt-2"
                           />
                         </div>
@@ -807,10 +765,7 @@ export default function FormTaskTaNew() {
 
                       {fileTypeId === "4" &&
                         audioFiles?.map((audio: any, idx: any) => (
-                          <div
-                            key={idx}
-                            className="flex flex-row justify-between items-center"
-                          >
+                          <div key={idx} className="flex flex-row justify-between items-center">
                             <p>{t("voice-note")}</p>
                             <Button
                               type="button"
@@ -823,9 +778,7 @@ export default function FormTaskTaNew() {
                           </div>
                         ))}
 
-                      {isRecording && (
-                        <p>Recording... {timer} seconds remaining</p>
-                      )}
+                      {isRecording && <p>Recording... {timer} seconds remaining</p>}
                     </div>
                   </div>
                 </div>
@@ -852,9 +805,7 @@ export default function FormTaskTaNew() {
                       )}
                     />
                     {errors.creatorName?.message && (
-                      <p className="text-red-400 text-sm">
-                        {errors.creatorName.message}
-                      </p>
+                      <p className="text-red-400 text-sm">{errors.creatorName.message}</p>
                     )}
                   </div>
                 </div>
@@ -895,13 +846,10 @@ export default function FormTaskTaNew() {
                           checked={
                             option.id === "all"
                               ? publishedFor.length ===
-                                options.filter((opt: any) => opt.id !== "all")
-                                  .length
+                                options.filter((opt: any) => opt.id !== "all").length
                               : publishedFor.includes(option.id)
                           }
-                          onCheckedChange={() =>
-                            handleCheckboxChange(option.id)
-                          }
+                          onCheckedChange={() => handleCheckboxChange(option.id)}
                         />
                         <Label htmlFor={option.id}>{option.label}</Label>
                       </div>
diff --git a/src/components/features/form/task/task-detail-form.tsx b/src/components/features/form/task/task-detail-form.tsx
index 7c3c4810..5859fc6a 100644
--- a/src/components/features/form/task/task-detail-form.tsx
+++ b/src/components/features/form/task/task-detail-form.tsx
@@ -1,25 +1,34 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import WavesurferPlayer from "@wavesurfer/react";
+import JoditEditor from "jodit-react";
+import {
+  ChevronDown,
+  ChevronUp,
+  Dock,
+  DotSquare,
+  ImageIcon,
+  Music,
+  Search,
+  TrashIcon,
+  VideoIcon,
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
+import WaveSurfer from "wavesurfer.js";
+import * as z from "zod";
+
+import { successCallback } from "@/config/swal";
 import {
   acceptAssignment,
   createAssignmentResponse,
@@ -34,6 +43,12 @@ import {
   getTask,
   getUserLevelForAssignments,
 } from "@/lib/services/task";
+import { close, error, loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -41,32 +56,20 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import {
-  ChevronDown,
-  ChevronUp,
-  Dock,
-  DotSquare,
-  ImageIcon,
-  Music,
-  Search,
-  TrashIcon,
-  VideoIcon,
-} from "lucide-react";
-import dynamic from "next/dynamic";
-import { Link } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/lib/utils/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { successCallback } from "@/config/swal";
-import FileUploader from "../shared/file-uploader";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import Image from "next/image";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import WavesurferPlayer from "@wavesurfer/react";
-import WaveSurfer from "wavesurfer.js";
+import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { useTranslations } from "next-intl";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+import FileUploader from "../shared/file-uploader";
 
 const taskSchema = z.object({
   uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -230,9 +233,7 @@ export default function FormTaskDetail() {
   const [listData, setListData] = useState([]);
   const [message, setMessage] = useState<string>("");
   const [sentAcceptance, setSentAcceptance] = useState<AcceptanceData[]>([]);
-  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>(
-    []
-  );
+  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>([]);
 
   const [totalPage, setTotalPage] = React.useState(1);
   const [dataTable, setDataTable] = React.useState<any[]>([]);
@@ -259,27 +260,19 @@ export default function FormTaskDetail() {
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer>();
   const [isPlaying, setIsPlaying] = useState(false);
 
-  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedImage, setSelectedImage] = useState<string | null>(
     imageUploadedFiles?.[0]?.url || null
   );
-  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedVideo, setSelectedVideo] = useState<string | null>(
     videoUploadedFiles?.[0]?.url || null
   );
-  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedText, setSelectedText] = useState<string | null>(
     textUploadedFiles?.[0]?.url || null
   );
-  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>([]);
   const [selectedAudio, setSelectedAudio] = useState<string | null>(
     audioUploadedFiles?.[0]?.url || null
   );
@@ -314,13 +307,10 @@ export default function FormTaskDetail() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -370,32 +360,20 @@ export default function FormTaskDetail() {
 
         if (details?.urls) {
           // Extract attachmentUrl from each object in urls
-          const urls = details.urls.map(
-            (urlObj: any) => urlObj.attachmentUrl || ""
-          );
+          const urls = details.urls.map((urlObj: any) => urlObj.attachmentUrl || "");
           setUrlInputs(urls); // Save the URLs to state
         }
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
-          );
+          const levels = new Set(details.assignedToLevel.split(",").map(Number));
           setCheckedLevels(levels);
         }
 
         const attachment = details?.files;
-        setImageUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 1)
-        );
-        setVideoUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 2)
-        );
-        setTextUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 3)
-        );
-        setAudioUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 4)
-        );
+        setImageUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 1));
+        setVideoUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 2));
+        setTextUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 3));
+        setAudioUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 4));
       }
     }
     initState();
@@ -403,9 +381,7 @@ export default function FormTaskDetail() {
   }, [id, refresh]);
 
   const handleUrlChange = (index: number, newUrl: string) => {
-    setUrlInputs((prev: any) =>
-      prev.map((url: any, idx: any) => (idx === index ? newUrl : url))
-    );
+    setUrlInputs((prev: any) => prev.map((url: any, idx: any) => (idx === index ? newUrl : url)));
   };
 
   useEffect(() => {
@@ -429,9 +405,7 @@ export default function FormTaskDetail() {
 
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
-      const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
-      );
+      const outputSet = new Set(detail.assignedToTopLevel.split(",").map(Number));
       setUnitSelection({
         allUnit: outputSet.has(0),
         mabes: outputSet.has(1),
@@ -632,10 +606,7 @@ export default function FormTaskDetail() {
     initState();
   }, [refreshAcceptance]);
 
-  const setFinishAcceptance = async (
-    id: number,
-    isFinish: boolean
-  ): Promise<void> => {
+  const setFinishAcceptance = async (id: number, isFinish: boolean): Promise<void> => {
     if (!isFinish) {
       loading();
 
@@ -662,19 +633,13 @@ export default function FormTaskDetail() {
             </tr>
           </thead>
           <tbody>
-            {(type === "terkirim" ? sentAcceptance : acceptAcceptance).map(
-              (item) => (
-                <tr key={item.id} className="border-b">
-                  <td className="px-4 py-2">
-                    {new Date(item.sentAt).toLocaleString()}
-                  </td>
-                  <td className="px-4 py-2">{item.userLevels.name}</td>
-                  <td className="px-4 py-2">
-                    {type === "terkirim" ? "Terkirim" : "Diterima"}
-                  </td>
-                </tr>
-              )
-            )}
+            {(type === "terkirim" ? sentAcceptance : acceptAcceptance).map((item) => (
+              <tr key={item.id} className="border-b">
+                <td className="px-4 py-2">{new Date(item.sentAt).toLocaleString()}</td>
+                <td className="px-4 py-2">{item.userLevels.name}</td>
+                <td className="px-4 py-2">{type === "terkirim" ? "Terkirim" : "Diterima"}</td>
+              </tr>
+            ))}
           </tbody>
         </table>
       )}
@@ -830,10 +795,7 @@ export default function FormTaskDetail() {
               <div>
                 <Dialog>
                   <DialogTrigger asChild>
-                    <Button
-                      color="primary"
-                      onClick={() => setModalType("terkirim")}
-                    >
+                    <Button color="primary" onClick={() => setModalType("terkirim")}>
                       {sentAcceptance?.length} {t("sent")}
                     </Button>
                   </DialogTrigger>
@@ -850,9 +812,7 @@ export default function FormTaskDetail() {
 
                   <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
                     <DialogHeader>
-                      <DialogTitle>
-                        {t("assignment-status-details")}
-                      </DialogTitle>
+                      <DialogTitle>{t("assignment-status-details")}</DialogTitle>
                     </DialogHeader>
 
                     {modalType === "terkirim" && getModalContent("terkirim")}
@@ -904,10 +864,7 @@ export default function FormTaskDetail() {
               <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
                 <div className="mt-6 space-y-2">
                   <Label>{t("assignment-selection")}</Label>
-                  <Select
-                    onValueChange={setSelectedTarget}
-                    value={detail.assignedToRole}
-                  >
+                  <Select onValueChange={setSelectedTarget} value={detail.assignedToRole}>
                     <SelectTrigger size="md">
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
@@ -924,16 +881,12 @@ export default function FormTaskDetail() {
                       <Checkbox
                         id={key}
                         disabled
-                        checked={
-                          unitSelection[key as keyof typeof unitSelection]
-                        }
+                        checked={unitSelection[key as keyof typeof unitSelection]}
                         onCheckedChange={(value) =>
                           setUnitSelection({ ...unitSelection, [key]: value })
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -946,9 +899,7 @@ export default function FormTaskDetail() {
                     </DialogTrigger>
                     <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
                       <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
+                        <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                       </DialogHeader>
                       <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
                         {listDest.map((polda: any) => (
@@ -957,9 +908,7 @@ export default function FormTaskDetail() {
                               <Checkbox
                                 disabled
                                 checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChange(polda.id)
-                                }
+                                onCheckedChange={() => handleCheckboxChange(polda.id)}
                                 className="mr-3"
                               />
                               {polda.name}
@@ -979,23 +928,18 @@ export default function FormTaskDetail() {
                                 <Label className="block">
                                   <Checkbox
                                     disabled
-                                    checked={polda?.subDestination?.every(
-                                      (polres: any) =>
-                                        checkedLevels.has(polres.id)
+                                    checked={polda?.subDestination?.every((polres: any) =>
+                                      checkedLevels.has(polres.id)
                                     )}
                                     onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
+                                      const updatedLevels = new Set(checkedLevels);
+                                      polda?.subDestination?.forEach((polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
                                         }
-                                      );
+                                      });
                                       setCheckedLevels(updatedLevels);
                                     }}
                                     className="mr-2"
@@ -1007,9 +951,7 @@ export default function FormTaskDetail() {
                                     <Checkbox
                                       disabled
                                       checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChange(polres.id)
-                                      }
+                                      onCheckedChange={() => handleCheckboxChange(polres.id)}
                                       className="mr-2"
                                     />
                                     {polres.name}
@@ -1083,13 +1025,9 @@ export default function FormTaskDetail() {
                         id={key}
                         disabled
                         checked={taskOutput[key as keyof typeof taskOutput]}
-                        onCheckedChange={(value) =>
-                          setTaskOutput({ ...taskOutput, [key]: value })
-                        }
+                        onCheckedChange={(value) => setTaskOutput({ ...taskOutput, [key]: value })}
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -1114,9 +1052,7 @@ export default function FormTaskDetail() {
                 <Label htmlFor="attachment">{t("attachment")}</Label>
                 <div className="space-y-3">
                   <div>
-                    {videoUploadedFiles?.length > 0 && (
-                      <Label>{t("audio-visual")}</Label>
-                    )}
+                    {videoUploadedFiles?.length > 0 && <Label>{t("audio-visual")}</Label>}
                     <div>
                       {selectedVideo && (
                         <Card className="mt-2">
@@ -1142,9 +1078,7 @@ export default function FormTaskDetail() {
                               <VideoIcon />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1162,9 +1096,7 @@ export default function FormTaskDetail() {
                     </div>
                   </div>
                   <div>
-                    {imageUploadedFiles?.length > 0 && (
-                      <Label>{t("image")}</Label>
-                    )}
+                    {imageUploadedFiles?.length > 0 && <Label>{t("image")}</Label>}
                     <div>
                       {selectedImage && (
                         <Card className="mt-2">
@@ -1189,9 +1121,7 @@ export default function FormTaskDetail() {
                               <ImageIcon />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1210,9 +1140,7 @@ export default function FormTaskDetail() {
                     </div>
                   </div>
                   <div>
-                    {textUploadedFiles?.length > 0 && (
-                      <Label>{t("text")}</Label>
-                    )}
+                    {textUploadedFiles?.length > 0 && <Label>{t("text")}</Label>}
                     <div>
                       {selectedText && (
                         <Card className="mt-2">
@@ -1239,9 +1167,7 @@ export default function FormTaskDetail() {
                               <Dock />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1259,9 +1185,7 @@ export default function FormTaskDetail() {
                     </div>
                   </div>
                   <div>
-                    {audioUploadedFiles?.length > 0 && (
-                      <Label>{t("audio")}</Label>
-                    )}
+                    {audioUploadedFiles?.length > 0 && <Label>{t("audio")}</Label>}
                     <div>
                       {selectedAudio && (
                         <Card className="mt-2">
@@ -1281,18 +1205,12 @@ export default function FormTaskDetail() {
                             onClick={onPlayPause}
                             disabled={isPlaying}
                             className={`flex items-center gap-2 ${
-                              isPlaying
-                                ? "bg-gray-300 cursor-not-allowed"
-                                : "bg-primary text-white"
+                              isPlaying ? "bg-gray-300 cursor-not-allowed" : "bg-primary text-white"
                             } p-2 rounded`}
                           >
                             {isPlaying ? "Pause" : "Play"}
                             <Icon
-                              icon={
-                                isPlaying
-                                  ? "carbon:pause-outline"
-                                  : "famicons:play-sharp"
-                              }
+                              icon={isPlaying ? "carbon:pause-outline" : "famicons:play-sharp"}
                               className="h-5 w-5"
                             />
                           </Button>
@@ -1312,9 +1230,7 @@ export default function FormTaskDetail() {
                               <Music />
                             </div>
                             <div>
-                              <div className="text-sm text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className="text-sm text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1361,10 +1277,7 @@ export default function FormTaskDetail() {
                   <div className="mt-4">
                     <Label>Link Url</Label>
                     {urlInputs.map((url: any, index: any) => (
-                      <div
-                        key={url.id}
-                        className="flex items-center gap-2 mt-2"
-                      >
+                      <div key={url.id} className="flex items-center gap-2 mt-2">
                         <input
                           type="url"
                           className="border rounded p-2 w-full"
@@ -1383,8 +1296,7 @@ export default function FormTaskDetail() {
             <div className="flex flex-wrap lg:flex-row  justify-between gap-3 my-3">
               <div className="lg:px-1">
                 {detail?.isDone !== true &&
-                (Number(userLevelNumber) !== 3 ||
-                  Number(userLevelNumber) == 2) ? (
+                (Number(userLevelNumber) !== 3 || Number(userLevelNumber) == 2) ? (
                   <Button
                     color="primary"
                     variant={"outline"}
@@ -1476,9 +1388,7 @@ export default function FormTaskDetail() {
                     </DialogTrigger>
                     <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
                       <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
+                        <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                       </DialogHeader>
                       <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
                         {listDest.map((polda: any) => (
@@ -1486,9 +1396,7 @@ export default function FormTaskDetail() {
                             <Label className="flex items-center">
                               <Checkbox
                                 // checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChangeFilter(polda.id)
-                                }
+                                onCheckedChange={() => handleCheckboxChangeFilter(polda.id)}
                                 className="mr-3"
                               />
                               {polda.name}
@@ -1512,18 +1420,14 @@ export default function FormTaskDetail() {
                                     //     checkedLevels.has(polres.id)
                                     // )}
                                     onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
+                                      const updatedLevels = new Set(checkedLevels);
+                                      polda?.subDestination?.forEach((polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
                                         }
-                                      );
+                                      });
                                       setCheckedLevels(updatedLevels);
                                     }}
                                     className="mr-2"
@@ -1534,9 +1438,7 @@ export default function FormTaskDetail() {
                                   <Label key={polres.id} className="block mt-1">
                                     <Checkbox
                                       // checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChangeFilter(polres.id)
-                                      }
+                                      onCheckedChange={() => handleCheckboxChangeFilter(polres.id)}
                                       className="mr-2"
                                     />
                                     {polres.name}
@@ -1570,10 +1472,10 @@ export default function FormTaskDetail() {
                                 Number(item?.fileType?.id) == 1
                                   ? `/contributor/content/image/detail/${item?.id}`
                                   : Number(item?.fileType?.id) == 2
-                                  ? `/contributor/content/video/detail/${item?.id}`
-                                  : Number(item?.fileType?.id) == 3
-                                  ? `/contributor/content/teks/detail/${item?.id}`
-                                  : `/contributor/content/audio/detail/${item?.id}`
+                                    ? `/contributor/content/video/detail/${item?.id}`
+                                    : Number(item?.fileType?.id) == 3
+                                      ? `/contributor/content/teks/detail/${item?.id}`
+                                      : `/contributor/content/audio/detail/${item?.id}`
                               }
                             >
                               {item.title}
@@ -1581,9 +1483,7 @@ export default function FormTaskDetail() {
                           </td>
                           <td className="px-4 py-2">{item.fileType.name}</td>
                           <td className="px-4 py-2">{item.category.name}</td>
-                          <td className="px-4 py-2">
-                            {item.creatorGroupLevelName}
-                          </td>
+                          <td className="px-4 py-2">{item.creatorGroupLevelName}</td>
                           <td className="px-4 py-2">{item.creatorName}</td>
                         </tr>
                       ))}
@@ -1601,11 +1501,7 @@ export default function FormTaskDetail() {
                     onChange={handleInputChange}
                   />
                   <div className="flex justify-end mt-3">
-                    <Button
-                      color="primary"
-                      onClick={() => postData()}
-                      type="button"
-                    >
+                    <Button color="primary" onClick={() => postData()} type="button">
                       Kirim Tanggapan
                     </Button>
                   </div>
@@ -1667,10 +1563,7 @@ export default function FormTaskDetail() {
                       {item.children?.length > 0 && (
                         <div className="ml-10 mt-2 flex flex-col">
                           {item.children.map((child: any) => (
-                            <div
-                              key={child.id}
-                              className="flex flex-col gap-3 mt-2"
-                            >
+                            <div key={child.id} className="flex flex-col gap-3 mt-2">
                               <div className="flex flex-row gap-3">
                                 <Avatar className="mt-2">
                                   <AvatarImage
@@ -1687,9 +1580,7 @@ export default function FormTaskDetail() {
                                       {formatDate(child.createdAt)}
                                     </span>
                                   </div>
-                                  <p className="text-gray-800 mt-1">
-                                    {child.message}
-                                  </p>
+                                  <p className="text-gray-800 mt-1">{child.message}</p>
                                   <div className="flex flex-row gap-2">
                                     <div
                                       className="flex items-center mt-1 text-blue-500 cursor-pointer"
@@ -1726,10 +1617,7 @@ export default function FormTaskDetail() {
                               {child.children?.length > 0 && (
                                 <div className="ml-10 mt-2 flex flex-col mb-3">
                                   {child.children.map((child2: any) => (
-                                    <div
-                                      key={child2.id}
-                                      className="flex flex-col gap-3 mt-2"
-                                    >
+                                    <div key={child2.id} className="flex flex-col gap-3 mt-2">
                                       <div className="flex flex-row gap-3 ">
                                         <Avatar className="mt-2">
                                           <AvatarImage
@@ -1746,20 +1634,14 @@ export default function FormTaskDetail() {
                                               {formatDate(child2.createdAt)}
                                             </span>
                                           </div>
-                                          <p className="text-gray-800 mt-1">
-                                            {child2.message}
-                                          </p>
+                                          <p className="text-gray-800 mt-1">{child2.message}</p>
                                           <div className="flex flex-row gap-2">
                                             <div
                                               className="flex items-center mt-1 text-red-500 cursor-pointer"
-                                              onClick={() =>
-                                                deleteData(child2.id)
-                                              }
+                                              onClick={() => deleteData(child2.id)}
                                             >
                                               <TrashIcon className="w-4 h-4" />
-                                              <span className="ml-1">
-                                                Delete
-                                              </span>
+                                              <span className="ml-1">Delete</span>
                                             </div>
                                           </div>
                                         </div>
@@ -1778,8 +1660,7 @@ export default function FormTaskDetail() {
               </>
             )}
             <div className="flex lg:justify-center mt-4">
-              {detail?.createdBy?.id == Number(userId) &&
-              detail?.isDone !== true ? (
+              {detail?.createdBy?.id == Number(userId) && detail?.isDone !== true ? (
                 <>
                   <Button
                     type="button"
diff --git a/src/components/features/form/task/task-edit-form.tsx b/src/components/features/form/task/task-edit-form.tsx
index 046fe4a3..53182881 100644
--- a/src/components/features/form/task/task-edit-form.tsx
+++ b/src/components/features/form/task/task-edit-form.tsx
@@ -1,30 +1,28 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import Image from "next/image";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import WavesurferPlayer from "@wavesurfer/react";
+import JoditEditor from "jodit-react";
+import { ChevronDown, ChevronUp, Dock, ImageIcon, Music, VideoIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { getCsrfToken } from "@/lib/services/auth";
+import { createTask, getTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { error, loading } from "@/lib/utils/swal";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import {
-  createTask,
-  getTask,
-  getUserLevelForAssignments,
-} from "@/lib/services/task";
 import {
   Dialog,
   DialogContent,
@@ -32,24 +30,18 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
-  ChevronDown,
-  ChevronUp,
-  Dock,
-  ImageIcon,
-  Music,
-  VideoIcon,
-} from "lucide-react";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
 import FileUploader from "../shared/file-uploader";
-import { AudioRecorder } from "react-audio-voice-recorder";
-import Image from "next/image";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import WavesurferPlayer from "@wavesurfer/react";
-import { getCsrfToken } from "@/lib/services/auth";
-import { Upload } from "tus-js-client";
-import { error, loading } from "@/lib/utils/swal";
-import dynamic from "next/dynamic";
-import { useTranslations } from "next-intl";
 
 const taskSchema = z.object({
   // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -145,18 +137,10 @@ export default function FormTaskEdit() {
   const [isRecording, setIsRecording] = useState(false);
   const [timer, setTimer] = useState<number>(120);
 
-  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
-  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>(
-    []
-  );
+  const [imageUploadedFiles, setImageUploadedFiles] = useState<FileUploaded[]>([]);
+  const [videoUploadedFiles, setVideoUploadedFiles] = useState<FileUploaded[]>([]);
+  const [textUploadedFiles, setTextUploadedFiles] = useState<FileUploaded[]>([]);
+  const [audioUploadedFiles, setAudioUploadedFiles] = useState<FileUploaded[]>([]);
 
   const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
   const [unitSelection, setUnitSelection] = useState({
@@ -190,13 +174,10 @@ export default function FormTaskEdit() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -222,25 +203,15 @@ export default function FormTaskEdit() {
         }
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
-          );
+          const levels = new Set(details.assignedToLevel.split(",").map(Number));
           setCheckedLevels(levels);
         }
 
         const attachment = details?.files;
-        setImageUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 1)
-        );
-        setVideoUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 2)
-        );
-        setTextUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 3)
-        );
-        setAudioUploadedFiles(
-          attachment?.filter((file: any) => file.fileTypeId == 4)
-        );
+        setImageUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 1));
+        setVideoUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 2));
+        setTextUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 3));
+        setAudioUploadedFiles(attachment?.filter((file: any) => file.fileTypeId == 4));
 
         // Add more state setting here based on other fields like broadcastType, taskOutput, etc.
       }
@@ -249,9 +220,7 @@ export default function FormTaskEdit() {
   }, [id, refresh]);
 
   const handleUrlChange = (index: number, newUrl: string) => {
-    setUrlInputs((prev: any) =>
-      prev.map((url: any, idx: any) => (idx === index ? newUrl : url))
-    );
+    setUrlInputs((prev: any) => prev.map((url: any, idx: any) => (idx === index ? newUrl : url)));
   };
 
   useEffect(() => {
@@ -275,9 +244,7 @@ export default function FormTaskEdit() {
 
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
-      const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
-      );
+      const outputSet = new Set(detail.assignedToTopLevel.split(",").map(Number));
       setUnitSelection({
         allUnit: outputSet.has(0),
         mabes: outputSet.has(1),
@@ -304,10 +271,7 @@ export default function FormTaskEdit() {
     return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
   };
 
-  const handleUnitChange = (
-    key: keyof typeof unitSelection,
-    value: boolean
-  ) => {
+  const handleUnitChange = (key: keyof typeof unitSelection, value: boolean) => {
     if (key === "allUnit") {
       const newState = {
         allUnit: value,
@@ -333,10 +297,7 @@ export default function FormTaskEdit() {
     }
   };
 
-  const handleTaskOutputChange = (
-    key: keyof typeof taskOutput,
-    value: boolean
-  ) => {
+  const handleTaskOutputChange = (key: keyof typeof taskOutput, value: boolean) => {
     if (key === "all") {
       const newState = {
         all: value,
@@ -580,11 +541,7 @@ export default function FormTaskEdit() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -617,20 +574,10 @@ export default function FormTaskEdit() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task");
     }
   }
@@ -713,10 +660,7 @@ export default function FormTaskEdit() {
               <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
                 <div className="mt-5  space-y-2">
                   <Label>{t("assignment-selection")}</Label>
-                  <Select
-                    onValueChange={setSelectedTarget}
-                    value={detail.assignedToRole}
-                  >
+                  <Select onValueChange={setSelectedTarget} value={detail.assignedToRole}>
                     <SelectTrigger size="md">
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
@@ -732,19 +676,12 @@ export default function FormTaskEdit() {
                     <div className="flex items-center gap-2" key={key}>
                       <Checkbox
                         id={key}
-                        checked={
-                          unitSelection[key as keyof typeof unitSelection]
-                        }
+                        checked={unitSelection[key as keyof typeof unitSelection]}
                         onCheckedChange={(value) =>
-                          handleUnitChange(
-                            key as keyof typeof unitSelection,
-                            value as boolean
-                          )
+                          handleUnitChange(key as keyof typeof unitSelection, value as boolean)
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -757,9 +694,7 @@ export default function FormTaskEdit() {
                     </DialogTrigger>
                     <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
                       <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
+                        <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                       </DialogHeader>
                       <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
                         {listDest.map((polda: any) => (
@@ -767,9 +702,7 @@ export default function FormTaskEdit() {
                             <Label className="flex items-center">
                               <Checkbox
                                 checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChange(polda.id)
-                                }
+                                onCheckedChange={() => handleCheckboxChange(polda.id)}
                                 className="mr-3"
                               />
                               {polda.name}
@@ -788,23 +721,18 @@ export default function FormTaskEdit() {
                               <div className="ml-6 mt-2">
                                 <Label className="block">
                                   <Checkbox
-                                    checked={polda?.subDestination?.every(
-                                      (polres: any) =>
-                                        checkedLevels.has(polres.id)
+                                    checked={polda?.subDestination?.every((polres: any) =>
+                                      checkedLevels.has(polres.id)
                                     )}
                                     onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
+                                      const updatedLevels = new Set(checkedLevels);
+                                      polda?.subDestination?.forEach((polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
                                         }
-                                      );
+                                      });
                                       setCheckedLevels(updatedLevels);
                                     }}
                                     className="mr-2"
@@ -815,9 +743,7 @@ export default function FormTaskEdit() {
                                   <Label key={polres.id} className="block mt-1">
                                     <Checkbox
                                       checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChange(polres.id)
-                                      }
+                                      onCheckedChange={() => handleCheckboxChange(polres.id)}
                                       className="mr-2"
                                     />
                                     {polres.name}
@@ -891,15 +817,10 @@ export default function FormTaskEdit() {
                         id={key}
                         checked={taskOutput[key as keyof typeof taskOutput]}
                         onCheckedChange={(value) =>
-                          handleTaskOutputChange(
-                            key as keyof typeof taskOutput,
-                            value as boolean
-                          )
+                          handleTaskOutputChange(key as keyof typeof taskOutput, value as boolean)
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -910,16 +831,11 @@ export default function FormTaskEdit() {
                   control={control}
                   name="naration"
                   render={({ field: { onChange, value } }) => (
-                    <CustomEditor
-                      onChange={onChange}
-                      initialData={detail?.narration || value}
-                    />
+                    <CustomEditor onChange={onChange} initialData={detail?.narration || value} />
                   )}
                 />
                 {errors.naration?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.naration.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.naration.message}</p>
                 )}
               </div>
               <div className="space-y-2.5 mt-5">
@@ -947,9 +863,7 @@ export default function FormTaskEdit() {
                               <VideoIcon />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -987,9 +901,7 @@ export default function FormTaskEdit() {
                               <ImageIcon />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1027,9 +939,7 @@ export default function FormTaskEdit() {
                               <Dock />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1064,9 +974,7 @@ export default function FormTaskEdit() {
                       }}
                       maxSize={100}
                       label="Upload file dengan format .mp3 atau .wav."
-                      onDrop={(files) =>
-                        setAudioFiles((prev) => [...prev, ...files])
-                      }
+                      onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                       className="mt-2"
                     />
                     {audioUploadedFiles?.map((file: any, index: number) => (
@@ -1080,9 +988,7 @@ export default function FormTaskEdit() {
                               <Music />
                             </div>
                             <div>
-                              <div className=" text-sm  text-card-foreground">
-                                {file.fileName}
-                              </div>
+                              <div className=" text-sm  text-card-foreground">{file.fileName}</div>
                             </div>
                           </div>
 
@@ -1117,17 +1023,12 @@ export default function FormTaskEdit() {
                   <div className="mt-4 space-y-2">
                     <h2 className="text-lg font-bold">{t("news-links")}</h2>
                     {urlInputs.map((url: any, index: any) => (
-                      <div
-                        key={url.id}
-                        className="flex items-center gap-2 mt-2"
-                      >
+                      <div key={url.id} className="flex items-center gap-2 mt-2">
                         <input
                           type="url"
                           className="border rounded p-2 w-full"
                           defaultValue={url.attachmentUrl}
-                          onChange={(e) =>
-                            handleLinkChange(index, e.target.value)
-                          }
+                          onChange={(e) => handleLinkChange(index, e.target.value)}
                           placeholder={`Masukkan link berita ${index + 1}`}
                         />
                       </div>
diff --git a/src/components/features/form/task/task-form.tsx b/src/components/features/form/task/task-form.tsx
index a037f131..aaf83bce 100644
--- a/src/components/features/form/task/task-form.tsx
+++ b/src/components/features/form/task/task-form.tsx
@@ -1,30 +1,26 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { AudioRecorder } from "react-audio-voice-recorder";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { Upload } from "tus-js-client";
+import * as z from "zod";
+
+import { error } from "@/config/swal";
+import { getCsrfToken } from "@/lib/services/auth";
+import { createTask, getTask, getUserLevelForAssignments } from "@/lib/services/task";
+import { loading } from "@/lib/utils/swal";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
-import {
-  createTask,
-  getTask,
-  getUserLevelForAssignments,
-} from "@/lib/services/task";
 import {
   Dialog,
   DialogContent,
@@ -32,15 +28,17 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
-import { AudioRecorder } from "react-audio-voice-recorder";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import FileUploader from "@/components/features/form/shared/file-uploader";
-import { Upload } from "tus-js-client";
-import { error } from "@/config/swal";
-import { getCsrfToken } from "@/lib/services/auth";
-import { loading } from "@/lib/utils/swal";
-import { useTranslations } from "next-intl";
-import dynamic from "next/dynamic";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -161,13 +159,10 @@ export default function FormTask() {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
         console.log("polda", response?.data?.data?.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -196,10 +191,7 @@ export default function FormTask() {
     return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
   };
 
-  const handleUnitChange = (
-    key: keyof typeof unitSelection,
-    value: boolean
-  ) => {
+  const handleUnitChange = (key: keyof typeof unitSelection, value: boolean) => {
     if (key === "allUnit") {
       const newState = {
         allUnit: value,
@@ -225,10 +217,7 @@ export default function FormTask() {
     }
   };
 
-  const handleTaskOutputChange = (
-    key: keyof typeof taskOutput,
-    value: boolean
-  ) => {
+  const handleTaskOutputChange = (key: keyof typeof taskOutput, value: boolean) => {
     if (key === "all") {
       const newState = {
         all: value,
@@ -459,11 +448,7 @@ export default function FormTask() {
         console.log("Error upload :", e);
         error(e);
       },
-      onChunkComplete: (
-        chunkSize: any,
-        bytesAccepted: any,
-        bytesTotal: any
-      ) => {
+      onChunkComplete: (chunkSize: any, bytesAccepted: any, bytesTotal: any) => {
         // const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
         // progressInfo[idx].percentage = uploadPersen;
         // counterUpdateProgress++;
@@ -496,20 +481,10 @@ export default function FormTask() {
 
   useEffect(() => {
     successTodo();
-  }, [
-    isImageUploadFinish,
-    isVideoUploadFinish,
-    isAudioUploadFinish,
-    isTextUploadFinish,
-  ]);
+  }, [isImageUploadFinish, isVideoUploadFinish, isAudioUploadFinish, isTextUploadFinish]);
 
   function successTodo() {
-    if (
-      isImageUploadFinish &&
-      isVideoUploadFinish &&
-      isAudioUploadFinish &&
-      isTextUploadFinish
-    ) {
+    if (isImageUploadFinish && isVideoUploadFinish && isAudioUploadFinish && isTextUploadFinish) {
       successSubmit("/in/contributor/task");
     }
   }
@@ -590,15 +565,10 @@ export default function FormTask() {
                       id={key}
                       checked={unitSelection[key as keyof typeof unitSelection]}
                       onCheckedChange={(value) =>
-                        handleUnitChange(
-                          key as keyof typeof unitSelection,
-                          value as boolean
-                        )
+                        handleUnitChange(key as keyof typeof unitSelection, value as boolean)
                       }
                     />
-                    <Label htmlFor={key}>
-                      {key.charAt(0).toUpperCase() + key.slice(1)}
-                    </Label>
+                    <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                   </div>
                 ))}
               </div>
@@ -619,9 +589,7 @@ export default function FormTask() {
                           <Label className="flex items-center">
                             <Checkbox
                               checked={checkedLevels.has(polda.id)}
-                              onCheckedChange={() =>
-                                handleCheckboxChange(polda.id)
-                              }
+                              onCheckedChange={() => handleCheckboxChange(polda.id)}
                               className="mr-3"
                             />
                             {polda.name}
@@ -640,23 +608,18 @@ export default function FormTask() {
                             <div className="ml-6 mt-2">
                               <Label className="block">
                                 <Checkbox
-                                  checked={polda?.subDestination?.every(
-                                    (polres: any) =>
-                                      checkedLevels.has(polres.id)
+                                  checked={polda?.subDestination?.every((polres: any) =>
+                                    checkedLevels.has(polres.id)
                                   )}
                                   onCheckedChange={(isChecked) => {
-                                    const updatedLevels = new Set(
-                                      checkedLevels
-                                    );
-                                    polda?.subDestination?.forEach(
-                                      (polres: any) => {
-                                        if (isChecked) {
-                                          updatedLevels.add(polres.id);
-                                        } else {
-                                          updatedLevels.delete(polres.id);
-                                        }
+                                    const updatedLevels = new Set(checkedLevels);
+                                    polda?.subDestination?.forEach((polres: any) => {
+                                      if (isChecked) {
+                                        updatedLevels.add(polres.id);
+                                      } else {
+                                        updatedLevels.delete(polres.id);
                                       }
-                                    );
+                                    });
                                     setCheckedLevels(updatedLevels);
                                   }}
                                   className="mr-2"
@@ -667,9 +630,7 @@ export default function FormTask() {
                                 <Label key={polres.id} className="block mt-1">
                                   <Checkbox
                                     checked={checkedLevels.has(polres.id)}
-                                    onCheckedChange={() =>
-                                      handleCheckboxChange(polres.id)
-                                    }
+                                    onCheckedChange={() => handleCheckboxChange(polres.id)}
                                     className="mr-2"
                                   />
                                   {polres.name}
@@ -743,15 +704,10 @@ export default function FormTask() {
                       id={key}
                       checked={taskOutput[key as keyof typeof taskOutput]}
                       onCheckedChange={(value) =>
-                        handleTaskOutputChange(
-                          key as keyof typeof taskOutput,
-                          value as boolean
-                        )
+                        handleTaskOutputChange(key as keyof typeof taskOutput, value as boolean)
                       }
                     />
-                    <Label htmlFor={key}>
-                      {key.charAt(0).toUpperCase() + key.slice(1)}
-                    </Label>
+                    <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                   </div>
                 ))}
               </div>
@@ -787,9 +743,7 @@ export default function FormTask() {
                 )}
               />
               {errors.naration?.message && (
-                <p className="text-red-400 text-sm">
-                  {errors.naration.message}
-                </p>
+                <p className="text-red-400 text-sm">{errors.naration.message}</p>
               )}
             </div>
             <div className="space-y-2.5 mt-5">
@@ -847,17 +801,12 @@ export default function FormTask() {
                     }}
                     maxSize={100}
                     label="Upload file dengan format .mp3 atau .wav."
-                    onDrop={(files) =>
-                      setAudioFiles((prev) => [...prev, ...files])
-                    }
+                    onDrop={(files) => setAudioFiles((prev) => [...prev, ...files])}
                     className="mt-2"
                   />
                 </div>
                 {audioFiles?.map((audio: any, idx: any) => (
-                  <div
-                    key={idx}
-                    className="flex flex-row justify-between items-center"
-                  >
+                  <div key={idx} className="flex flex-row justify-between items-center">
                     <p>{t("voice-note")}</p>
                     <Button
                       type="button"
@@ -880,9 +829,7 @@ export default function FormTask() {
                         className="border rounded p-2 w-full"
                         placeholder={`Masukkan link berita ${index + 1}`}
                         value={link}
-                        onChange={(e) =>
-                          handleLinkChange(index, e.target.value)
-                        }
+                        onChange={(e) => handleLinkChange(index, e.target.value)}
                       />
                       {links.length > 1 && (
                         <button
diff --git a/src/components/features/form/task/task-forward-form.tsx b/src/components/features/form/task/task-forward-form.tsx
index e3fe2d28..6c3cf5ba 100644
--- a/src/components/features/form/task/task-forward-form.tsx
+++ b/src/components/features/form/task/task-forward-form.tsx
@@ -1,25 +1,17 @@
 "use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import dynamic from "next/dynamic";
+import { useParams, useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import JoditEditor from "jodit-react";
+import { ChevronDown, ChevronUp, DotSquare, TrashIcon } from "lucide-react";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams, useRouter } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Checkbox } from "@/components/ui/checkbox";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import JoditEditor from "jodit-react";
+import * as z from "zod";
+
 import {
   createAssignmentResponse,
   createTask,
@@ -32,6 +24,12 @@ import {
   getTask,
   getUserLevelForAssignments,
 } from "@/lib/services/task";
+import { close, error, loading } from "@/lib/utils/swal";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -39,13 +37,17 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { ChevronDown, ChevronUp, DotSquare, TrashIcon } from "lucide-react";
-import dynamic from "next/dynamic";
-import { Link } from "@/i18n/navigation";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/lib/utils/swal";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
 
 const taskSchema = z.object({
   // uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@@ -185,9 +187,7 @@ export default function FormTaskForward() {
   const [listData, setListData] = useState([]);
   const [message, setMessage] = useState<string>("");
   const [sentAcceptance, setSentAcceptance] = useState<AcceptanceData[]>([]);
-  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>(
-    []
-  );
+  const [acceptAcceptance, setAcceptAcceptance] = useState<AcceptanceData[]>([]);
   const [modalType, setModalType] = useState<"terkirim" | "diterima" | "">("");
   const [Isloading, setLoading] = useState<boolean>(false);
   const [refreshAcceptance, setRefreshAcceptance] = useState<boolean>(false);
@@ -226,13 +226,10 @@ export default function FormTaskForward() {
       try {
         const response = await getUserLevelForAssignments();
         setListDest(response?.data?.data.list);
-        const initialExpandedState = response?.data?.data.list.reduce(
-          (acc: any, polda: any) => {
-            acc[polda.id] = false;
-            return acc;
-          },
-          {}
-        );
+        const initialExpandedState = response?.data?.data.list.reduce((acc: any, polda: any) => {
+          acc[polda.id] = false;
+          return acc;
+        }, {});
         setExpandedPolda(initialExpandedState);
         console.log("polres", initialExpandedState);
       } catch (error) {
@@ -253,9 +250,7 @@ export default function FormTaskForward() {
         setDetail(details);
 
         if (details?.assignedToLevel) {
-          const levels = new Set(
-            details.assignedToLevel.split(",").map(Number)
-          );
+          const levels = new Set(details.assignedToLevel.split(",").map(Number));
           setCheckedLevels(levels);
         }
       }
@@ -284,9 +279,7 @@ export default function FormTaskForward() {
 
   useEffect(() => {
     if (detail?.assignedToTopLevel) {
-      const outputSet = new Set(
-        detail.assignedToTopLevel.split(",").map(Number)
-      );
+      const outputSet = new Set(detail.assignedToTopLevel.split(",").map(Number));
       setUnitSelection({
         allUnit: outputSet.has(0),
         mabes: outputSet.has(1),
@@ -534,10 +527,7 @@ export default function FormTaskForward() {
     initState();
   }, [refreshAcceptance]);
 
-  const setFinishAcceptance = async (
-    id: number,
-    isFinish: boolean
-  ): Promise<void> => {
+  const setFinishAcceptance = async (id: number, isFinish: boolean): Promise<void> => {
     if (!isFinish) {
       loading();
 
@@ -688,10 +678,7 @@ export default function FormTaskForward() {
               <div className="flex flex-row items-center">
                 <div className="mt-6">
                   <Label>Tujuan Pemilihan Tugas</Label>
-                  <Select
-                    onValueChange={setSelectedTarget}
-                    value={detail.assignedToRole}
-                  >
+                  <Select onValueChange={setSelectedTarget} value={detail.assignedToRole}>
                     <SelectTrigger size="md">
                       <SelectValue placeholder="Pilih" />
                     </SelectTrigger>
@@ -708,16 +695,12 @@ export default function FormTaskForward() {
                       <Checkbox
                         id={key}
                         disabled
-                        checked={
-                          unitSelection[key as keyof typeof unitSelection]
-                        }
+                        checked={unitSelection[key as keyof typeof unitSelection]}
                         onCheckedChange={(value) =>
                           setUnitSelection({ ...unitSelection, [key]: value })
                         }
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -730,9 +713,7 @@ export default function FormTaskForward() {
                     </DialogTrigger>
                     <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
                       <DialogHeader>
-                        <DialogTitle>
-                          Daftar Wilayah Polda dan Polres
-                        </DialogTitle>
+                        <DialogTitle>Daftar Wilayah Polda dan Polres</DialogTitle>
                       </DialogHeader>
                       <div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
                         {listDest.map((polda: any) => (
@@ -741,9 +722,7 @@ export default function FormTaskForward() {
                               <Checkbox
                                 disabled
                                 checked={checkedLevels.has(polda.id)}
-                                onCheckedChange={() =>
-                                  handleCheckboxChange(polda.id)
-                                }
+                                onCheckedChange={() => handleCheckboxChange(polda.id)}
                                 className="mr-3"
                               />
                               {polda.name}
@@ -763,23 +742,18 @@ export default function FormTaskForward() {
                                 <Label className="block">
                                   <Checkbox
                                     disabled
-                                    checked={polda?.subDestination?.every(
-                                      (polres: any) =>
-                                        checkedLevels.has(polres.id)
+                                    checked={polda?.subDestination?.every((polres: any) =>
+                                      checkedLevels.has(polres.id)
                                     )}
                                     onCheckedChange={(isChecked) => {
-                                      const updatedLevels = new Set(
-                                        checkedLevels
-                                      );
-                                      polda?.subDestination?.forEach(
-                                        (polres: any) => {
-                                          if (isChecked) {
-                                            updatedLevels.add(polres.id);
-                                          } else {
-                                            updatedLevels.delete(polres.id);
-                                          }
+                                      const updatedLevels = new Set(checkedLevels);
+                                      polda?.subDestination?.forEach((polres: any) => {
+                                        if (isChecked) {
+                                          updatedLevels.add(polres.id);
+                                        } else {
+                                          updatedLevels.delete(polres.id);
                                         }
-                                      );
+                                      });
                                       setCheckedLevels(updatedLevels);
                                     }}
                                     className="mr-2"
@@ -791,9 +765,7 @@ export default function FormTaskForward() {
                                     <Checkbox
                                       disabled
                                       checked={checkedLevels.has(polres.id)}
-                                      onCheckedChange={() =>
-                                        handleCheckboxChange(polres.id)
-                                      }
+                                      onCheckedChange={() => handleCheckboxChange(polres.id)}
                                       className="mr-2"
                                     />
                                     {polres.name}
@@ -867,13 +839,9 @@ export default function FormTaskForward() {
                         id={key}
                         disabled
                         checked={taskOutput[key as keyof typeof taskOutput]}
-                        onCheckedChange={(value) =>
-                          setTaskOutput({ ...taskOutput, [key]: value })
-                        }
+                        onCheckedChange={(value) => setTaskOutput({ ...taskOutput, [key]: value })}
                       />
-                      <Label htmlFor={key}>
-                        {key.charAt(0).toUpperCase() + key.slice(1)}
-                      </Label>
+                      <Label htmlFor={key}>{key.charAt(0).toUpperCase() + key.slice(1)}</Label>
                     </div>
                   ))}
                 </div>
@@ -909,9 +877,7 @@ export default function FormTaskForward() {
                   )}
                 />
                 {errors.naration?.message && (
-                  <p className="text-red-400 text-sm">
-                    {errors.naration.message}
-                  </p>
+                  <p className="text-red-400 text-sm">{errors.naration.message}</p>
                 )}
               </div>
             </div>
diff --git a/src/components/features/form/ticketing/info-lainnya.tsx b/src/components/features/form/ticketing/info-lainnya.tsx
index 9fcf5e79..8269eb7d 100644
--- a/src/components/features/form/ticketing/info-lainnya.tsx
+++ b/src/components/features/form/ticketing/info-lainnya.tsx
@@ -1,10 +1,6 @@
 // InfoLainnyaModal.tsx
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
 import { DetailTicket } from "./info-lainnya-types";
 
 interface InfoLainnyaModalProps {
@@ -13,11 +9,7 @@ interface InfoLainnyaModalProps {
   data: DetailTicket["emergencyIssue"];
 }
 
-export default function InfoLainnyaModal({
-  open,
-  onClose,
-  data,
-}: InfoLainnyaModalProps) {
+export default function InfoLainnyaModal({ open, onClose, data }: InfoLainnyaModalProps) {
   return (
     <Dialog open={open} onOpenChange={onClose}>
       <DialogContent size="md">
@@ -57,11 +49,7 @@ export default function InfoLainnyaModal({
             <>
               <div className="font-medium">Lampiran</div>
               <div>
-                <img
-                  src={data?.uploadFiles}
-                  alt="Lampiran"
-                  className="max-w-xs"
-                />
+                <img src={data?.uploadFiles} alt="Lampiran" className="max-w-xs" />
               </div>
             </>
           )}
diff --git a/src/components/features/form/ticketing/ticketing-detail-form.tsx b/src/components/features/form/ticketing/ticketing-detail-form.tsx
index db5dfb35..0071a063 100644
--- a/src/components/features/form/ticketing/ticketing-detail-form.tsx
+++ b/src/components/features/form/ticketing/ticketing-detail-form.tsx
@@ -1,24 +1,18 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { ArrowLeft, ChevronDownIcon } from "lucide-react";
+import { list, parse } from "postcss";
+import { Controller, useForm } from "react-hook-form";
+import { useMediaQuery } from "react-responsive";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import * as z from "zod";
+
 import {
   deleteTicket,
   getTicketingDetail,
@@ -29,22 +23,26 @@ import {
   saveTicketInternalReply,
   saveTicketReply,
 } from "@/lib/services/communication/communication";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { list, parse } from "postcss";
+import { getOperatorUser } from "@/lib/services/management-user/management-user";
 import { htmlToString } from "@/lib/utils/globals";
-import { Textarea } from "@/components/ui/textarea";
 import { error } from "@/lib/utils/swal";
-import { useRouter } from "next/navigation";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
 import InfoLainnyaModal from "./info-lainnya";
 import { DetailTicket } from "./info-lainnya-types";
-import { useMediaQuery } from "react-responsive";
-import { ArrowLeft, ChevronDownIcon } from "lucide-react";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { getOperatorUser } from "@/lib/services/management-user/management-user";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -117,9 +115,7 @@ export default function FormDetailTicketing() {
   });
   const [detail, setDetail] = useState<taskDetail>();
   const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
-  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(
-    null
-  );
+  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(null);
   const [detailTickets, setDetailTickets] = useState<DetailTicket | null>(null);
   const [replyVisible, setReplyVisible] = useState(false);
   const [replyMessage, setReplyMessage] = useState("");
@@ -128,9 +124,9 @@ export default function FormDetailTicketing() {
   const [openEmergencyModal, setOpenEmergencyModal] = useState(false);
   const [replyValue, setReplyValue] = useState<number>(0);
   const [replyText, setReplyText] = useState<string>("");
-  const [operatorOpt, setOperatorOpt] = useState<
-    { id: string; label: string; value: string }[]
-  >([]);
+  const [operatorOpt, setOperatorOpt] = useState<{ id: string; label: string; value: string }[]>(
+    []
+  );
   const [selectedOperator, setSelectedOperator] = useState<string[]>([]);
   const {
     control,
@@ -169,9 +165,7 @@ export default function FormDetailTicketing() {
         setOperatorOpt(optionArr);
 
         if (detailTickets?.assignedTeams) {
-          const assigned = detailTickets.assignedTeams
-            .split(":")
-            .filter((id: string) => id);
+          const assigned = detailTickets.assignedTeams.split(":").filter((id: string) => id);
           setSelectedOperator(assigned);
         }
       }
@@ -351,11 +345,7 @@ export default function FormDetailTicketing() {
                 placeholder="Tulis pesan di sini..."
               />
               <div className="flex justify-end gap-3 my-2">
-                <Button
-                  onClick={() => setReplyVisible(false)}
-                  color="default"
-                  variant="outline"
-                >
+                <Button onClick={() => setReplyVisible(false)} color="default" variant="outline">
                   Batal
                 </Button>
                 <Button onClick={handleSendReply} color="primary">
@@ -376,13 +366,8 @@ export default function FormDetailTicketing() {
                     <Icon icon="qlementine-icons:user-16" width={36} />
                     <div>
                       <p className="text-sm">
-                        <span className="font-bold">
-                          {list?.user?.fullname}
-                        </span>{" "}
-                        mengirimkan balasan{" "}
-                        <span className="font-bold">
-                          {list?.messageTo?.fullname}
-                        </span>
+                        <span className="font-bold">{list?.user?.fullname}</span> mengirimkan
+                        balasan <span className="font-bold">{list?.messageTo?.fullname}</span>
                       </p>
                       <p className="text-xs">
                         {new Date(list.createdAt).toLocaleString("id-ID", {
@@ -402,13 +387,8 @@ export default function FormDetailTicketing() {
                     </div>
                     <div>
                       <p className="text-sm">
-                        <span className="font-bold">
-                          {list?.user?.fullname}
-                        </span>{" "}
-                        mengirimkan balasan{" "}
-                        <span className="font-bold">
-                          {list?.messageTo?.fullname}
-                        </span>
+                        <span className="font-bold">{list?.user?.fullname}</span> mengirimkan
+                        balasan <span className="font-bold">{list?.messageTo?.fullname}</span>
                       </p>
                       <p className="text-xs">
                         {new Date(list.createdAt).toLocaleString("id-ID", {
@@ -436,34 +416,23 @@ export default function FormDetailTicketing() {
                         {ticketInternal?.commentFromUserName}
                       </span>{" "}
                       mengirimkan komentar untuk{" "}
-                      <span className="font-bold text-sm">
-                        {ticketInternal?.feedTitle}
-                      </span>
+                      <span className="font-bold text-sm">{ticketInternal?.feedTitle}</span>
                     </p>
                     <p className="text-xs">
                       {`${new Date(ticketInternal?.createdAt).getDate()}-${
                         new Date(ticketInternal?.createdAt).getMonth() + 1
-                      }-${new Date(
+                      }-${new Date(ticketInternal?.createdAt).getFullYear()} ${new Date(
                         ticketInternal?.createdAt
-                      ).getFullYear()} ${new Date(
-                        ticketInternal?.createdAt
-                      ).getHours()}:${new Date(
-                        ticketInternal?.createdAt
-                      ).getMinutes()}`}
+                      ).getHours()}:${new Date(ticketInternal?.createdAt).getMinutes()}`}
                     </p>
                   </div>
                 </div>
                 <div className="p-4 bg-white text-sm">
                   <p>{htmlToString(ticketInternal.message)}</p>
-                  {detailTickets?.typeId === 6 &&
-                  detailTickets?.emergencyIssue ? (
+                  {detailTickets?.typeId === 6 && detailTickets?.emergencyIssue ? (
                     <div className="row mx-0 mb-3 emergency-attachments">
                       <div className="mt-3 mr-4">
-                        <Button
-                          color="primary"
-                          size="md"
-                          onClick={openEmergencyIssueDetail}
-                        >
+                        <Button color="primary" size="md" onClick={openEmergencyIssueDetail}>
                           Info Lainnya
                         </Button>
                       </div>
@@ -508,10 +477,7 @@ export default function FormDetailTicketing() {
             </div>
             <div className="mt-5 px-3">
               <Label>Prioritas</Label>
-              <Select
-                onValueChange={setSelectedPriority}
-                value={detail?.priority?.name}
-              >
+              <Select onValueChange={setSelectedPriority} value={detail?.priority?.name}>
                 <SelectTrigger size="md">
                   <SelectValue placeholder="Pilih" />
                 </SelectTrigger>
@@ -524,10 +490,7 @@ export default function FormDetailTicketing() {
             </div>
             <div className="mt-5 px-3 mb-3">
               <Label>Status</Label>
-              <Select
-                onValueChange={setSelectedStatus}
-                value={detail?.status?.name}
-              >
+              <Select onValueChange={setSelectedStatus} value={detail?.status?.name}>
                 <SelectTrigger size="md">
                   <SelectValue placeholder="Pilih" />
                 </SelectTrigger>
@@ -544,9 +507,7 @@ export default function FormDetailTicketing() {
               {selectedOperator.length > 0 && (
                 <div className="flex flex-col gap-2 mb-2">
                   {selectedOperator.map((id) => {
-                    const label = operatorOpt.find(
-                      (op: any) => op.value === id
-                    )?.label;
+                    const label = operatorOpt.find((op: any) => op.value === id)?.label;
                     return (
                       <div
                         key={id}
@@ -556,9 +517,7 @@ export default function FormDetailTicketing() {
                         <button
                           type="button"
                           onClick={() =>
-                            setSelectedOperator((prev) =>
-                              prev.filter((val) => val !== id)
-                            )
+                            setSelectedOperator((prev) => prev.filter((val) => val !== id))
                           }
                           className="ml-2 text-gray-500 hover:text-red-600"
                         >
@@ -590,14 +549,9 @@ export default function FormDetailTicketing() {
                           checked={selectedOperator.includes(op.value)}
                           onChange={(e) => {
                             if (e.target.checked) {
-                              setSelectedOperator((prev) => [
-                                ...prev,
-                                op.value,
-                              ]);
+                              setSelectedOperator((prev) => [...prev, op.value]);
                             } else {
-                              setSelectedOperator((prev) =>
-                                prev.filter((val) => val !== op.value)
-                              );
+                              setSelectedOperator((prev) => prev.filter((val) => val !== op.value));
                             }
                           }}
                         />
diff --git a/src/components/features/form/ticketing/ticketing-update-form.tsx b/src/components/features/form/ticketing/ticketing-update-form.tsx
index 9ce27fc9..c8ee0431 100644
--- a/src/components/features/form/ticketing/ticketing-update-form.tsx
+++ b/src/components/features/form/ticketing/ticketing-update-form.tsx
@@ -1,24 +1,18 @@
 "use client";
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { useForm, Controller } from "react-hook-form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Card } from "@/components/ui/card";
+import { useParams, useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as z from "zod";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Description } from "@radix-ui/react-toast";
+import { ChevronDownIcon } from "lucide-react";
+import { list } from "postcss";
+import { Controller, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { useParams } from "next/navigation";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import * as z from "zod";
+
 import {
   deleteTicket,
   getTicketingDetail,
@@ -29,21 +23,25 @@ import {
   saveTicketInternalReply,
   saveTicketReply,
 } from "@/lib/services/communication/communication";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { list } from "postcss";
-import { htmlToString } from "@/lib/utils/globals";
-import { Textarea } from "@/components/ui/textarea";
-import { error } from "@/lib/utils/swal";
-import { useRouter } from "next/navigation";
 import { getOperatorUser } from "@/lib/services/management-user/management-user";
-import { DetailTicket } from "./info-lainnya-types";
+import { htmlToString } from "@/lib/utils/globals";
+import { error } from "@/lib/utils/swal";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ChevronDownIcon } from "lucide-react";
-import { Description } from "@radix-ui/react-toast";
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+
+import { DetailTicket } from "./info-lainnya-types";
 
 const taskSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),
@@ -112,15 +110,13 @@ export default function FormUpdateTicketing() {
 
   const [detail, setDetail] = useState<taskDetail>();
   const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
-  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(
-    null
-  );
+  const [ticketInternal, setTicketInternal] = useState<internalDetail | null>(null);
   const [detailTickets, setDetailTickets] = useState<DetailTicket | null>(null);
   const [replyValue, setReplyValue] = useState<number>(0);
   const [replyText, setReplyText] = useState<string>("");
-  const [operatorOpt, setOperatorOpt] = useState<
-    { id: string; label: string; value: string }[]
-  >([]);
+  const [operatorOpt, setOperatorOpt] = useState<{ id: string; label: string; value: string }[]>(
+    []
+  );
   const [selectedOperator, setSelectedOperator] = useState<string[]>([]);
   const [replyVisible, setReplyVisible] = useState(false);
   const [replyMessage, setReplyMessage] = useState("");
@@ -179,9 +175,7 @@ export default function FormUpdateTicketing() {
         setOperatorOpt(optionArr);
 
         if (detailTickets?.assignedTeams) {
-          const assigned = detailTickets.assignedTeams
-            .split(":")
-            .filter((id: string) => id);
+          const assigned = detailTickets.assignedTeams.split(":").filter((id: string) => id);
           setSelectedOperator(assigned);
         }
       }
@@ -341,11 +335,7 @@ export default function FormUpdateTicketing() {
                 placeholder="Tulis pesan di sini..."
               />
               <div className="flex justify-end gap-3 my-2">
-                <Button
-                  onClick={() => setReplyVisible(false)}
-                  color="default"
-                  variant="outline"
-                >
+                <Button onClick={() => setReplyVisible(false)} color="default" variant="outline">
                   Batal
                 </Button>
                 <Button onClick={handleSendReply} color="primary">
@@ -365,13 +355,9 @@ export default function FormUpdateTicketing() {
                   <Icon icon="qlementine-icons:user-16" width={36} />
                   <div>
                     <p>
-                      <span className="font-bold text-sm">
-                        {list?.user?.fullname}
-                      </span>{" "}
-                      mengirimkan pesan untuk{" "}
-                      <span className="font-bold text-sm">
-                        {list?.messageTo?.fullname}
-                      </span>
+                      <span className="font-bold text-sm">{list?.user?.fullname}</span> mengirimkan
+                      pesan untuk{" "}
+                      <span className="font-bold text-sm">{list?.messageTo?.fullname}</span>
                     </p>
                     <p className="text-xs">
                       {`${new Date(list?.createdAt).getDate()}-${
@@ -395,26 +381,18 @@ export default function FormUpdateTicketing() {
                         {ticketInternal?.createdBy?.fullname}
                       </span>{" "}
                       mengirimkan pesan untuk{" "}
-                      <span className="font-bold text-sm">
-                        {ticketInternal?.sendTo?.fullname}
-                      </span>
+                      <span className="font-bold text-sm">{ticketInternal?.sendTo?.fullname}</span>
                     </p>
                     <p className="text-xs">
                       {`${new Date(ticketInternal?.createdAt).getDate()}-${
                         new Date(ticketInternal?.createdAt).getMonth() + 1
-                      }-${new Date(
+                      }-${new Date(ticketInternal?.createdAt).getFullYear()} ${new Date(
                         ticketInternal?.createdAt
-                      ).getFullYear()} ${new Date(
-                        ticketInternal?.createdAt
-                      ).getHours()}:${new Date(
-                        ticketInternal?.createdAt
-                      ).getMinutes()}`}
+                      ).getHours()}:${new Date(ticketInternal?.createdAt).getMinutes()}`}
                     </p>
                   </div>
                 </div>
-                <p className="p-4 bg-white text-sm">
-                  {htmlToString(ticketInternal.message)}
-                </p>
+                <p className="p-4 bg-white text-sm">{htmlToString(ticketInternal.message)}</p>
               </div>
             )}
           </div>
@@ -429,12 +407,7 @@ export default function FormUpdateTicketing() {
                   control={control}
                   name="title"
                   render={({ field }) => (
-                    <Input
-                      {...field}
-                      size="md"
-                      type="text"
-                      placeholder="Enter Title"
-                    />
+                    <Input {...field} size="md" type="text" placeholder="Enter Title" />
                   )}
                 />
                 {/* {errors.title?.message && (
@@ -445,10 +418,7 @@ export default function FormUpdateTicketing() {
               </div>
               <div className="mt-5 px-3">
                 <Label>Prioritas</Label>
-                <Select
-                  onValueChange={setSelectedPriority}
-                  value={detail?.priority?.name}
-                >
+                <Select onValueChange={setSelectedPriority} value={detail?.priority?.name}>
                   <SelectTrigger size="md">
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
@@ -461,10 +431,7 @@ export default function FormUpdateTicketing() {
               </div>
               <div className="mt-5 px-3 mb-3">
                 <Label>Status</Label>
-                <Select
-                  onValueChange={setSelectedStatus}
-                  value={detail?.status?.name}
-                >
+                <Select onValueChange={setSelectedStatus} value={detail?.status?.name}>
                   <SelectTrigger size="md">
                     <SelectValue placeholder="Pilih" />
                   </SelectTrigger>
@@ -481,9 +448,7 @@ export default function FormUpdateTicketing() {
                 {selectedOperator.length > 0 && (
                   <div className="flex flex-col gap-2 mb-2">
                     {selectedOperator.map((id) => {
-                      const label = operatorOpt.find(
-                        (op: any) => op.value === id
-                      )?.label;
+                      const label = operatorOpt.find((op: any) => op.value === id)?.label;
                       return (
                         <div
                           key={id}
@@ -493,9 +458,7 @@ export default function FormUpdateTicketing() {
                           <button
                             type="button"
                             onClick={() =>
-                              setSelectedOperator((prev) =>
-                                prev.filter((val) => val !== id)
-                              )
+                              setSelectedOperator((prev) => prev.filter((val) => val !== id))
                             }
                             className="ml-2 text-gray-500 hover:text-red-600"
                           >
@@ -510,10 +473,7 @@ export default function FormUpdateTicketing() {
                 {/* Popover Checkbox Dropdown */}
                 <Popover>
                   <PopoverTrigger asChild>
-                    <Button
-                      variant="outline"
-                      className="w-full justify-between"
-                    >
+                    <Button variant="outline" className="w-full justify-between">
                       Pilih Operator
                       <ChevronDownIcon className="ml-2 h-4 w-4" />
                     </Button>
@@ -530,10 +490,7 @@ export default function FormUpdateTicketing() {
                             checked={selectedOperator.includes(op.value)}
                             onChange={(e) => {
                               if (e.target.checked) {
-                                setSelectedOperator((prev) => [
-                                  ...prev,
-                                  op.value,
-                                ]);
+                                setSelectedOperator((prev) => [...prev, op.value]);
                               } else {
                                 setSelectedOperator((prev) =>
                                   prev.filter((val) => val !== op.value)
diff --git a/src/components/features/landing-page/Reveal.tsx b/src/components/features/landing-page/Reveal.tsx
index 66b3851a..171a0bc7 100644
--- a/src/components/features/landing-page/Reveal.tsx
+++ b/src/components/features/landing-page/Reveal.tsx
@@ -1,5 +1,5 @@
-import React, { useRef, useEffect } from "react";
-import { motion, useInView, useAnimation } from "framer-motion";
+import React, { useEffect, useRef } from "react";
+import { motion, useAnimation, useInView } from "framer-motion";
 
 interface Props {
   children: React.ReactNode;
diff --git a/src/components/features/landing-page/area-coverage-and-work-units.tsx b/src/components/features/landing-page/area-coverage-and-work-units.tsx
index e01d7bfd..b1ad206c 100644
--- a/src/components/features/landing-page/area-coverage-and-work-units.tsx
+++ b/src/components/features/landing-page/area-coverage-and-work-units.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import Image from "next/image";
+
 import {
   Dialog,
   DialogClose,
@@ -10,7 +12,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import Image from "next/image";
+
 import Coverage from "./coverage";
 import Division from "./division";
 
@@ -53,10 +55,7 @@ const AreaCoverageWorkUnits = () => {
               <p className="text-base font-bold">Polda Jajaran</p>
             </button>
           </DialogTrigger>
-          <DialogContent
-            size="md"
-            className="max-h-[90vh] overflow-hidden flex flex-col  "
-          >
+          <DialogContent size="md" className="max-h-[90vh] overflow-hidden flex flex-col  ">
             <DialogHeader className="flex flex-col justify-center">
               <DialogTitle>
                 <p className="text-center">Polda Jajaran</p>
diff --git a/src/components/features/landing-page/content-category.tsx b/src/components/features/landing-page/content-category.tsx
index 9741864b..4254898a 100644
--- a/src/components/features/landing-page/content-category.tsx
+++ b/src/components/features/landing-page/content-category.tsx
@@ -1,13 +1,12 @@
-import {
-  getCategoryData,
-  getPublicCategoryData,
-} from "@/lib/services/landing/landing";
 import React, { useEffect, useState } from "react";
-import { Reveal } from "./Reveal";
-import { useTranslations } from "next-intl";
-import { usePathname } from "next/navigation";
-import { useParams } from "next/navigation";
 import Image from "next/image";
+import { useParams, usePathname } from "next/navigation";
+import { useRouter } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+
+import { getCategoryData, getPublicCategoryData } from "@/lib/services/landing/landing";
+
+import { Button } from "../../ui/button";
 import {
   Carousel,
   CarouselContent,
@@ -15,8 +14,7 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "../../ui/carousel";
-import { useRouter } from "@/i18n/navigation";
-import { Button } from "../../ui/button";
+import { Reveal } from "./Reveal";
 
 const ContentCategory = (props: { group?: string; type: string }) => {
   const [categories, setCategories] = useState<any>();
@@ -28,11 +26,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
   const satkerName = params?.satker_name;
   const router = useRouter();
 
-  let prefixPath = poldaName
-    ? `/polda/${poldaName}`
-    : satkerName
-    ? `/satker/${satkerName}`
-    : "/";
+  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
 
   useEffect(() => {
     initFetch();
@@ -42,12 +36,10 @@ const ContentCategory = (props: { group?: string; type: string }) => {
       props.group == "mabes"
         ? ""
         : props.group == "polda" && poldaName && String(poldaName)?.length > 1
-        ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
-        ? "satker-" + satkerName
-        : "",
+          ? poldaName
+          : props.group == "satker" && satkerName && String(satkerName)?.length > 1
+            ? "satker-" + satkerName
+            : "",
       "",
       locale == "en" ? true : false
     );
@@ -74,9 +66,7 @@ const ContentCategory = (props: { group?: string; type: string }) => {
   </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="px-4 py-10">
@@ -85,57 +75,43 @@ const ContentCategory = (props: { group?: string; type: string }) => {
           <h2 className="text-start text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
             {pathname?.split("/")[1] == "in" ? (
               <>
-                <span className="text-[#bb3523] dark:text-white">
-                  {t("category")}&nbsp;
-                </span>
+                <span className="text-[#bb3523] dark:text-white">{t("category")}&nbsp;</span>
                 {t("content")}
               </>
             ) : (
               <>
-                <span className="text-[#bb3523] dark:text-white">
-                  {t("content")}&nbsp;
-                </span>
+                <span className="text-[#bb3523] dark:text-white">{t("content")}&nbsp;</span>
                 {t("category")}
               </>
             )}
           </h2>
           <div className="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            {(seeAllValue ? categories : categories?.slice(0, 4))?.map(
-              (category: any) => (
-                <div key={category?.id}>
-                  <div
-                    onClick={() =>
-                      router.push(
-                        `${prefixPath}all/filter?category=${category?.id}`
-                      )
-                    }
-                    className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"
-                  >
-                    {/* Gambar */}
-                    <Image
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
-                      alt="category"
-                      width={2560}
-                      height={1440}
-                      src={category?.thumbnailLink}
-                      className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
-                    />
+            {(seeAllValue ? categories : categories?.slice(0, 4))?.map((category: any) => (
+              <div key={category?.id}>
+                <div
+                  onClick={() => router.push(`${prefixPath}all/filter?category=${category?.id}`)}
+                  className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"
+                >
+                  {/* Gambar */}
+                  <Image
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                    alt="category"
+                    width={2560}
+                    height={1440}
+                    src={category?.thumbnailLink}
+                    className="w-full lg:h-[250px] h-40 object-cover group-hover:scale-110 transition-transform duration-300"
+                  />
 
-                    {/* Overlay gelap */}
-                    <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
+                  {/* Overlay gelap */}
+                  <div className="absolute inset-0 bg-black bg-opacity-25 group-hover:bg-opacity-35 transition-all duration-300 rounded-md"></div>
 
-                    {/* Judul */}
-                    <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
-                      <h3 className="text-sm font-semibold truncate">
-                        {category?.name}
-                      </h3>
-                    </div>
+                  {/* Judul */}
+                  <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
+                    <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                   </div>
                 </div>
-              )
-            )}
+              </div>
+            ))}
           </div>
 
           {/* Tombol See More / See Less */}
diff --git a/src/components/features/landing-page/coverage.tsx b/src/components/features/landing-page/coverage.tsx
index 68494706..0e8556f0 100644
--- a/src/components/features/landing-page/coverage.tsx
+++ b/src/components/features/landing-page/coverage.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from "react";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+
 import { Button } from "../../ui/button";
 import { Reveal } from "./Reveal";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
-import { usePathname } from "next/navigation";
-import Image from "next/image";
 
 const regions = [
   {
@@ -173,18 +174,14 @@ const regions = [
 const Coverage: React.FC = () => {
   const [seeAllValue, setSeeAllValue] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
-  const [filteredList, setFilteredList] = useState<typeof regions | undefined>(
-    regions
-  );
+  const [filteredList, setFilteredList] = useState<typeof regions | undefined>(regions);
   const pathname = usePathname();
   const t = useTranslations("LandingPage");
 
   const handleSearch = () => {
     const value = searchTerm.toLowerCase();
 
-    const filtered = regions.filter((polda) =>
-      polda.name.toLowerCase().includes(value)
-    );
+    const filtered = regions.filter((polda) => polda.name.toLowerCase().includes(value));
     setFilteredList(filtered);
   };
 
@@ -203,9 +200,7 @@ const Coverage: React.FC = () => {
 </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="w-full">
@@ -219,9 +214,7 @@ const Coverage: React.FC = () => {
             >
               <div className="mb-1 flex items-center justify-center">
                 <Image
-                  placeholder={`data:image/svg+xml;base64,${toBase64(
-                    shimmer(700, 475)
-                  )}`}
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                   width={1920}
                   height={1080}
                   src={region.logo}
diff --git a/src/components/features/landing-page/division.tsx b/src/components/features/landing-page/division.tsx
index 3a1fc98b..49670435 100644
--- a/src/components/features/landing-page/division.tsx
+++ b/src/components/features/landing-page/division.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from "react";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+
 import { Button } from "../../ui/button";
 import { Reveal } from "./Reveal";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
-import { usePathname } from "next/navigation";
-import Image from "next/image";
 
 const regions = [
   { name: "SIBER", slug: "siber", logo: "/logo/satker/SIBER.png" },
@@ -15,7 +16,11 @@ const regions = [
   { name: "SSDM", slug: "ssdm", logo: "/logo/satker/SSDM.png" },
   { name: "ITWASUM", slug: "itwasum", logo: "/logo/satker/ITWASUM.png" },
   { name: "STIK-PTIK", slug: "stik-ptik", logo: "/logo/satker/STIK-PTIK.png" },
-  { name: "SATUAN KERJA POLRI", slug: "satuan-kerja-polri", logo: "/logo/satker/SATUAN-KERJA-POLRI.png" },
+  {
+    name: "SATUAN KERJA POLRI",
+    slug: "satuan-kerja-polri",
+    logo: "/logo/satker/SATUAN-KERJA-POLRI.png",
+  },
   { name: "BRIMOB", slug: "brimob", logo: "/logo/satker/BRIMOB.png" },
   { name: "DIV HUMAS", slug: "div-humas", logo: "/logo/satker/DIV-HUMAS.png" },
   { name: "PUSLITBANG", slug: "puslitbang", logo: "/logo/satker/PUSLITBANG.png" },
@@ -23,7 +28,11 @@ const regions = [
   { name: "DIV TIK", slug: "div-tik", logo: "/logo/satker/DIV-TIK.png" },
   { name: "SPRIPIM", slug: "spripim", logo: "/logo/satker/SPRIPIM.png" },
   { name: "DIVPROPRAM", slug: "divpropram", logo: "/logo/satker/DIVPROPAM.png" },
-  { name: "KORPS SABHARA BAHARKAM", slug: "korps-sabhara-baharkam", logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png" },
+  {
+    name: "KORPS SABHARA BAHARKAM",
+    slug: "korps-sabhara-baharkam",
+    logo: "/logo/satker/KORPS-SABHARA-BAHARKAM.png",
+  },
   { name: "PUSDOKKES", slug: "pusdokkes", logo: "/logo/satker/PUSDOKKES.png" },
   { name: "BAHARKAM", slug: "baharkam", logo: "/logo/satker/BAHARKAM.png" },
   { name: "POLAIRUD", slug: "polairud", logo: "/logo/satker/POLAIRUD.png" },
@@ -77,7 +86,8 @@ const Division = () => {
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="mx-auto px-4 w-full">
@@ -109,9 +119,19 @@ const Division = () => {
       {/* Grid Wilayah */}
       <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 px-4 overflow-y-auto max-h-[60vh]">
         {filteredList?.map((region: any) => (
-          <Link href={`/satker/${region.slug}`} className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all">
+          <Link
+            href={`/satker/${region.slug}`}
+            className="flex flex-col items-center text-center p-3 border rounded-lg shadow-md hover:shadow-lg transition-all"
+          >
             <div className="mb-1 flex items-center justify-center">
-              <Image placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`} width={1920} height={1080} src={region.logo} alt={region.name} className="w-14 h-14 object-contain" />
+              <Image
+                placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+                width={1920}
+                height={1080}
+                src={region.logo}
+                alt={region.name}
+                className="w-14 h-14 object-contain"
+              />
             </div>
             <p className="text-xs font-semibold">{region.name}</p>
           </Link>
diff --git a/src/components/features/landing-page/event-calender.tsx b/src/components/features/landing-page/event-calender.tsx
index efd9553c..ae543dbb 100644
--- a/src/components/features/landing-page/event-calender.tsx
+++ b/src/components/features/landing-page/event-calender.tsx
@@ -19,9 +19,7 @@ const EventCalender = () => {
               {[...Array(35)].map((_, i) => (
                 <div
                   key={i}
-                  className={`p-1 rounded ${
-                    [6, 7, 15].includes(i) ? "bg-red-600 text-white" : ""
-                  }`}
+                  className={`p-1 rounded ${[6, 7, 15].includes(i) ? "bg-red-600 text-white" : ""}`}
                 >
                   {i >= 2 && i - 1}
                 </div>
@@ -39,9 +37,7 @@ const EventCalender = () => {
                 <div className="text-sm font-semibold line-clamp-2">
                   HUT Polwan ke-76, Kapolri...
                 </div>
-                <div className="text-sm font-semibold whitespace-nowrap ml-3">
-                  16 Mei - 16 Mei
-                </div>
+                <div className="text-sm font-semibold whitespace-nowrap ml-3">16 Mei - 16 Mei</div>
               </div>
             </div>
 
@@ -55,9 +51,7 @@ const EventCalender = () => {
                 <div className="text-sm font-semibold line-clamp-2 uppercase">
                   Olahraga Bersama Pad...
                 </div>
-                <div className="text-sm font-semibold whitespace-nowrap ml-3">
-                  22 Mei - 22 Mei
-                </div>
+                <div className="text-sm font-semibold whitespace-nowrap ml-3">22 Mei - 22 Mei</div>
               </div>
             </div>
           </div>
@@ -66,17 +60,13 @@ const EventCalender = () => {
         {/* Detail Acara */}
         <div className="w-full md:w-1/2 space-y-4">
           <div className="bg-gray-100 dark:bg-zinc-800 rounded-md p-2 mt-4">
-            <img
-              src="/images/all-img/calendar1.png"
-              alt="Detail Event"
-              className="rounded mb-2"
-            />
+            <img src="/images/all-img/calendar1.png" alt="Detail Event" className="rounded mb-2" />
             <p className="text-sm font-semibold mb-1">
               HUT Polwan ke-76, Kapolri Apresiasi Prestasi yang Diberikan
             </p>
             <p className="text-xs text-gray-500 mb-1">
-              Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi
-              kepada polisi wanita yang berprestasi...
+              Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi kepada polisi wanita
+              yang berprestasi...
             </p>
             <a href="#" className="text-xs text-blue-500">
               Lihat Selengkapnya
diff --git a/src/components/features/landing-page/filter-all/audio-filter-card.tsx b/src/components/features/landing-page/filter-all/audio-filter-card.tsx
index 58894a20..e4f192e7 100644
--- a/src/components/features/landing-page/filter-all/audio-filter-card.tsx
+++ b/src/components/features/landing-page/filter-all/audio-filter-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function FilterAudioComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function FilterAudioComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -60,9 +55,7 @@ export default function FilterAudioComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -80,13 +73,9 @@ export default function FilterAudioComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -98,9 +87,7 @@ export default function FilterAudioComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -116,12 +103,8 @@ export default function FilterAudioComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
@@ -166,8 +149,7 @@ export default function FilterAudioComponent(props: {
                     <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
                       {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
                       {audio?.timezone ? audio?.timezone : "WIB"} |{" "}
-                      <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                      {audio?.clickCount}{" "}
+                      <Icon icon="formkit:eye" width="15" height="15" /> {audio?.clickCount}{" "}
                     </div>
                     <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
                       {audio?.title}
diff --git a/src/components/features/landing-page/filter-all/document-filter-card.tsx b/src/components/features/landing-page/filter-all/document-filter-card.tsx
index 6c671d81..f3b93436 100644
--- a/src/components/features/landing-page/filter-all/document-filter-card.tsx
+++ b/src/components/features/landing-page/filter-all/document-filter-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function FilterDocumentComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function FilterDocumentComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -60,9 +55,7 @@ export default function FilterDocumentComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -80,13 +73,9 @@ export default function FilterDocumentComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -98,9 +87,7 @@ export default function FilterDocumentComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -116,12 +103,8 @@ export default function FilterDocumentComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
diff --git a/src/components/features/landing-page/filter-all/image-filter-card.tsx b/src/components/features/landing-page/filter-all/image-filter-card.tsx
index 1c223b5c..3826be3a 100644
--- a/src/components/features/landing-page/filter-all/image-filter-card.tsx
+++ b/src/components/features/landing-page/filter-all/image-filter-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function FilterImageComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function FilterImageComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -59,9 +54,7 @@ export default function FilterImageComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -79,13 +72,9 @@ export default function FilterImageComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -97,9 +86,7 @@ export default function FilterImageComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -115,12 +102,8 @@ export default function FilterImageComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
@@ -156,8 +139,7 @@ export default function FilterImageComponent(props: {
                   <p className="flex flex-row items-center text-sm gap-2">
                     {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                     {image?.timezone ? image?.timezone : "WIB"}|{" "}
-                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                    {image?.clickCount}{" "}
+                    <Icon icon="formkit:eye" width="15" height="15" /> {image?.clickCount}{" "}
                   </p>
                 </div>
               </Link>
diff --git a/src/components/features/landing-page/filter-all/video-filter-card.tsx b/src/components/features/landing-page/filter-all/video-filter-card.tsx
index 09a4d3a0..95bdfec8 100644
--- a/src/components/features/landing-page/filter-all/video-filter-card.tsx
+++ b/src/components/features/landing-page/filter-all/video-filter-card.tsx
@@ -1,4 +1,14 @@
 "use client";
+
+import React, { useEffect, useState } from "react";
+import { pages } from "next/dist/build/templates/app-page";
+import { useParams, useSearchParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { close, loading } from "@/config/swal";
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -6,15 +16,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { close, loading } from "@/config/swal";
-import { Link, usePathname } from "@/i18n/navigation";
-import { listData } from "@/lib/services/landing/landing";
-import { formatDateToIndonesian, getOnlyMonthAndYear } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { pages } from "next/dist/build/templates/app-page";
-import { useParams, useSearchParams } from "next/navigation";
-import React, { useEffect } from "react";
-import { useState } from "react";
 
 export default function FilterVideoComponent(props: {
   categoryFilter?: any;
@@ -23,13 +24,7 @@ export default function FilterVideoComponent(props: {
   endDateString?: string;
   monthYearFilter?: any;
 }) {
-  const {
-    categoryFilter,
-    sortByOpt,
-    startDateString,
-    endDateString,
-    monthYearFilter,
-  } = props;
+  const { categoryFilter, sortByOpt, startDateString, endDateString, monthYearFilter } = props;
   const [newContent, setNewContent] = useState<any>();
   const asPath = usePathname();
   const params = useParams();
@@ -60,9 +55,7 @@ export default function FilterVideoComponent(props: {
     if (asPath?.includes("/polda/") == true) {
       if (asPath?.split("/")[2] !== "[polda_name]") {
         const filter =
-          categoryFilter?.length > 0
-            ? categoryFilter?.sort().join(",")
-            : categorie || "";
+          categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
         const name = title == undefined ? "" : title;
         const filterGroup = group == undefined ? asPath.split("/")[2] : group;
@@ -80,13 +73,9 @@ export default function FilterVideoComponent(props: {
           startDateString,
           endDateString,
           monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)
-                ?.split("/")[0]
-                ?.replace("", "")
+            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
             : "",
-          monthYearFilter
-            ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-            : ""
+          monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
         );
         close();
         const data = response?.data?.data;
@@ -98,9 +87,7 @@ export default function FilterVideoComponent(props: {
       }
     } else {
       const filter =
-        categoryFilter?.length > 0
-          ? categoryFilter?.sort().join(",")
-          : categorie || "";
+        categoryFilter?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
 
       const name = title == undefined ? "" : title;
       loading();
@@ -116,12 +103,8 @@ export default function FilterVideoComponent(props: {
         "",
         startDateString,
         endDateString,
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "")
-          : "",
-        monthYearFilter
-          ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1]
-          : ""
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[0]?.replace("", "") : "",
+        monthYearFilter ? getOnlyMonthAndYear(monthYearFilter)?.split("/")[1] : ""
       );
       close();
 
@@ -157,8 +140,7 @@ export default function FilterVideoComponent(props: {
                   <p className="flex flex-row items-center text-[10px] gap-2">
                     {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
                     {video?.timezone ? video?.timezone : "WIB"} |{" "}
-                    <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                    {video.clickCount}{" "}
+                    <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
                   </p>
                 </div>
               </Link>
diff --git a/src/components/features/landing-page/footer.tsx b/src/components/features/landing-page/footer.tsx
index a4f0b004..21b5cce5 100644
--- a/src/components/features/landing-page/footer.tsx
+++ b/src/components/features/landing-page/footer.tsx
@@ -1,13 +1,15 @@
 "use client";
 
-import Link from "next/link";
 import React, { useEffect, useState } from "react";
-import { generateLocalizedPath } from "@/lib/utils/globals";
+import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
-import { getPrivacy } from "@/lib/services/landing/landing";
 import parse from "html-react-parser";
 import { useTranslations } from "next-intl";
+
+import { getPrivacy } from "@/lib/services/landing/landing";
+import { generateLocalizedPath } from "@/lib/utils/globals";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+
 import NewsTicker from "./news-tickers";
 
 const Footer = () => {
@@ -31,8 +33,7 @@ const Footer = () => {
       <div className="mx-auto flex flex-col md:flex-row justify-between items-center px-4 gap-3">
         {/* Hak Cipta */}
         <div className="text-center md:text-left">
-          {t("copyright")} &copy; {new Date().getFullYear()}{" "}
-          {t("publicRelation")} {t("reserved")}
+          {t("copyright")} &copy; {new Date().getFullYear()} {t("publicRelation")} {t("reserved")}
         </div>
 
         {/* Menu Links */}
@@ -51,10 +52,7 @@ const Footer = () => {
             {t("contact")}
           </Link>
           <span className="hidden md:inline-block">|</span>
-          <Link
-            href={generateLocalizedPath("/faqs", String(locale))}
-            className="hover:underline"
-          >
+          <Link href={generateLocalizedPath("/faqs", String(locale))} className="hover:underline">
             FAQ
           </Link>
 
@@ -65,10 +63,7 @@ const Footer = () => {
                 {t("privacy")}
               </a>
             </DialogTrigger>
-            <DialogContent
-              className="flex flex-col overflow-y-scroll h-[80%]"
-              size="md"
-            >
+            <DialogContent className="flex flex-col overflow-y-scroll h-[80%]" size="md">
               <div className="flex flex-row items-center justify-center gap-4">
                 <img src="/assets/icon-privacy.png" alt="Privacy" />
                 <p className="font-semibold text-lg">{t("privacy")}</p>
@@ -84,25 +79,13 @@ const Footer = () => {
         <div className="flex justify-center items-center space-x-3">
           <span className="text-sm">Follow Us:</span>
           <a href="#" aria-label="Facebook">
-            <img
-              src="/assets/facebook.svg"
-              alt="Facebook"
-              className="w-5 h-5"
-            />
+            <img src="/assets/facebook.svg" alt="Facebook" className="w-5 h-5" />
           </a>
           <a href="#" aria-label="Instagram">
-            <img
-              src="/assets/instagram.svg"
-              alt="Instagram"
-              className="w-5 h-5"
-            />
+            <img src="/assets/instagram.svg" alt="Instagram" className="w-5 h-5" />
           </a>
           <a href="#" aria-label="Twitter">
-            <img
-              src="/assets/twitter.svg"
-              alt="Instagram"
-              className="w-5 h-5"
-            />
+            <img src="/assets/twitter.svg" alt="Instagram" className="w-5 h-5" />
           </a>
           <a href="#" aria-label="TikTok">
             <img src="/assets/tiktok.svg" alt="TikTok" className="w-5 h-5" />
diff --git a/src/components/features/landing-page/header-banner-satker.tsx b/src/components/features/landing-page/header-banner-satker.tsx
index f40a3ee2..44f9cb2c 100644
--- a/src/components/features/landing-page/header-banner-satker.tsx
+++ b/src/components/features/landing-page/header-banner-satker.tsx
@@ -1,15 +1,18 @@
 "use client";
-import { listData, listStaticBanner } from "@/lib/services/landing/landing";
-import { useParams, usePathname, useRouter } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import Image from "next/image";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+
+import { listData, listStaticBanner } from "@/lib/services/landing/landing";
 import {
   formatDateToIndonesian,
   getPublicLocaleTimestamp,
   textEllipsis,
 } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import {
   Carousel,
   CarouselContent,
@@ -17,7 +20,6 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import Image from "next/image";
 
 const HeaderBannerSatker = () => {
   const router = useRouter();
@@ -37,17 +39,7 @@ const HeaderBannerSatker = () => {
     // }
 
     async function fetchData() {
-      const res = await listData(
-        "1",
-        "",
-        "",
-        5,
-        0,
-        "createdAt",
-        "",
-        "",
-        "satker-" + satkerName
-      );
+      const res = await listData("1", "", "", 5, 0, "createdAt", "", "", "satker-" + satkerName);
       var data = res?.data?.data?.content;
       if (data) {
         const resStatic = await listStaticBanner(satkerName, false);
@@ -131,24 +123,20 @@ const HeaderBannerSatker = () => {
                         href={
                           Number(row.fileType?.id) == 1
                             ? `${
-                                asPath.includes("/satker/") == true
-                                  ? asPath
-                                  : ""
+                                asPath.includes("/satker/") == true ? asPath : ""
                               }/image/detail/${row.slug}`
                             : Number(row.fileType?.id) == 2
-                            ? `/video/detail/${row.slug}`
-                            : Number(row.fileType?.id) == 3
-                            ? `/document/detail/${row.slug}`
-                            : `/audio/detail/${row.slug}`
+                              ? `/video/detail/${row.slug}`
+                              : Number(row.fileType?.id) == 3
+                                ? `/document/detail/${row.slug}`
+                                : `/audio/detail/${row.slug}`
                         }
                       >
                         <h3>{row.title}</h3>
                       </Link>
                       <p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
-                        {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB{" "}
-                        {" | "}
-                        <Icon icon="formkit:eye" width="15" height="15" />{" "}
-                        {row?.clickCount}
+                        {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
+                        <Icon icon="formkit:eye" width="15" height="15" /> {row?.clickCount}
                       </p>
                     </div>
                   </div>
@@ -224,15 +212,13 @@ const HeaderBannerSatker = () => {
                               asPath.includes("/satker/") == true ? asPath : ""
                             }/image/detail/${item?.slug}`
                           : Number(item?.fileType?.id) == 2
-                          ? `/video/detail/${item?.slug}`
-                          : Number(item?.fileType?.id) == 3
-                          ? `/document/detail/${item?.slug}`
-                          : `/audio/detail/${item?.slug}`
+                            ? `/video/detail/${item?.slug}`
+                            : Number(item?.fileType?.id) == 3
+                              ? `/document/detail/${item?.slug}`
+                              : `/audio/detail/${item?.slug}`
                       }
                     >
-                      <h3 className="text-base font-bold mt-2">
-                        {textEllipsis(item?.title, 30)}
-                      </h3>
+                      <h3 className="text-base font-bold mt-2">{textEllipsis(item?.title, 30)}</h3>
                     </Link>
                     <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
                       {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
diff --git a/src/components/features/landing-page/header-banner.tsx b/src/components/features/landing-page/header-banner.tsx
index 258b6d4f..beadc691 100644
--- a/src/components/features/landing-page/header-banner.tsx
+++ b/src/components/features/landing-page/header-banner.tsx
@@ -1,13 +1,25 @@
 "use client";
-import { listData, listStaticBanner } from "@/lib/services/landing/landing";
-import { useParams } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
-import { formatDateToIndonesian, getPublicLocaleTimestamp, textEllipsis } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import Image from "next/image";
+import { useParams } from "next/navigation";
 import { useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+
+import { listData, listStaticBanner } from "@/lib/services/landing/landing";
+import {
+  formatDateToIndonesian,
+  getPublicLocaleTimestamp,
+  textEllipsis,
+} from "@/lib/utils/globals";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
 
 const HeaderBanner = () => {
   const router = useRouter();
@@ -97,10 +109,21 @@ const HeaderBanner = () => {
               {content?.map((row: any) => (
                 <CarouselItem key={row?.id}>
                   <div className="relative h-[310px] lg:h-[420px]">
-                    <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[310px] lg:h-full rounded-lg object-cover" />
+                    <Image
+                      src={row?.thumbnailLink}
+                      alt=""
+                      width={1920}
+                      height={1080}
+                      className="w-full h-[310px] lg:h-full rounded-lg object-cover"
+                    />
                     <div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-white p-4 rounded-b-lg">
-                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">{row?.categoryName}</span>
-                      <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer">
+                      <span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">
+                        {row?.categoryName}
+                      </span>
+                      <div
+                        onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)}
+                        className="cursor-pointer"
+                      >
                         <h3>{row.title}</h3>
                       </div>
                       <p className="text-xs flex flex-row items-center gap-1 mt-1 text-white">
@@ -162,16 +185,33 @@ const HeaderBanner = () => {
               {content?.map((item: any) => (
                 <li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
                   <div className="flex-shrink-0 w-24 rounded-lg">
-                    <Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
+                    <Image
+                      width={720}
+                      height={480}
+                      src={item?.thumbnailLink}
+                      alt={item?.title}
+                      className="w-full h-[73px] object-cover rounded-lg"
+                    />
                   </div>
                   <div className="w-[280px] lg:w-auto">
-                    <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
-                    <div onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)} className="cursor-pointer">
+                    <span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
+                      {item?.categoryName}
+                    </span>
+                    <div
+                      onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)}
+                      className="cursor-pointer"
+                    >
                       <h3 className="text-base font-bold mt-2">{textEllipsis(item?.title, 30)}</h3>
                     </div>
                     <p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
-                      {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
-                      <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                      {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
+                      {item?.timezone ? item?.timezone : "WIB"} |{" "}
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="1.2em"
+                        height="1.2em"
+                        viewBox="0 0 24 24"
+                      >
                         <path
                           fill="currentColor"
                           d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
diff --git a/src/components/features/landing-page/header-management.tsx b/src/components/features/landing-page/header-management.tsx
index 5ce347d3..ec50fb05 100644
--- a/src/components/features/landing-page/header-management.tsx
+++ b/src/components/features/landing-page/header-management.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
 import { Link } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { getInfoProfile, getListPorvinces, getUsersTeams } from "@/lib/services/landing/landing";
-import { useParams } from "next/navigation";
 import { useTranslations } from "next-intl";
 
+import { getInfoProfile, getListPorvinces, getUsersTeams } from "@/lib/services/landing/landing";
+
 const HeaderManagement = () => {
   const [profile, setProfile] = useState<any>();
   const [province, setProvince] = useState([]);
@@ -84,7 +85,10 @@ const HeaderManagement = () => {
               </p>
             </div>
           </div>
-          <Link href="/profile" className="flex justify-center items-center text-black gap-2 mt-3 lg:mt-0">
+          <Link
+            href="/profile"
+            className="flex justify-center items-center text-black gap-2 mt-3 lg:mt-0"
+          >
             <p className="text-sm lg:text-base">{t("fullProfile")}</p>
             <Icon icon="ri:arrow-right-s-line" className="h-5 w-5" />
           </Link>
diff --git a/src/components/features/landing-page/hero-new.tsx b/src/components/features/landing-page/hero-new.tsx
index b9b5081d..1933813a 100644
--- a/src/components/features/landing-page/hero-new.tsx
+++ b/src/components/features/landing-page/hero-new.tsx
@@ -1,10 +1,18 @@
-import { formatDateToIndonesian, shimmer, toBase64 } from "@/lib/utils/globals";
 import React, { useEffect, useState } from "react";
+
+import { formatDateToIndonesian, shimmer, toBase64 } from "@/lib/utils/globals";
+
 import "swiper/css/bundle";
 import "swiper/css/navigation";
-import { getHeroData, listStaticBanner } from "@/lib/services/landing/landing";
+
+import Image from "next/image";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
+import Cookies from "js-cookie";
+import { Autoplay, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { getHeroData, listStaticBanner } from "@/lib/services/landing/landing";
 import {
   Carousel,
   CarouselContent,
@@ -12,10 +20,8 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { Skeleton } from "../../ui/skeleton";
-import Image from "next/image";
-import Cookies from "js-cookie";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+
+import { Button } from "../../ui/button";
 import {
   Card,
   CardContent,
@@ -24,10 +30,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../../ui/card";
-import { Label } from "../../ui/label";
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
-import { Textarea } from "../../ui/textarea";
 import { Checkbox } from "../../ui/checkbox";
 import {
   Dialog,
@@ -37,10 +39,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../../ui/dialog";
-import { Autoplay, Pagination } from "swiper/modules";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Input } from "../../ui/input";
+import { Label } from "../../ui/label";
+import { Skeleton } from "../../ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+import { Textarea } from "../../ui/textarea";
+
 import "swiper/css";
 import "swiper/css/pagination";
+
 import FormSurvey from "./survey";
 
 type HeroModalProps = {
@@ -50,12 +57,7 @@ type HeroModalProps = {
   satkerName?: string;
 };
 
-const HeroModal = ({
-  onClose,
-  group,
-  poldaName,
-  satkerName,
-}: HeroModalProps) => {
+const HeroModal = ({ onClose, group, poldaName, satkerName }: HeroModalProps) => {
   const [heroData, setHeroData] = useState<any>();
   const params = useParams();
   const locale = params?.locale;
@@ -95,10 +97,10 @@ const HeroModal = ({
       group === "mabes"
         ? ""
         : group === "polda" && poldaName && String(poldaName)?.length > 1
-        ? poldaName
-        : group === "satker" && satkerName && String(satkerName)?.length > 1
-        ? "satker-" + satkerName
-        : ""
+          ? poldaName
+          : group === "satker" && satkerName && String(satkerName)?.length > 1
+            ? "satker-" + satkerName
+            : ""
     );
 
     const banners =
@@ -135,9 +137,7 @@ const HeroModal = ({
                   alt="gambar-utama"
                   width={1920}
                   height={1080}
-                  placeholder={`data:image/svg+xml;base64,${toBase64(
-                    shimmer(700, 475)
-                  )}`}
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                   className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                 />
 
@@ -152,8 +152,7 @@ const HeroModal = ({
                   </Link>
 
                   <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
-                    {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
-                    {list?.timezone || "WIB"} |{" "}
+                    {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} |{" "}
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="1em"
@@ -284,12 +283,10 @@ const HeroNew = (props: { group?: string }) => {
         props.group == "mabes"
           ? ""
           : props.group == "polda" && poldaName && String(poldaName)?.length > 1
-          ? poldaName
-          : props.group == "satker" &&
-            satkerName &&
-            String(satkerName)?.length > 1
-          ? "satker-" + satkerName
-          : ""
+            ? poldaName
+            : props.group == "satker" && satkerName && String(satkerName)?.length > 1
+              ? "satker-" + satkerName
+              : ""
       );
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
         const media = resStatic?.data.data[i]?.mediaUpload;
@@ -316,16 +313,12 @@ const HeroNew = (props: { group?: string }) => {
 </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="flex items-start justify-center mx-auto w-auto">
       <div className="relative">
-        {showModal && (
-          <HeroModal onClose={() => setShowModal(false)} group="mabes" />
-        )}
+        {showModal && <HeroModal onClose={() => setShowModal(false)} group="mabes" />}
       </div>
       {isLoading ? (
         <div className="flex flex-col space-y-3 mx-auto w-full lg:w-2/3">
@@ -346,9 +339,7 @@ const HeroNew = (props: { group?: string }) => {
                     alt="gambar-utama"
                     width={1920}
                     height={1080}
-                    placeholder={`data:image/svg+xml;base64,${toBase64(
-                      shimmer(700, 475)
-                    )}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                     className="w-full h-[320px] lg:h-[700px] object-cover"
                   />
                   <div className="absolute inset-0 bg-black bg-opacity-40" />
@@ -358,10 +349,10 @@ const HeroNew = (props: { group?: string }) => {
                       Number(list?.fileTypeId) == 1
                         ? `${locale}/image/detail/${list?.slug}`
                         : Number(list?.fileTypeId) == 2
-                        ? `${locale}/video/detail/${list?.slug}`
-                        : Number(list?.fileTypeId) == 3
-                        ? `${locale}/document/detail/${list?.slug}`
-                        : `${locale}/audio/detail/${list?.slug}`
+                          ? `${locale}/video/detail/${list?.slug}`
+                          : Number(list?.fileTypeId) == 3
+                            ? `${locale}/document/detail/${list?.slug}`
+                            : `${locale}/audio/detail/${list?.slug}`
                     }
                   >
                     <div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
@@ -369,9 +360,7 @@ const HeroNew = (props: { group?: string }) => {
                         {list?.categoryName || "Liputan Kegiatan"}
                       </span>
 
-                      <h2 className="text-xl font-bold leading-tight">
-                        {list?.title}
-                      </h2>
+                      <h2 className="text-xl font-bold leading-tight">{list?.title}</h2>
 
                       <p className="text-base flex items-center gap-1 mt-2 opacity-80">
                         {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
@@ -381,15 +370,10 @@ const HeroNew = (props: { group?: string }) => {
                   </Link>
                   <div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40  p-4 rounded-lg z-50">
                     {heroData?.slice(0, 3).map((item: any) => (
-                      <li
-                        key={item?.id}
-                        className="flex gap-4 flex-row lg:w-full mx-2"
-                      >
+                      <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
                         <div className="flex-shrink-0 w-32 rounded-lg">
                           <Image
-                            placeholder={`data:image/svg+xml;base64,${toBase64(
-                              shimmer(700, 475)
-                            )}`}
+                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                             width={720}
                             height={480}
                             src={item?.thumbnailLink}
@@ -403,10 +387,10 @@ const HeroNew = (props: { group?: string }) => {
                               Number(list?.fileTypeId) == 1
                                 ? `${locale}/image/detail/${list?.slug}`
                                 : Number(list?.fileTypeId) == 2
-                                ? `${locale}/video/detail/${list?.slug}`
-                                : Number(list?.fileTypeId) == 3
-                                ? `${locale}/document/detail/${list?.slug}`
-                                : `${locale}/audio/detail/${list?.slug}`
+                                  ? `${locale}/video/detail/${list?.slug}`
+                                  : Number(list?.fileTypeId) == 3
+                                    ? `${locale}/document/detail/${list?.slug}`
+                                    : `${locale}/audio/detail/${list?.slug}`
                             }
                           >
                             <span className="  py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">
@@ -418,9 +402,7 @@ const HeroNew = (props: { group?: string }) => {
                             </h3>
 
                             <p className="text-[10px] flex flex-row items-center gap-1 text-white mt-1">
-                              {formatDateToIndonesian(
-                                new Date(item?.createdAt)
-                              )}{" "}
+                              {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
                               {item?.timezone ? item?.timezone : "WIB"} |{" "}
                               <svg
                                 xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/features/landing-page/hero.tsx b/src/components/features/landing-page/hero.tsx
index e6d9ce0f..9910ee72 100644
--- a/src/components/features/landing-page/hero.tsx
+++ b/src/components/features/landing-page/hero.tsx
@@ -1,10 +1,18 @@
-import { formatDateToIndonesian, shimmer, toBase64 } from "@/lib/utils/globals";
 import React, { useEffect, useState } from "react";
+
+import { formatDateToIndonesian, shimmer, toBase64 } from "@/lib/utils/globals";
+
 import "swiper/css/bundle";
 import "swiper/css/navigation";
-import { getHeroData, listStaticBanner } from "@/lib/services/landing/landing";
+
+import Image from "next/image";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
+import Cookies from "js-cookie";
+import { Autoplay, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import { getHeroData, listStaticBanner } from "@/lib/services/landing/landing";
 import {
   Carousel,
   CarouselContent,
@@ -12,10 +20,8 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { Skeleton } from "../../ui/skeleton";
-import Image from "next/image";
-import Cookies from "js-cookie";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+
+import { Button } from "../../ui/button";
 import {
   Card,
   CardContent,
@@ -24,10 +30,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../../ui/card";
-import { Label } from "../../ui/label";
-import { Input } from "../../ui/input";
-import { Button } from "../../ui/button";
-import { Textarea } from "../../ui/textarea";
 import { Checkbox } from "../../ui/checkbox";
 import {
   Dialog,
@@ -37,10 +39,15 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../../ui/dialog";
-import { Autoplay, Pagination } from "swiper/modules";
-import { Swiper, SwiperSlide } from "swiper/react";
+import { Input } from "../../ui/input";
+import { Label } from "../../ui/label";
+import { Skeleton } from "../../ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
+import { Textarea } from "../../ui/textarea";
+
 import "swiper/css";
 import "swiper/css/pagination";
+
 import FormSurvey from "./survey";
 
 const HeroModal = ({ onClose }: { onClose: () => void }) => {
@@ -94,7 +101,6 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
     }
   };
 
-
   return (
     <div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
       <div className="relative dark:bg-gray-900 rounded-lg  w-[90%] md:w-[600px] p-4 shadow-none">
@@ -117,9 +123,7 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
                   alt="gambar-utama"
                   width={1920}
                   height={1080}
-                  placeholder={`data:image/svg+xml;base64,${toBase64(
-                    shimmer(700, 475)
-                  )}`}
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                   className="w-full h-[310px] lg:h-[420px] rounded-lg object-cover"
                 />
 
@@ -134,8 +138,7 @@ const HeroModal = ({ onClose }: { onClose: () => void }) => {
                   </Link>
 
                   <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
-                    {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
-                    {list?.timezone || "WIB"} |{" "}
+                    {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"} |{" "}
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
                       width="1em"
@@ -174,10 +177,7 @@ const SurveyIntroModal = ({ onNext }: { onNext: () => void }) => {
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
       <div className="relative bg-white rounded-xl p-6 w-[90%] max-w-md text-center">
-        <button
-          onClick={onNext}
-          className="absolute top-3 right-3 text-gray-500 hover:text-black"
-        >
+        <button onClick={onNext} className="absolute top-3 right-3 text-gray-500 hover:text-black">
           ✕
         </button>
 
@@ -296,12 +296,10 @@ const Hero = (props: { group?: string }) => {
         props.group == "mabes"
           ? ""
           : props.group == "polda" && poldaName && String(poldaName)?.length > 1
-          ? poldaName
-          : props.group == "satker" &&
-            satkerName &&
-            String(satkerName)?.length > 1
-          ? "satker-" + satkerName
-          : ""
+            ? poldaName
+            : props.group == "satker" && satkerName && String(satkerName)?.length > 1
+              ? "satker-" + satkerName
+              : ""
       );
       for (let i = 0; i < resStatic?.data?.data?.length; i++) {
         const media = resStatic?.data.data[i]?.mediaUpload;
@@ -328,9 +326,7 @@ const Hero = (props: { group?: string }) => {
 </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
@@ -366,9 +362,7 @@ const Hero = (props: { group?: string }) => {
                     alt="gambar-utama"
                     width={1920}
                     height={1080}
-                    placeholder={`data:image/svg+xml;base64,${toBase64(
-                      shimmer(700, 475)
-                    )}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                     className="w-full h-[320px] lg:h-[460px] rounded-lg object-cover"
                   />
 
@@ -383,8 +377,8 @@ const Hero = (props: { group?: string }) => {
                     </Link>
 
                     <p className="text-xs flex items-center gap-1 mt-2 opacity-80">
-                      {formatDateToIndonesian(new Date(list?.createdAt))}{" "}
-                      {list?.timezone || "WIB"} |{" "}
+                      {formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone || "WIB"}{" "}
+                      |{" "}
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="1em"
@@ -458,15 +452,10 @@ const Hero = (props: { group?: string }) => {
               </TabsList>
               <TabsContent value="national">
                 {heroData?.map((item: any) => (
-                  <li
-                    key={item?.id}
-                    className="flex gap-4 flex-row lg:w-full mx-2"
-                  >
+                  <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
                     <div className="flex-shrink-0 w-24 rounded-lg">
                       <Image
-                        placeholder={`data:image/svg+xml;base64,${toBase64(
-                          shimmer(700, 475)
-                        )}`}
+                        placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                         width={720}
                         height={480}
                         src={item?.thumbnailLink}
@@ -508,15 +497,10 @@ const Hero = (props: { group?: string }) => {
                   ?.filter((item: any) => item.isPublishOnPolda === true)
 
                   .map((item: any, index: any) => (
-                    <li
-                      key={item?.id}
-                      className="flex gap-4 flex-row lg:w-full mx-2"
-                    >
+                    <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
                       <div className="flex-shrink-0 w-24 rounded-lg">
                         <Image
-                          placeholder={`data:image/svg+xml;base64,${toBase64(
-                            shimmer(700, 475)
-                          )}`}
+                          placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                           width={720}
                           height={480}
                           src={item?.thumbnailLink}
@@ -555,15 +539,10 @@ const Hero = (props: { group?: string }) => {
               </TabsContent>
               <TabsContent value="satker">
                 {heroData?.map((item: any) => (
-                  <li
-                    key={item?.id}
-                    className="flex gap-4 flex-row lg:w-full mx-2"
-                  >
+                  <li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
                     <div className="flex-shrink-0 w-24 rounded-lg">
                       <Image
-                        placeholder={`data:image/svg+xml;base64,${toBase64(
-                          shimmer(700, 475)
-                        )}`}
+                        placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                         width={720}
                         height={480}
                         src={item?.thumbnailLink}
diff --git a/src/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx b/src/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
index fa9adff8..39ecb062 100644
--- a/src/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
+++ b/src/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx
@@ -1,8 +1,9 @@
-import { Button } from "@/components/ui/button";
+import React from "react";
+import Image from "next/image";
 import { Link } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import Image from "next/image";
-import React from "react";
+
+import { Button } from "@/components/ui/button";
 
 type Channel = {
   name: string;
@@ -47,14 +48,22 @@ const ContactUsKaltara = () => {
   return (
     <div className="min-h-[300px] lg:min-h-[300px] text-black px-4 lg:px-20 pb-20">
       <div className="w-full px-4 py-4 bg-white">
-        <h2 className="text-center text-xl md:text-2xl font-semibold mb-6">Channel Divisi Humas Polri</h2>
+        <h2 className="text-center text-xl md:text-2xl font-semibold mb-6">
+          Channel Divisi Humas Polri
+        </h2>
 
         {/* Mobile version pakai grid, Desktop pakai flex */}
         <div className="grid grid-cols-3 gap-4 sm:flex sm:justify-between sm:flex-wrap">
           {channels.map((channel, index) => (
             <Link key={index} href={channel.url} passHref>
               <div key={index} className="w-16 h-16 sm:w-[170px] sm:h-[80px] relative mx-auto">
-                <Image src={channel.logo} alt={channel.name} width={1920} height={1080} className="object-contain w-full h-full" />
+                <Image
+                  src={channel.logo}
+                  alt={channel.name}
+                  width={1920}
+                  height={1080}
+                  className="object-contain w-full h-full"
+                />
               </div>
             </Link>
           ))}
@@ -65,7 +74,13 @@ const ContactUsKaltara = () => {
         <div className="flex flex-col md:flex-row items-start gap-4 lg:gap-44">
           {/* Logo */}
           <div className="flex flex-col items-center space-x-4">
-            <Image src="/assets/logo-humas-polri.png" alt="logo" width={1920} height={1080} className="h-[100px] lg:h-[200px] w-[100px] lg:w-[200px]" />
+            <Image
+              src="/assets/logo-humas-polri.png"
+              alt="logo"
+              width={1920}
+              height={1080}
+              className="h-[100px] lg:h-[200px] w-[100px] lg:w-[200px]"
+            />
             {/* <p className="text-[#bb3523] font-bold">Copyright @TribrataNews Kaltara</p> */}
           </div>
 
@@ -76,9 +91,15 @@ const ContactUsKaltara = () => {
             <div className="gap-[20px]">
               <div className="flex flex-row gap-3">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-                  <path fill="#000" d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7" />
+                  <path
+                    fill="#000"
+                    d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7"
+                  />
                 </svg>
-                <p className="flex items-center text-sm gap-2 font-sans">Jalan Komjen Dr. H.M. Jasin No.86, Bumi Rahayu, Kec. Tj. Selor, Kabupaten Bulungan, Kalimantan Utara 77212</p>
+                <p className="flex items-center text-sm gap-2 font-sans">
+                  Jalan Komjen Dr. H.M. Jasin No.86, Bumi Rahayu, Kec. Tj. Selor, Kabupaten
+                  Bulungan, Kalimantan Utara 77212
+                </p>
               </div>
 
               <p className="flex items-center text-sm font-sans mt-2 gap-2">
@@ -107,7 +128,10 @@ const ContactUsKaltara = () => {
               </p>
               <p className="flex items-center text-sm font-sans mt-2 gap-2">
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
-                  <path fill="#000" d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z" />
+                  <path
+                    fill="#000"
+                    d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm8-7l8-5V6l-8 5l-8-5v2z"
+                  />
                 </svg>
                 ppid@polri.go.id
               </p>
@@ -119,7 +143,10 @@ const ContactUsKaltara = () => {
             <h2 className="text-xl font-bold text-[#bb3523]">Tautan</h2>
             <hr className="border-t-2 border-dotted border-[#bb3523] my-2" />
             <div className="flex flex-col">
-              <Link href="https://polri.go.id/" className="flex items-center gap-2 text-sm font-sans">
+              <Link
+                href="https://polri.go.id/"
+                className="flex items-center gap-2 text-sm font-sans"
+              >
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
@@ -128,7 +155,10 @@ const ContactUsKaltara = () => {
                 </svg>
                 Tentang Kami{" "}
               </Link>
-              <Link href="https://tribratanews.polri.go.id/" className="flex items-center mt-2 text-sm gap-2 font-sans">
+              <Link
+                href="https://tribratanews.polri.go.id/"
+                className="flex items-center mt-2 text-sm gap-2 font-sans"
+              >
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
@@ -137,7 +167,10 @@ const ContactUsKaltara = () => {
                 </svg>
                 Redaksi
               </Link>
-              <Link href="https://www.humas.polri.go.id/" className="flex items-center mt-2 text-sm gap-2 font-sans">
+              <Link
+                href="https://www.humas.polri.go.id/"
+                className="flex items-center mt-2 text-sm gap-2 font-sans"
+              >
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
@@ -146,7 +179,10 @@ const ContactUsKaltara = () => {
                 </svg>
                 Pedoman Media Siber
               </Link>
-              <Link href="https://new.netidhub.com/" className="flex items-center mt-2 text-sm gap-2 font-sans">
+              <Link
+                href="https://new.netidhub.com/"
+                className="flex items-center mt-2 text-sm gap-2 font-sans"
+              >
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <path
                     fill="#000"
diff --git a/src/components/features/landing-page/landing-polda-kaltara/content-category-kaltara.tsx b/src/components/features/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
index c9bd1721..86d7ec57 100644
--- a/src/components/features/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
+++ b/src/components/features/landing-page/landing-polda-kaltara/content-category-kaltara.tsx
@@ -1,16 +1,19 @@
-import {
-  getCategoryData,
-  getPublicCategoryData,
-} from "@/lib/services/landing/landing";
 import React, { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
-import { usePathname } from "next/navigation";
-import { useParams } from "next/navigation";
 import Image from "next/image";
-
+import { useParams, usePathname } from "next/navigation";
 import { useRouter } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+
+import { getCategoryData, getPublicCategoryData } from "@/lib/services/landing/landing";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
 import { Reveal } from "../Reveal";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 
 const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
   const [categories, setCategories] = useState<any>();
@@ -22,11 +25,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
   const satkerName = params?.satker_name;
   const router = useRouter();
 
-  let prefixPath = poldaName
-    ? `/polda/${poldaName}`
-    : satkerName
-    ? `/satker/${satkerName}`
-    : "/";
+  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
 
   useEffect(() => {
     initFetch();
@@ -36,12 +35,10 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
       props.group == "mabes"
         ? ""
         : props.group == "polda" && poldaName && String(poldaName)?.length > 1
-        ? poldaName
-        : props.group == "satker" &&
-          satkerName &&
-          String(satkerName)?.length > 1
-        ? "satker-" + satkerName
-        : "",
+          ? poldaName
+          : props.group == "satker" && satkerName && String(satkerName)?.length > 1
+            ? "satker-" + satkerName
+            : "",
       "",
       locale == "en" ? true : false
     );
@@ -68,9 +65,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
   </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="px-4 lg:px-24 py-10">
@@ -78,16 +73,12 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
         <h2 className="text-center text-xl lg:text-3xl font-bold text-[#bb3523] mb-4">
           {pathname?.split("/")[1] == "in" ? (
             <>
-              <span className="text-black dark:text-white">
-                {t("category")}&nbsp;
-              </span>
+              <span className="text-black dark:text-white">{t("category")}&nbsp;</span>
               {t("content")}
             </>
           ) : (
             <>
-              <span className="text-black dark:text-white">
-                {t("content")}&nbsp;
-              </span>
+              <span className="text-black dark:text-white">{t("content")}&nbsp;</span>
               {t("category")}
             </>
           )}
@@ -99,12 +90,13 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
             <CarouselContent>
               {categories?.map((category: any) => (
                 <CarouselItem key={category?.id} className="md:basis-1/2 lg:basis-1/3">
-                  <div onClick={() => router.push(prefixPath + `all/filter?category=${category?.id}`)} className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block">
+                  <div
+                    onClick={() => router.push(prefixPath + `all/filter?category=${category?.id}`)}
+                    className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg block"
+                  >
                     {/* Gambar */}
                     <Image
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
+                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                       alt="category"
                       width={2560}
                       height={1440}
@@ -117,9 +109,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
 
                     {/* Judul */}
                     <div className="absolute bottom-5 left-0 right-16 bg-transparent backdrop-blur-md text-white p-4 border-l-2 border-[#bb3523] z-10 group-hover:scale-x-150 origin-left">
-                      <h3 className="text-sm font-semibold truncate">
-                        {category?.name}
-                      </h3>
+                      <h3 className="text-sm font-semibold truncate">{category?.name}</h3>
                     </div>
                   </div>
                 </CarouselItem>
@@ -136,11 +126,7 @@ const ContentCategoryKaltara = (props: { group?: string; type: string }) => {
         </div> */}
         <div className="flex items-center flex-row justify-center mt-7">
           <div
-            onClick={() =>
-              router.push(
-                prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`
-              )
-            }
+            onClick={() => router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)}
             className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"
           >
             {t("seeAll")}
diff --git a/src/components/features/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx b/src/components/features/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
index 81187c8e..28dae6c0 100644
--- a/src/components/features/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
+++ b/src/components/features/landing-page/landing-polda-kaltara/header-banner-kaltara.tsx
@@ -1,13 +1,22 @@
 "use client";
-import { listData } from "@/lib/services/landing/landing";
-import { useParams } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
-import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/lib/utils/globals";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import Image from "next/image";
+import { useParams } from "next/navigation";
 import { useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, getPublicLocaleTimestamp } from "@/lib/utils/globals";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
 import { Reveal } from "../Reveal";
 
 const HeaderBannerKaltara = () => {
@@ -90,12 +99,26 @@ const HeaderBannerKaltara = () => {
                 {content?.map((row: any) => (
                   <CarouselItem key={row?.id}>
                     <div className="relative h-[310px] lg:h-[580px] overflow-hidden rounded-lg">
-                      <Image src={row?.thumbnailLink} alt="" width={1920} height={1080} className="w-full h-[540px] lg:h-full object-cover" />
-                      <div className="absolute inset-0 bg-black bg-opacity-30"></div> {/* Overlay */}
+                      <Image
+                        src={row?.thumbnailLink}
+                        alt=""
+                        width={1920}
+                        height={1080}
+                        className="w-full h-[540px] lg:h-full object-cover"
+                      />
+                      <div className="absolute inset-0 bg-black bg-opacity-30"></div>{" "}
+                      {/* Overlay */}
                       <div className="absolute bottom-5 left-5 right-5 bg-black bg-opacity-50  text-white p-4 rounded-r-lg border-l-2 border-[#bb3523]">
-                        <span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[10px] lg:text-[14px] px-[10px] py-[5px]">{row?.categoryName}</span>
-                        <div onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)} className="cursor-pointer mt-2 lg:mt-0">
-                          <h3 className="text-[17px] lg:text-[42px] font-sans text-white">{row.title}</h3>
+                        <span className="text-[#bb3523] font-sans bg-[#b0b0af] border border-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-[10px] lg:text-[14px] px-[10px] py-[5px]">
+                          {row?.categoryName}
+                        </span>
+                        <div
+                          onClick={() => router.push(prefixPath + `/image/detail/${row?.slug}`)}
+                          className="cursor-pointer mt-2 lg:mt-0"
+                        >
+                          <h3 className="text-[17px] lg:text-[42px] font-sans text-white">
+                            {row.title}
+                          </h3>
                         </div>
                         <p className="text-[9px] lg:text-[12px] font-sans flex flex-row items-center gap-1 mt-1 text-white">
                           {getPublicLocaleTimestamp(new Date(row?.createdAt))} WIB {" | "}
@@ -154,18 +177,38 @@ const HeaderBannerKaltara = () => {
             ) : (
               <ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-[15px] flex-nowrap w-[95vw] lg:w-[380px] overflow-x-auto">
                 {content?.map((item: any) => (
-                  <li key={item?.id} className="flex gap-4 flex-row lg:w-full bg-[#f8f8f8] p-[10px] rounded-lg">
+                  <li
+                    key={item?.id}
+                    className="flex gap-4 flex-row lg:w-full bg-[#f8f8f8] p-[10px] rounded-lg"
+                  >
                     <div className="flex-shrink-0 w-24 rounded-lg">
-                      <Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[80px] object-cover rounded-lg" />
+                      <Image
+                        width={720}
+                        height={480}
+                        src={item?.thumbnailLink}
+                        alt={item?.title}
+                        className="w-full h-[80px] object-cover rounded-lg"
+                      />
                     </div>
                     <div className="w-[280px] lg:w-auto">
-                      <span className="text-[#bb3523] border border-[#bb3523] bg-white px-4 py-1 rounded-lg flex text-[8px] font-sans font-semibold uppercase w-fit">{item?.categoryName}</span>
-                      <div onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)} className="cursor-pointer">
+                      <span className="text-[#bb3523] border border-[#bb3523] bg-white px-4 py-1 rounded-lg flex text-[8px] font-sans font-semibold uppercase w-fit">
+                        {item?.categoryName}
+                      </span>
+                      <div
+                        onClick={() => router.push(prefixPath + `/image/detail/${item?.slug}`)}
+                        className="cursor-pointer"
+                      >
                         <h3 className="text-[12px] font-sans font-bold mt-2">{item?.title}</h3>
                       </div>
                       <p className="text-[10px] flex flex-row items-center font-sans gap-1 text-gray-500 mt-1">
-                        {formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
-                        <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+                        {formatDateToIndonesian(new Date(item?.createdAt))}{" "}
+                        {item?.timezone ? item?.timezone : "WIB"} |{" "}
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="1.2em"
+                          height="1.2em"
+                          viewBox="0 0 24 24"
+                        >
                           <path
                             fill="currentColor"
                             d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
diff --git a/src/components/features/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx b/src/components/features/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
index 673e7a2c..46bcac0b 100644
--- a/src/components/features/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
+++ b/src/components/features/landing-page/landing-polda-kaltara/latest-content-kaltara.tsx
@@ -1,16 +1,24 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import Image from "next/image";
-import { Skeleton } from "@/components/ui/skeleton";
-import { formatDateToIndonesian, secondToTimes } from "@/lib/utils/globals";
 import { useParams, usePathname } from "next/navigation";
-import { listData } from "@/lib/services/landing/landing";
 import { useRouter } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { useTranslations } from "next-intl";
+
+import { listData } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, secondToTimes } from "@/lib/utils/globals";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import { Reveal } from "../Reveal";
 
 const LatestContentKaltara = (props: { group: string; type: string }) => {
@@ -69,7 +77,8 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
       <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
     </svg>`;
 
-  const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+  const toBase64 = (str: string) =>
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -81,11 +90,22 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
               {pathname?.split("/")[1] == "in" ? (
                 <>
                   <span className="text-black ">{t("content")}</span>&nbsp;
-                  {props.type == "popular" ? "Terpopuler" : props.type == "latest" ? t("new") : "Serupa"}
+                  {props.type == "popular"
+                    ? "Terpopuler"
+                    : props.type == "latest"
+                      ? t("new")
+                      : "Serupa"}
                 </>
               ) : (
                 <>
-                  <span className="text-black ">{props.type == "popular" ? "Popular" : props.type == "latest" ? t("new") : "Serupa"}</span>&nbsp;
+                  <span className="text-black ">
+                    {props.type == "popular"
+                      ? "Popular"
+                      : props.type == "latest"
+                        ? t("new")
+                        : "Serupa"}
+                  </span>
+                  &nbsp;
                   {t("content")}
                 </>
               )}
@@ -148,7 +168,10 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                     <CarouselContent>
                       {content?.map((image: any) => (
                         <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/4">
-                          <div onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
+                          <div
+                            onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)}
+                            className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg"
+                          >
                             {/* Gambar */}
                             <Image
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
@@ -163,9 +186,14 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                             <div className="absolute inset-0 bg-black bg-opacity-30  rounded-md"></div>
 
                             <div className="absolute bottom-2 left-2 right-2 bg-gray-500/55 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{image?.title}</p>
+                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                                {image?.title}
+                              </p>
                               <p className="flex flex-row items-center text-[10px] gap-2">
-                                {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ? image?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {image.clickCount}{" "}
+                                {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
+                                {image?.timezone ? image?.timezone : "WIB"} |{" "}
+                                <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                                {image.clickCount}{" "}
                               </p>
                             </div>
                           </div>
@@ -177,7 +205,13 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "audio" ? (
@@ -187,9 +221,20 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                       {content?.map((audio: any) => (
                         <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/4">
                           <div className="flex flex-row gap-6">
-                            <div onClick={() => router.push(prefixPath + `/audio/detail/${audio?.slug}`)} className="cursor-pointer flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 gap-4 w-full">
+                            <div
+                              onClick={() =>
+                                router.push(prefixPath + `/audio/detail/${audio?.slug}`)
+                              }
+                              className="cursor-pointer flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 gap-4 w-full"
+                            >
                               <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-24 h-8 lg:h-16">
-                                <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                                <svg
+                                  width="32"
+                                  height="34"
+                                  viewBox="0 0 32 34"
+                                  fill="null"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
                                   <path
                                     d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                                     fill="white"
@@ -199,11 +244,20 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
 
                               <div className="flex flex-col  flex-1">
                                 <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm text-center items-center">
-                                  {formatDateToIndonesian(new Date(audio?.createdAt))} {audio?.timezone ? audio?.timezone : "WIB"} |&nbsp; <Icon icon="formkit:eye" width="15" height="15" />
+                                  {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
+                                  {audio?.timezone ? audio?.timezone : "WIB"} |&nbsp;{" "}
+                                  <Icon icon="formkit:eye" width="15" height="15" />
                                   &nbsp; {audio?.clickCount}{" "}
                                 </div>
-                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{audio?.title}</div>
-                                <p className="text-sm"> {audio?.duration ? secondToTimes(Number(audio?.duration)) : "00:00:00"}</p>
+                                <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                                  {audio?.title}
+                                </div>
+                                <p className="text-sm">
+                                  {" "}
+                                  {audio?.duration
+                                    ? secondToTimes(Number(audio?.duration))
+                                    : "00:00:00"}
+                                </p>
                               </div>
                             </div>
                           </div>
@@ -215,7 +269,13 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : selectedTab == "video" ? (
@@ -224,7 +284,10 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                     <CarouselContent>
                       {content?.map((video: any) => (
                         <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/4">
-                          <div onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)} className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg">
+                          <div
+                            onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)}
+                            className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg"
+                          >
                             {/* Gambar */}
                             <Image
                               placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
@@ -239,9 +302,14 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                             <div className="absolute inset-0 bg-black bg-opacity-30 rounded-lg"></div>
 
                             <div className="absolute bottom-2 left-2 right-2 bg-gray-500/55 border-l-4 border-[#bb3523] rounded-lg backdrop-blur-sm text-white p-2">
-                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{video?.title}</p>
+                              <p className="text-sm lg:text-base mb-2 font-semibold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
+                                {video?.title}
+                              </p>
                               <p className="flex flex-row items-center text-[10px] gap-2">
-                                {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ? video?.timezone : "WIB"} | <Icon icon="formkit:eye" width="15" height="15" /> {video.clickCount}{" "}
+                                {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
+                                {video?.timezone ? video?.timezone : "WIB"} |{" "}
+                                <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                                {video.clickCount}{" "}
                               </p>
                             </div>
                           </div>
@@ -253,7 +321,13 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                   </Carousel>
                 ) : (
                   <p className="flex items-center justify-center">
-                    <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                    <Image
+                      width={1920}
+                      height={1080}
+                      src="/assets/empty-data.png"
+                      alt="empty"
+                      className="h-52 w-52 my-4"
+                    />
                   </p>
                 )
               ) : content.length > 0 ? (
@@ -262,9 +336,20 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                     {content?.map((text: any) => (
                       <CarouselItem key={text?.id} className="md:basis-1/2 lg:basis-1/4">
                         <div className="md:basis-1/2 lg:basis-1/3">
-                          <div onClick={() => router.push(prefixPath + `/document/detail/${text?.slug}`)} className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4">
+                          <div
+                            onClick={() =>
+                              router.push(prefixPath + `/document/detail/${text?.slug}`)
+                            }
+                            className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4"
+                          >
                             <div className="flex items-center justify-center rounded-lg w-16 h-2 lg:h-16">
-                              <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <svg
+                                width="28"
+                                height="34"
+                                viewBox="0 0 28 34"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
                                 <path
                                   d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                                   fill="black"
@@ -279,10 +364,20 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                                 <Icon icon="formkit:eye" width="15" height="15" />
                                 {text?.clickCount}
                               </div>
-                              <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">{text?.title}</div>
+                              <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">
+                                {text?.title}
+                              </div>
                               <div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                                  <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="1em"
+                                  height="1em"
+                                  viewBox="0 0 512 512"
+                                >
+                                  <path
+                                    fill="#f00"
+                                    d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                                  />
                                 </svg>
                                 Download {t("document")}
                               </div>
@@ -297,14 +392,25 @@ const LatestContentKaltara = (props: { group: string; type: string }) => {
                 </Carousel>
               ) : (
                 <p className="flex items-center justify-center">
-                  <Image width={1920} height={1080} src="/assets/empty-data.png" alt="empty" className="h-52 w-52 my-4" />
+                  <Image
+                    width={1920}
+                    height={1080}
+                    src="/assets/empty-data.png"
+                    alt="empty"
+                    className="h-52 w-52 my-4"
+                  />
                 </p>
               )}
             </div>
           )}
 
           <div className="flex items-center flex-row justify-center mt-7">
-            <div onClick={() => router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)} className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]">
+            <div
+              onClick={() =>
+                router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)
+              }
+              className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"
+            >
               {t("seeAll")}
             </div>
           </div>
diff --git a/src/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx b/src/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
index 7f3b0549..c741e6a7 100644
--- a/src/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
+++ b/src/components/features/landing-page/landing-polda-kaltara/navbar-polda-kaltara.tsx
@@ -1,16 +1,25 @@
 "use client";
 
-import { Link, useRouter } from "@/i18n/navigation";
+import React, { useState } from "react";
 import Image from "next/image";
 import { useParams, usePathname } from "next/navigation";
-import React, { useState } from "react";
-import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
-import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import { useTranslations } from "next-intl";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+
+import { Button } from "@/components/ui/button";
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
 import LocalSwitcher from "@/components/partials/header/locale-switcher";
 import ThemeSwitcher from "@/components/partials/header/theme-switcher";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react/dist/iconify.js";
 
 const NavbarKaltara = () => {
   const params = useParams();
@@ -29,7 +38,13 @@ const NavbarKaltara = () => {
       <div className="flex items-center justify-between px-4 lg:px-20 py-4 gap-2">
         <div className="flex flex-row gap-8">
           <Link href={prefixPath} className="flex items-center">
-            <Image src="/assets/mediahub-logo.gif" alt="Media Hub Logo" width={200} height={300} className="object-contain" />
+            <Image
+              src="/assets/mediahub-logo.gif"
+              alt="Media Hub Logo"
+              width={200}
+              height={300}
+              className="object-contain"
+            />
           </Link>
 
           <div className="hidden lg:flex items-center ml-2 gap-5">
@@ -48,13 +63,19 @@ const NavbarKaltara = () => {
                     {/* </a> */}
                   </NavigationMenuTrigger>
                   <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden">
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/image/filter")}
+                      className="flex place-items-start gap-1.5 p-2 w-36"
+                    >
                       <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
                         <FiImage className="mr-2" />
                         {t("image")}
                       </p>
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/video/filter")}
+                      className="flex items-start gap-1.5 p-2 "
+                    >
                       {pathname?.split("/")[1] == "in" ? (
                         <>
                           <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
@@ -71,13 +92,19 @@ const NavbarKaltara = () => {
                         </>
                       )}
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/document/filter")}
+                      className="flex place-items-start gap-1.5 p-2"
+                    >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                         <FiFile className="mr-2" />
                         {t("text")}
                       </p>
                     </NavigationMenuLink>
-                    <NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
+                    <NavigationMenuLink
+                      onClick={() => router.push(prefixPath + "/audio/filter")}
+                      className="flex place-items-start gap-1.5 p-2 "
+                    >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                         <FiMusic className="mr-2" />
                         {t("audio")}{" "}
@@ -123,26 +150,47 @@ const NavbarKaltara = () => {
         </div>
 
         {/* Mobile Menu Toggle */}
-        <button className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden" onClick={() => setMenuOpen(!menuOpen)}>
+        <button
+          className="text-black dark:text-white right-0 size-20 h-10 w-10 lg:hidden"
+          onClick={() => setMenuOpen(!menuOpen)}
+        >
           {menuOpen ? (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path fill="currentColor" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
+              <path
+                fill="currentColor"
+                d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
+              />
             </svg>
           ) : (
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-              <path fill="currentColor" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
+              <path
+                fill="currentColor"
+                d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z"
+              />
             </svg>
           )}
         </button>
 
         <div className="hidden lg:flex items-center gap-5">
           <Link href="/tbnews/polda-kaltara">
-            <Image src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[110px] h-[50px]" />
+            <Image
+              src="/assets/polda/logo-tbnews.png"
+              alt="logo"
+              width={1920}
+              height={1080}
+              className="w-[110px] h-[50px]"
+            />
           </Link>
 
           <div className="flex items-center">
             <a href="https://tvradio.polri.go.id/">
-              <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
+              <Image
+                src="/assets/polriTv.png"
+                width={100}
+                height={120}
+                alt="polritv"
+                className="object-contain flex-auto "
+              />
             </a>
           </div>
 
@@ -195,13 +243,19 @@ const NavbarKaltara = () => {
                   {/* </a> */}
                 </NavigationMenuTrigger>
                 <NavigationMenuContent className="flex flex-col place-content-start rounded-md overflow-hidden">
-                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/image/filter")} className="flex place-items-start gap-1.5 p-2 w-36">
+                  <NavigationMenuLink
+                    onClick={() => router.push(prefixPath + "/image/filter")}
+                    className="flex place-items-start gap-1.5 p-2 w-36"
+                  >
                     <p className="text-slate-600  dark:text-white hover:text-[#bb3523] flex flex-row items-center py-2 cursor-pointer">
                       <FiImage className="mr-2" />
                       {t("image")}
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/video/filter")} className="flex items-start gap-1.5 p-2 ">
+                  <NavigationMenuLink
+                    onClick={() => router.push(prefixPath + "/video/filter")}
+                    className="flex items-start gap-1.5 p-2 "
+                  >
                     {pathname?.split("/")[1] == "in" ? (
                       <>
                         <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
@@ -218,13 +272,19 @@ const NavbarKaltara = () => {
                       </>
                     )}
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/document/filter")} className="flex place-items-start gap-1.5 p-2">
+                  <NavigationMenuLink
+                    onClick={() => router.push(prefixPath + "/document/filter")}
+                    className="flex place-items-start gap-1.5 p-2"
+                  >
                     <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                       <FiFile className="mr-2" />
                       {t("text")}
                     </p>
                   </NavigationMenuLink>
-                  <NavigationMenuLink onClick={() => router.push(prefixPath + "/audio/filter")} className="flex place-items-start gap-1.5 p-2 ">
+                  <NavigationMenuLink
+                    onClick={() => router.push(prefixPath + "/audio/filter")}
+                    className="flex place-items-start gap-1.5 p-2 "
+                  >
                     <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
                       <FiMusic className="mr-2" />
                       {t("audio")}{" "}
@@ -270,12 +330,24 @@ const NavbarKaltara = () => {
           <div className="flex lg:hidden flex-col items-center gap-1">
             <div className="flex flex-row justify-between items-center gap-2">
               <Link href="/tbnews/polda-kaltara" className="text-white">
-                <Image src="/assets/polda/logo-tbnews.png" alt="logo" width={1920} height={1080} className="w-[100px] h-[40px]" />
+                <Image
+                  src="/assets/polda/logo-tbnews.png"
+                  alt="logo"
+                  width={1920}
+                  height={1080}
+                  className="w-[100px] h-[40px]"
+                />
               </Link>
 
               <div className="flex items-center">
                 <a href="https://tvradio.polri.go.id/">
-                  <Image src="/assets/polriTv.png" width={100} height={120} alt="polritv" className="object-contain flex-auto " />
+                  <Image
+                    src="/assets/polriTv.png"
+                    width={100}
+                    height={120}
+                    alt="polritv"
+                    className="object-contain flex-auto "
+                  />
                 </a>
               </div>
 
@@ -296,7 +368,12 @@ const NavbarKaltara = () => {
                   className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
                 />
                 <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="13"
+                    height="13"
+                    viewBox="0 0 24 24"
+                  >
                     <path
                       fill="currentColor"
                       fill-rule="evenodd"
diff --git a/src/components/features/landing-page/landing-polda-kaltara/search-section-kaltara.tsx b/src/components/features/landing-page/landing-polda-kaltara/search-section-kaltara.tsx
index dd3d70c1..dbdb543b 100644
--- a/src/components/features/landing-page/landing-polda-kaltara/search-section-kaltara.tsx
+++ b/src/components/features/landing-page/landing-polda-kaltara/search-section-kaltara.tsx
@@ -1,7 +1,9 @@
-import { Input } from "@/components/ui/input";
+import React, { useState } from "react";
 import { useRouter } from "@/i18n/navigation";
 import { useTranslations } from "next-intl";
-import React, { useState } from "react";
+
+import { Input } from "@/components/ui/input";
+
 import { Reveal } from "../Reveal";
 
 const SearchSectionKaltara = () => {
@@ -14,16 +16,29 @@ const SearchSectionKaltara = () => {
       <Reveal>
         <div className="flex flex-col items-center text-center py-12 px-4 md:py-16">
           {/* Heading */}
-          <h2 className="text-[15px] lg:text-[32px] font-sans md:text-3xl font-bold text-black">Liputan apa yang sedang anda cari?</h2>
-          <p className="text-gray-600 mt-2 max-w-lg text-[10px] lg:text-[16px] font-sans md:text-base">Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres di seluruh Indonesia</p>
+          <h2 className="text-[15px] lg:text-[32px] font-sans md:text-3xl font-bold text-black">
+            Liputan apa yang sedang anda cari?
+          </h2>
+          <p className="text-gray-600 mt-2 max-w-lg text-[10px] lg:text-[16px] font-sans md:text-base">
+            Liputan terkini yang bersumber langsung dari kegiatan Polri di Mabes, Polda dan Polres
+            di seluruh Indonesia
+          </p>
 
           {/* Subjudul */}
-          <h3 className="text-[10px] md:text-[20px] font-sans font-semibold mt-6">Temukan Liputan Anda</h3>
+          <h3 className="text-[10px] md:text-[20px] font-sans font-semibold mt-6">
+            Temukan Liputan Anda
+          </h3>
 
           {/* Search Bar */}
           <div className="relative mt-4 w-full max-w-sm md:max-w-md">
-            <Input type="text" placeholder="Cari liputan disini..." className="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm md:text-base text-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-sans" />
-            <button className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500">🔍</button>
+            <Input
+              type="text"
+              placeholder="Cari liputan disini..."
+              className="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm md:text-base text-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-sans"
+            />
+            <button className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500">
+              🔍
+            </button>
           </div>
         </div>
       </Reveal>
diff --git a/src/components/features/landing-page/navbar.tsx b/src/components/features/landing-page/navbar.tsx
index 16d3d5e0..5ea4447f 100644
--- a/src/components/features/landing-page/navbar.tsx
+++ b/src/components/features/landing-page/navbar.tsx
@@ -1,37 +1,18 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import ThemeSwitcher from "@/components/partials/header/theme-switcher";
-import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
-import { useParams, usePathname } from "next/navigation";
-import { generateLocalizedPath } from "@/lib/utils/globals";
-import { Link } from "@/i18n/navigation";
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../../ui/dropdown-menu";
 import Image from "next/image";
-import { Icon } from "../../ui/icon";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { useParams, usePathname } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import Cookies from "js-cookie";
-import { getInfoProfile } from "@/lib/services/auth";
 import { useTranslations } from "next-intl";
-import { useRouter } from "@/i18n/navigation";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+
+import { getInfoProfile } from "@/lib/services/auth";
+import { getUserNotifications, listRole } from "@/lib/services/landing/landing";
+import { generateLocalizedPath } from "@/lib/utils/globals";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
-import LocalSwitcher from "../../partials/header/locale-switcher";
 import {
   Dialog,
   DialogClose,
@@ -42,13 +23,29 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { getUserNotifications, listRole } from "@/lib/services/landing/landing";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import ThemeSwitcher from "@/components/partials/header/theme-switcher";
+
+import LocalSwitcher from "../../partials/header/locale-switcher";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
+import { Icon } from "../../ui/icon";
 
 type Detail = {
   id: number;
@@ -90,11 +87,7 @@ const Navbar = () => {
   const [notificationsUpdate, setNotificationsUpdate] = useState([]);
   const [selectedTab, setSelectedTab] = useState("image");
 
-  let prefixPath = poldaName
-    ? `/polda/${poldaName}`
-    : satkerName
-    ? `/satker/${satkerName}`
-    : "/";
+  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
 
   let menu = "";
 
@@ -252,9 +245,7 @@ const Navbar = () => {
                       )}
                     </NavigationMenuLink>
                     <NavigationMenuLink
-                      onClick={() =>
-                        router.push(prefixPath + "/document/filter")
-                      }
+                      onClick={() => router.push(prefixPath + "/document/filter")}
                       className="flex place-items-start gap-1 py-1 px-3"
                     >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-1 cursor-pointer">
@@ -407,12 +398,7 @@ const Navbar = () => {
               className="pl-8 pr-4 py-1 w-28 text-[13px] border rounded-full focus:outline-none dark:text-white"
             />
             <span className="absolute left-4 top-1/2 transform -translate-y-1/2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="13"
-                height="13"
-                viewBox="0 0 24 24"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24">
                 <path
                   fill="currentColor"
                   fill-rule="evenodd"
@@ -468,10 +454,7 @@ const Navbar = () => {
             )}
           </div> */}
 
-          {roleId === "5" ||
-          roleId === "6" ||
-          roleId === "7" ||
-          roleId === "8" ? (
+          {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
             <>
               {/* Inbox */}
               <Popover>
@@ -486,10 +469,7 @@ const Navbar = () => {
                     />
                   </a>
                 </PopoverTrigger>
-                <PopoverContent
-                  className="w-[320px] p-0 flex flex-col mt-2"
-                  align="end"
-                >
+                <PopoverContent className="w-[320px] p-0 flex flex-col mt-2" align="end">
                   <Tabs
                     value={selectedTab}
                     onValueChange={setSelectedTab}
@@ -534,11 +514,7 @@ const Navbar = () => {
                     <TabsContent value="notif-tab">
                       <div className="flex flex-col justify-center my-3">
                         {notifications?.map((list: any) => (
-                          <a
-                            className="flex flex-row"
-                            href={list.redirectUrl}
-                            key={list.id}
-                          >
+                          <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                             <div className="ml-4">
                               <Image
                                 src="/assets/avatar-profile.png"
@@ -548,29 +524,20 @@ const Navbar = () => {
                                 className="items-center mr-3"
                               />
                             </div>
-                            <div className="text-wrap text-left">
-                              {list?.message}
-                            </div>
+                            <div className="text-wrap text-left">{list?.message}</div>
                             <div>
                               <small>
                                 {`${new Date(list?.createdAt).getDate()}/${
                                   new Date(list?.createdAt).getMonth() + 1
-                                }/${new Date(
+                                }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                   list?.createdAt
-                                ).getFullYear()} ${new Date(
-                                  list?.createdAt
-                                ).getHours()}:${new Date(
-                                  list?.createdAt
-                                ).getMinutes()}`}{" "}
+                                ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                               </small>
                             </div>
                           </a>
                         ))}
                         <Link href="/inbox" legacyBehavior>
-                          <p
-                            className="text-[15px] text-center py-2"
-                            role="button"
-                          >
+                          <p className="text-[15px] text-center py-2" role="button">
                             {t("seeAll")}
                           </p>
                         </Link>
@@ -579,11 +546,7 @@ const Navbar = () => {
                     <TabsContent value="notifupdate-tab">
                       <div className="">
                         {notificationsUpdate?.map((list: any) => (
-                          <a
-                            className="flex flex-row"
-                            href={list.redirectUrl}
-                            key={list.id}
-                          >
+                          <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                             <div className="ml-4">
                               <Image
                                 src="/assets/avatar-profile.png"
@@ -594,30 +557,21 @@ const Navbar = () => {
                               />
                             </div>
                             <div className="">
-                              <div className="text-wrap text-left">
-                                {list?.message}
-                              </div>
+                              <div className="text-wrap text-left">{list?.message}</div>
                               <div>
                                 <small>
                                   {`${new Date(list?.createdAt).getDate()}/${
                                     new Date(list?.createdAt).getMonth() + 1
-                                  }/${new Date(
+                                  }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                     list?.createdAt
-                                  ).getFullYear()} ${new Date(
-                                    list?.createdAt
-                                  ).getHours()}:${new Date(
-                                    list?.createdAt
-                                  ).getMinutes()}`}{" "}
+                                  ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                                 </small>
                               </div>
                             </div>
                           </a>
                         ))}
                         <Link href="/inbox/update" legacyBehavior>
-                          <p
-                            className="text-[15px] text-center py-2"
-                            role="button"
-                          >
+                          <p className="text-[15px] text-center py-2" role="button">
                             {t("seeAll")}
                           </p>
                         </Link>
@@ -667,11 +621,7 @@ const Navbar = () => {
                         href: "/content-management/galery",
                       },
                     ].map((item, index) => (
-                      <Link
-                        href={item.href}
-                        key={`info-menu-${index}`}
-                        className="cursor-pointer"
-                      >
+                      <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
                         <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                           <Icon icon={item.icon} className="w-4 h-4" />
                           {item.name}
@@ -711,17 +661,10 @@ const Navbar = () => {
                 <PopoverTrigger asChild>
                   <a className="cursor-pointer" onClick={() => test()}>
                     {" "}
-                    <Icon
-                      icon="basil:envelope-outline"
-                      color="black"
-                      width="30"
-                    />
+                    <Icon icon="basil:envelope-outline" color="black" width="30" />
                   </a>
                 </PopoverTrigger>
-                <PopoverContent
-                  className=" p-0 h-32 flex flex-col mt-2"
-                  align="end"
-                >
+                <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
                   <Tabs
                     value={selectedTab}
                     onValueChange={setSelectedTab}
@@ -760,36 +703,21 @@ const Navbar = () => {
                       </TabsTrigger>
                     </TabsList>
                   </Tabs>
-                  <div
-                    className={`flex justify-center my-3 ${
-                      isMessageActive ? "active" : ""
-                    }`}
-                  >
+                  <div className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}>
                     {notifications?.map((list: any) => (
                       <a className="" href={list.redirectUrl} key={list.id}>
                         <div className="">
-                          <Image
-                            src="/assets/avatar-profile.png"
-                            alt="..."
-                            width={5}
-                            height={10}
-                          />
+                          <Image src="/assets/avatar-profile.png" alt="..." width={5} height={10} />
                         </div>
                         <div className="">
-                          <div className="text-wrap text-left">
-                            {list?.message}
-                          </div>
+                          <div className="text-wrap text-left">{list?.message}</div>
                           <div>
                             <small>
                               {`${new Date(list?.createdAt).getDate()}/${
                                 new Date(list?.createdAt).getMonth() + 1
-                              }/${new Date(
+                              }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                 list?.createdAt
-                              ).getFullYear()} ${new Date(
-                                list?.createdAt
-                              ).getHours()}:${new Date(
-                                list?.createdAt
-                              ).getMinutes()}`}{" "}
+                              ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                             </small>
                           </div>
                         </div>
@@ -807,11 +735,7 @@ const Navbar = () => {
                     }`}
                   >
                     {notificationsUpdate?.map((list: any) => (
-                      <a
-                        className="flex flex-row"
-                        href={list.redirectUrl}
-                        key={list.id}
-                      >
+                      <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                         <div className="ml-4">
                           <Image
                             src="/assets/avatar-profile.png"
@@ -822,20 +746,14 @@ const Navbar = () => {
                           />
                         </div>
                         <div className="">
-                          <div className="text-wrap text-left">
-                            {list?.message}
-                          </div>
+                          <div className="text-wrap text-left">{list?.message}</div>
                           <div>
                             <small>
                               {`${new Date(list?.createdAt).getDate()}/${
                                 new Date(list?.createdAt).getMonth() + 1
-                              }/${new Date(
+                              }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                 list?.createdAt
-                              ).getFullYear()} ${new Date(
-                                list?.createdAt
-                              ).getHours()}:${new Date(
-                                list?.createdAt
-                              ).getMinutes()}`}{" "}
+                              ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                             </small>
                           </div>
                         </div>
@@ -892,11 +810,7 @@ const Navbar = () => {
                         href: "/dashboard",
                       },
                     ].map((item, index) => (
-                      <Link
-                        href={item.href}
-                        key={`info-menu-${index}`}
-                        className="cursor-pointer"
-                      >
+                      <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
                         <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                           <Icon icon={item.icon} className="w-4 h-4" />
                           {item.name}
@@ -939,9 +853,7 @@ const Navbar = () => {
                 </DialogTrigger>
                 <DialogContent size="sm" className="sm:max-w-[425px]">
                   <div className="flex flex-col w-full gap-1">
-                    <p className="text-lg font-semibold text-center">
-                      {t("categoryReg")}
-                    </p>
+                    <p className="text-lg font-semibold text-center">{t("categoryReg")}</p>
                     <p className="text-base text-center">{t("selectOne")}</p>
                   </div>
                   <div>
@@ -982,24 +894,14 @@ const Navbar = () => {
           onClick={() => setMenuOpen(!menuOpen)}
         >
           {menuOpen ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <path
                 fill="currentColor"
                 d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z"
               />
             </svg>
           ) : (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-            >
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
               <path
                 fill="currentColor"
                 d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z"
@@ -1065,9 +967,7 @@ const Navbar = () => {
                       )}
                     </NavigationMenuLink>
                     <NavigationMenuLink
-                      onClick={() =>
-                        router.push(prefixPath + "/document/filter")
-                      }
+                      onClick={() => router.push(prefixPath + "/document/filter")}
                       className="flex place-items-start gap-1.5 p-2"
                     >
                       <p className="text-slate-600 text-left dark:text-white hover:text-[#bb3523] flex flex-row justify-center items-center py-2 cursor-pointer">
@@ -1088,9 +988,7 @@ const Navbar = () => {
                 </NavigationMenuItem>
                 <NavigationMenuItem>
                   <Link href={prefixPath + "/schedule"} legacyBehavior passHref>
-                    <NavigationMenuLink
-                      className={navigationMenuTriggerStyle()}
-                    >
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       <span>
                         <svg
                           className="mr-2"
@@ -1112,9 +1010,7 @@ const Navbar = () => {
                 </NavigationMenuItem>
                 <NavigationMenuItem>
                   <Link href={prefixPath + "/indeks"} legacyBehavior passHref>
-                    <NavigationMenuLink
-                      className={navigationMenuTriggerStyle()}
-                    >
+                    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                       <span>
                         <svg
                           className="mr-2"
@@ -1303,37 +1199,24 @@ const Navbar = () => {
                 </Dialog>
               </>
             )} */}
-              {roleId === "5" ||
-              roleId === "6" ||
-              roleId === "7" ||
-              roleId === "8" ? (
+              {roleId === "5" || roleId === "6" || roleId === "7" || roleId === "8" ? (
                 <>
                   {/* Inbox */}
                   <Popover>
                     <PopoverTrigger asChild>
                       <a className="cursor-pointer" onClick={() => test()}>
                         {" "}
-                        <Icon
-                          icon="basil:envelope-outline"
-                          color="black"
-                          width="30"
-                        />
+                        <Icon icon="basil:envelope-outline" color="black" width="30" />
                       </a>
                     </PopoverTrigger>
-                    <PopoverContent
-                      className="w-[320px] p-0 flex flex-col mt-2"
-                      align="end"
-                    >
+                    <PopoverContent className="w-[320px] p-0 flex flex-col mt-2" align="end">
                       <Tabs
                         value={selectedTab}
                         onValueChange={setSelectedTab}
                         className="flex flex-col"
                       >
                         <TabsList className="grid grid-cols-2 lg:flex lg:flex-row">
-                          <TabsTrigger
-                            value="notif-tab"
-                            className="focus:bg-none"
-                          >
+                          <TabsTrigger value="notif-tab" className="focus:bg-none">
                             <a
                               className={`flex items-center justify-center cursor-pointer gap-4 rounded-lg p-3 text-sm ml-3 mr-4 ${
                                 selectedTab === "notif-tab"
@@ -1371,11 +1254,7 @@ const Navbar = () => {
                         <TabsContent value="notif-tab">
                           <div className="flex flex-col justify-center my-3">
                             {notifications?.map((list: any) => (
-                              <a
-                                className="flex flex-row"
-                                href={list.redirectUrl}
-                                key={list.id}
-                              >
+                              <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                                 <div className="ml-4">
                                   <Image
                                     width={5}
@@ -1385,29 +1264,20 @@ const Navbar = () => {
                                     className="items-center mr-3"
                                   />
                                 </div>
-                                <div className="text-wrap text-left">
-                                  {list?.message}
-                                </div>
+                                <div className="text-wrap text-left">{list?.message}</div>
                                 <div>
                                   <small>
                                     {`${new Date(list?.createdAt).getDate()}/${
                                       new Date(list?.createdAt).getMonth() + 1
-                                    }/${new Date(
+                                    }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                       list?.createdAt
-                                    ).getFullYear()} ${new Date(
-                                      list?.createdAt
-                                    ).getHours()}:${new Date(
-                                      list?.createdAt
-                                    ).getMinutes()}`}{" "}
+                                    ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                                   </small>
                                 </div>
                               </a>
                             ))}
                             <Link href="/inbox" legacyBehavior>
-                              <p
-                                className="text-[15px] text-center py-2"
-                                role="button"
-                              >
+                              <p className="text-[15px] text-center py-2" role="button">
                                 {t("seeAll")}
                               </p>
                             </Link>
@@ -1416,11 +1286,7 @@ const Navbar = () => {
                         <TabsContent value="notifupdate-tab">
                           <div className="">
                             {notificationsUpdate?.map((list: any) => (
-                              <a
-                                className="flex flex-row"
-                                href={list.redirectUrl}
-                                key={list.id}
-                              >
+                              <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                                 <div className="ml-4">
                                   <Image
                                     width={5}
@@ -1431,32 +1297,21 @@ const Navbar = () => {
                                   />
                                 </div>
                                 <div className="">
-                                  <div className="text-wrap text-left">
-                                    {list?.message}
-                                  </div>
+                                  <div className="text-wrap text-left">{list?.message}</div>
                                   <div>
                                     <small>
-                                      {`${new Date(
-                                        list?.createdAt
-                                      ).getDate()}/${
+                                      {`${new Date(list?.createdAt).getDate()}/${
                                         new Date(list?.createdAt).getMonth() + 1
-                                      }/${new Date(
+                                      }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                         list?.createdAt
-                                      ).getFullYear()} ${new Date(
-                                        list?.createdAt
-                                      ).getHours()}:${new Date(
-                                        list?.createdAt
-                                      ).getMinutes()}`}{" "}
+                                      ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                                     </small>
                                   </div>
                                 </div>
                               </a>
                             ))}
                             <Link href="/inbox/update" legacyBehavior>
-                              <p
-                                className="text-[15px] text-center py-2"
-                                role="button"
-                              >
+                              <p className="text-[15px] text-center py-2" role="button">
                                 {t("seeAll")}
                               </p>
                             </Link>
@@ -1527,10 +1382,7 @@ const Navbar = () => {
                               className="w-full flex items-center gap-2"
                               onClick={onLogout}
                             >
-                              <Icon
-                                icon="heroicons:power"
-                                className="w-4 h-4"
-                              />
+                              <Icon icon="heroicons:power" className="w-4 h-4" />
                               {t("logOut")}
                             </button>
                           </Link>
@@ -1553,17 +1405,10 @@ const Navbar = () => {
                     <PopoverTrigger asChild>
                       <a className="cursor-pointer" onClick={() => test()}>
                         {" "}
-                        <Icon
-                          icon="basil:envelope-outline"
-                          color="black"
-                          width="30"
-                        />
+                        <Icon icon="basil:envelope-outline" color="black" width="30" />
                       </a>
                     </PopoverTrigger>
-                    <PopoverContent
-                      className=" p-0 h-32 flex flex-col mt-2"
-                      align="end"
-                    >
+                    <PopoverContent className=" p-0 h-32 flex flex-col mt-2" align="end">
                       <Tabs
                         value={selectedTab}
                         onValueChange={setSelectedTab}
@@ -1603,9 +1448,7 @@ const Navbar = () => {
                         </TabsList>
                       </Tabs>
                       <div
-                        className={`flex justify-center my-3 ${
-                          isMessageActive ? "active" : ""
-                        }`}
+                        className={`flex justify-center my-3 ${isMessageActive ? "active" : ""}`}
                       >
                         {notifications?.map((list: any) => (
                           <a className="" href={list.redirectUrl} key={list.id}>
@@ -1618,20 +1461,14 @@ const Navbar = () => {
                               />
                             </div>
                             <div className="">
-                              <div className="text-wrap text-left">
-                                {list?.message}
-                              </div>
+                              <div className="text-wrap text-left">{list?.message}</div>
                               <div>
                                 <small>
                                   {`${new Date(list?.createdAt).getDate()}/${
                                     new Date(list?.createdAt).getMonth() + 1
-                                  }/${new Date(
+                                  }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                     list?.createdAt
-                                  ).getFullYear()} ${new Date(
-                                    list?.createdAt
-                                  ).getHours()}:${new Date(
-                                    list?.createdAt
-                                  ).getMinutes()}`}{" "}
+                                  ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                                 </small>
                               </div>
                             </div>
@@ -1649,11 +1486,7 @@ const Navbar = () => {
                         }`}
                       >
                         {notificationsUpdate?.map((list: any) => (
-                          <a
-                            className="flex flex-row"
-                            href={list.redirectUrl}
-                            key={list.id}
-                          >
+                          <a className="flex flex-row" href={list.redirectUrl} key={list.id}>
                             <div className="ml-4">
                               <Image
                                 width={5}
@@ -1664,30 +1497,21 @@ const Navbar = () => {
                               />
                             </div>
                             <div className="">
-                              <div className="text-wrap text-left">
-                                {list?.message}
-                              </div>
+                              <div className="text-wrap text-left">{list?.message}</div>
                               <div>
                                 <small>
                                   {`${new Date(list?.createdAt).getDate()}/${
                                     new Date(list?.createdAt).getMonth() + 1
-                                  }/${new Date(
+                                  }/${new Date(list?.createdAt).getFullYear()} ${new Date(
                                     list?.createdAt
-                                  ).getFullYear()} ${new Date(
-                                    list?.createdAt
-                                  ).getHours()}:${new Date(
-                                    list?.createdAt
-                                  ).getMinutes()}`}{" "}
+                                  ).getHours()}:${new Date(list?.createdAt).getMinutes()}`}{" "}
                                 </small>
                               </div>
                             </div>
                           </a>
                         ))}
                         <Link href="/inbox" legacyBehavior>
-                          <p
-                            className="text-[15px] text-center py-2"
-                            role="button"
-                          >
+                          <p className="text-[15px] text-center py-2" role="button">
                             {t("seeAll")}
                           </p>
                         </Link>
@@ -1758,10 +1582,7 @@ const Navbar = () => {
                               className="w-full flex items-center gap-2"
                               onClick={onLogout}
                             >
-                              <Icon
-                                icon="heroicons:power"
-                                className="w-4 h-4"
-                              />
+                              <Icon icon="heroicons:power" className="w-4 h-4" />
                               {t("logOut")}
                             </button>
                           </Link>
@@ -1790,12 +1611,8 @@ const Navbar = () => {
                     </DialogTrigger>
                     <DialogContent size="sm" className="sm:max-w-[425px]">
                       <div className="flex flex-col w-full gap-1">
-                        <p className="text-lg font-semibold text-center">
-                          {t("categoryReg")}
-                        </p>
-                        <p className="text-base text-center">
-                          {t("selectOne")}
-                        </p>
+                        <p className="text-lg font-semibold text-center">{t("categoryReg")}</p>
+                        <p className="text-base text-center">{t("selectOne")}</p>
                       </div>
                       <div>
                         {role?.map((row: any) => (
@@ -1807,14 +1624,9 @@ const Navbar = () => {
                               className=""
                               value={row.id}
                               checked={category == `${row.id}`}
-                              onChange={(event) =>
-                                setCategory(event.target.value)
-                              }
+                              onChange={(event) => setCategory(event.target.value)}
                             />
-                            <label
-                              className="ml-2"
-                              htmlFor={`category${row.id}`}
-                            >
+                            <label className="ml-2" htmlFor={`category${row.id}`}>
                               {row.name}
                             </label>
                           </div>
diff --git a/src/components/features/landing-page/navigation-menu.tsx b/src/components/features/landing-page/navigation-menu.tsx
index c92095c5..39ae6dd5 100644
--- a/src/components/features/landing-page/navigation-menu.tsx
+++ b/src/components/features/landing-page/navigation-menu.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import Link from "next/link"
+import * as React from "react";
+import Link from "next/link";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -12,7 +12,7 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
+} from "@/components/ui/navigation-menu";
 
 const components: { title: string; href: string; description: string }[] = [
   {
@@ -24,8 +24,7 @@ const components: { title: string; href: string; description: string }[] = [
   {
     title: "Hover Card",
     href: "/docs/primitives/hover-card",
-    description:
-      "For sighted users to preview content available behind a link.",
+    description: "For sighted users to preview content available behind a link.",
   },
   {
     title: "Progress",
@@ -50,7 +49,7 @@ const components: { title: string; href: string; description: string }[] = [
     description:
       "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
   },
-]
+];
 
 export function NavigationMenuDemo() {
   return (
@@ -66,12 +65,9 @@ export function NavigationMenuDemo() {
                     className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                     href="/"
                   >
-                    <div className="mb-2 mt-4 text-lg font-medium">
-                      shadcn/ui
-                    </div>
+                    <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
                     <p className="text-sm leading-tight text-muted-foreground">
-                      Beautifully designed components built with Radix UI and
-                      Tailwind CSS.
+                      Beautifully designed components built with Radix UI and Tailwind CSS.
                     </p>
                   </a>
                 </NavigationMenuLink>
@@ -93,11 +89,7 @@ export function NavigationMenuDemo() {
           <NavigationMenuContent>
             <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
               {components.map((component) => (
-                <ListItem
-                  key={component.title}
-                  title={component.title}
-                  href={component.href}
-                >
+                <ListItem key={component.title} title={component.title} href={component.href}>
                   {component.description}
                 </ListItem>
               ))}
@@ -113,31 +105,28 @@ export function NavigationMenuDemo() {
         </NavigationMenuItem>
       </NavigationMenuList>
     </NavigationMenu>
-  )
+  );
 }
 
-const ListItem = React.forwardRef<
-  React.ElementRef<"a">,
-  React.ComponentPropsWithoutRef<"a">
->(({ className, title, children, ...props }, ref) => {
-  return (
-    <li>
-      <NavigationMenuLink asChild>
-        <a
-          ref={ref}
-          className={cn(
-            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-            className
-          )}
-          {...props}
-        >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
-            {children}
-          </p>
-        </a>
-      </NavigationMenuLink>
-    </li>
-  )
-})
-ListItem.displayName = "ListItem"
+const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
+  ({ className, title, children, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+              className
+            )}
+            {...props}
+          >
+            <div className="text-sm font-medium leading-none">{title}</div>
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    );
+  }
+);
+ListItem.displayName = "ListItem";
diff --git a/src/components/features/landing-page/new-content.tsx b/src/components/features/landing-page/new-content.tsx
index e31eeb30..a7f214ac 100644
--- a/src/components/features/landing-page/new-content.tsx
+++ b/src/components/features/landing-page/new-content.tsx
@@ -1,7 +1,14 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import Image from "next/image";
+import { useParams, usePathname } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian, secondToTimes } from "@/lib/utils/globals";
 import {
   Carousel,
   CarouselContent,
@@ -9,15 +16,10 @@ import {
   CarouselNext,
   CarouselPrevious,
 } from "@/components/ui/carousel";
-import { useParams, usePathname } from "next/navigation";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian, secondToTimes } from "@/lib/utils/globals";
-import { getListContent } from "@/lib/services/landing/landing";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Reveal } from "./Reveal";
-import { useTranslations } from "next-intl";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import { Skeleton } from "../../ui/skeleton";
-import Image from "next/image";
+import { Reveal } from "./Reveal";
 
 const NewContent = (props: { group: string; type: string }) => {
   const [newContent, setNewContent] = useState<any>();
@@ -31,11 +33,7 @@ const NewContent = (props: { group: string; type: string }) => {
   const satkerName = params?.satker_name;
   const t = useTranslations("LandingPage");
 
-  let prefixPath = poldaName
-    ? `/polda/${poldaName}`
-    : satkerName
-    ? `/satker/${satkerName}`
-    : "/";
+  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -59,22 +57,20 @@ const NewContent = (props: { group: string; type: string }) => {
         selectedTab == "image"
           ? "1"
           : selectedTab == "video"
-          ? "2"
-          : selectedTab == "text"
-          ? "3"
-          : selectedTab == "audio"
-          ? "4"
-          : "",
+            ? "2"
+            : selectedTab == "text"
+              ? "3"
+              : selectedTab == "audio"
+                ? "4"
+                : "",
       group:
         props.group == "mabes"
           ? ""
           : props.group == "polda" && poldaName && String(poldaName)?.length > 1
-          ? poldaName
-          : props.group == "satker" &&
-            satkerName &&
-            String(satkerName)?.length > 1
-          ? "satker-" + satkerName
-          : "",
+            ? poldaName
+            : props.group == "satker" && satkerName && String(satkerName)?.length > 1
+              ? "satker-" + satkerName
+              : "",
       isInt: locale == "en" ? true : false,
     };
     const response = await getListContent(request);
@@ -97,9 +93,7 @@ const NewContent = (props: { group: string; type: string }) => {
   </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <div className="px-4 py-4">
@@ -112,8 +106,8 @@ const NewContent = (props: { group: string; type: string }) => {
                 {props.type == "popular"
                   ? "Terpopuler"
                   : props.type == "latest"
-                  ? t("new")
-                  : "Serupa"}
+                    ? t("new")
+                    : "Serupa"}
               </>
             ) : (
               <>
@@ -121,8 +115,8 @@ const NewContent = (props: { group: string; type: string }) => {
                   {props.type == "popular"
                     ? "Popular"
                     : props.type == "latest"
-                    ? t("new")
-                    : "Serupa"}
+                      ? t("new")
+                      : "Serupa"}
                 </span>
                 &nbsp;
                 {t("content")}
@@ -169,16 +163,9 @@ const NewContent = (props: { group: string; type: string }) => {
                   <Carousel className="w-full mx-auto">
                     <CarouselContent>
                       {newContent?.map((image: any) => (
-                        <CarouselItem
-                          key={image?.id}
-                          className="md:basis-1/2 lg:basis-1/3"
-                        >
+                        <CarouselItem key={image?.id} className="md:basis-1/2 lg:basis-1/3">
                           <div
-                            onClick={() =>
-                              router.push(
-                                prefixPath + `/image/detail/${image?.slug}`
-                              )
-                            }
+                            onClick={() => router.push(prefixPath + `/image/detail/${image?.slug}`)}
                             className="cursor-pointer relative group overflow-hidden shadow-md hover:shadow-lg"
                           >
                             <Image
@@ -196,15 +183,9 @@ const NewContent = (props: { group: string; type: string }) => {
                                 {image?.title}
                               </p>
                               <p className="flex flex-row items-center text-[10px] gap-1">
-                                {formatDateToIndonesian(
-                                  new Date(image?.createdAt)
-                                )}{" "}
+                                {formatDateToIndonesian(new Date(image?.createdAt))}{" "}
                                 {image?.timezone ? image?.timezone : "WIB"} |{" "}
-                                <Icon
-                                  icon="formkit:eye"
-                                  width="15"
-                                  height="15"
-                                />{" "}
+                                <Icon icon="formkit:eye" width="15" height="15" />{" "}
                                 {image.clickCount}{" "}
                               </p>
                             </div>
@@ -231,16 +212,11 @@ const NewContent = (props: { group: string; type: string }) => {
                   <Carousel className="w-full max-w-7xl mx-auto">
                     <CarouselContent>
                       {newContent?.map((audio: any) => (
-                        <CarouselItem
-                          key={audio?.id}
-                          className="md:basis-1/2 lg:basis-1/3 "
-                        >
+                        <CarouselItem key={audio?.id} className="md:basis-1/2 lg:basis-1/3 ">
                           <div className="flex flex-row gap-6">
                             <div
                               onClick={() =>
-                                router.push(
-                                  prefixPath + `/audio/detail/${audio?.slug}`
-                                )
+                                router.push(prefixPath + `/audio/detail/${audio?.slug}`)
                               }
                               className="cursor-pointer flex flex-row sm:flex-row items-center bg-white dark:bg-gray-800 shadow-md border rounded-lg p-4 my-3 gap-4 w-full "
                             >
@@ -261,16 +237,9 @@ const NewContent = (props: { group: string; type: string }) => {
 
                               <div className="flex flex-col  flex-1">
                                 <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm text-center items-center">
-                                  {formatDateToIndonesian(
-                                    new Date(audio?.createdAt)
-                                  )}{" "}
-                                  {audio?.timezone ? audio?.timezone : "WIB"}{" "}
-                                  |&nbsp;{" "}
-                                  <Icon
-                                    icon="formkit:eye"
-                                    width="15"
-                                    height="15"
-                                  />
+                                  {formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
+                                  {audio?.timezone ? audio?.timezone : "WIB"} |&nbsp;{" "}
+                                  <Icon icon="formkit:eye" width="15" height="15" />
                                   &nbsp; {audio?.clickCount}{" "}
                                 </div>
                                 <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
@@ -307,16 +276,9 @@ const NewContent = (props: { group: string; type: string }) => {
                   <Carousel className="w-full max-w-7xl mx-auto">
                     <CarouselContent>
                       {newContent?.map((video: any) => (
-                        <CarouselItem
-                          key={video?.id}
-                          className="md:basis-1/2 lg:basis-1/3"
-                        >
+                        <CarouselItem key={video?.id} className="md:basis-1/2 lg:basis-1/3">
                           <div
-                            onClick={() =>
-                              router.push(
-                                prefixPath + `/video/detail/${video?.slug}`
-                              )
-                            }
+                            onClick={() => router.push(prefixPath + `/video/detail/${video?.slug}`)}
                             className="cursor-pointer relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
                           >
                             <Image
@@ -334,15 +296,9 @@ const NewContent = (props: { group: string; type: string }) => {
                                 {video?.title}
                               </p>
                               <p className="flex flex-row items-center text-[10px] gap-1">
-                                {formatDateToIndonesian(
-                                  new Date(video?.createdAt)
-                                )}{" "}
+                                {formatDateToIndonesian(new Date(video?.createdAt))}{" "}
                                 {video?.timezone ? video?.timezone : "WIB"}|{" "}
-                                <Icon
-                                  icon="formkit:eye"
-                                  width="15"
-                                  height="15"
-                                />{" "}
+                                <Icon icon="formkit:eye" width="15" height="15" />{" "}
                                 {video?.clickCount}{" "}
                               </p>
                             </div>
@@ -368,16 +324,11 @@ const NewContent = (props: { group: string; type: string }) => {
                 <Carousel className="w-full max-w-7xl mx-auto">
                   <CarouselContent>
                     {newContent?.map((text: any) => (
-                      <CarouselItem
-                        key={text?.id}
-                        className="md:basis-1/2 lg:basis-1/3"
-                      >
+                      <CarouselItem key={text?.id} className="md:basis-1/2 lg:basis-1/3">
                         <div className="md:basis-1/2 lg:basis-1/3">
                           <div
                             onClick={() =>
-                              router.push(
-                                prefixPath + `/document/detail/${text?.slug}`
-                              )
+                              router.push(prefixPath + `/document/detail/${text?.slug}`)
                             }
                             className="flex flex-row bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4"
                           >
@@ -398,15 +349,9 @@ const NewContent = (props: { group: string; type: string }) => {
 
                             <div className="flex w-full pr-10 flex-col flex-1">
                               <div className="text-gray-500 dark:text-gray-400 flex flex-row items-center text-xs gap-0 lg:gap-1 mt-1 lg:text-sm">
-                                {formatDateToIndonesian(
-                                  new Date(text?.createdAt)
-                                )}
+                                {formatDateToIndonesian(new Date(text?.createdAt))}
                                 {text?.timezone ? text?.timezone : "WIB"}|
-                                <Icon
-                                  icon="formkit:eye"
-                                  width="15"
-                                  height="15"
-                                />
+                                <Icon icon="formkit:eye" width="15" height="15" />
                                 {text?.clickCount}
                               </div>
                               <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible ">
@@ -451,11 +396,7 @@ const NewContent = (props: { group: string; type: string }) => {
         </div>
         <div className="flex items-center flex-row justify-center">
           <div
-            onClick={() =>
-              router.push(
-                prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`
-              )
-            }
+            onClick={() => router.push(prefixPath + `/${selectedTab}/filter?sortBy=${props.type}`)}
             className="cursor-pointer border text-[#bb3523] rounded-lg text-sm lg:text-md px-4 py-1 border-[#bb3523]"
           >
             {t("seeAll")}
diff --git a/src/components/features/landing-page/news-tickers.tsx b/src/components/features/landing-page/news-tickers.tsx
index b1d7d90c..995e2c45 100644
--- a/src/components/features/landing-page/news-tickers.tsx
+++ b/src/components/features/landing-page/news-tickers.tsx
@@ -1,10 +1,14 @@
 "use client";
+
+import { useEffect, useState } from "react";
 import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+
 import { getHeroData, listCarousel } from "@/lib/services/landing/landing";
 import { formatDateToIndonesian, textEllipsis } from "@/lib/utils/globals";
-import { useEffect, useState } from "react";
+
 import { Icon } from "../../ui/icon";
-import { useTranslations } from "next-intl";
+
 export default function NewsTicker() {
   const [article, setArticle] = useState<any>([]);
   const [currentNewsIndex, setCurrentNewsIndex] = useState<any>(0);
@@ -55,19 +59,11 @@ export default function NewsTicker() {
         {article?.length > 0 && (
           <>
             {" "}
-            <Link
-              href={`news/detail/${article[currentNewsIndex]?.id}`}
-              className="hidden lg:block"
-            >
+            <Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
               {" "}
-              <p className="text-sm lg:text-base">
-                {article[currentNewsIndex]?.title}
-              </p>{" "}
+              <p className="text-sm lg:text-base">{article[currentNewsIndex]?.title}</p>{" "}
             </Link>{" "}
-            <Link
-              href={`news/detail/${article[currentNewsIndex]?.id}`}
-              className="lg:hidden"
-            >
+            <Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
               {" "}
               <p className="text-sm lg:text-base">
                 {textEllipsis(article[currentNewsIndex]?.title, 28)}
@@ -81,17 +77,11 @@ export default function NewsTicker() {
       </div>{" "}
       <div className="flex flex-row text-white h-full gap-[1px]">
         {" "}
-        <a
-          className="bg-[#bb3523] h-full flex items-center"
-          onClick={() => handlePrev()}
-        >
+        <a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
           {" "}
           <Icon icon="ic:twotone-arrow-left" fontSize={30} />{" "}
         </a>{" "}
-        <a
-          className="bg-[#bb3523] h-full flex items-center"
-          onClick={() => handleNext()}
-        >
+        <a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
           {" "}
           <Icon icon="ic:twotone-arrow-right" fontSize={30} />{" "}
         </a>{" "}
diff --git a/src/components/features/landing-page/pagination.tsx b/src/components/features/landing-page/pagination.tsx
index 371616f3..4c35d9e5 100644
--- a/src/components/features/landing-page/pagination.tsx
+++ b/src/components/features/landing-page/pagination.tsx
@@ -1,9 +1,10 @@
-import { Button } from '@/components/ui/button';
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -24,7 +25,7 @@ const LandingPagination = ({
   const [currentPageIndex, setCurrentPageIndex] = useState<number>(1);
 
   useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
     if (pageFromUrl) {
       const pageIndex = Math.min(Math.max(1, Number(pageFromUrl)), totalPage);
       setCurrentPageIndex(pageIndex);
@@ -35,7 +36,7 @@ const LandingPagination = ({
   const handlePageChange = (pageIndex: number) => {
     const clampedPageIndex = Math.min(Math.max(1, pageIndex), totalPage);
     const searchParams = new URLSearchParams(window.location.search);
-    searchParams.set('page', clampedPageIndex.toString());
+    searchParams.set("page", clampedPageIndex.toString());
 
     router.push(`${window.location.pathname}?${searchParams.toString()}`);
     setCurrentPageIndex(clampedPageIndex);
@@ -69,7 +70,7 @@ const LandingPagination = ({
         <Button
           variant="outline"
           size="icon"
-          onClick={() => handlePageChange(currentPageIndex-1)}
+          onClick={() => handlePageChange(currentPageIndex - 1)}
           disabled={currentPageIndex === 1}
           className="w-8 h-8"
         >
@@ -81,7 +82,7 @@ const LandingPagination = ({
             onClick={() => handlePageChange(pageIndex)}
             size="icon"
             className="w-8 h-8"
-            variant={currentPageIndex === pageIndex ? 'default' : 'outline'}
+            variant={currentPageIndex === pageIndex ? "default" : "outline"}
           >
             {pageIndex}
           </Button>
@@ -89,7 +90,7 @@ const LandingPagination = ({
         <Button
           variant="outline"
           size="icon"
-          onClick={() => handlePageChange(currentPageIndex+1)}
+          onClick={() => handlePageChange(currentPageIndex + 1)}
           disabled={currentPageIndex === totalPage}
           className="w-8 h-8"
         >
@@ -109,4 +110,4 @@ const LandingPagination = ({
   );
 };
 
-export default LandingPagination;
\ No newline at end of file
+export default LandingPagination;
diff --git a/src/components/features/landing-page/popular-content.tsx b/src/components/features/landing-page/popular-content.tsx
index 46db4855..7f389371 100644
--- a/src/components/features/landing-page/popular-content.tsx
+++ b/src/components/features/landing-page/popular-content.tsx
@@ -1,31 +1,128 @@
 import React, { useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import { textEllipsis } from "@/lib/utils/globals";
-import { generateLocalizedPath } from "@/lib/utils/globals";
+
+import { generateLocalizedPath, textEllipsis } from "@/lib/utils/globals";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const dummyImage = [
-  { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
-  { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
+  {
+    id: 1,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 2,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 3,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 4,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 5,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 6,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 7,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 8,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
+  {
+    id: 9,
+    thumbnail: "/assets/banner-sample.png",
+    date: "17 MEI 2024",
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    time: "18.00 WIB",
+  },
 ];
 
 const dummyDescription = [
-  { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
-  { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" },
+  {
+    id: 1,
+    title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait",
+    date: "28 November 2024",
+    time: "11.15 WIB",
+    duration: "00:24:55",
+  },
+  {
+    id: 2,
+    title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024",
+    date: "28 November 2024",
+    time: "11.15 WIB",
+    duration: "00:24:55",
+  },
+  {
+    id: 3,
+    title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan",
+    date: "28 November 2024",
+    time: "11.15 WIB",
+    duration: "00:24:55",
+  },
+  {
+    id: 4,
+    title:
+      "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara",
+    date: "28 November 2024",
+    time: "11.15 WIB",
+    duration: "00:24:55",
+  },
+  {
+    id: 5,
+    title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II",
+    date: "28 November 2024",
+    time: "11.15 WIB",
+    duration: "00:24:55",
+  },
+  {
+    id: 6,
+    title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif",
+    date: "28 November 2024",
+    time: "11.15 WIB",
+    duration: "00:24:55",
+  },
 ];
 
 const PopularContent = () => {
@@ -77,13 +174,25 @@ const PopularContent = () => {
               <CarouselContent>
                 {dummyImage.map((image) => (
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
-                    <Link href={generateLocalizedPath(`/video/detail/${image.id}`, String(locale))} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                      <img src={image.thumbnail} className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                    <Link
+                      href={generateLocalizedPath(`/video/detail/${image.id}`, String(locale))}
+                      className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
+                    >
+                      <img
+                        src={image.thumbnail}
+                        className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
+                      />
                       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
                         <h1 className="text-sm font-semibold truncate">{image.title}</h1>
                         <p className="flex flex-row items-center text-sm gap-2">
-                          {image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                          {image.date} {image.time} |{" "}
+                          <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 20 20"
+                          >
                             <path
                               fill="#f00"
                               d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
@@ -104,9 +213,19 @@ const PopularContent = () => {
                 {dummyDescription.map((description) => (
                   <CarouselItem key={description.id} className="md:basis-1/2 lg:basis-1/3">
                     <div className="flex flex-row gap-6">
-                      <a href="#" key={description.id} className="flex flex-col  sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                      <a
+                        href="#"
+                        key={description.id}
+                        className="flex flex-col  sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                      >
                         <div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
-                          <svg width="32" height="34" viewBox="0 0 32 34" fill="null" xmlns="http://www.w3.org/2000/svg">
+                          <svg
+                            width="32"
+                            height="34"
+                            viewBox="0 0 32 34"
+                            fill="null"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
                             <path
                               d="M23.404 0.452014C23.7033 0.35857 24.0204 0.336816 24.3297 0.388509C24.639 0.440203 24.9318 0.563895 25.1845 0.749599C25.4371 0.935304 25.6426 1.17782 25.7843 1.45756C25.9259 1.73731 25.9998 2.04644 26 2.36001V14.414C25.3462 14.2296 24.6766 14.1064 24 14.046V8.36001L10 12.736V27C10 28.1264 9.6197 29.2197 8.92071 30.1029C8.22172 30.9861 7.24499 31.6075 6.14877 31.8663C5.05255 32.125 3.90107 32.0061 2.88089 31.5287C1.86071 31.0514 1.03159 30.2435 0.52787 29.2361C0.024152 28.2286 -0.124656 27.0806 0.105556 25.9781C0.335768 24.8755 0.931513 23.883 1.79627 23.1613C2.66102 22.4396 3.74413 22.031 4.87009 22.0017C5.99606 21.9724 7.09893 22.3242 8.00001 23V6.73601C7.99982 6.30956 8.13596 5.8942 8.38854 5.55059C8.64112 5.20698 8.99692 4.9531 9.40401 4.82601L23.404 0.452014ZM10 10.64L24 6.26601V2.36001L10 6.73601V10.64ZM5.00001 24C4.20436 24 3.44129 24.3161 2.87869 24.8787C2.31608 25.4413 2.00001 26.2044 2.00001 27C2.00001 27.7957 2.31608 28.5587 2.87869 29.1213C3.44129 29.6839 4.20436 30 5.00001 30C5.79566 30 6.55872 29.6839 7.12133 29.1213C7.68394 28.5587 8.00001 27.7957 8.00001 27C8.00001 26.2044 7.68394 25.4413 7.12133 24.8787C6.55872 24.3161 5.79566 24 5.00001 24ZM32 25C32 27.387 31.0518 29.6761 29.364 31.364C27.6761 33.0518 25.387 34 23 34C20.6131 34 18.3239 33.0518 16.636 31.364C14.9482 29.6761 14 27.387 14 25C14 22.6131 14.9482 20.3239 16.636 18.6361C18.3239 16.9482 20.6131 16 23 16C25.387 16 27.6761 16.9482 29.364 18.6361C31.0518 20.3239 32 22.6131 32 25ZM27.47 24.128L21.482 20.828C21.3298 20.7443 21.1583 20.7016 20.9846 20.7043C20.8108 20.707 20.6408 20.7549 20.4912 20.8433C20.3416 20.9317 20.2176 21.0576 20.1315 21.2086C20.0453 21.3595 20 21.5302 20 21.704V28.304C20 28.4778 20.0453 28.6486 20.1315 28.7995C20.2176 28.9504 20.3416 29.0763 20.4912 29.1647C20.6408 29.2531 20.8108 29.301 20.9846 29.3037C21.1583 29.3064 21.3298 29.2638 21.482 29.18L27.47 25.88C27.6268 25.7937 27.7575 25.6669 27.8486 25.5128C27.9397 25.3587 27.9877 25.183 27.9877 25.004C27.9877 24.825 27.9397 24.6493 27.8486 24.4952C27.7575 24.3412 27.6268 24.2143 27.47 24.128Z"
                               fill="white"
@@ -116,9 +235,12 @@ const PopularContent = () => {
 
                         <div className="flex flex-col  flex-1">
                           <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                            {description.date} | <Icon icon="formkit:eye" width="15" height="15" /> 518
+                            {description.date} | <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                            518
+                          </div>
+                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                            {textEllipsis(description.title, 50)}
                           </div>
-                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{textEllipsis(description.title, 50)}</div>
                         </div>
                       </a>
                     </div>
@@ -133,13 +255,25 @@ const PopularContent = () => {
               <CarouselContent>
                 {dummyImage.map((image) => (
                   <CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
-                    <Link href={generateLocalizedPath(`/image/detail/${image.id}`, String(locale))} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
-                      <img src={image.thumbnail} className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300" />
+                    <Link
+                      href={generateLocalizedPath(`/image/detail/${image.id}`, String(locale))}
+                      className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"
+                    >
+                      <img
+                        src={image.thumbnail}
+                        className="w-full h-32 lg:h-60 object-cover group-hover:scale-100 transition-transform duration-300"
+                      />
                       <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-r from-black to-slate-500 text-white p-2">
                         <h1 className="text-sm font-semibold truncate">{image.title}</h1>
                         <p className="flex flex-row items-center text-sm gap-2">
-                          {image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
-                          <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
+                          {image.date} {image.time} |{" "}
+                          <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="1em"
+                            height="1em"
+                            viewBox="0 0 20 20"
+                          >
                             <path
                               fill="#f00"
                               d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z"
@@ -160,9 +294,18 @@ const PopularContent = () => {
                 {dummyImage.map((description) => (
                   <CarouselItem key={description.id} className="md:basis-1/2 lg:basis-1/3">
                     <div className="md:basis-1/2 lg:basis-1/3">
-                      <a href="#" className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full">
+                      <a
+                        href="#"
+                        className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
+                      >
                         <div className="flex items-center justify-center rounded-lg w-16 h-2 lg:h-16">
-                          <svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+                          <svg
+                            width="28"
+                            height="34"
+                            viewBox="0 0 28 34"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
                             <path
                               d="M5.6665 17.4167C5.6665 17.0851 5.7982 16.7672 6.03262 16.5328C6.26704 16.2984 6.58498 16.1667 6.9165 16.1667C7.24802 16.1667 7.56597 16.2984 7.80039 16.5328C8.03481 16.7672 8.1665 17.0851 8.1665 17.4167C8.1665 17.7482 8.03481 18.0661 7.80039 18.3005C7.56597 18.535 7.24802 18.6667 6.9165 18.6667C6.58498 18.6667 6.26704 18.535 6.03262 18.3005C5.7982 18.0661 5.6665 17.7482 5.6665 17.4167ZM6.9165 21.1667C6.58498 21.1667 6.26704 21.2984 6.03262 21.5328C5.7982 21.7672 5.6665 22.0851 5.6665 22.4167C5.6665 22.7482 5.7982 23.0661 6.03262 23.3005C6.26704 23.535 6.58498 23.6667 6.9165 23.6667C7.24802 23.6667 7.56597 23.535 7.80039 23.3005C8.03481 23.0661 8.1665 22.7482 8.1665 22.4167C8.1665 22.0851 8.03481 21.7672 7.80039 21.5328C7.56597 21.2984 7.24802 21.1667 6.9165 21.1667ZM5.6665 27.4167C5.6665 27.0851 5.7982 26.7672 6.03262 26.5328C6.26704 26.2984 6.58498 26.1667 6.9165 26.1667C7.24802 26.1667 7.56597 26.2984 7.80039 26.5328C8.03481 26.7672 8.1665 27.0851 8.1665 27.4167C8.1665 27.7482 8.03481 28.0661 7.80039 28.3005C7.56597 28.535 7.24802 28.6667 6.9165 28.6667C6.58498 28.6667 6.26704 28.535 6.03262 28.3005C5.7982 28.0661 5.6665 27.7482 5.6665 27.4167ZM11.9165 16.1667C11.585 16.1667 11.267 16.2984 11.0326 16.5328C10.7982 16.7672 10.6665 17.0851 10.6665 17.4167C10.6665 17.7482 10.7982 18.0661 11.0326 18.3005C11.267 18.535 11.585 18.6667 11.9165 18.6667H21.0832C21.4147 18.6667 21.7326 18.535 21.9671 18.3005C22.2015 18.0661 22.3332 17.7482 22.3332 17.4167C22.3332 17.0851 22.2015 16.7672 21.9671 16.5328C21.7326 16.2984 21.4147 16.1667 21.0832 16.1667H11.9165ZM10.6665 22.4167C10.6665 22.0851 10.7982 21.7672 11.0326 21.5328C11.267 21.2984 11.585 21.1667 11.9165 21.1667H21.0832C21.4147 21.1667 21.7326 21.2984 21.9671 21.5328C22.2015 21.7672 22.3332 22.0851 22.3332 22.4167C22.3332 22.7482 22.2015 23.0661 21.9671 23.3005C21.7326 23.535 21.4147 23.6667 21.0832 23.6667H11.9165C11.585 23.6667 11.267 23.535 11.0326 23.3005C10.7982 23.0661 10.6665 22.7482 10.6665 22.4167ZM11.9165 26.1667C11.585 26.1667 11.267 26.2984 11.0326 26.5328C10.7982 26.7672 10.6665 27.0851 10.6665 27.4167C10.6665 27.7482 10.7982 28.0661 11.0326 28.3005C11.267 28.535 11.585 28.6667 11.9165 28.6667H21.0832C21.4147 28.6667 21.7326 28.535 21.9671 28.3005C22.2015 28.0661 22.3332 27.7482 22.3332 27.4167C22.3332 27.0851 22.2015 26.7672 21.9671 26.5328C21.7326 26.2984 21.4147 26.1667 21.0832 26.1667H11.9165ZM26.3565 11.0233L16.6415 1.31C16.6157 1.28605 16.5885 1.26378 16.5598 1.24333C16.5392 1.22742 16.5192 1.21074 16.4998 1.19333C16.3852 1.08512 16.2632 0.984882 16.1348 0.893332C16.0922 0.865802 16.0476 0.841298 16.0015 0.819999L15.9215 0.779999L15.8382 0.731666C15.7482 0.679999 15.6565 0.626665 15.5615 0.586665C15.2296 0.454104 14.8783 0.376423 14.5215 0.356665C14.4885 0.354519 14.4557 0.350625 14.4232 0.344999C14.3779 0.338012 14.3323 0.334114 14.2865 0.333332H3.99984C3.11578 0.333332 2.26794 0.684521 1.64281 1.30964C1.01769 1.93476 0.666504 2.78261 0.666504 3.66667V30.3333C0.666504 31.2174 1.01769 32.0652 1.64281 32.6904C2.26794 33.3155 3.11578 33.6667 3.99984 33.6667H23.9998C24.8839 33.6667 25.7317 33.3155 26.3569 32.6904C26.982 32.0652 27.3332 31.2174 27.3332 30.3333V13.38C27.333 12.496 26.9817 11.6483 26.3565 11.0233ZM24.8332 30.3333C24.8332 30.5543 24.7454 30.7663 24.5891 30.9226C24.4328 31.0789 24.2208 31.1667 23.9998 31.1667H3.99984C3.77882 31.1667 3.56686 31.0789 3.41058 30.9226C3.2543 30.7663 3.1665 30.5543 3.1665 30.3333V3.66667C3.1665 3.44565 3.2543 3.23369 3.41058 3.07741C3.56686 2.92113 3.77882 2.83333 3.99984 2.83333H13.9998V10.3333C13.9998 11.2174 14.351 12.0652 14.9761 12.6904C15.6013 13.3155 16.4491 13.6667 17.3332 13.6667H24.8332V30.3333ZM16.4998 4.70166L22.9632 11.1667H17.3332C17.1122 11.1667 16.9002 11.0789 16.7439 10.9226C16.5876 10.7663 16.4998 10.5543 16.4998 10.3333V4.70166Z"
                               fill="black"
@@ -172,12 +315,23 @@ const PopularContent = () => {
 
                         <div className="flex flex-col flex-1">
                           <div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
-                            {description.date} | <Icon icon="formkit:eye" width="15" height="15" /> 518
+                            {description.date} | <Icon icon="formkit:eye" width="15" height="15" />{" "}
+                            518
+                          </div>
+                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">
+                            {textEllipsis(description.title, 50)}
                           </div>
-                          <div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm">{textEllipsis(description.title, 50)}</div>
                           <div className="flex gap-2 items-center text-sm text-red-500 dark:text-red-500">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512">
-                              <path fill="#f00" d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z" />
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="1em"
+                              height="1em"
+                              viewBox="0 0 512 512"
+                            >
+                              <path
+                                fill="#f00"
+                                d="M224 30v256h-64l96 128l96-128h-64V30zM32 434v48h448v-48z"
+                              />
                             </svg>
                             Download Dokumen
                           </div>
@@ -194,7 +348,10 @@ const PopularContent = () => {
         </div>
       </div>
       <div className="flex items-center flex-row justify-center">
-        <Link href="#" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
+        <Link
+          href="#"
+          className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]"
+        >
           LIHAT SEMUA
         </Link>
       </div>
diff --git a/src/components/features/landing-page/popular-polda.tsx b/src/components/features/landing-page/popular-polda.tsx
index 046df2fe..a08e37dd 100644
--- a/src/components/features/landing-page/popular-polda.tsx
+++ b/src/components/features/landing-page/popular-polda.tsx
@@ -1,11 +1,19 @@
 import React, { useEffect, useState } from "react";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { getListContent } from "@/lib/services/landing/landing";
 import { Link } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
+
+import { getListContent } from "@/lib/services/landing/landing";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
 import { Reveal } from "./Reveal";
 
 const PopularPolda = () => {
diff --git a/src/components/features/landing-page/search-section-new.tsx b/src/components/features/landing-page/search-section-new.tsx
index 1c32ee06..2d2583a7 100644
--- a/src/components/features/landing-page/search-section-new.tsx
+++ b/src/components/features/landing-page/search-section-new.tsx
@@ -1,9 +1,16 @@
-import search from "@/app/[locale]/(protected)/app/chat/components/search";
-import { useTranslations } from "next-intl";
+import { title } from "process";
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
 import { useParams, useRouter } from "next/navigation";
 import router from "next/router";
-import React, { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import { useTranslations } from "next-intl";
+
+import { getHeroData } from "@/lib/services/landing/landing";
+import { htmlToString } from "@/lib/utils/globals";
+import search from "@/app/[locale]/(protected)/app/chat/components/search";
+
 import {
   Select,
   SelectContent,
@@ -12,11 +19,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
-import Image from "next/image";
-import { getHeroData } from "@/lib/services/landing/landing";
-import { title } from "process";
-import { htmlToString } from "@/lib/utils/globals";
-import { Link } from "@/i18n/navigation";
 
 const ScrollableContent = () => {
   const [contentType, setContentType] = useState("all");
@@ -59,13 +61,8 @@ const ScrollableContent = () => {
     <>
       <div className="text-center">
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
-          <span className="text-[#bb3523] dark:text-white">
-            {t("exploration")}
-          </span>{" "}
-          {t("and")}{" "}
-          <span className="text-[#bb3523] dark:text-white">
-            {t("download")}
-          </span>{" "}
+          <span className="text-[#bb3523] dark:text-white">{t("exploration")}</span> {t("and")}{" "}
+          <span className="text-[#bb3523] dark:text-white">{t("download")}</span>{" "}
           {t("coverage")}{" "}
         </h1>
         <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
@@ -112,9 +109,7 @@ const ScrollableContent = () => {
             </div>
           </div>
           <button
-            onClick={() =>
-              router.push(`/${contentType}/filter?title=${search}`)
-            }
+            onClick={() => router.push(`/${contentType}/filter?title=${search}`)}
             className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"
           >
             {t("searchCoverage")}
@@ -135,20 +130,16 @@ const ScrollableContent = () => {
                   index === 0 ? "" : "flex"
                 }`}
               >
-                <div
-                  className={`relative ${
-                    index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
-                  }`}
-                >
+                <div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
                   <Link
                     href={
                       Number(item?.fileTypeId) == 1
                         ? `${locale}/image/detail/${item?.slug}`
                         : Number(item?.fileTypeId) == 2
-                        ? `${locale}/video/detail/${item?.slug}`
-                        : Number(item?.fileTypeId) == 3
-                        ? `${locale}/document/detail/${item?.slug}`
-                        : `${locale}/audio/detail/${item?.slug}`
+                          ? `${locale}/video/detail/${item?.slug}`
+                          : Number(item?.fileTypeId) == 3
+                            ? `${locale}/document/detail/${item?.slug}`
+                            : `${locale}/audio/detail/${item?.slug}`
                     }
                   >
                     <Image
@@ -182,12 +173,8 @@ const ScrollableContent = () => {
                   }
                 > */}
                 <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
-                  <p className="text-sm text-[#bb3523] font-bold mb-1">
-                    {item.categoryName}
-                  </p>
-                  <h3 className="text-sm font-semibold text-gray-800">
-                    {item.title}
-                  </h3>
+                  <p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
+                  <h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
                   <p className="text-xs text-gray-500 mt-1 truncate">
                     {htmlToString(item.description)}
                   </p>
@@ -217,20 +204,16 @@ const ScrollableContent = () => {
                     index === 0 ? "" : "flex"
                   }`}
                 >
-                  <div
-                    className={`relative ${
-                      index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
-                    }`}
-                  >
+                  <div className={`relative ${index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"}`}>
                     <Link
                       href={
                         Number(item?.fileTypeId) == 1
                           ? `${locale}/image/detail/${item?.slug}`
                           : Number(item?.fileTypeId) == 2
-                          ? `${locale}/video/detail/${item?.slug}`
-                          : Number(item?.fileTypeId) == 3
-                          ? `${locale}/document/detail/${item?.slug}`
-                          : `${locale}/audio/detail/${item?.slug}`
+                            ? `${locale}/video/detail/${item?.slug}`
+                            : Number(item?.fileTypeId) == 3
+                              ? `${locale}/document/detail/${item?.slug}`
+                              : `${locale}/audio/detail/${item?.slug}`
                       }
                     >
                       <Image
@@ -253,12 +236,8 @@ const ScrollableContent = () => {
                     </Link>
                   </div>
                   <div className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}>
-                    <p className="text-sm text-[#bb3523] font-bold mb-1">
-                      {item.categoryName}
-                    </p>
-                    <h3 className="text-sm font-semibold text-gray-800">
-                      {item.title}
-                    </h3>
+                    <p className="text-sm text-[#bb3523] font-bold mb-1">{item.categoryName}</p>
+                    <h3 className="text-sm font-semibold text-gray-800">{item.title}</h3>
                     <p className="text-xs text-gray-500 mt-1 truncate">
                       {htmlToString(item.description)}
                     </p>
diff --git a/src/components/features/landing-page/search-section.tsx b/src/components/features/landing-page/search-section.tsx
index b9f3692b..a8966b23 100644
--- a/src/components/features/landing-page/search-section.tsx
+++ b/src/components/features/landing-page/search-section.tsx
@@ -1,22 +1,24 @@
-import search from "@/app/[locale]/(protected)/app/chat/components/search";
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import router from "next/router";
 import {
   Select,
-  SelectTrigger,
-  SelectValue,
   SelectContent,
   SelectGroup,
   SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@radix-ui/react-select";
 import { Icon } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation";
-import router from "next/router";
-import React, { useState } from "react";
-import ScrollableContent from "./search-section-new";
-import NewContent from "./new-content";
-import ContentCategory from "./content-category";
+
+import search from "@/app/[locale]/(protected)/app/chat/components/search";
+
 import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
+import ContentCategory from "./content-category";
 import EventCalender from "./event-calender";
+import NewContent from "./new-content";
+import ScrollableContent from "./search-section-new";
 import UserSurveyBox from "./survey-box";
 
 const LeftBanner = () => (
diff --git a/src/components/features/landing-page/sidebar-management.tsx b/src/components/features/landing-page/sidebar-management.tsx
index d65d7a14..4a5e691b 100644
--- a/src/components/features/landing-page/sidebar-management.tsx
+++ b/src/components/features/landing-page/sidebar-management.tsx
@@ -1,12 +1,13 @@
 "use client";
 
-import { Link, usePathname } from "@/i18n/navigation";
-import { getInfoProfile, getListPorvinces, getUsersTeams } from "@/lib/services/landing/landing";
-import { Icon } from "@iconify/react/dist/iconify.js";
 import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
+import { Link, usePathname } from "@/i18n/navigation";
+import { Icon } from "@iconify/react/dist/iconify.js";
 import { useTranslations } from "next-intl";
 
+import { getInfoProfile, getListPorvinces, getUsersTeams } from "@/lib/services/landing/landing";
+
 const SidebarManagement = () => {
   const [profile, setProfile] = useState<any>();
   const [province, setProvince] = useState([]);
@@ -98,7 +99,9 @@ const SidebarManagement = () => {
 
       <div className="p-4 gap-1">
         <Link href="/content-management/galery" className="mb-3">
-          <div className={`${pathname?.includes("/content-management/galery") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
+          <div
+            className={`${pathname?.includes("/content-management/galery") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}
+          >
             <div className="flex items-center gap-2 text-lg">
               <Icon icon="material-symbols-light:perm-media-rounded" />
               <p className="text-sm">
@@ -111,7 +114,9 @@ const SidebarManagement = () => {
           </div>
         </Link>
         <Link href="/content-management/download" className="mb-3">
-          <div className={`${pathname?.includes("/content-management/download") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
+          <div
+            className={`${pathname?.includes("/content-management/download") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}
+          >
             <div className="flex items-center gap-2 text-lg">
               <Icon icon="heroicons:photo-solid" />
               <p className="text-sm">{t("myGallery")} </p>
@@ -122,7 +127,9 @@ const SidebarManagement = () => {
           </div>
         </Link>
         <Link href="/content-management/rewrite" className="mb-3">
-          <div className={`${pathname?.includes("/content-management/rewrite") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
+          <div
+            className={`${pathname?.includes("/content-management/rewrite") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}
+          >
             <div className="flex items-center gap-2 text-lg">
               <Icon icon="material-symbols-light:perm-media-rounded" />
               <p className="text-sm">{t("gallery")} Rewrite</p>
@@ -133,7 +140,9 @@ const SidebarManagement = () => {
           </div>
         </Link>
         <Link href="/content-management/users" className="mb-3">
-          <div className={`${pathname?.includes("/content-management/users") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}>
+          <div
+            className={`${pathname?.includes("/content-management/users") ? "bg-slate-500 text-white" : ""} hover:bg-slate-500 hover:text-white cursor-pointer p-4 rounded-lg flex justify-between`}
+          >
             <div className="flex items-center gap-2 text-lg">
               <Icon icon="mdi:users-group" />
               <p className="text-sm">{t("userTeam")}</p>
diff --git a/src/components/features/landing-page/survey-box.tsx b/src/components/features/landing-page/survey-box.tsx
index 64e47a37..30a4a169 100644
--- a/src/components/features/landing-page/survey-box.tsx
+++ b/src/components/features/landing-page/survey-box.tsx
@@ -1,4 +1,12 @@
 import React, { useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { createSurveyData } from "@/lib/services/survey/survey";
+
+import { Button } from "../../ui/button";
+import { Checkbox } from "../../ui/checkbox";
 import {
   Dialog,
   DialogClose,
@@ -8,14 +16,8 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../ui/dialog";
-import FormSurvey from "./survey";
-import { Controller, useForm } from "react-hook-form";
 import { Textarea } from "../../ui/textarea";
-import { Button } from "../../ui/button";
-import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Checkbox } from "../../ui/checkbox";
-import { createSurveyData } from "@/lib/services/survey/survey";
+import FormSurvey from "./survey";
 
 const surveySchema = z.object({
   accessFrequency: z.string(),
@@ -61,28 +63,10 @@ const UserSurveyBox = () => {
       "Baru pertama kali",
     ],
     uiExperienceDesign: ["Sangat baik", "Baik", "Cukup", "Kurang", "Buruk"],
-    uiExperienceNavigation: [
-      "Sangat mudah",
-      "Mudah",
-      "Cukup",
-      "Sulit",
-      "Sangat sulit",
-    ],
-    uiExperienceSpeed: [
-      "Sangat cepat",
-      "Cepat",
-      "Cukup",
-      "Lambat",
-      "Sangat lambat",
-    ],
+    uiExperienceNavigation: ["Sangat mudah", "Mudah", "Cukup", "Sulit", "Sangat sulit"],
+    uiExperienceSpeed: ["Sangat cepat", "Cepat", "Cukup", "Lambat", "Sangat lambat"],
     infoAccuracy: ["Sangat puas", "Puas", "Cukup", "Kurang puas", "Tidak puas"],
-    infoCompleteness: [
-      "Sangat lengkap",
-      "Lengkap",
-      "Cukup",
-      "Kurang lengkap",
-      "Tidak lengkap",
-    ],
+    infoCompleteness: ["Sangat lengkap", "Lengkap", "Cukup", "Kurang lengkap", "Tidak lengkap"],
     usefulness: [
       "Sangat membantu",
       "Membantu",
@@ -92,11 +76,7 @@ const UserSurveyBox = () => {
     ],
   };
 
-  const renderControllerGroup = (
-    name: keyof SurveySchema,
-    question: string,
-    choices: string[]
-  ) => (
+  const renderControllerGroup = (name: keyof SurveySchema, question: string, choices: string[]) => (
     <div className="space-y-2">
       <p className="font-medium">{question}</p>
       <div className="grid grid-cols-2 gap-2">
@@ -117,11 +97,7 @@ const UserSurveyBox = () => {
           />
         ))}
       </div>
-      {errors[name] && (
-        <p className="text-red-500 text-sm">
-          {errors[name]?.message as string}
-        </p>
-      )}
+      {errors[name] && <p className="text-red-500 text-sm">{errors[name]?.message as string}</p>}
     </div>
   );
 
@@ -139,13 +115,10 @@ const UserSurveyBox = () => {
   };
   return (
     <div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
-      <h2 className="text-lg font-bold mb-2">
-        SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI
-      </h2>
+      <h2 className="text-lg font-bold mb-2">SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI</h2>
       <p className="text-sm text-gray-700 dark:text-gray-300 mb-4">
-        Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan
-        kualitas layanan MediaHub Polri. Mohon luangkan waktu beberapa menit
-        untuk mengisi survei ini.
+        Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas layanan
+        MediaHub Polri. Mohon luangkan waktu beberapa menit untuk mengisi survei ini.
       </p>
       <Dialog open={openPolda} onOpenChange={setOpenPolda}>
         <DialogTrigger asChild>
@@ -157,17 +130,14 @@ const UserSurveyBox = () => {
             <p className="text-base font-bold">Survey Sekarang</p>
           </Button>
         </DialogTrigger>
-        <DialogContent
-          size="md"
-          className="max-h-[90vh] overflow-auto flex flex-col  "
-        >
+        <DialogContent size="md" className="max-h-[90vh] overflow-auto flex flex-col  ">
           <DialogHeader>
             <DialogTitle className="text-lg font-bold">
               SURVEI KEPUASAN PENGGUNA MEDIAHUB POLRI
             </DialogTitle>
             <DialogDescription className="text-sm">
-              Kami menghargai pendapat Anda! Survei ini bertujuan untuk
-              meningkatkan kualitas layanan MediaHub Polri.
+              Kami menghargai pendapat Anda! Survei ini bertujuan untuk meningkatkan kualitas
+              layanan MediaHub Polri.
             </DialogDescription>
           </DialogHeader>
 
@@ -203,8 +173,7 @@ const UserSurveyBox = () => {
 
             <div>
               <p className="font-medium">
-                3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub
-                Polri?
+                3. Seberapa puas Anda dengan informasi yang tersedia di MediaHub Polri?
               </p>
               <div className="space-y-3 mt-2">
                 {renderControllerGroup(
diff --git a/src/components/features/landing-page/survey.tsx b/src/components/features/landing-page/survey.tsx
index 295f4eba..7ca581f6 100644
--- a/src/components/features/landing-page/survey.tsx
+++ b/src/components/features/landing-page/survey.tsx
@@ -1,8 +1,15 @@
 "use client";
 
-import { z } from "zod";
-import { useForm, Controller } from "react-hook-form";
+import { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { createSurveyData } from "@/lib/services/survey/survey";
+import { createTaskTa } from "@/lib/services/task";
+
+import { Button } from "../../ui/button";
+import { Checkbox } from "../../ui/checkbox";
 import {
   Dialog,
   DialogContent,
@@ -10,12 +17,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../../ui/dialog";
-import { Checkbox } from "../../ui/checkbox";
-import { Button } from "../../ui/button";
 import { Textarea } from "../../ui/textarea";
-import { useState } from "react";
-import { createTaskTa } from "@/lib/services/task";
-import { createSurveyData } from "@/lib/services/survey/survey";
 
 export default function FormSurvey() {
   // const [showSurvey, setShowSurvey] = useState(true);
diff --git a/src/components/features/landing-page/welcome-polda.tsx b/src/components/features/landing-page/welcome-polda.tsx
index 191eb008..812dd9b6 100644
--- a/src/components/features/landing-page/welcome-polda.tsx
+++ b/src/components/features/landing-page/welcome-polda.tsx
@@ -1,10 +1,25 @@
-import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu";
-import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { useTranslations } from "next-intl";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
 
 const WelcomePolda = () => {
   const router = useRouter();
@@ -29,7 +44,8 @@ const WelcomePolda = () => {
       <div className="max-w-screen-xl mx-auto text-center">
         {/* Heading */}
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
-          {t("welcome")} <span className="text-[#bb3523] dark:text-white">Polda</span> <span className="capitalize">{poldaName.replace("-", " ")}</span>
+          {t("welcome")} <span className="text-[#bb3523] dark:text-white">Polda</span>{" "}
+          <span className="capitalize">{poldaName.replace("-", " ")}</span>
         </h1>
         <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
         <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
@@ -120,19 +136,32 @@ const WelcomePolda = () => {
             </Select>
             <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
               <span className="material-icons text-black dark:text-white px-4">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <path
                     fill="currentColor"
                     d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
                   />
                 </svg>
               </span>
-              <input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
+              <input
+                type="text"
+                placeholder={t("search")}
+                className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none"
+                onChange={(e) => setSearch(e.target.value)}
+              />
             </div>
           </div>
 
           {/* Search Input */}
-          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+          <button
+            onClick={() => router.push(`/${contentType}/filter?title=${search}`)}
+            className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"
+          >
             {t("searchCoverage")}
             <Icon icon="ri:arrow-right-s-line" fontSize={20} />
           </button>
diff --git a/src/components/features/landing-page/welcome-satker.tsx b/src/components/features/landing-page/welcome-satker.tsx
index aa0ca7bd..376838c8 100644
--- a/src/components/features/landing-page/welcome-satker.tsx
+++ b/src/components/features/landing-page/welcome-satker.tsx
@@ -1,12 +1,27 @@
 "use client";
 
-import { useParams, usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu";
-import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+import { useParams, usePathname, useRouter } from "next/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
 import { useTranslations } from "next-intl";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { FiFile, FiImage, FiMusic, FiYoutube } from "react-icons/fi";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../ui/dropdown-menu";
 
 const WelcomeSatker = () => {
   const router = useRouter();
@@ -31,7 +46,8 @@ const WelcomeSatker = () => {
       <div className="max-w-screen-xl mx-auto text-center">
         {/* Heading */}
         <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
-          {t("welcome")} <span className="text-[#bb3523] dark:text-white">Satker</span> <span className="capitalize">{satkerName.replace("-", " ")}</span>
+          {t("welcome")} <span className="text-[#bb3523] dark:text-white">Satker</span>{" "}
+          <span className="capitalize">{satkerName.replace("-", " ")}</span>
         </h1>
         <div className="w-[80%] h-1 bg-[#bb3523] mx-auto mt-2"></div>
         <p className="text-sm md:text-base text-gray-500 dark:text-gray-100 mt-4">
@@ -122,19 +138,32 @@ const WelcomeSatker = () => {
             </Select>
             <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
               <span className="material-icons text-black dark:text-white px-4">
-                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                >
                   <path
                     fill="currentColor"
                     d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
                   />
                 </svg>
               </span>
-              <input type="text" placeholder={t("search")} className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none" onChange={(e) => setSearch(e.target.value)} />
+              <input
+                type="text"
+                placeholder={t("search")}
+                className="w-full py-2 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none"
+                onChange={(e) => setSearch(e.target.value)}
+              />
             </div>
           </div>
 
           {/* Search Input */}
-          <button onClick={() => router.push(`/${contentType}/filter?title=${search}`)} className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700">
+          <button
+            onClick={() => router.push(`/${contentType}/filter?title=${search}`)}
+            className="flex justify-center items-center px-6 w-full lg:w-[20%] py-2 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700"
+          >
             {t("searchCoverage")}
             <Icon icon="ri:arrow-right-s-line" fontSize={20} />
           </button>
diff --git a/src/components/features/main/audio-detail.tsx b/src/components/features/main/audio-detail.tsx
index 9a50f9cf..c35c497f 100644
--- a/src/components/features/main/audio-detail.tsx
+++ b/src/components/features/main/audio-detail.tsx
@@ -1,13 +1,18 @@
 "use client";
 
-import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useRef, useState } from "react";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { Link, useRouter } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import parse from "html-react-parser";
+import $ from "jquery";
+import { useTranslations } from "next-intl";
 import { BarWave } from "react-cssfx-loading";
-import { useToast } from "@/components/ui/use-toast";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, successCallback, warning } from "@/config/swal";
+import { postActivityLog } from "@/lib/services/content/content";
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -17,27 +22,19 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, error, loading, successCallback, warning } from "@/config/swal";
 import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
 import {
   checkMaliciousText,
   formatDateToIndonesian,
   getPublicLocaleTimestamp,
 } from "@/lib/utils/globals";
-import parse from "html-react-parser";
-import $ from "jquery";
-import { useTranslations } from "next-intl";
-import { postActivityLog } from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const formWaveSurferOptions = (ref: any) => ({
   container: ref,
@@ -110,8 +107,8 @@ const DetailAudio = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -244,8 +241,7 @@ const DetailAudio = () => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType =
-          xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -284,11 +280,7 @@ const DetailAudio = () => {
       if (type == "wa" && width <= 768) {
         window.open(`whatsapp://send?${url}`, "_blank");
       } else if (type == "wa" && width > 768) {
-        window.open(
-          `https://web.whatsapp.com/send?${url}`,
-          "_blank",
-          "noreferrer"
-        );
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
       } else {
         window.open(url);
       }
@@ -422,15 +414,11 @@ const DetailAudio = () => {
         wavesurfer.current.on("ready", () => {
           setAudioLoaded(true);
           wavesurfer.current.setVolume(volume);
-          $(".waveform__duration").text(
-            formatTime(wavesurfer.current.getDuration())
-          );
+          $(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
         });
 
         wavesurfer.current.on("audioprocess", () => {
-          $(".waveform__counter").text(
-            formatTime(wavesurfer.current.getCurrentTime())
-          );
+          $(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
         });
 
         wavesurfer.current.on("finish", () => {
@@ -459,9 +447,7 @@ const DetailAudio = () => {
   };
 
   async function sendSuggestionChild(parentId: any) {
-    const inputElement = document.querySelector(
-      `#input-comment-${parentId}`
-    ) as HTMLInputElement;
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
 
     if (inputElement && inputElement.value.length > 3) {
       loading();
@@ -474,9 +460,7 @@ const DetailAudio = () => {
       console.log(data);
       const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet: any = await getPublicSuggestionList(
-        slug?.split("-")?.[0]
-      );
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
       console.log(responseGet.data?.data);
       setListSuggestion(responseGet.data?.data);
 
@@ -588,9 +572,7 @@ const DetailAudio = () => {
           <div className="md:w-3/4">
             <div className="relative flex flex-row">
               <button onClick={handlePlayPause}>
-                <img
-                  src={`/assets/${playing ? "stop-icon.png" : "play-icon.png"}`}
-                />
+                <img src={`/assets/${playing ? "stop-icon.png" : "play-icon.png"}`} />
               </button>
               <div
                 style={
@@ -653,10 +635,7 @@ const DetailAudio = () => {
                 </p> */}
                 <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
-                  {formatDateToIndonesian(
-                    new Date(detailDataAudio?.updatedAt)
-                  )}{" "}
-                  {"WIB"}
+                  {formatDateToIndonesian(new Date(detailDataAudio?.updatedAt))} {"WIB"}
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   &nbsp;| &nbsp;
@@ -776,12 +755,7 @@ const DetailAudio = () => {
               onClick={handleDownload}
               className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path
                   fill="white"
                   d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
@@ -817,11 +791,7 @@ const DetailAudio = () => {
                   )
                 }
               >
-                <Icon
-                  icon="mdi:twitter"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
               </a>
               <a
                 className="ml-5 cursor-pointer"
@@ -832,17 +802,10 @@ const DetailAudio = () => {
                   )
                 }
               >
-                <Icon
-                  icon="ri:whatsapp-fill"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
               </a>
               <Popover>
-                <PopoverTrigger
-                  className="flex justify-end gap-1 cursor-pointer"
-                  asChild
-                >
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
@@ -860,14 +823,10 @@ const DetailAudio = () => {
                   <div className="flex flex-col">
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail")}
-                      </p>
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
                       <Input
                         value={emailShareInput}
-                        onChange={(event) =>
-                          setEmailShareInput(event.target.value)
-                        }
+                        onChange={(event) => setEmailShareInput(event.target.value)}
                         onKeyPress={handleEmailList}
                         type="email"
                         placeholder={t("pressEnter")}
@@ -926,9 +885,7 @@ const DetailAudio = () => {
                         : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
-                      {data?.message}
-                    </p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
                     <div>
                       <a
                         style={
@@ -1003,9 +960,7 @@ const DetailAudio = () => {
                                   ? "HUMAS POLRI"
                                   : child1.suggestionFrom?.fullname}
                               </b>{" "}
-                              {getPublicLocaleTimestamp(
-                                new Date(child1.createdAt)
-                              )}
+                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
                             <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
                               {parse(String(child1?.message))}
@@ -1013,16 +968,13 @@ const DetailAudio = () => {
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("reply")}
@@ -1030,8 +982,7 @@ const DetailAudio = () => {
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -1064,11 +1015,7 @@ const DetailAudio = () => {
                                   {t("send")}
                                 </small>
                               </a>
-                              <a
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
-                              >
+                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("cancel")}
                                 </small>
@@ -1082,9 +1029,7 @@ const DetailAudio = () => {
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
                                   <img
-                                    src={
-                                      child2.suggestionFrom?.profilePictureUrl
-                                    }
+                                    src={child2.suggestionFrom?.profilePictureUrl}
                                     className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
                                     onError={addDefaultProfile}
                                     alt=""
@@ -1093,19 +1038,13 @@ const DetailAudio = () => {
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
                                       <b>
-                                        {Number(
-                                          child2.suggestionFrom?.roleId
-                                        ) == 2 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          3 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          4
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
                                           ? "HUMAS POLRI"
                                           : child2.suggestionFrom?.fullname}
                                       </b>{" "}
-                                      {getPublicLocaleTimestamp(
-                                        new Date(child2.createdAt)
-                                      )}
+                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
                                     <p className="text-slate-500 text-sm mb-4">
                                       {parse(String(child2?.message))}
@@ -1113,16 +1052,13 @@ const DetailAudio = () => {
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
+                                        onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("reply")}
@@ -1130,8 +1066,7 @@ const DetailAudio = () => {
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -1158,18 +1093,12 @@ const DetailAudio = () => {
                                       placeholder="Masukkan balasan anda"
                                     />
                                     <div className="flex flex-row gap-3">
-                                      <a
-                                        onClick={() => postDataChild(child2.id)}
-                                      >
+                                      <a onClick={() => postDataChild(child2.id)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("send")}
                                         </small>
                                       </a>
-                                      <a
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
-                                      >
+                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("cancel")}
                                         </small>
diff --git a/src/components/features/main/document-detail.tsx b/src/components/features/main/document-detail.tsx
index 1b393d2b..a4d9d20f 100644
--- a/src/components/features/main/document-detail.tsx
+++ b/src/components/features/main/document-detail.tsx
@@ -1,11 +1,16 @@
 "use client";
 
-import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
-import { Textarea } from "@/components/ui/textarea";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
+import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, successCallback, warning } from "@/config/swal";
+import { postActivityLog } from "@/lib/services/content/content";
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -15,27 +20,19 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import { close, error, loading, successCallback, warning } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
-import { Link, useRouter } from "@/i18n/navigation";
 import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import {
   checkMaliciousText,
   formatDateToIndonesian,
   getPublicLocaleTimestamp,
 } from "@/lib/utils/globals";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import parse from "html-react-parser";
-import { useTranslations } from "next-intl";
-import { postActivityLog } from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 const DetailDocument = () => {
   const [selectedSize, setSelectedSize] = useState<string>("L");
@@ -94,8 +91,8 @@ const DetailDocument = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -242,8 +239,7 @@ const DetailDocument = () => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType =
-          xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -277,11 +273,7 @@ const DetailDocument = () => {
       if (type == "wa" && width <= 768) {
         window.open(`whatsapp://send?${url}`, "_blank");
       } else if (type == "wa" && width > 768) {
-        window.open(
-          `https://web.whatsapp.com/send?${url}`,
-          "_blank",
-          "noreferrer"
-        );
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
       } else {
         window.open(url);
       }
@@ -326,9 +318,7 @@ const DetailDocument = () => {
   };
 
   async function sendSuggestionChild(parentId: any) {
-    const inputElement = document.querySelector(
-      `#input-comment-${parentId}`
-    ) as HTMLInputElement;
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
 
     if (inputElement && inputElement.value.length > 3) {
       loading();
@@ -341,9 +331,7 @@ const DetailDocument = () => {
       console.log(data);
       const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet: any = await getPublicSuggestionList(
-        slug?.split("-")?.[0]
-      );
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
       console.log(responseGet.data?.data);
       setListSuggestion(responseGet.data?.data);
 
@@ -482,10 +470,7 @@ const DetailDocument = () => {
                 </p> */}
                 <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
-                  {formatDateToIndonesian(
-                    new Date(detailDataDocument?.updatedAt)
-                  )}{" "}
-                  {"WIB"}
+                  {formatDateToIndonesian(new Date(detailDataDocument?.updatedAt))} {"WIB"}
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   &nbsp;| &nbsp;
@@ -605,12 +590,7 @@ const DetailDocument = () => {
               onClick={handleDownload}
               className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path
                   fill="white"
                   d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
@@ -646,11 +626,7 @@ const DetailDocument = () => {
                   )
                 }
               >
-                <Icon
-                  icon="mdi:twitter"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
               </a>
               <a
                 className="ml-5 cursor-pointer"
@@ -661,17 +637,10 @@ const DetailDocument = () => {
                   )
                 }
               >
-                <Icon
-                  icon="ri:whatsapp-fill"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
               </a>
               <Popover>
-                <PopoverTrigger
-                  className="flex justify-end gap-1 cursor-pointer"
-                  asChild
-                >
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
@@ -689,14 +658,10 @@ const DetailDocument = () => {
                   <div className="flex flex-col">
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail")}
-                      </p>
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
                       <Input
                         value={emailShareInput}
-                        onChange={(event) =>
-                          setEmailShareInput(event.target.value)
-                        }
+                        onChange={(event) => setEmailShareInput(event.target.value)}
                         onKeyPress={handleEmailList}
                         type="email"
                         placeholder={t("pressEnter")}
@@ -755,9 +720,7 @@ const DetailDocument = () => {
                         : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
-                      {data?.message}
-                    </p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
                     <div>
                       <a
                         style={
@@ -832,9 +795,7 @@ const DetailDocument = () => {
                                   ? "HUMAS POLRI"
                                   : child1.suggestionFrom?.fullname}
                               </b>{" "}
-                              {getPublicLocaleTimestamp(
-                                new Date(child1.createdAt)
-                              )}
+                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
                             <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
                               {parse(String(child1?.message))}
@@ -842,16 +803,13 @@ const DetailDocument = () => {
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("reply")}
@@ -859,8 +817,7 @@ const DetailDocument = () => {
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -893,11 +850,7 @@ const DetailDocument = () => {
                                   {t("send")}
                                 </small>
                               </a>
-                              <a
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
-                              >
+                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("cancel")}
                                 </small>
@@ -911,9 +864,7 @@ const DetailDocument = () => {
                               <div className="">
                                 <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
                                   <img
-                                    src={
-                                      child2.suggestionFrom?.profilePictureUrl
-                                    }
+                                    src={child2.suggestionFrom?.profilePictureUrl}
                                     className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
                                     onError={addDefaultProfile}
                                     alt=""
@@ -922,19 +873,13 @@ const DetailDocument = () => {
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
                                       <b>
-                                        {Number(
-                                          child2.suggestionFrom?.roleId
-                                        ) == 2 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          3 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          4
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
                                           ? "HUMAS POLRI"
                                           : child2.suggestionFrom?.fullname}
                                       </b>{" "}
-                                      {getPublicLocaleTimestamp(
-                                        new Date(child2.createdAt)
-                                      )}
+                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
                                     <p className="text-slate-500 text-sm mb-4">
                                       {parse(String(child2?.message))}
@@ -942,16 +887,13 @@ const DetailDocument = () => {
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
+                                        onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("reply")}
@@ -959,8 +901,7 @@ const DetailDocument = () => {
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -987,18 +928,12 @@ const DetailDocument = () => {
                                       placeholder={t("enterReply")}
                                     />
                                     <div className="flex flex-row gap-3">
-                                      <a
-                                        onClick={() => postDataChild(child2.id)}
-                                      >
+                                      <a onClick={() => postDataChild(child2.id)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("send")}
                                         </small>
                                       </a>
-                                      <a
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
-                                      >
+                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("cancel")}
                                         </small>
diff --git a/src/components/features/main/image-detail.tsx b/src/components/features/main/image-detail.tsx
index 8f1d73ea..72ec6a16 100644
--- a/src/components/features/main/image-detail.tsx
+++ b/src/components/features/main/image-detail.tsx
@@ -1,12 +1,18 @@
 "use client";
-import { Textarea } from "@/components/ui/textarea";
-import { useParams, usePathname, useSearchParams } from "next/navigation";
+
 import React, { useEffect, useState } from "react";
+import { Metadata } from "next";
+import Image from "next/image";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
-import NewContent from "@/components/features/landing-page/new-content";
-import { useToast } from "@/components/ui/use-toast";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
+import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
 import { close, error, loading, successCallback, warning } from "@/config/swal";
+import { postActivityLog } from "@/lib/services/content/content";
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -16,28 +22,20 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import { Link, useRouter } from "@/i18n/navigation";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
 import {
   checkMaliciousText,
   formatDateToIndonesian,
   getPublicLocaleTimestamp,
 } from "@/lib/utils/globals";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import parse from "html-react-parser";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Skeleton } from "@/components/ui/skeleton";
-import { useTranslations } from "next-intl";
-import Image from "next/image";
-import { postActivityLog } from "@/lib/services/content/content";
-import { Metadata } from "next";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 interface Size {
   label: string;
@@ -80,11 +78,7 @@ const DetailImage = (data: any) => {
   const poldaName = params?.polda_name;
   const satkerName = params?.satker_name;
 
-  let prefixPath = poldaName
-    ? `/polda/${poldaName}`
-    : satkerName
-    ? `/satker/${satkerName}`
-    : "/";
+  let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName ? `/satker/${satkerName}` : "/";
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -116,8 +110,8 @@ const DetailImage = (data: any) => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -282,8 +276,7 @@ const DetailImage = (data: any) => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType =
-          xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -317,11 +310,7 @@ const DetailImage = (data: any) => {
       if (type == "wa" && width <= 768) {
         window.open(`whatsapp://send?${url}`, "_blank");
       } else if (type == "wa" && width > 768) {
-        window.open(
-          `https://web.whatsapp.com/send?${url}`,
-          "_blank",
-          "noreferrer"
-        );
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
       } else {
         window.open(url);
       }
@@ -410,9 +399,7 @@ const DetailImage = (data: any) => {
   }
 
   async function sendSuggestionChild(parentId: any) {
-    const inputElement = document.querySelector(
-      `#input-comment-${parentId}`
-    ) as HTMLInputElement;
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
 
     if (inputElement && inputElement.value.length > 3) {
       loading();
@@ -425,9 +412,7 @@ const DetailImage = (data: any) => {
       console.log(data);
       const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet: any = await getPublicSuggestionList(
-        slug?.split("-")?.[0]
-      );
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
       console.log(responseGet.data?.data);
       setListSuggestion(responseGet.data?.data);
 
@@ -507,9 +492,7 @@ const DetailImage = (data: any) => {
   </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -525,9 +508,7 @@ const DetailImage = (data: any) => {
             ) : (
               <div className="relative">
                 <Image
-                  placeholder={`data:image/svg+xml;base64,${toBase64(
-                    shimmer(700, 475)
-                  )}`}
+                  placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                   width={2560}
                   height={1440}
                   src={detailDataImage?.files[selectedImage]?.url}
@@ -550,9 +531,7 @@ const DetailImage = (data: any) => {
                 {detailDataImage?.files?.map((file: any, index: number) => (
                   <a onClick={() => setSelectedImage(index)} key={file?.id}>
                     <Image
-                      placeholder={`data:image/svg+xml;base64,${toBase64(
-                        shimmer(700, 475)
-                      )}`}
+                      placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                       width={1920}
                       height={1080}
                       alt="image-small"
@@ -579,12 +558,8 @@ const DetailImage = (data: any) => {
                 </p> */}
                 <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
-                  {formatDateToIndonesian(
-                    new Date(detailDataImage?.updatedAt)
-                  )}{" "}
-                  {detailDataImage?.timezone
-                    ? detailDataImage?.timezone
-                    : "WIB"}
+                  {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))}{" "}
+                  {detailDataImage?.timezone ? detailDataImage?.timezone : "WIB"}
                   &nbsp;
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
@@ -707,12 +682,7 @@ const DetailImage = (data: any) => {
               onClick={handleDownload}
               className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path
                   fill="white"
                   d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
@@ -748,11 +718,7 @@ const DetailImage = (data: any) => {
                   )
                 }
               >
-                <Icon
-                  icon="mdi:twitter"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
               </a>
               <a
                 className="ml-5 cursor-pointer"
@@ -763,17 +729,10 @@ const DetailImage = (data: any) => {
                   )
                 }
               >
-                <Icon
-                  icon="ri:whatsapp-fill"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
               </a>
               <Popover>
-                <PopoverTrigger
-                  className="flex justify-end gap-1 cursor-pointer"
-                  asChild
-                >
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
@@ -791,14 +750,10 @@ const DetailImage = (data: any) => {
                   <div className="flex flex-col">
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail")}
-                      </p>
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
                       <Input
                         value={emailShareInput}
-                        onChange={(event) =>
-                          setEmailShareInput(event.target.value)
-                        }
+                        onChange={(event) => setEmailShareInput(event.target.value)}
                         onKeyPress={handleEmailList}
                         type="email"
                         placeholder={t("pressEnter")}
@@ -843,9 +798,7 @@ const DetailImage = (data: any) => {
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
                   <Image
-                    placeholder={`data:image/svg+xml;base64,${toBase64(
-                      shimmer(700, 475)
-                    )}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                     width={1080}
                     height={1080}
                     src={data?.suggestionFrom?.profilePictureUrl}
@@ -862,9 +815,7 @@ const DetailImage = (data: any) => {
                         : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
-                      {data?.message}
-                    </p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
                     <div>
                       <a
                         style={
@@ -924,9 +875,7 @@ const DetailImage = (data: any) => {
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
                           <Image
-                            placeholder={`data:image/svg+xml;base64,${toBase64(
-                              shimmer(700, 475)
-                            )}`}
+                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                             width={1080}
                             height={1080}
                             src={child1.suggestionFrom?.profilePictureUrl}
@@ -944,9 +893,7 @@ const DetailImage = (data: any) => {
                                   ? "HUMAS POLRI"
                                   : child1.suggestionFrom?.fullname}
                               </b>{" "}
-                              {getPublicLocaleTimestamp(
-                                new Date(child1.createdAt)
-                              )}
+                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
                             <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
                               {parse(String(child1?.message))}
@@ -954,16 +901,13 @@ const DetailImage = (data: any) => {
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("reply")}
@@ -971,8 +915,7 @@ const DetailImage = (data: any) => {
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -1005,11 +948,7 @@ const DetailImage = (data: any) => {
                                   {t("send")}
                                 </small>
                               </a>
-                              <a
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
-                              >
+                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("cancel")}
                                 </small>
@@ -1028,9 +967,7 @@ const DetailImage = (data: any) => {
                                     )}`}
                                     width={1080}
                                     height={1080}
-                                    src={
-                                      child2.suggestionFrom?.profilePictureUrl
-                                    }
+                                    src={child2.suggestionFrom?.profilePictureUrl}
                                     className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
                                     onError={addDefaultProfile}
                                     alt=""
@@ -1039,19 +976,13 @@ const DetailImage = (data: any) => {
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
                                       <b>
-                                        {Number(
-                                          child2.suggestionFrom?.roleId
-                                        ) == 2 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          3 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          4
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
                                           ? "HUMAS POLRI"
                                           : child2.suggestionFrom?.fullname}
                                       </b>{" "}
-                                      {getPublicLocaleTimestamp(
-                                        new Date(child2.createdAt)
-                                      )}
+                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
                                     <p className="text-slate-500 text-sm mb-4">
                                       {parse(String(child2?.message))}
@@ -1059,16 +990,13 @@ const DetailImage = (data: any) => {
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
+                                        onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("reply")}
@@ -1076,8 +1004,7 @@ const DetailImage = (data: any) => {
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -1104,18 +1031,12 @@ const DetailImage = (data: any) => {
                                       placeholder="Masukkan balasan anda"
                                     />
                                     <div className="flex flex-row gap-3">
-                                      <a
-                                        onClick={() => postDataChild(child2.id)}
-                                      >
+                                      <a onClick={() => postDataChild(child2.id)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("send")}
                                         </small>
                                       </a>
-                                      <a
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
-                                      >
+                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("cancel")}
                                         </small>
diff --git a/src/components/features/main/video-detail.tsx b/src/components/features/main/video-detail.tsx
index 85cbf210..28bc642f 100644
--- a/src/components/features/main/video-detail.tsx
+++ b/src/components/features/main/video-detail.tsx
@@ -1,8 +1,17 @@
 "use client";
 
-import { useParams, usePathname, useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import { Icon } from "@iconify/react/dist/iconify.js";
+import parse from "html-react-parser";
+import { useTranslations } from "next-intl";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { close, error, loading, successCallback, warning } from "@/config/swal";
+import { postActivityLog } from "@/lib/services/content/content";
 import {
   checkWishlistStatus,
   createPublicSuggestion,
@@ -12,32 +21,20 @@ import {
   getPublicSuggestionList,
   saveWishlist,
 } from "@/lib/services/landing/landing";
-import VideoPlayer from "@/lib/utils/video-player";
-import NewContent from "@/components/features/landing-page/new-content";
-import { Link, useRouter } from "@/i18n/navigation";
-import { Textarea } from "@/components/ui/textarea";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { close, error, loading, successCallback, warning } from "@/config/swal";
-import { useToast } from "@/components/ui/use-toast";
 import { sendMediaUploadToEmail } from "@/lib/services/media-tracking/media-tracking";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import {
   checkMaliciousText,
   formatDateToIndonesian,
   getPublicLocaleTimestamp,
 } from "@/lib/utils/globals";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import parse from "html-react-parser";
-import { useTranslations } from "next-intl";
-import Image from "next/image";
-import { postActivityLog } from "@/lib/services/content/content";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+import VideoPlayer from "@/lib/utils/video-player";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/components/ui/use-toast";
+import NewContent from "@/components/features/landing-page/new-content";
 
 interface Size {
   label: string;
@@ -98,8 +95,8 @@ const DetailVideo = () => {
         Number(response?.data?.data?.fileType?.id) == 4
           ? response?.data?.data?.files[0]?.secondaryUrl
           : Number(response?.data?.data?.fileType?.id) == 2
-          ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
-          : response?.data?.data?.files[0]?.url,
+            ? `${process.env.NEXT_PUBLIC_API}/media/view?id=${response?.data?.data?.files[0]?.id}&operation=file&type=video`
+            : response?.data?.data?.files[0]?.url,
       thumbnailFileUrl: response?.data?.data?.files[0]?.thumbnailFileUrl,
       names: response?.data?.data?.files[0]?.fileName,
       format: response?.data?.data?.files[0]?.format,
@@ -240,8 +237,7 @@ const DetailVideo = () => {
 
     xhr.addEventListener("readystatechange", () => {
       if (xhr.readyState === 4 && xhr.status === 200) {
-        const contentType =
-          xhr.getResponseHeader("content-type") || "application/octet-stream";
+        const contentType = xhr.getResponseHeader("content-type") || "application/octet-stream";
         const extension = contentType.split("/")[1];
         const filename = `${name}.${extension}`;
 
@@ -275,11 +271,7 @@ const DetailVideo = () => {
       if (type == "wa" && width <= 768) {
         window.open(`whatsapp://send?${url}`, "_blank");
       } else if (type == "wa" && width > 768) {
-        window.open(
-          `https://web.whatsapp.com/send?${url}`,
-          "_blank",
-          "noreferrer"
-        );
+        window.open(`https://web.whatsapp.com/send?${url}`, "_blank", "noreferrer");
       } else {
         window.open(url);
       }
@@ -324,9 +316,7 @@ const DetailVideo = () => {
   };
 
   async function sendSuggestionChild(parentId: any) {
-    const inputElement = document.querySelector(
-      `#input-comment-${parentId}`
-    ) as HTMLInputElement;
+    const inputElement = document.querySelector(`#input-comment-${parentId}`) as HTMLInputElement;
 
     if (inputElement && inputElement.value.length > 3) {
       loading();
@@ -339,9 +329,7 @@ const DetailVideo = () => {
       console.log(data);
       const response = await createPublicSuggestion(data);
       console.log(response);
-      const responseGet: any = await getPublicSuggestionList(
-        slug?.split("-")?.[0]
-      );
+      const responseGet: any = await getPublicSuggestionList(slug?.split("-")?.[0]);
       console.log(responseGet.data?.data);
       setListSuggestion(responseGet.data?.data);
 
@@ -458,9 +446,7 @@ const DetailVideo = () => {
   </svg>`;
 
   const toBase64 = (str: string) =>
-    typeof window === "undefined"
-      ? Buffer.from(str).toString("base64")
-      : window.btoa(str);
+    typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
   return (
     <>
@@ -498,10 +484,7 @@ const DetailVideo = () => {
                 </p> */}
                 <p className="text-xs lg:text-sm">
                   &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
-                  {formatDateToIndonesian(
-                    new Date(detailDataVideo?.updatedAt)
-                  )}{" "}
-                  {"WIB"}
+                  {formatDateToIndonesian(new Date(detailDataVideo?.updatedAt))} {"WIB"}
                 </p>
                 <p className="text-xs lg:text-sm flex justify-center items-center">
                   &nbsp;|&nbsp;
@@ -623,12 +606,7 @@ const DetailVideo = () => {
               onClick={handleDownload}
               className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="1em"
-                height="1em"
-                viewBox="0 0 24 24"
-              >
+              <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                 <path
                   fill="white"
                   d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z"
@@ -664,11 +642,7 @@ const DetailVideo = () => {
                   )
                 }
               >
-                <Icon
-                  icon="mdi:twitter"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="mdi:twitter" width="23" className="text-red-600 text-center" />
               </a>
               <a
                 className="ml-5 cursor-pointer"
@@ -679,17 +653,10 @@ const DetailVideo = () => {
                   )
                 }
               >
-                <Icon
-                  icon="ri:whatsapp-fill"
-                  width="23"
-                  className="text-red-600 text-center"
-                />
+                <Icon icon="ri:whatsapp-fill" width="23" className="text-red-600 text-center" />
               </a>
               <Popover>
-                <PopoverTrigger
-                  className="flex justify-end gap-1 cursor-pointer"
-                  asChild
-                >
+                <PopoverTrigger className="flex justify-end gap-1 cursor-pointer" asChild>
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
@@ -707,14 +674,10 @@ const DetailVideo = () => {
                   <div className="flex flex-col">
                     <h1 className="mb-2">{t("shareTo")}</h1>
                     <div className="flex flex-col mb-2">
-                      <p className="text-base font-semibold mb-1">
-                        {t("destinationEmail")}
-                      </p>
+                      <p className="text-base font-semibold mb-1">{t("destinationEmail")}</p>
                       <Input
                         value={emailShareInput}
-                        onChange={(event) =>
-                          setEmailShareInput(event.target.value)
-                        }
+                        onChange={(event) => setEmailShareInput(event.target.value)}
                         onKeyPress={handleEmailList}
                         type="email"
                         placeholder={t("pressEnter")}
@@ -758,9 +721,7 @@ const DetailVideo = () => {
               <div className="flex flex-col">
                 <div className="flex flex-row mt-2 px-4 lg:px-14">
                   <Image
-                    placeholder={`data:image/svg+xml;base64,${toBase64(
-                      shimmer(700, 475)
-                    )}`}
+                    placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                     width={1080}
                     height={1080}
                     src={data?.suggestionFrom?.profilePictureUrl}
@@ -777,9 +738,7 @@ const DetailVideo = () => {
                         : data.suggestionFrom?.fullname}
                       {getPublicLocaleTimestamp(new Date(data.createdAt))}
                     </p>
-                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
-                      {data?.message}
-                    </p>
+                    <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
                     <div>
                       <a
                         style={
@@ -839,9 +798,7 @@ const DetailVideo = () => {
                       <div className="flex flex-col">
                         <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
                           <Image
-                            placeholder={`data:image/svg+xml;base64,${toBase64(
-                              shimmer(700, 475)
-                            )}`}
+                            placeholder={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
                             width={1080}
                             height={1080}
                             src={child1.suggestionFrom?.profilePictureUrl}
@@ -859,9 +816,7 @@ const DetailVideo = () => {
                                   ? "HUMAS POLRI"
                                   : child1.suggestionFrom?.fullname}
                               </b>{" "}
-                              {getPublicLocaleTimestamp(
-                                new Date(child1.createdAt)
-                              )}
+                              {getPublicLocaleTimestamp(new Date(child1.createdAt))}
                             </p>
                             <p className="text-slate-500 text-[13px] lg:text-sm mb-4">
                               {parse(String(child1?.message))}
@@ -869,16 +824,13 @@ const DetailVideo = () => {
                             <div>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {
                                         display: "none",
                                       }
                                     : {}
                                 }
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
+                                onClick={() => showInput(`comment-id-${child1.id}`)}
                               >
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white  px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("reply")}
@@ -886,8 +838,7 @@ const DetailVideo = () => {
                               </a>
                               <a
                                 style={
-                                  Number(child1.suggestionFrom?.id) ==
-                                  Number(userId)
+                                  Number(child1.suggestionFrom?.id) == Number(userId)
                                     ? {}
                                     : {
                                         display: "none",
@@ -919,11 +870,7 @@ const DetailVideo = () => {
                                   {t("send")}
                                 </small>
                               </a>
-                              <a
-                                onClick={() =>
-                                  showInput(`comment-id-${child1.id}`)
-                                }
-                              >
+                              <a onClick={() => showInput(`comment-id-${child1.id}`)}>
                                 <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                   {t("cancel")}
                                 </small>
@@ -942,9 +889,7 @@ const DetailVideo = () => {
                                     )}`}
                                     width={1080}
                                     height={1080}
-                                    src={
-                                      child2.suggestionFrom?.profilePictureUrl
-                                    }
+                                    src={child2.suggestionFrom?.profilePictureUrl}
                                     className="h-9 lg:h-16 w-9 lg:w-16 mr-2"
                                     onError={addDefaultProfile}
                                     alt=""
@@ -953,19 +898,13 @@ const DetailVideo = () => {
                                     <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
                                       {" "}
                                       <b>
-                                        {Number(
-                                          child2.suggestionFrom?.roleId
-                                        ) == 2 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          3 ||
-                                        Number(child2.suggestionFrom?.roleId) ==
-                                          4
+                                        {Number(child2.suggestionFrom?.roleId) == 2 ||
+                                        Number(child2.suggestionFrom?.roleId) == 3 ||
+                                        Number(child2.suggestionFrom?.roleId) == 4
                                           ? "HUMAS POLRI"
                                           : child2.suggestionFrom?.fullname}
                                       </b>{" "}
-                                      {getPublicLocaleTimestamp(
-                                        new Date(child2.createdAt)
-                                      )}
+                                      {getPublicLocaleTimestamp(new Date(child2.createdAt))}
                                     </p>
                                     <p className="text-slate-500 text-sm mb-4">
                                       {parse(String(child2?.message))}
@@ -973,16 +912,13 @@ const DetailVideo = () => {
                                     <div>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {
                                                 display: "none",
                                               }
                                             : {}
                                         }
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
+                                        onClick={() => showInput(`comment-id-${child2.id}`)}
                                       >
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("reply")}
@@ -990,8 +926,7 @@ const DetailVideo = () => {
                                       </a>
                                       <a
                                         style={
-                                          Number(child2.suggestionFrom?.id) ==
-                                          Number(userId)
+                                          Number(child2.suggestionFrom?.id) == Number(userId)
                                             ? {}
                                             : {
                                                 display: "none",
@@ -1018,18 +953,12 @@ const DetailVideo = () => {
                                       placeholder={t("enterReply")}
                                     />
                                     <div className="flex flex-row gap-3">
-                                      <a
-                                        onClick={() => postDataChild(child2.id)}
-                                      >
+                                      <a onClick={() => postDataChild(child2.id)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("send")}
                                         </small>
                                       </a>
-                                      <a
-                                        onClick={() =>
-                                          showInput(`comment-id-${child2.id}`)
-                                        }
-                                      >
+                                      <a onClick={() => showInput(`comment-id-${child2.id}`)}>
                                         <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">
                                           {t("cancel")}
                                         </small>
diff --git a/src/components/features/project/activity.tsx b/src/components/features/project/activity.tsx
index 4ed93816..da9aaa62 100644
--- a/src/components/features/project/activity.tsx
+++ b/src/components/features/project/activity.tsx
@@ -4,7 +4,7 @@ interface ActivityItemProps {
   activity: {
     title: string;
     date: string;
-  }
+  };
 }
 const ActivityItem = ({ activity }: ActivityItemProps) => {
   const { title, date } = activity;
@@ -14,12 +14,8 @@ const ActivityItem = ({ activity }: ActivityItemProps) => {
         <Check className="w-3 h-3 text-default-foreground" />
       </div>
       <div>
-        <h2 className="text-sm font-medium  mb-1 text-default-600">
-          {title}
-        </h2>
-        <p className="text-xs capitalize">
-          {date}
-        </p>
+        <h2 className="text-sm font-medium  mb-1 text-default-600">{title}</h2>
+        <p className="text-xs capitalize">{date}</p>
       </div>
     </li>
   );
diff --git a/src/components/features/project/deals-distribution-chart.tsx b/src/components/features/project/deals-distribution-chart.tsx
index 22035430..c52556e2 100644
--- a/src/components/features/project/deals-distribution-chart.tsx
+++ b/src/components/features/project/deals-distribution-chart.tsx
@@ -1,28 +1,25 @@
 "use client";
+
 import dynamic from "next/dynamic";
-const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 import { useTheme } from "next-themes";
-import {
-  getGridConfig,
-  getXAxisConfig,
-  getYAxisConfig,
-} from "@/lib/appex-chart-options";
+
+import { getGridConfig, getXAxisConfig, getYAxisConfig } from "@/lib/appex-chart-options";
 import { colors } from "@/lib/colors";
 
+const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
+
 interface DealsDistributionChartProps {
   height?: number;
   seriesData?: number[];
 }
-const DealsDistributionChart = ({ 
-  height = 300 ,
-  seriesData =[90, 70, 85, 60, 80, 70, 90, 75, 60, 80]
-
+const DealsDistributionChart = ({
+  height = 300,
+  seriesData = [90, 70, 85, 60, 80, 70, 90, 75, 60, 80],
 }: DealsDistributionChartProps) => {
-
   const { theme: mode } = useTheme();
   const series = [
     {
-      data:seriesData
+      data: seriesData,
     },
   ];
   const options: any = {
@@ -53,10 +50,8 @@ const DealsDistributionChart = ({
         stops: [50, 100, 0],
       },
     },
-    yaxis: getYAxisConfig(mode === 'light' ? colors["default-600"] : colors["default-300"]),
-    xaxis: getXAxisConfig(
-      mode === 'light' ? colors["default-600"] : colors["default-300"]
-    ),
+    yaxis: getYAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
+    xaxis: getXAxisConfig(mode === "light" ? colors["default-600"] : colors["default-300"]),
     padding: {
       top: 0,
       right: 0,
@@ -64,15 +59,7 @@ const DealsDistributionChart = ({
       left: 0,
     },
   };
-  return (
-    <Chart
-      options={options}
-      series={series}
-      type="area"
-      height={height}
-      width={"100%"}
-    />
-  );
+  return <Chart options={options} series={series} type="area" height={height} width={"100%"} />;
 };
 
 export default DealsDistributionChart;
diff --git a/src/components/features/project/message-list-item.tsx b/src/components/features/project/message-list-item.tsx
index 960b6a30..ba61a29b 100644
--- a/src/components/features/project/message-list-item.tsx
+++ b/src/components/features/project/message-list-item.tsx
@@ -1,5 +1,5 @@
+import { cn } from "@/lib/utils/utils";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { cn } from "@/lib/utils/utils"
 
 interface MessageListItemProps {
   message: {
@@ -9,7 +9,7 @@ interface MessageListItemProps {
     hasnotifaction?: boolean;
     notification_count?: number;
     image: string;
-  }
+  };
 }
 
 const MessageListItem = ({ message }: MessageListItemProps) => {
@@ -22,9 +22,12 @@ const MessageListItem = ({ message }: MessageListItemProps) => {
             <AvatarImage src={image} alt="mesage title" />
             <AvatarFallback />
           </Avatar>
-          <span className={cn("absolute top-1 end-0 w-2 h-2 bg-secondary rounded-full ring ring-default-200",
-            { "bg-success": active }
-          )}></span>
+          <span
+            className={cn(
+              "absolute top-1 end-0 w-2 h-2 bg-secondary rounded-full ring ring-default-200",
+              { "bg-success": active }
+            )}
+          ></span>
         </div>
         <div>
           <div className="text-default-800  text-sm font-medium mb-1">{title}</div>
@@ -43,4 +46,4 @@ const MessageListItem = ({ message }: MessageListItemProps) => {
   );
 };
 
-export default MessageListItem;
\ No newline at end of file
+export default MessageListItem;
diff --git a/src/components/features/project/notes-calendar.tsx b/src/components/features/project/notes-calendar.tsx
index d5620f49..c89e1b4f 100644
--- a/src/components/features/project/notes-calendar.tsx
+++ b/src/components/features/project/notes-calendar.tsx
@@ -1,18 +1,13 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Calendar } from "@/components/ui/calendar"
+import { useState } from "react";
+
+import { Calendar } from "@/components/ui/calendar";
 
 const NotesCalendar = () => {
-  const [date, setDate] = useState<Date | undefined>(new Date())
+  const [date, setDate] = useState<Date | undefined>(new Date());
 
-  return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-    />
-  )
-}
+  return <Calendar mode="single" selected={date} onSelect={setDate} />;
+};
 
-export default NotesCalendar;
\ No newline at end of file
+export default NotesCalendar;
diff --git a/src/components/features/project/task-item.tsx b/src/components/features/project/task-item.tsx
index a0a172d0..03116632 100644
--- a/src/components/features/project/task-item.tsx
+++ b/src/components/features/project/task-item.tsx
@@ -1,13 +1,14 @@
+import { SquarePen, Trash2 } from "lucide-react";
+
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { SquarePen, Trash2 } from "lucide-react";
 
 interface TaskItemProps {
   task: { image: string; title: string };
 }
 const TaskItem = ({ task }: TaskItemProps) => {
-  const { image, title } = task
+  const { image, title } = task;
   return (
     <li className="flex items-center gap-2 py-3 px-6">
       <div className="flex-none w-12">
@@ -22,10 +23,16 @@ const TaskItem = ({ task }: TaskItemProps) => {
       <div className="flex-1">
         <div className="text-sm text-default-600 max-w-[140px] truncate">{title}</div>
       </div>
-      <button className="text-default-400 me-2"> <SquarePen className="w-4 h-4 " /></button>
-      <button className=" text-default-400 hover:text-destructive">   <Trash2 className="w-4 h-4" /></button>
+      <button className="text-default-400 me-2">
+        {" "}
+        <SquarePen className="w-4 h-4 " />
+      </button>
+      <button className=" text-default-400 hover:text-destructive">
+        {" "}
+        <Trash2 className="w-4 h-4" />
+      </button>
     </li>
   );
 };
 
-export default TaskItem;
\ No newline at end of file
+export default TaskItem;
diff --git a/src/components/features/project/team-table.tsx b/src/components/features/project/team-table.tsx
index 0e982e6d..18fbf029 100644
--- a/src/components/features/project/team-table.tsx
+++ b/src/components/features/project/team-table.tsx
@@ -1,22 +1,31 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import Chart from "react-apexcharts";
+import * as React from "react";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
-} from "@tanstack/react-table"
-import { Button } from "@/components/ui/button"
+  VisibilityState,
+} from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import Chart from "react-apexcharts";
 
+import { colors } from "@/lib/colors";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Table,
   TableBody,
@@ -24,29 +33,23 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react"
-
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { colors } from "@/lib/colors"
-
+} from "@/components/ui/table";
 
 export type TeamTableProps = {
   customer: {
     name: string;
     image: string;
     deg: string;
-  },
+  };
   status: "progress" | "complete";
   time: string;
   chart: null;
-  action:null;
-}
+  action: null;
+};
 const series = [
   {
     data: [800, 600, 1000, 800, 600, 1000, 800, 900],
-  }
+  },
 ];
 const options: any = {
   chart: {
@@ -110,7 +113,6 @@ const options: any = {
   },
 };
 
-
 export const columns: ColumnDef<TeamTableProps>[] = [
   {
     accessorKey: "customer",
@@ -153,15 +155,13 @@ export const columns: ColumnDef<TeamTableProps>[] = [
             )}
           </div>
         </div>
-      )
-    }
+      );
+    },
   },
   {
     accessorKey: "time",
     header: "Time",
-    cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("time")}</span>
-    )
+    cell: ({ row }) => <span className="whitespace-nowrap">{row.getValue("time")}</span>,
   },
   {
     accessorKey: "chart",
@@ -170,7 +170,7 @@ export const columns: ColumnDef<TeamTableProps>[] = [
       <div>
         <Chart options={options} series={series} type="area" width="100%" height={48} />
       </div>
-    )
+    ),
   },
 
   {
@@ -185,7 +185,7 @@ export const columns: ColumnDef<TeamTableProps>[] = [
             <DropdownMenuTrigger asChild>
               <Button
                 size="icon"
-                 className="w-8 h-8 text-default-700 bg-transparent hover:bg-transparent ring-offset-transparent hover:ring-transparent"
+                className="w-8 h-8 text-default-700 bg-transparent hover:bg-transparent ring-offset-transparent hover:ring-transparent"
               >
                 <span className="sr-only">Open menu</span>
                 <MoreVertical className="h-4 w-4" />
@@ -198,27 +198,29 @@ export const columns: ColumnDef<TeamTableProps>[] = [
               </DropdownMenuItem>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <SquarePen className="w-4 h-4 me-1.5" />
-                Edit</DropdownMenuItem>
+                Edit
+              </DropdownMenuItem>
               <DropdownMenuItem className="p-2 border-b bg-destructive/30 text-destructive group focus:bg-destructive focus:text-destructive-foreground rounded-none">
                 <Trash2 className="w-4 h-4 me-1.5" />
-                Delete</DropdownMenuItem>
+                Delete
+              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-      )
-    }
-  }
-]
+      );
+    },
+  },
+];
 
 const TeamTable = ({ data }: any) => {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
     pageSize: 6,
-  })
+  });
 
   const table = useReactTable({
     data,
@@ -237,9 +239,9 @@ const TeamTable = ({ data }: any) => {
       columnFilters,
       columnVisibility,
       rowSelection,
-      pagination
+      pagination,
     },
-  })
+  });
 
   return (
     <div className="w-full overflow-x-auto">
@@ -249,10 +251,9 @@ const TeamTable = ({ data }: any) => {
             <TableRow key={headerGroup.id} className="bg-default-200">
               {headerGroup.headers.map((header) => (
                 <TableHead key={header.id} className="last:text-end">
-                  {header.isPlaceholder ? null : flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
-                  )}
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -268,31 +269,22 @@ const TeamTable = ({ data }: any) => {
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
-                    {flexRender(
-                      cell.column.columnDef.cell,
-                      cell.getContext()
-                    )}
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}
               </TableRow>
             ))
           ) : (
             <TableRow>
-              <TableCell
-                colSpan={columns.length}
-                className="h-24 text-center"
-              >
+              <TableCell colSpan={columns.length} className="h-24 text-center">
                 No results.
               </TableCell>
             </TableRow>
           )}
         </TableBody>
       </Table>
-
-
     </div>
-  )
-}
+  );
+};
 
 export default TeamTable;
-
diff --git a/src/components/features/table/management-user/management-user-external-column-table.tsx b/src/components/features/table/management-user/management-user-external-column-table.tsx
index ece91b6c..d69f26cd 100644
--- a/src/components/features/table/management-user/management-user-external-column-table.tsx
+++ b/src/components/features/table/management-user/management-user-external-column-table.tsx
@@ -1,26 +1,26 @@
+import { stringify } from "querystring";
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
-
 import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { error } from "@/config/swal";
+import { deleteUser } from "@/lib/services/management-user/management-user";
+import { setBanner } from "@/lib/services/settings/settings";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Link, useRouter } from "@/i18n/navigation";
-
-import { setBanner } from "@/lib/services/settings/settings";
-import { error } from "@/config/swal";
 import { useToast } from "@/components/ui/use-toast";
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-import { deleteUser } from "@/lib/services/management-user/management-user";
-import { stringify } from "querystring";
+
 const columns: ColumnDef<any>[] = [
   {
     accessorKey: "no",
@@ -31,17 +31,13 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "fullname",
     header: "Nama",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("fullname")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("fullname")}</span>,
   },
   {
     accessorKey: "username",
     header: "Username",
     cell: ({ row }) => (
-      <span className="normal-case">
-        {row.original?.userKeycloak?.username || ""}
-      </span>
+      <span className="normal-case">{row.original?.userKeycloak?.username || ""}</span>
     ),
   },
   {
@@ -52,34 +48,24 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "email",
     header: "Email",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("email")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("email")}</span>,
   },
   {
     accessorKey: "level",
     header: "Level Pengguna",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.original?.role?.name || ""}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.original?.role?.name || ""}</span>,
   },
   {
     accessorKey: "createdAt",
     header: "Tanggal Unggah",
-    cell: ({ row }) => (
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
-    ),
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
   },
 
   {
     accessorKey: "isActive",
     header: "Status",
     cell: ({ row }) => (
-      <span
-        className={
-          row.getValue("isActive") ? "text-success" : "text-destructive"
-        }
-      >
+      <span className={row.getValue("isActive") ? "text-success" : "text-destructive"}>
         {row.getValue("isActive") ? "Aktif" : "Belum Aktif"}
       </span>
     ),
@@ -137,18 +123,10 @@ const columns: ColumnDef<any>[] = [
               <a>Aktivasi</a>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/external/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/admin/management-user/external/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/external/edit/${row.original.id}`}
-              >
-                Edit
-              </Link>
+              <Link href={`/admin/management-user/external/edit/${row.original.id}`}>Edit</Link>
             </DropdownMenuItem>
             <DropdownMenuItem
               color="red"
diff --git a/src/components/features/table/management-user/management-user-external-table.tsx b/src/components/features/table/management-user/management-user-external-table.tsx
index bb2339e4..6abec9ad 100644
--- a/src/components/features/table/management-user/management-user-external-table.tsx
+++ b/src/components/features/table/management-user/management-user-external-table.tsx
@@ -1,31 +1,28 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { PlusIcon } from "lucide-react";
+
+import { close, loading } from "@/config/swal";
+import { AdministrationUserList } from "@/lib/services/management-user/management-user";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,20 +32,18 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
-
-import { useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./management-user-external-column-table";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
 
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { useRouter, Link } from "@/i18n/navigation";
-import { AdministrationUserList } from "@/lib/services/management-user/management-user";
+import columns from "./management-user-external-column-table";
 
 const UserExternalTable = () => {
   const router = useRouter();
@@ -61,11 +56,8 @@ const UserExternalTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -201,22 +193,11 @@ const UserExternalTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -230,10 +211,7 @@ const UserExternalTable = () => {
               <div className="flex flex-col gap-2 px-2">
                 <div className="flex justify-between text-sm">
                   <p>Filter</p>
-                  <a
-                    onClick={() => fetchData()}
-                    className="cursor-pointer text-primary"
-                  >
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
                     Simpan
                   </a>
                 </div>
@@ -243,9 +221,7 @@ const UserExternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 3, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -258,9 +234,7 @@ const UserExternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 4, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -274,9 +248,7 @@ const UserExternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(11)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 11, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 11, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -289,9 +261,7 @@ const UserExternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(12)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 12, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 12, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -305,9 +275,7 @@ const UserExternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(9)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 9, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 9, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -320,9 +288,7 @@ const UserExternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(10)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 10, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 10, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -345,10 +311,7 @@ const UserExternalTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -378,11 +341,7 @@ const UserExternalTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </>
   );
 };
diff --git a/src/components/features/table/management-user/management-user-internal-column-table.tsx b/src/components/features/table/management-user/management-user-internal-column-table.tsx
index 0e784f6a..9cf5e0a2 100644
--- a/src/components/features/table/management-user/management-user-internal-column-table.tsx
+++ b/src/components/features/table/management-user/management-user-internal-column-table.tsx
@@ -1,22 +1,22 @@
+import { stringify } from "querystring";
 import * as React from "react";
+import { Link, useRouter } from "@/i18n/navigation";
 import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { deleteUser } from "@/lib/services/management-user/management-user";
+import { formatDateToIndonesian } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuTrigger,
   DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { formatDateToIndonesian } from "@/lib/utils/globals";
-import { Link, useRouter } from "@/i18n/navigation";
-
 import { useToast } from "@/components/ui/use-toast";
-import { deleteUser } from "@/lib/services/management-user/management-user";
-import { stringify } from "querystring";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -28,17 +28,13 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "fullname",
     header: "Nama",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("fullname")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("fullname")}</span>,
   },
   {
     accessorKey: "username",
     header: "Username",
     cell: ({ row }) => (
-      <span className="normal-case">
-        {row.original?.userKeycloak?.username || ""}
-      </span>
+      <span className="normal-case">{row.original?.userKeycloak?.username || ""}</span>
     ),
   },
   {
@@ -49,34 +45,24 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "email",
     header: "Email",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("email")}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.getValue("email")}</span>,
   },
   {
     accessorKey: "level",
     header: "Level Pengguna",
-    cell: ({ row }) => (
-      <span className="normal-case">{row.original.userLevel.name}</span>
-    ),
+    cell: ({ row }) => <span className="normal-case">{row.original.userLevel.name}</span>,
   },
   {
     accessorKey: "createdAt",
     header: "Tanggal Unggah",
-    cell: ({ row }) => (
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
-    ),
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
   },
 
   {
     accessorKey: "isActive",
     header: "Status",
     cell: ({ row }) => (
-      <span
-        className={
-          row.getValue("isActive") ? "text-success" : "text-destructive"
-        }
-      >
+      <span className={row.getValue("isActive") ? "text-success" : "text-destructive"}>
         {row.getValue("isActive") ? "Aktif" : "Belum Aktif"}
       </span>
     ),
@@ -131,18 +117,10 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/internal/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
+              <Link href={`/admin/management-user/internal/detail/${row.original.id}`}>Detail</Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/admin/management-user/internal/edit/${row.original.id}`}
-              >
-                Edit
-              </Link>
+              <Link href={`/admin/management-user/internal/edit/${row.original.id}`}>Edit</Link>
             </DropdownMenuItem>
             <DropdownMenuItem
               color="red"
diff --git a/src/components/features/table/management-user/management-user-internal-table.tsx b/src/components/features/table/management-user/management-user-internal-table.tsx
index 8766e577..7ea25c3e 100644
--- a/src/components/features/table/management-user/management-user-internal-table.tsx
+++ b/src/components/features/table/management-user/management-user-internal-table.tsx
@@ -1,30 +1,31 @@
 "use client";
 
 import * as React from "react";
+import { useSearchParams } from "next/navigation";
+import { Link, useRouter } from "@/i18n/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
 
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
+import { close, loading } from "@/config/swal";
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { AdministrationUserList } from "@/lib/services/management-user/management-user";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,22 +36,18 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./management-user-internal-column-table";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
-import { Link, useRouter } from "@/i18n/navigation";
-import { AdministrationUserList } from "@/lib/services/management-user/management-user";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
+
+import columns from "./management-user-internal-column-table";
 
 const UserInternalTable = () => {
   const router = useRouter();
@@ -62,11 +59,8 @@ const UserInternalTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -204,22 +198,11 @@ const UserInternalTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
-                value={showData}
-                onValueChange={setShowData}
-              >
-                <DropdownMenuRadioItem value="10">
-                  1 - 10 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="20">
-                  1 - 20 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="25">
-                  1 - 25 Data
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="50">
-                  1 - 50 Data
-                </DropdownMenuRadioItem>
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
               </DropdownMenuRadioGroup>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -233,10 +216,7 @@ const UserInternalTable = () => {
               <div className="flex flex-col gap-2 px-2">
                 <div className="flex justify-between text-sm">
                   <p>Filter</p>
-                  <a
-                    onClick={() => fetchData()}
-                    className="cursor-pointer text-primary"
-                  >
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
                     Simpan
                   </a>
                 </div>
@@ -246,9 +226,7 @@ const UserInternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 3, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -261,9 +239,7 @@ const UserInternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 4, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -277,9 +253,7 @@ const UserInternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(11)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 11, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 11, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -292,9 +266,7 @@ const UserInternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(12)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 12, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 12, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -308,9 +280,7 @@ const UserInternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(9)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 9, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 9, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -323,9 +293,7 @@ const UserInternalTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(10)}
-                      onCheckedChange={(e) =>
-                        handleChange("status", 10, Boolean(e))
-                      }
+                      onCheckedChange={(e) => handleChange("status", 10, Boolean(e))}
                     />
                     <label
                       htmlFor="accepted"
@@ -348,10 +316,7 @@ const UserInternalTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -381,11 +346,7 @@ const UserInternalTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </>
   );
 };
diff --git a/src/components/features/table/table-pagination.tsx b/src/components/features/table/table-pagination.tsx
index ee12cd0b..b2940b6c 100644
--- a/src/components/features/table/table-pagination.tsx
+++ b/src/components/features/table/table-pagination.tsx
@@ -1,9 +1,10 @@
-import { Button } from '@/components/ui/button';
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
 
 interface DataTablePaginationProps {
   table: Table<any>;
@@ -23,14 +24,13 @@ const TablePagination = ({
 
   const [currentPageIndex, setCurrentPageIndex] = useState<number>(1);
 
-  
   const isMobile = useMediaQuery("(min-width: 768px)");
   if (!isMobile) {
     visiblePageCount = 3;
   }
 
   useEffect(() => {
-    const pageFromUrl = searchParams?.get('page');
+    const pageFromUrl = searchParams?.get("page");
     if (pageFromUrl) {
       const pageIndex = Math.min(Math.max(1, Number(pageFromUrl)), totalPage);
       setCurrentPageIndex(pageIndex);
@@ -41,7 +41,7 @@ const TablePagination = ({
   const handlePageChange = (pageIndex: number) => {
     const clampedPageIndex = Math.min(Math.max(1, pageIndex), totalPage);
     const searchParams = new URLSearchParams(window.location.search);
-    searchParams.set('page', clampedPageIndex.toString());
+    searchParams.set("page", clampedPageIndex.toString());
 
     router.push(`${window.location.pathname}?${searchParams.toString()}`);
     setCurrentPageIndex(clampedPageIndex);
@@ -78,7 +78,7 @@ const TablePagination = ({
         <Button
           variant="outline"
           size="icon"
-          onClick={() => handlePageChange(currentPageIndex-1)}
+          onClick={() => handlePageChange(currentPageIndex - 1)}
           disabled={currentPageIndex === 1}
           className="w-8 h-8"
         >
@@ -90,7 +90,7 @@ const TablePagination = ({
             onClick={() => handlePageChange(pageIndex)}
             size="icon"
             className="w-8 h-8"
-            variant={currentPageIndex === pageIndex ? 'default' : 'outline'}
+            variant={currentPageIndex === pageIndex ? "default" : "outline"}
           >
             {pageIndex}
           </Button>
@@ -98,7 +98,7 @@ const TablePagination = ({
         <Button
           variant="outline"
           size="icon"
-          onClick={() => handlePageChange(currentPageIndex+1)}
+          onClick={() => handlePageChange(currentPageIndex + 1)}
           disabled={currentPageIndex === totalPage}
           className="w-8 h-8"
         >
@@ -118,4 +118,4 @@ const TablePagination = ({
   );
 };
 
-export default TablePagination;
\ No newline at end of file
+export default TablePagination;
diff --git a/src/components/features/table/task-plan/expand-list-view.tsx b/src/components/features/table/task-plan/expand-list-view.tsx
index c25c0493..e9de2147 100644
--- a/src/components/features/table/task-plan/expand-list-view.tsx
+++ b/src/components/features/table/task-plan/expand-list-view.tsx
@@ -1,4 +1,15 @@
 "use client";
+
+import { useEffect, useState } from "react";
+import { Link } from "@/i18n/navigation";
+import { MoreVertical } from "lucide-react";
+
+import { close, loading } from "@/config/swal";
+import {
+  getPlanningDailyByTypeId,
+  getPlanningPagination,
+} from "@/lib/services/agenda-setting/agenda-setting";
+import { htmlToString, textEllipsis } from "@/lib/utils/globals";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
@@ -7,15 +18,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { close, loading } from "@/config/swal";
-import { Link } from "@/i18n/navigation";
-import {
-  getPlanningDailyByTypeId,
-  getPlanningPagination,
-} from "@/lib/services/agenda-setting/agenda-setting";
-import { htmlToString, textEllipsis } from "@/lib/utils/globals";
-import { MoreVertical } from "lucide-react";
-import { useEffect, useState } from "react";
 
 export default function ExpandedData(props: { datas: any }) {
   const { datas } = props;
@@ -69,9 +71,7 @@ export default function ExpandedData(props: { datas: any }) {
             </th>
             <th
               className="font-normal text-sm"
-              onClick={() =>
-                `disinni igninn membuat state untuk mennyimpan data isOpen`
-              }
+              onClick={() => `disinni igninn membuat state untuk mennyimpan data isOpen`}
             >
               {data.date}
             </th>
@@ -88,16 +88,12 @@ export default function ExpandedData(props: { datas: any }) {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="p-0" align="end">
                   <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                    <Link
-                      href={`/curator/task-plan/mediahub/create-daily/detail/${data.id}`}
-                    >
+                    <Link href={`/curator/task-plan/mediahub/create-daily/detail/${data.id}`}>
                       Detail
                     </Link>
                   </DropdownMenuItem>
                   <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                    <Link
-                      href={`/curator/task-plan/mediahub/create-daily/edit/${data.id}`}
-                    >
+                    <Link href={`/curator/task-plan/mediahub/create-daily/edit/${data.id}`}>
                       Edit
                     </Link>
                   </DropdownMenuItem>
@@ -108,10 +104,7 @@ export default function ExpandedData(props: { datas: any }) {
               </DropdownMenu>
             </th>
           </tr>
-          <Collapsible
-            open={isOpen === data.id}
-            onOpenChange={() => handleIsOpen(data.id)}
-          >
+          <Collapsible open={isOpen === data.id} onOpenChange={() => handleIsOpen(data.id)}>
             <CollapsibleContent className="space-y-2 w-full text-xs">
               <tr className="space-x-2">
                 <th className="px-3">No</th>
@@ -147,9 +140,7 @@ export default function ExpandedData(props: { datas: any }) {
                           </Link>
                         </DropdownMenuItem>
                         <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                          <Link
-                            href={`/curator/task-plan/mediahub/create-weekly/edit/${data.id}`}
-                          >
+                          <Link href={`/curator/task-plan/mediahub/create-weekly/edit/${data.id}`}>
                             Edit
                           </Link>
                         </DropdownMenuItem>
diff --git a/src/components/features/table/task-plan/list-view-column.tsx b/src/components/features/table/task-plan/list-view-column.tsx
index e26b4d6a..d7b8744c 100644
--- a/src/components/features/table/task-plan/list-view-column.tsx
+++ b/src/components/features/table/task-plan/list-view-column.tsx
@@ -1,24 +1,19 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { htmlToString } from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import {
   Dialog,
   DialogContent,
@@ -26,7 +21,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
 import ExpandedData from "./expand-list-view";
 
 const columns: ColumnDef<any>[] = [
@@ -86,16 +87,12 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/curator/task-plan/mediahub/create-monthly/detail/${row.original.id}`}
-              >
+              <Link href={`/curator/task-plan/mediahub/create-monthly/detail/${row.original.id}`}>
                 Detail
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`/curator/task-plan/mediahub/create-monthly/edit/${row.original.id}`}
-              >
+              <Link href={`/curator/task-plan/mediahub/create-monthly/edit/${row.original.id}`}>
                 Edit
               </Link>
             </DropdownMenuItem>
diff --git a/src/components/features/table/task-plan/list-view-social-media-column.tsx b/src/components/features/table/task-plan/list-view-social-media-column.tsx
index 304e6aad..d7d26422 100644
--- a/src/components/features/table/task-plan/list-view-social-media-column.tsx
+++ b/src/components/features/table/task-plan/list-view-social-media-column.tsx
@@ -1,24 +1,18 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { htmlToString } from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -26,6 +20,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
 import ExpandedData from "./expand-list-view";
 
 const columns: ColumnDef<any>[] = [
diff --git a/src/components/features/table/task-plan/list-view-social-media-table.tsx b/src/components/features/table/task-plan/list-view-social-media-table.tsx
index 6fb9db1f..90157a65 100644
--- a/src/components/features/table/task-plan/list-view-social-media-table.tsx
+++ b/src/components/features/table/task-plan/list-view-social-media-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,14 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,13 +42,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./list-view-social-media-column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
 
 const ListViewSocialMediaTable = () => {
   const router = useRouter();
@@ -60,11 +61,8 @@ const ListViewSocialMediaTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -134,10 +132,7 @@ const ListViewSocialMediaTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -167,11 +162,7 @@ const ListViewSocialMediaTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/components/features/table/task-plan/list-view-table.tsx b/src/components/features/table/task-plan/list-view-table.tsx
index 98f3e493..3e701bd7 100644
--- a/src/components/features/table/task-plan/list-view-table.tsx
+++ b/src/components/features/table/task-plan/list-view-table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,14 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,13 +42,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import TablePagination from "@/components/features/table/table-pagination";
+
 import columns from "./list-view-column";
-import { getPlanningPagination } from "@/lib/services/agenda-setting/agenda-setting";
 
 const ListViewTable = () => {
   const router = useRouter();
@@ -60,11 +61,8 @@ const ListViewTable = () => {
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -134,10 +132,7 @@ const ListViewTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -167,11 +162,7 @@ const ListViewTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/components/features/table/task-plan/single-view-social-media-table.tsx b/src/components/features/table/task-plan/single-view-social-media-table.tsx
index 1349b237..0d7945da 100644
--- a/src/components/features/table/task-plan/single-view-social-media-table.tsx
+++ b/src/components/features/table/task-plan/single-view-social-media-table.tsx
@@ -1,19 +1,25 @@
 "use client";
-import dayjs from "dayjs";
+
 import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { close, loading } from "@/config/swal";
-import { useSearchParams } from "next/navigation";
 import { Swiper, SwiperSlide } from "swiper/react";
+
+import { close, loading } from "@/config/swal";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
 import "swiper/css/thumbs";
 
 import Image from "next/image";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import weekday from "dayjs/plugin/weekday";
 import { FreeMode, Navigation, Thumbs } from "swiper/modules";
 import { Swiper as SwiperType } from "swiper/types";
+
 import {
   getMonthlyPlanList,
   getPlanningDailyByTypeId,
@@ -22,16 +28,6 @@ import {
   getWeeklyPlanList,
   getWeeklyPlanListByParentId,
 } from "@/lib/services/agenda-setting/agenda-setting";
-import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table";
-import weekday from "dayjs/plugin/weekday";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import {
-  FacebookIcon,
-  InstagramIcon,
-  TiktokIcon,
-  XIcon,
-  YoutubeIcon,
-} from "@/components/icon";
 import {
   Dialog,
   DialogContent,
@@ -39,6 +35,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { FacebookIcon, InstagramIcon, TiktokIcon, XIcon, YoutubeIcon } from "@/components/icon";
+import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table";
+
 import TaskPlanningSocialMediaTable from "./social-media-modal/table";
 
 const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
@@ -46,15 +45,9 @@ const TODAY = dayjs().format("YYYY-MM-DD");
 
 export default function SingleViewSocialMediaTable() {
   const params = useSearchParams();
-  const [selectedMonthItem, setSelectedMonthItem] = useState<
-    string | undefined
-  >(undefined);
-  const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(
-    undefined
-  );
-  const [selectedDate, setSelectedDate] = useState<number>(
-    new Date(TODAY).getDate()
-  );
+  const [selectedMonthItem, setSelectedMonthItem] = useState<string | undefined>(undefined);
+  const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(undefined);
+  const [selectedDate, setSelectedDate] = useState<number>(new Date(TODAY).getDate());
   const [nowDate, setNowDate] = useState<string>(TODAY);
 
   const INITIAL_YEAR = dayjs().format("YYYY");
@@ -97,16 +90,10 @@ export default function SingleViewSocialMediaTable() {
     createCalendar("START");
   }, []);
 
-  function createDaysForCurrentMonth(
-    year: string,
-    month: string,
-    daysInMonth: number
-  ) {
+  function createDaysForCurrentMonth(year: string, month: string, daysInMonth: number) {
     const days: any = [];
     for (let day = 1; day <= daysInMonth; day++) {
-      const date = dayjs(
-        new Date(parseInt(year), parseInt(month) - 1, day)
-      ).format("YYYY-MM-DD");
+      const date = dayjs(new Date(parseInt(year), parseInt(month) - 1, day)).format("YYYY-MM-DD");
       days.push({
         date,
         isCurrentMonth: true,
@@ -121,10 +108,7 @@ export default function SingleViewSocialMediaTable() {
     setMonthlyList(res?.data?.data);
   }
 
-  async function getWeeklyPlanning(
-    id: string | undefined,
-    date: number | undefined
-  ) {
+  async function getWeeklyPlanning(id: string | undefined, date: number | undefined) {
     if (id) {
       const res = await getWeeklyPlanListByParentId(id, 2);
       setWeeklyList(res?.data?.data);
@@ -134,10 +118,7 @@ export default function SingleViewSocialMediaTable() {
     }
   }
 
-  function createCalendar(
-    year: string = INITIAL_YEAR,
-    month: string = INITIAL_MONTH
-  ) {
+  function createCalendar(year: string = INITIAL_YEAR, month: string = INITIAL_MONTH) {
     year = year === "START" ? INITIAL_YEAR : year;
 
     fetchData(month, year);
@@ -160,11 +141,7 @@ export default function SingleViewSocialMediaTable() {
 
     previousMonthDays = createDaysForPreviousMonth(year, month);
     nextMonthDays = createDaysForNextMonth(year, month);
-    const listDay = [
-      ...previousMonthDays,
-      ...currentMonthDays,
-      ...nextMonthDays,
-    ];
+    const listDay = [...previousMonthDays, ...currentMonthDays, ...nextMonthDays];
     setDays(listDay);
   }
 
@@ -186,23 +163,19 @@ export default function SingleViewSocialMediaTable() {
       .subtract(visibleNumberOfDaysFromPreviousMonth, "day")
       .date();
 
-    return [...new Array(visibleNumberOfDaysFromPreviousMonth)].map(
-      (day, index) => ({
-        date: dayjs(
-          `${previousMonth.year()}-${previousMonth.month() + 1}-${
-            previousMonthLastMondayDayOfMonth + index
-          }`
-        ).format("YYYY-MM-DD"),
-        dayOfMonth: previousMonthLastMondayDayOfMonth + index,
-        isCurrentMonth: false,
-      })
-    );
+    return [...new Array(visibleNumberOfDaysFromPreviousMonth)].map((day, index) => ({
+      date: dayjs(
+        `${previousMonth.year()}-${previousMonth.month() + 1}-${
+          previousMonthLastMondayDayOfMonth + index
+        }`
+      ).format("YYYY-MM-DD"),
+      dayOfMonth: previousMonthLastMondayDayOfMonth + index,
+      isCurrentMonth: false,
+    }));
   }
 
   function createDaysForNextMonth(year: string, month: string) {
-    const lastDayOfTheMonthWeekday = getWeekday(
-      `${year}-${month}-${currentMonthDays.length}`
-    );
+    const lastDayOfTheMonthWeekday = getWeekday(`${year}-${month}-${currentMonthDays.length}`);
 
     const nextMonth = dayjs(`${year}-${month}-01`).add(1, "month");
 
@@ -210,15 +183,11 @@ export default function SingleViewSocialMediaTable() {
       ? 7 - lastDayOfTheMonthWeekday
       : lastDayOfTheMonthWeekday;
 
-    return [...new Array(visibleNumberOfDaysFromNextMonth)].map(
-      (day, index) => ({
-        date: dayjs(
-          `${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`
-        ).format("YYYY-MM-DD"),
-        dayOfMonth: index + 1,
-        isCurrentMonth: false,
-      })
-    );
+    return [...new Array(visibleNumberOfDaysFromNextMonth)].map((day, index) => ({
+      date: dayjs(`${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`).format("YYYY-MM-DD"),
+      dayOfMonth: index + 1,
+      isCurrentMonth: false,
+    }));
   }
 
   async function fetchData(
@@ -236,10 +205,7 @@ export default function SingleViewSocialMediaTable() {
   function getPrevMonth() {
     const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month");
 
-    createCalendar(
-      selectedMonthNew.format("YYYY"),
-      selectedMonthNew.format("M")
-    );
+    createCalendar(selectedMonthNew.format("YYYY"), selectedMonthNew.format("M"));
     fetchData("", selectedMonthNew?.format("YYYY-MM-DD"));
     setSelectedMonth(selectedMonthNew);
     setSelectedDate(1);
@@ -250,10 +216,7 @@ export default function SingleViewSocialMediaTable() {
       new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)
     );
 
-    createCalendar(
-      selectedMonthNew.format("YYYY"),
-      selectedMonthNew.format("M")
-    );
+    createCalendar(selectedMonthNew.format("YYYY"), selectedMonthNew.format("M"));
     fetchData("", TODAY);
     setSelectedDate(Number(dayjs().format("D")));
     setSelectedMonth(selectedMonthNew);
@@ -262,10 +225,7 @@ export default function SingleViewSocialMediaTable() {
   function getNextMonth() {
     const selectedMonthNew = dayjs(selectedMonth).add(1, "month");
 
-    createCalendar(
-      selectedMonthNew.format("YYYY"),
-      selectedMonthNew.format("M")
-    );
+    createCalendar(selectedMonthNew.format("YYYY"), selectedMonthNew.format("M"));
     fetchData("", selectedMonthNew?.format("YYYY-MM-DD"));
     setSelectedMonth(selectedMonthNew);
     setSelectedDate(1);
@@ -299,41 +259,31 @@ export default function SingleViewSocialMediaTable() {
       return (
         <div className="flex flex-col gap-1">
           <a
-            onClick={() =>
-              onSelectedSocmed(todayData.planningList[0].date, "5")
-            }
+            onClick={() => onSelectedSocmed(todayData.planningList[0].date, "5")}
             className="flex flex-row gap-5 rounded-sm bg-[#0C0705] text-white px-3 py-1 justify-center cursor-pointer"
           >
             Total: {todayData.totalTwitter} <XIcon />
           </a>
           <a
-            onClick={() =>
-              onSelectedSocmed(todayData.planningList[0].date, "1")
-            }
+            onClick={() => onSelectedSocmed(todayData.planningList[0].date, "1")}
             className="flex flex-row gap-5 rounded-sm bg-[#1877F2] text-white px-3 py-1 justify-center cursor-pointer"
           >
             Total: {todayData.totalFacebook} <FacebookIcon />
           </a>
           <a
-            onClick={() =>
-              onSelectedSocmed(todayData.planningList[0].date, "2")
-            }
+            onClick={() => onSelectedSocmed(todayData.planningList[0].date, "2")}
             className="flex flex-row gap-5 rounded-sm bg-[#d62976] text-white px-3 py-1 justify-center cursor-pointer"
           >
             Total: {todayData.totalInstagram} <InstagramIcon />
           </a>
           <a
-            onClick={() =>
-              onSelectedSocmed(todayData.planningList[0].date, "3")
-            }
+            onClick={() => onSelectedSocmed(todayData.planningList[0].date, "3")}
             className="flex flex-row gap-5 rounded-sm bg-[#FF0000] text-white px-3 py-1 justify-center cursor-pointer"
           >
             Total: {todayData.totalYoutube} <YoutubeIcon />
           </a>
           <a
-            onClick={() =>
-              onSelectedSocmed(todayData.planningList[0].date, "4")
-            }
+            onClick={() => onSelectedSocmed(todayData.planningList[0].date, "4")}
             className="flex flex-row gap-5 rounded-sm bg-[#000000] text-white px-3 py-1 justify-center cursor-pointer"
           >
             Total: {todayData.totalTiktok} <TiktokIcon />
@@ -375,9 +325,7 @@ export default function SingleViewSocialMediaTable() {
               <div
                 key={item.id}
                 className={`rounded-full px-8 py-3 cursor-pointer ${
-                  selectedMonthItem === item.id
-                    ? "bg-sky-600 text-white "
-                    : "bg-sky-300"
+                  selectedMonthItem === item.id ? "bg-sky-600 text-white " : "bg-sky-300"
                 }`}
                 onClick={() => onSelectedMonthItem(item.id)}
               >
@@ -397,9 +345,7 @@ export default function SingleViewSocialMediaTable() {
               <a
                 key={item.id}
                 className={`bg-sky-300 rounded-full px-8 py-3 cursor-pointer ${
-                  selectedWeekly === item.id
-                    ? "bg-sky-600 text-white "
-                    : "bg-sky-300"
+                  selectedWeekly === item.id ? "bg-sky-600 text-white " : "bg-sky-300"
                 }`}
                 onClick={() => onSelectedWeekly(item.id)}
               >
@@ -416,15 +362,9 @@ export default function SingleViewSocialMediaTable() {
       <div>
         <div className="w-full mb-2">
           <div className="overflow-auto">
-            <ol
-              id="days-of-week"
-              className="grid grid-cols-7 gap-1 border-y-2 py-3"
-            >
+            <ol id="days-of-week" className="grid grid-cols-7 gap-1 border-y-2 py-3">
               {WEEKDAYS.map((weekday, index) => (
-                <li
-                  key={`weekday-${index}`}
-                  className="mr-1 text-sm font-medium text-end"
-                >
+                <li key={`weekday-${index}`} className="mr-1 text-sm font-medium text-end">
                   {weekday}
                 </li>
               ))}
@@ -438,14 +378,11 @@ export default function SingleViewSocialMediaTable() {
                   }`}
                 >
                   <span
-                    className={`block mb-1 ${
-                      day.date == TODAY ? "font-semibold text-xl" : ""
-                    }`}
+                    className={`block mb-1 ${day.date == TODAY ? "font-semibold text-xl" : ""}`}
                   >
                     {parseInt(day.date.split("-")[2])}
                   </span>
-                  {day.isCurrentMonth &&
-                    getDataForThisDate(parseInt(day.date.split("-")[2]))}
+                  {day.isCurrentMonth && getDataForThisDate(parseInt(day.date.split("-")[2]))}
                 </li>
               ))}
             </ol>
@@ -458,10 +395,7 @@ export default function SingleViewSocialMediaTable() {
             <DialogTitle>Perencanaan Medsos Harian</DialogTitle>
           </DialogHeader>
           <div className="flex items-center space-x-2">
-            <TaskPlanningSocialMediaTable
-              date={selectedDateNow}
-              platform={selectedPlatform}
-            />
+            <TaskPlanningSocialMediaTable date={selectedDateNow} platform={selectedPlatform} />
           </div>
         </DialogContent>
       </Dialog>
diff --git a/src/components/features/table/task-plan/single-view-table.tsx b/src/components/features/table/task-plan/single-view-table.tsx
index 9a999ba2..edbf3d6b 100644
--- a/src/components/features/table/task-plan/single-view-table.tsx
+++ b/src/components/features/table/task-plan/single-view-table.tsx
@@ -1,11 +1,14 @@
 "use client";
-import dayjs from "dayjs";
+
 import { useEffect, useRef, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { close, loading } from "@/config/swal";
-import { useSearchParams } from "next/navigation";
 import { Swiper, SwiperSlide } from "swiper/react";
+
+import { close, loading } from "@/config/swal";
+
 import "swiper/css";
 import "swiper/css/free-mode";
 import "swiper/css/navigation";
@@ -14,6 +17,7 @@ import "swiper/css/thumbs";
 import Image from "next/image";
 import { FreeMode, Navigation, Thumbs } from "swiper/modules";
 import { Swiper as SwiperType } from "swiper/types";
+
 import {
   getMonthlyPlanList,
   getPlanningDailyByTypeId,
@@ -26,15 +30,9 @@ const TODAY = dayjs().format("YYYY-MM-DD"); // Pastikan Anda mendefinisikan TODA
 
 export default function SingleViewTable() {
   const params = useSearchParams();
-  const [selectedMonthItem, setSelectedMonthItem] = useState<
-    string | undefined
-  >(undefined);
-  const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(
-    undefined
-  );
-  const [selectedDate, setSelectedDate] = useState<number>(
-    new Date(TODAY).getDate()
-  );
+  const [selectedMonthItem, setSelectedMonthItem] = useState<string | undefined>(undefined);
+  const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(undefined);
+  const [selectedDate, setSelectedDate] = useState<number>(new Date(TODAY).getDate());
   const [nowDate, setNowDate] = useState<string>(TODAY);
 
   const INITIAL_YEAR = dayjs().format("YYYY");
@@ -70,16 +68,10 @@ export default function SingleViewTable() {
     createCalendar("START");
   }, []);
 
-  function createDaysForCurrentMonth(
-    year: string,
-    month: string,
-    daysInMonth: number
-  ) {
+  function createDaysForCurrentMonth(year: string, month: string, daysInMonth: number) {
     const days: any = [];
     for (let day = 1; day <= daysInMonth; day++) {
-      const date = dayjs(
-        new Date(parseInt(year), parseInt(month) - 1, day)
-      ).format("YYYY-MM-DD");
+      const date = dayjs(new Date(parseInt(year), parseInt(month) - 1, day)).format("YYYY-MM-DD");
       days.push({
         date,
         isCurrentMonth: true,
@@ -95,10 +87,7 @@ export default function SingleViewTable() {
     setMonthlyList(res?.data?.data);
   }
 
-  async function getWeeklyPlanning(
-    id: string | undefined,
-    date: number | undefined
-  ) {
+  async function getWeeklyPlanning(id: string | undefined, date: number | undefined) {
     if (id) {
       const res = await getWeeklyPlanListByParentId(id, 1);
       setWeeklyList(res?.data?.data);
@@ -108,10 +97,7 @@ export default function SingleViewTable() {
     }
   }
 
-  function createCalendar(
-    year: string = INITIAL_YEAR,
-    month: string = INITIAL_MONTH
-  ) {
+  function createCalendar(year: string = INITIAL_YEAR, month: string = INITIAL_MONTH) {
     const state = year;
 
     year = year === "START" ? INITIAL_YEAR : year;
@@ -130,19 +116,13 @@ export default function SingleViewTable() {
 
     console.log("Month:", currentMonthDays);
     getMonthlyPlanning(state === "START" ? TODAY : currentMonthDays[0]?.date);
-    getWeeklyPlanning(
-      undefined,
-      state === "START" ? TODAY : currentMonthDays[0]?.date
-    );
+    getWeeklyPlanning(undefined, state === "START" ? TODAY : currentMonthDays[0]?.date);
 
     setDays(currentMonthDays);
     console.log("currentMonthDays", currentMonthDays);
   }
 
-  async function fetchData(
-    parentId: string | number | undefined,
-    date?: string
-  ) {
+  async function fetchData(parentId: string | number | undefined, date?: string) {
     loading();
     const response = await getPlanningDailyByTypeId(
       pages,
@@ -175,10 +155,7 @@ export default function SingleViewTable() {
   function getPrevMonth() {
     const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month");
 
-    createCalendar(
-      selectedMonthNew.format("YYYY"),
-      selectedMonthNew.format("M")
-    );
+    createCalendar(selectedMonthNew.format("YYYY"), selectedMonthNew.format("M"));
     fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
     setSelectedMonth(selectedMonthNew);
     setSelectedDate(1);
@@ -189,10 +166,7 @@ export default function SingleViewTable() {
       new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)
     );
 
-    createCalendar(
-      selectedMonthNew.format("YYYY"),
-      selectedMonthNew.format("M")
-    );
+    createCalendar(selectedMonthNew.format("YYYY"), selectedMonthNew.format("M"));
     fetchData(undefined, TODAY);
     setSelectedDate(Number(dayjs().format("D")));
     setSelectedMonth(selectedMonthNew);
@@ -201,10 +175,7 @@ export default function SingleViewTable() {
   function getNextMonth() {
     const selectedMonthNew = dayjs(selectedMonth).add(1, "month");
 
-    createCalendar(
-      selectedMonthNew.format("YYYY"),
-      selectedMonthNew.format("M")
-    );
+    createCalendar(selectedMonthNew.format("YYYY"), selectedMonthNew.format("M"));
     fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
     setSelectedMonth(selectedMonthNew);
     setSelectedDate(1);
@@ -262,9 +233,7 @@ export default function SingleViewTable() {
               <div
                 key={item.id}
                 className={`rounded-full px-8 py-3 cursor-pointer ${
-                  selectedMonthItem === item.id
-                    ? "bg-sky-600 text-white "
-                    : "bg-sky-300"
+                  selectedMonthItem === item.id ? "bg-sky-600 text-white " : "bg-sky-300"
                 }`}
                 onClick={() => onSelectedMonthItem(item.id)}
               >
@@ -284,9 +253,7 @@ export default function SingleViewTable() {
               <a
                 key={item.id}
                 className={`bg-sky-300 rounded-full px-8 py-3 cursor-pointer ${
-                  selectedWeekly === item.id
-                    ? "bg-sky-600 text-white "
-                    : "bg-sky-300"
+                  selectedWeekly === item.id ? "bg-sky-600 text-white " : "bg-sky-300"
                 }`}
                 onClick={() => onSelectedWeekly(item.id)}
               >
@@ -310,19 +277,13 @@ export default function SingleViewTable() {
                 ? "border-b-2 border-primary text-primary"
                 : ""
             }`}
-            onClick={() =>
-              onSelectedDay(parseInt(day.date.split("-")[2], 10), day.date)
-            }
+            onClick={() => onSelectedDay(parseInt(day.date.split("-")[2], 10), day.date)}
           >
             {parseInt(day.date.split("-")[2], 10)}
           </a>
         ))}
       </div>
-      <TaskPlanMediahubTable
-        data={getData}
-        totalPage={getTotalPage}
-        totalData={getTOtalData}
-      />
+      <TaskPlanMediahubTable data={getData} totalPage={getTotalPage} totalData={getTOtalData} />
     </div>
   );
 }
diff --git a/src/components/features/table/task-plan/social-media-modal/column.tsx b/src/components/features/table/task-plan/social-media-modal/column.tsx
index 236233b8..e482a179 100644
--- a/src/components/features/table/task-plan/social-media-modal/column.tsx
+++ b/src/components/features/table/task-plan/social-media-modal/column.tsx
@@ -1,24 +1,18 @@
 import * as React from "react";
-import { ColumnDef } from "@tanstack/react-table";
-
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { htmlToString } from "@/lib/utils/globals";
 import { Link, useRouter } from "@/i18n/navigation";
+import { ColumnDef } from "@tanstack/react-table";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+
+import { htmlToString } from "@/lib/utils/globals";
+import { cn } from "@/lib/utils/utils";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -26,6 +20,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 const columns: ColumnDef<any>[] = [
   {
diff --git a/src/components/features/table/task-plan/social-media-modal/table.tsx b/src/components/features/table/task-plan/social-media-modal/table.tsx
index 6799b6d7..68d0c33c 100644
--- a/src/components/features/table/task-plan/social-media-modal/table.tsx
+++ b/src/components/features/table/task-plan/social-media-modal/table.tsx
@@ -1,30 +1,20 @@
 "use client";
 
 import * as React from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import {
   ColumnDef,
   ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
   flexRender,
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
+  PaginationState,
+  SortingState,
   useReactTable,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Button } from "@/components/ui/button";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import {
   ChevronLeft,
   ChevronRight,
@@ -36,7 +26,17 @@ import {
   TrendingDown,
   TrendingUp,
 } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import {
+  getPlanningDailyMedsosByPlatform,
+  getPlanningPagination,
+} from "@/lib/services/agenda-setting/agenda-setting";
+import { paginationBlog } from "@/lib/services/blog/blog";
+import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -45,32 +45,27 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import { paginationBlog } from "@/lib/services/blog/blog";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
-import { Badge } from "@/components/ui/badge";
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/features/table/table-pagination";
-import columns from "./column";
 import {
-  getPlanningDailyMedsosByPlatform,
-  getPlanningPagination,
-} from "@/lib/services/agenda-setting/agenda-setting";
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TablePagination from "@/components/features/table/table-pagination";
 
-const TaskPlanningSocialMediaTable = (props: {
-  date: string;
-  platform: string;
-}) => {
+import columns from "./column";
+
+const TaskPlanningSocialMediaTable = (props: { date: string; platform: string }) => {
   const router = useRouter();
   const searchParams = useSearchParams();
 
   const [dataTable, setDataTable] = React.useState<any[]>([]);
   const [totalData, setTotalData] = React.useState<number>(1);
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -113,12 +108,7 @@ const TaskPlanningSocialMediaTable = (props: {
 
   async function fetchData() {
     try {
-      const response = await getPlanningDailyMedsosByPlatform(
-        "0",
-        20,
-        props.date,
-        props.platform
-      );
+      const response = await getPlanningDailyMedsosByPlatform("0", 20, props.date, props.platform);
       const data = response?.data?.data;
       const contentData = data?.content;
       contentData.forEach((item: any, index: number) => {
@@ -127,14 +117,14 @@ const TaskPlanningSocialMediaTable = (props: {
           props.platform === "1"
             ? "Facebook"
             : props.platform === "2"
-            ? "Instagram"
-            : props.platform === "3"
-            ? "Youtube"
-            : props.platform === "4"
-            ? "Tiktok"
-            : props.platform === "3"
-            ? "X"
-            : "";
+              ? "Instagram"
+              : props.platform === "3"
+                ? "Youtube"
+                : props.platform === "4"
+                  ? "Tiktok"
+                  : props.platform === "3"
+                    ? "X"
+                    : "";
       });
 
       setDataTable(contentData);
@@ -155,10 +145,7 @@ const TaskPlanningSocialMediaTable = (props: {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
+                    : flexRender(header.column.columnDef.header, header.getContext())}
                 </TableHead>
               ))}
             </TableRow>
@@ -188,11 +175,7 @@ const TaskPlanningSocialMediaTable = (props: {
           )}
         </TableBody>
       </Table>
-      <TablePagination
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
     </div>
   );
 };
diff --git a/src/components/features/visualization/content-production.tsx b/src/components/features/visualization/content-production.tsx
index ff7a6168..81154f09 100644
--- a/src/components/features/visualization/content-production.tsx
+++ b/src/components/features/visualization/content-production.tsx
@@ -1,11 +1,14 @@
 "use client";
-import Cookies from "js-cookie";
+
 import { useEffect, useState } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { Button } from "../../ui/button";
+import Cookies from "js-cookie";
 import { useTranslations } from "next-intl";
 
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { Button } from "../../ui/button";
+
 export default function ContentProductionVisualization() {
   const [hasMounted, setHasMounted] = useState(false);
   const t = useTranslations("AnalyticsDashboard");
@@ -29,8 +32,8 @@ export default function ContentProductionVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda?polda-selected=${state}`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda?polda-selected=${state}`;
 
   const view2 =
     levelName == "MABES POLRI"
@@ -38,8 +41,8 @@ export default function ContentProductionVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-publisher?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-publisher?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-publisher-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-publisher-polda?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-publisher-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-publisher-polda?polda-selected=${state}&`;
 
   const view3 =
     levelName == "MABES POLRI"
@@ -47,8 +50,8 @@ export default function ContentProductionVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda?polda-selected=${state}`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda?polda-selected=${state}`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda?polda-selected=${state}&`;
 
   const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
 
@@ -98,20 +101,14 @@ export default function ContentProductionVisualization() {
             <Button
               onClick={() => handleInternational(0, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[0]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[0] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(0, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[0]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[0] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -124,12 +121,7 @@ export default function ContentProductionVisualization() {
       )}
       <div className="my-5">
         {ticket1 == "" ? (
-          <iframe
-            src={`${baseUrl + view1 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view1 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket1}/${view1}${param}`}`}
@@ -153,20 +145,14 @@ export default function ContentProductionVisualization() {
             <Button
               onClick={() => handleInternational(1, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[1]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[1] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(1, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[1]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[1] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -179,12 +165,7 @@ export default function ContentProductionVisualization() {
       )}
       <div className="my-5">
         {ticket2 == "" ? (
-          <iframe
-            src={`${baseUrl + view2 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view2 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket2}/${view2}${param}`}`}
@@ -208,20 +189,14 @@ export default function ContentProductionVisualization() {
             <Button
               onClick={() => handleInternational(2, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[2]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[2] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(2, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[1]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[1] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -234,12 +209,7 @@ export default function ContentProductionVisualization() {
       )}
       <div className="my-5">
         {ticket3 == "" ? (
-          <iframe
-            src={`${baseUrl + view3 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view3 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket3}/${view3}${param}`}`}
diff --git a/src/components/features/visualization/dashboard-viz.tsx b/src/components/features/visualization/dashboard-viz.tsx
index 491db363..a39ad1d1 100644
--- a/src/components/features/visualization/dashboard-viz.tsx
+++ b/src/components/features/visualization/dashboard-viz.tsx
@@ -1,11 +1,14 @@
 "use client";
-import Cookies from "js-cookie";
+
 import { useEffect, useState } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { Button } from "../../ui/button";
+import Cookies from "js-cookie";
 import { useTranslations } from "next-intl";
 
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { Button } from "../../ui/button";
+
 export default function DashboardVisualization() {
   const levelName = getCookiesDecrypt("ulnae");
   const state = Cookies.get("state");
@@ -26,8 +29,8 @@ export default function DashboardVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-monitor?"
         : "views/2023_09_MediaHUB-Viz-ADMIN-POLDA-content-monitor_Rev100/db-content-monitor?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_09_MediaHUB-Viz-ADMIN-POLDA-content-monitor_Rev100/db-content-monitor?provinsi-polda=${state}&`
-      : `views/2023_09_MediaHUB-Viz-ADMIN-POLDA-content-monitor_Rev100/db-content-monitor?satker-selected=${state}&`;
+        ? `views/2023_09_MediaHUB-Viz-ADMIN-POLDA-content-monitor_Rev100/db-content-monitor?provinsi-polda=${state}&`
+        : `views/2023_09_MediaHUB-Viz-ADMIN-POLDA-content-monitor_Rev100/db-content-monitor?satker-selected=${state}&`;
 
   const view2 =
     levelName == "MABES POLRI"
@@ -35,8 +38,8 @@ export default function DashboardVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-konten?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-konten-polda?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-konten-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-konten-polda?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-konten-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-konten-polda?polda-selected=${state}&`;
 
   const view3 =
     levelName == "MABES POLRI"
@@ -44,8 +47,8 @@ export default function DashboardVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan?"
         : "views/2023_09_db-penugasan_rev100/db-penugasan?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`
-      : `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`;
+        ? `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`
+        : `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`;
 
   const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
 
@@ -104,20 +107,14 @@ export default function DashboardVisualization() {
             <Button
               onClick={() => handleInternational(0, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[0]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[0] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(0, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[0]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[0] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -130,12 +127,7 @@ export default function DashboardVisualization() {
       )}
       <div className="my-5">
         {ticket1 == "" ? (
-          <iframe
-            src={`${baseUrl + view1 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view1 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket1}/${view1}${param}`}`}
@@ -159,20 +151,14 @@ export default function DashboardVisualization() {
             <Button
               onClick={() => handleInternational(1, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[1]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[1] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(1, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[1]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[1] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -185,12 +171,7 @@ export default function DashboardVisualization() {
       )}
       <div className="my-5">
         {ticket2 == "" ? (
-          <iframe
-            src={`${baseUrl + view2 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view2 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket2}/${view2}${param}`}`}
@@ -210,20 +191,14 @@ export default function DashboardVisualization() {
             <Button
               onClick={() => handleInternational(2, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[2]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[2] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(2, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[1]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[1] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -236,12 +211,7 @@ export default function DashboardVisualization() {
       )}
       <div className="my-5">
         {ticket3 == "" ? (
-          <iframe
-            src={`${baseUrl + view3 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view3 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket3}/${view3}${param}`}`}
diff --git a/src/components/features/visualization/management-user-viz.tsx b/src/components/features/visualization/management-user-viz.tsx
index 9cffc9eb..34ad6436 100644
--- a/src/components/features/visualization/management-user-viz.tsx
+++ b/src/components/features/visualization/management-user-viz.tsx
@@ -1,11 +1,14 @@
 "use client";
-import Cookies from "js-cookie";
+
 import { useEffect, useState } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { Button } from "../../ui/button";
+import Cookies from "js-cookie";
 import { useTranslations } from "next-intl";
 
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { Button } from "../../ui/button";
+
 export default function ManagementUserVisualization() {
   const [ticket, setTicket] = useState("");
   const baseUrl = "https://analytic.sitani.info/";
@@ -40,11 +43,7 @@ export default function ManagementUserVisualization() {
           <Button
             onClick={() => setIsInternational(false)}
             className={` hover:text-white rounded-none
-                ${
-                  isInternational
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational ? "bg-white text-black " : "bg-black text-white "}`}
           >
             Indonesia
           </Button>
@@ -61,12 +60,7 @@ export default function ManagementUserVisualization() {
       </div>
 
       {ticket == undefined ? (
-        <iframe
-          src={`${baseUrl + view + param}`}
-          width="100%"
-          height="750"
-          frameBorder="0"
-        />
+        <iframe src={`${baseUrl + view + param}`} width="100%" height="750" frameBorder="0" />
       ) : (
         <iframe
           src={`${`${url + ticket}/${view}${param}`}`}
diff --git a/src/components/features/visualization/pattern-relation-viz.tsx b/src/components/features/visualization/pattern-relation-viz.tsx
index 2d8be571..cebeb1a7 100644
--- a/src/components/features/visualization/pattern-relation-viz.tsx
+++ b/src/components/features/visualization/pattern-relation-viz.tsx
@@ -1,11 +1,14 @@
 "use client";
-import Cookies from "js-cookie";
+
 import { useEffect, useState } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { Button } from "../../ui/button";
+import Cookies from "js-cookie";
 import { useTranslations } from "next-intl";
 
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { Button } from "../../ui/button";
+
 export default function PatternRelationVisualization() {
   const [hasMounted, setHasMounted] = useState(false);
   const t = useTranslations("AnalyticsDashboard");
@@ -30,8 +33,8 @@ export default function PatternRelationVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-top10?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-top10-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-top10-polda?polda-selected=${state}`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-top10-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-top10-polda?polda-selected=${state}`;
 
   const view2 =
     levelName == "MABES POLRI"
@@ -39,8 +42,8 @@ export default function PatternRelationVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-polda?polda-selected=${state}`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-polda?polda-selected=${state}`;
 
   const view3 =
     levelName == "MABES POLRI"
@@ -48,8 +51,8 @@ export default function PatternRelationVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori-top10?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10-polda?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10-polda?polda-selected=${state}&`;
 
   const view4 =
     levelName == "MABES POLRI"
@@ -57,8 +60,8 @@ export default function PatternRelationVisualization() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`;
+        ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`
+        : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`;
 
   const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
 
@@ -111,20 +114,14 @@ export default function PatternRelationVisualization() {
             <Button
               onClick={() => handleInternational(0, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[0]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[0] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(0, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[0]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[0] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -137,12 +134,7 @@ export default function PatternRelationVisualization() {
       )}
       <div className="my-5">
         {ticket1 == "" ? (
-          <iframe
-            src={`${baseUrl + view1 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view1 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket1}/${view1}${param}`}`}
@@ -166,20 +158,14 @@ export default function PatternRelationVisualization() {
             <Button
               onClick={() => handleInternational(1, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[1]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[1] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(1, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[1]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[1] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -192,12 +178,7 @@ export default function PatternRelationVisualization() {
       )}
       <div className="my-5">
         {ticket2 == "" ? (
-          <iframe
-            src={`${baseUrl + view2 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view2 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket2}/${view2}${param}`}`}
@@ -221,20 +202,14 @@ export default function PatternRelationVisualization() {
             <Button
               onClick={() => handleInternational(2, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[2]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[2] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(2, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[1]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[1] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -247,12 +222,7 @@ export default function PatternRelationVisualization() {
       )}
       <div className="my-5">
         {ticket3 == "" ? (
-          <iframe
-            src={`${baseUrl + view3 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view3 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket3}/${view3}${param}`}`}
@@ -276,20 +246,14 @@ export default function PatternRelationVisualization() {
             <Button
               onClick={() => handleInternational(3, false)}
               className={` hover:text-white rounded-none
-                ${
-                  isInternational[2]
-                    ? "bg-white text-black "
-                    : "bg-black text-white "
-                }`}
+                ${isInternational[2] ? "bg-white text-black " : "bg-black text-white "}`}
             >
               Indonesia
             </Button>
             <Button
               onClick={() => handleInternational(3, true)}
               className={`hover:text-white rounded-none ${
-                isInternational[1]
-                  ? "bg-black text-white "
-                  : "bg-white text-black "
+                isInternational[1] ? "bg-black text-white " : "bg-white text-black "
               }
               `}
             >
@@ -302,12 +266,7 @@ export default function PatternRelationVisualization() {
       )}
       <div className="my-5">
         {ticket4 == "" ? (
-          <iframe
-            src={`${baseUrl + view4 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view4 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket4}/${view4}${param}`}`}
diff --git a/src/components/features/visualization/performance-polda.tsx b/src/components/features/visualization/performance-polda.tsx
index eb741dd5..ae1b3985 100644
--- a/src/components/features/visualization/performance-polda.tsx
+++ b/src/components/features/visualization/performance-polda.tsx
@@ -1,11 +1,14 @@
 "use client";
-import Cookies from "js-cookie";
+
 import { useEffect, useState } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { Button } from "../../ui/button";
+import Cookies from "js-cookie";
 import { useTranslations } from "next-intl";
 
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { Button } from "../../ui/button";
+
 export default function PerformancePoldaViz() {
   const [hasMounted, setHasMounted] = useState(false);
   const t = useTranslations("AnalyticsDashboard");
@@ -37,8 +40,8 @@ export default function PerformancePoldaViz() {
         ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
         : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10?"
       : safeLevelName.includes("POLDA")
-      ? `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${state}&`
-      : `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${state}&`;
+        ? `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${state}&`
+        : `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${state}&`;
 
   const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
 
@@ -76,12 +79,7 @@ export default function PerformancePoldaViz() {
       </p>
       <div className="my-5">
         {ticket1 == "" ? (
-          <iframe
-            src={`${baseUrl + view1 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view1 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket1}/${view1}${param}`}`}
@@ -92,20 +90,11 @@ export default function PerformancePoldaViz() {
         )}
       </div>
       <p className="text-lg">
-        <b>
-          {isInternational[0]
-            ? "PUBLISH CONTENT PER POLDA"
-            : "PUBLISH KONTEN PER POLDA"}
-        </b>
+        <b>{isInternational[0] ? "PUBLISH CONTENT PER POLDA" : "PUBLISH KONTEN PER POLDA"}</b>
       </p>
       <div className="my-5">
         {ticket2 == "" ? (
-          <iframe
-            src={`${baseUrl + view2 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view2 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket2}/${view2}${param}`}`}
diff --git a/src/components/features/visualization/performance-polres.tsx b/src/components/features/visualization/performance-polres.tsx
index fadb4d8b..a77b725c 100644
--- a/src/components/features/visualization/performance-polres.tsx
+++ b/src/components/features/visualization/performance-polres.tsx
@@ -1,11 +1,14 @@
 "use client";
-import Cookies from "js-cookie";
+
 import { useEffect, useState } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { Button } from "../../ui/button";
+import Cookies from "js-cookie";
 import { useTranslations } from "next-intl";
 
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { Button } from "../../ui/button";
+
 export default function PerformancePolresViz() {
   const [hasMounted, setHasMounted] = useState(false);
   const t = useTranslations("AnalyticsDashboard");
@@ -58,18 +61,11 @@ export default function PerformancePolresViz() {
   return (
     <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
       <p className="text-lg">
-        <b>
-          {isInternational[0] ? "POLRES PERFORMANCE" : "POLFORMANCE POLRES"}
-        </b>
+        <b>{isInternational[0] ? "POLRES PERFORMANCE" : "POLFORMANCE POLRES"}</b>
       </p>
       <div className="my-5">
         {ticket1 == "" ? (
-          <iframe
-            src={`${baseUrl + view1 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view1 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket1}/${view1}${param}`}`}
diff --git a/src/components/features/visualization/performance-satker.tsx b/src/components/features/visualization/performance-satker.tsx
index e2577d84..c7ad09de 100644
--- a/src/components/features/visualization/performance-satker.tsx
+++ b/src/components/features/visualization/performance-satker.tsx
@@ -1,11 +1,14 @@
 "use client";
-import Cookies from "js-cookie";
+
 import { useEffect, useState } from "react";
-import { getCookiesDecrypt } from "@/lib/utils/utils";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
-import { Button } from "../../ui/button";
+import Cookies from "js-cookie";
 import { useTranslations } from "next-intl";
 
+import { generateTicket } from "@/lib/services/tableau/tableau-service";
+import { getCookiesDecrypt } from "@/lib/utils/utils";
+
+import { Button } from "../../ui/button";
+
 export default function PerformanceSatkerViz() {
   const [hasMounted, setHasMounted] = useState(false);
   const t = useTranslations("AnalyticsDashboard");
@@ -58,18 +61,11 @@ export default function PerformanceSatkerViz() {
   return (
     <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
       <p className="text-lg">
-        <b>
-          {isInternational[0] ? "SATKER PERFORMANCE" : "POLFORMANCE SATKER"}
-        </b>
+        <b>{isInternational[0] ? "SATKER PERFORMANCE" : "POLFORMANCE SATKER"}</b>
       </p>
       <div className="my-5">
         {ticket1 == "" ? (
-          <iframe
-            src={`${baseUrl + view1 + param}`}
-            width="100%"
-            height="750"
-            frameBorder="0"
-          />
+          <iframe src={`${baseUrl + view1 + param}`} width="100%" height="750" frameBorder="0" />
         ) : (
           <iframe
             src={`${`${url + ticket1}/${view1}${param}`}`}
diff --git a/src/components/partials/auth/copyright.tsx b/src/components/partials/auth/copyright.tsx
index 826356cd..16c5407c 100644
--- a/src/components/partials/auth/copyright.tsx
+++ b/src/components/partials/auth/copyright.tsx
@@ -1,7 +1,5 @@
-
-
 const Copyright = () => {
-    const currentYear = new Date().getFullYear();
+  const currentYear = new Date().getFullYear();
   return <>Copyright {currentYear}, Dashcode All Rights Reserved.</>;
 };
 
diff --git a/src/components/partials/auth/forgot-pass.tsx b/src/components/partials/auth/forgot-pass.tsx
index 74c8a3e3..95cd0c5b 100644
--- a/src/components/partials/auth/forgot-pass.tsx
+++ b/src/components/partials/auth/forgot-pass.tsx
@@ -1,19 +1,21 @@
 "use client";
-import React, { useState } from "react";
 
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
+import React, { useState } from "react";
+import { useRouter } from "@/i18n/navigation";
+import { SubmitHandler, useForm } from "react-hook-form";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+import { error, loading } from "@/config/swal";
+import { forgotPassword } from "@/lib/services/landing/landing";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
 type Inputs = {
   example: string;
   exampleRequired: string;
 };
-import { useForm, SubmitHandler } from "react-hook-form";
-import { error, loading } from "@/config/swal";
-import withReactContent from "sweetalert2-react-content";
-import Swal from "sweetalert2";
-import { useRouter } from "@/i18n/navigation";
-import { forgotPassword } from "@/lib/services/landing/landing";
 
 const ForgotPass = () => {
   const [username, setUsername] = useState<any>();
@@ -58,7 +60,12 @@ const ForgotPass = () => {
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 ">
       <div className="space-y-2">
         <Label htmlFor="user-name">Username</Label>
-        <Input id="user-name" defaultValue="akun1234" className="h-[48px] text-sm text-default-900 " onChange={(e) => setUsername(e.target.value)} />
+        <Input
+          id="user-name"
+          defaultValue="akun1234"
+          className="h-[48px] text-sm text-default-900 "
+          onChange={(e) => setUsername(e.target.value)}
+        />
       </div>
 
       <Button type="submit" fullWidth onClick={handleCheckUsername}>
diff --git a/src/components/partials/auth/lock.tsx b/src/components/partials/auth/lock.tsx
index 1752db02..8c7cf73d 100644
--- a/src/components/partials/auth/lock.tsx
+++ b/src/components/partials/auth/lock.tsx
@@ -1,8 +1,10 @@
 "use client";
+
+import { SubmitHandler, useForm } from "react-hook-form";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useForm, SubmitHandler } from "react-hook-form";
 
 type Inputs = {
   example: string;
diff --git a/src/components/partials/auth/login-form.tsx b/src/components/partials/auth/login-form.tsx
index dcc48656..0ec5e68d 100644
--- a/src/components/partials/auth/login-form.tsx
+++ b/src/components/partials/auth/login-form.tsx
@@ -1,16 +1,17 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import Cookies from "js-cookie";
-import { Icon } from "@/components/ui/icon";
-import { useForm, SubmitHandler } from "react-hook-form";
+import { Link, useRouter } from "@/i18n/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { cn, getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils/utils";
+import { data } from "jquery";
+import Cookies from "js-cookie";
 import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+
+import { error, loading } from "@/config/swal";
 import {
   getProfile,
   login,
@@ -19,33 +20,26 @@ import {
   requestOTP,
   verifyOTPByUsername,
 } from "@/lib/services/auth";
-import { toast } from "sonner";
-import { useRouter } from "@/i18n/navigation";
+import { getUserNotifications, listRole } from "@/lib/services/landing/landing";
 import { warning } from "@/lib/utils/swal";
-import { Link } from "@/i18n/navigation";
-import { useTranslations } from "next-intl";
+import { cn, getCookiesDecrypt, setCookiesEncrypt } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Dialog, DialogContent, DialogFooter, DialogTrigger } from "@/components/ui/dialog";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
 import {
   InputOTP,
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
 } from "@/components/ui/input-otp";
-import { error, loading } from "@/config/swal";
-import { data } from "jquery";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-import { getUserNotifications, listRole } from "@/lib/services/landing/landing";
+import { Label } from "@/components/ui/label";
 
 // Schema validasi menggunakan zod
 const schema = z.object({
   username: z.string().min(1, { message: "Judul diperlukan" }),
-  password: z
-    .string()
-    .min(4, { message: "Password must be at least 4 characters." }),
+  password: z.string().min(4, { message: "Password must be at least 4 characters." }),
 });
 
 // Tipe untuk form values
@@ -81,9 +75,7 @@ const LoginForm = () => {
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordType = () => {
-    setPasswordType((prevType) =>
-      prevType === "password" ? "text" : "password"
-    );
+    setPasswordType((prevType) => (prevType === "password" ? "text" : "password"));
   };
 
   const {
@@ -146,31 +138,20 @@ const LoginForm = () => {
           Object.keys(Cookies.get()).forEach((cookieName) => {
             Cookies.remove(cookieName);
           });
-          warning(
-            "Akun Anda tidak dapat digunakan untuk masuk ke MediaHub Polri",
-            "/auth/login"
-          );
+          warning("Akun Anda tidak dapat digunakan untuk masuk ke MediaHub Polri", "/auth/login");
         } else {
           Cookies.set("home_path", profile?.data?.data?.homePath, {
             expires: 1,
           });
-          Cookies.set(
-            "profile_picture",
-            profile?.data?.data?.profilePictureUrl,
-            {
-              expires: 1,
-            }
-          );
+          Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
+            expires: 1,
+          });
           Cookies.set("state", profile?.data?.data?.userLevel?.name, {
             expires: 1,
           });
-          Cookies.set(
-            "state-prov",
-            profile.data?.data?.userLevel?.province?.provName,
-            {
-              expires: 1,
-            }
-          );
+          Cookies.set("state-prov", profile.data?.data?.userLevel?.province?.provName, {
+            expires: 1,
+          });
           setCookiesEncrypt("uie", profile?.data?.data?.id, {
             expires: 1,
           });
@@ -183,20 +164,12 @@ const LoginForm = () => {
           setCookiesEncrypt("ulie", profile?.data?.data?.userLevel?.id, {
             expires: 1,
           });
-          setCookiesEncrypt(
-            "uplie",
-            profile?.data?.data?.userLevel?.parentLevelId,
-            {
-              expires: 1,
-            }
-          );
-          setCookiesEncrypt(
-            "ulne",
-            profile?.data?.data?.userLevel?.levelNumber,
-            {
-              expires: 1,
-            }
-          );
+          setCookiesEncrypt("uplie", profile?.data?.data?.userLevel?.parentLevelId, {
+            expires: 1,
+          });
+          setCookiesEncrypt("ulne", profile?.data?.data?.userLevel?.levelNumber, {
+            expires: 1,
+          });
           setCookiesEncrypt("ufne", profile?.data?.data?.fullname, {
             expires: 1,
           });
@@ -218,10 +191,7 @@ const LoginForm = () => {
             Number(profile?.data?.data?.roleId) == 18 ||
             Number(profile?.data?.data?.roleId) == 19
           ) {
-            if (
-              profile?.data?.data?.roleId === 18 ||
-              profile?.data?.data?.roleId === 2
-            ) {
+            if (profile?.data?.data?.roleId === 18 || profile?.data?.data?.roleId === 2) {
               window.location.href = "/in/dashboard/executive";
               // router.push('/admin/dashboard');
               Cookies.set("status", "login", {
@@ -388,9 +358,7 @@ const LoginForm = () => {
       {step === 1 ? (
         <>
           <div className="text-left 2xl:mb-10 mb-4 mt-10">
-            <h4 className="font-semibold text-3xl text-left">
-              {t("logInPlease")}
-            </h4>
+            <h4 className="font-semibold text-3xl text-left">{t("logInPlease")}</h4>
             <div className="text-default-500 text-base">
               {t("acc")}
               <Dialog>
@@ -401,9 +369,7 @@ const LoginForm = () => {
                 </DialogTrigger>
                 <DialogContent size="sm" className="sm:max-w-[425px]">
                   <div className="flex flex-col w-full gap-1">
-                    <p className="text-lg font-semibold text-center">
-                      {t("categoryReg")}
-                    </p>
+                    <p className="text-lg font-semibold text-center">{t("categoryReg")}</p>
                     <p className="text-base text-center">{t("selectOne")}</p>
                   </div>
                   <div>
@@ -453,9 +419,7 @@ const LoginForm = () => {
               })}
             />
             {errors.username?.message && (
-              <div className="text-destructive mt-2 text-sm">
-                {errors.username.message}
-              </div>
+              <div className="text-destructive mt-2 text-sm">{errors.username.message}</div>
             )}
           </div>
 
@@ -482,9 +446,7 @@ const LoginForm = () => {
               </button>
             </div>
             {errors.password?.message && (
-              <div className="text-destructive mt-2 text-sm">
-                {errors.password.message}
-              </div>
+              <div className="text-destructive mt-2 text-sm">{errors.password.message}</div>
             )}
           </div>
           <div className="flex justify-between">
@@ -499,12 +461,7 @@ const LoginForm = () => {
               {t("forgotPass")}
             </Link>
           </div>
-          <Button
-            type="button"
-            fullWidth
-            onClick={handleEmailValidation}
-            disabled={isPending}
-          >
+          <Button type="button" fullWidth onClick={handleEmailValidation} disabled={isPending}>
             Selanjutnya
           </Button>
         </>
@@ -517,10 +474,7 @@ const LoginForm = () => {
           </div>
           <div className="flex flex-col justify-center mb-6">
             <div className="space-y-2">
-              <Label
-                htmlFor="username"
-                className="font-medium text-default-600"
-              >
+              <Label htmlFor="username" className="font-medium text-default-600">
                 Email Lama <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -535,16 +489,11 @@ const LoginForm = () => {
               />
               <p className="invalid-feedback-custom">{oldEmailValidate}</p>
               {errors.username?.message && (
-                <div className="text-destructive mt-2 text-sm">
-                  {errors.username.message}
-                </div>
+                <div className="text-destructive mt-2 text-sm">{errors.username.message}</div>
               )}
             </div>
             <div className="space-y-2">
-              <Label
-                htmlFor="username"
-                className="font-medium text-default-600"
-              >
+              <Label htmlFor="username" className="font-medium text-default-600">
                 Email Baru <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -559,33 +508,21 @@ const LoginForm = () => {
               />
               <p className="invalid-feedback-custom">{newEmailValidate}</p>
               {errors.username?.message && (
-                <div className="text-destructive mt-2 text-sm">
-                  {errors.username.message}
-                </div>
+                <div className="text-destructive mt-2 text-sm">{errors.username.message}</div>
               )}
             </div>
           </div>
-          <Button
-            fullWidth
-            className="bg-red-500"
-            onClick={handleSetupEmail}
-            type="button"
-          >
+          <Button fullWidth className="bg-red-500" onClick={handleSetupEmail} type="button">
             Simpan
           </Button>
         </>
       ) : (
         <>
           <div className="text-left 2xl:mb-10 mb-4 mt-10">
-            <h4 className="font-semibold text-3xl text-left">
-              {t("pleaseEnterOtp")}
-            </h4>
+            <h4 className="font-semibold text-3xl text-left">{t("pleaseEnterOtp")}</h4>
           </div>
           <div className="flex justify-center mb-6">
-            <InputOTP
-              maxLength={6}
-              onChange={(val: string) => setOtpValue(val)}
-            >
+            <InputOTP maxLength={6} onChange={(val: string) => setOtpValue(val)}>
               <InputOTPGroup>
                 <InputOTPSlot index={0} onKeyUp={handleTypeOTP} />
                 <InputOTPSlot index={1} onKeyUp={handleTypeOTP} />
diff --git a/src/components/partials/auth/logo.tsx b/src/components/partials/auth/logo.tsx
index cace5c32..cc9087fd 100644
--- a/src/components/partials/auth/logo.tsx
+++ b/src/components/partials/auth/logo.tsx
@@ -1,17 +1,14 @@
-'use client'
-import Image from 'next/image';
+"use client";
+
+import Image from "next/image";
 import { useTheme } from "next-themes";
 
 const Logo = () => {
-    const { theme: mode } = useTheme();
+  const { theme: mode } = useTheme();
   return (
     <div>
       <Image
-        src={
-          mode === "light"
-            ? "/images/logo/logo.svg"
-            : "/images/logo/logo-white.svg"
-        }
+        src={mode === "light" ? "/images/logo/logo.svg" : "/images/logo/logo-white.svg"}
         alt=""
         width={300}
         height={300}
@@ -19,6 +16,6 @@ const Logo = () => {
       />
     </div>
   );
-}
+};
 
-export default Logo;
\ No newline at end of file
+export default Logo;
diff --git a/src/components/partials/auth/reg-form.tsx b/src/components/partials/auth/reg-form.tsx
index f3260187..aff159a7 100644
--- a/src/components/partials/auth/reg-form.tsx
+++ b/src/components/partials/auth/reg-form.tsx
@@ -1,10 +1,11 @@
-
 "use client";
+
+import { SubmitHandler, useForm } from "react-hook-form";
+
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useForm, SubmitHandler } from "react-hook-form";
 
 type Inputs = {
   example: string;
@@ -25,21 +26,11 @@ const RegForm = () => {
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 ">
       <div className="space-y-2">
         <Label htmlFor="name">Name</Label>
-        <Input
-          id="name"
-          placeholder="John Doe"
-          {...register("example")}
-          size="lg"
-        />
+        <Input id="name" placeholder="John Doe" {...register("example")} size="lg" />
       </div>
       <div className="space-y-2">
         <Label htmlFor="email">Email</Label>
-        <Input
-          id="email"
-          placeholder="dashcode@gmail.com"
-          {...register("example")}
-          size="lg"
-        />
+        <Input id="email" placeholder="dashcode@gmail.com" {...register("example")} size="lg" />
       </div>
       <div className="space-y-2">
         <Label htmlFor="password">Password</Label>
@@ -53,13 +44,8 @@ const RegForm = () => {
       </div>
       <div className="flex justify-between">
         <div className="flex gap-2 items-center">
-          <Checkbox
-            id="checkbox"
-            defaultChecked
-          />
-          <Label htmlFor="checkbox">
-            You Accept Our Terms And Conditions And Privacy Policy
-          </Label>
+          <Checkbox id="checkbox" defaultChecked />
+          <Label htmlFor="checkbox">You Accept Our Terms And Conditions And Privacy Policy</Label>
         </div>
       </div>
 
diff --git a/src/components/partials/customizer/buy-button.tsx b/src/components/partials/customizer/buy-button.tsx
index 35439733..b8664ac8 100644
--- a/src/components/partials/customizer/buy-button.tsx
+++ b/src/components/partials/customizer/buy-button.tsx
@@ -1,28 +1,37 @@
-'use client'
-import { useTheme } from 'next-themes';
-import React from 'react'
-import { Button } from '@/components/ui/button';
-import Link from 'next/link';
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { useTheme } from "next-themes";
+
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { Button } from "@/components/ui/button";
 
 const BuyButton = () => {
-    const { theme: mode } = useTheme();
-    const isMobile = useMediaQuery("(min-width: 768px)");
-    return (
-        <>
-            <Button asChild size={!isMobile ? "sm" : "md"} fullWidth color={mode !== 'light' ? 'secondary' : 'default'}>
-                <Link href="https://1.envato.market/vNaJR3">Buy Now</Link>
-            </Button>
-            <Button asChild size={!isMobile ? "sm" : "md"} fullWidth color={mode !== 'light' ? 'secondary' : 'default'}>
-                <Link
-                    href="https://themeforest.net/user/codeshaperbd/portfolio"
-                    target="__blank"
-                >
-                    Our Portfolio
-                </Link>
-            </Button>
-        </>
-    )
-}
+  const { theme: mode } = useTheme();
+  const isMobile = useMediaQuery("(min-width: 768px)");
+  return (
+    <>
+      <Button
+        asChild
+        size={!isMobile ? "sm" : "md"}
+        fullWidth
+        color={mode !== "light" ? "secondary" : "default"}
+      >
+        <Link href="https://1.envato.market/vNaJR3">Buy Now</Link>
+      </Button>
+      <Button
+        asChild
+        size={!isMobile ? "sm" : "md"}
+        fullWidth
+        color={mode !== "light" ? "secondary" : "default"}
+      >
+        <Link href="https://themeforest.net/user/codeshaperbd/portfolio" target="__blank">
+          Our Portfolio
+        </Link>
+      </Button>
+    </>
+  );
+};
 
-export default BuyButton
\ No newline at end of file
+export default BuyButton;
diff --git a/src/components/partials/customizer/color-schema.tsx b/src/components/partials/customizer/color-schema.tsx
index 2cccbc30..0ed40a96 100644
--- a/src/components/partials/customizer/color-schema.tsx
+++ b/src/components/partials/customizer/color-schema.tsx
@@ -1,64 +1,60 @@
 "use client";
 
 import * as React from "react";
-import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label";
-import { Icon } from "@/components/ui/icon"
-
 import { Check } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { cn, hexToRGB } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
 
 const allThemes = [
-    { key: "light", label: "Light", icon: "heroicons:sun" },
-    { key: "dark", label: "Dark", icon: "heroicons:moon" },
-    { key: "system", label: "System", icon: "heroicons:window" },
-
+  { key: "light", label: "Light", icon: "heroicons:sun" },
+  { key: "dark", label: "Dark", icon: "heroicons:moon" },
+  { key: "system", label: "System", icon: "heroicons:window" },
 ];
 
 const ColorSchema = () => {
-    const { theme, setTheme, resolvedTheme: mode } = useTheme();
+  const { theme, setTheme, resolvedTheme: mode } = useTheme();
 
-    return (
-        <div
+  return (
+    <div>
+      <div className="mb-3 relative inline-block rounded-md before:bg-[--theme-primary] before:absolute before:top-0 before:left-0 before:w-full  before:h-full before:rounded before:opacity-10 before:z-[-1]  text-[--theme-primary]  text-sm font-medium">
+        Color Scheme
+      </div>
 
-        >
-            <div className="mb-3 relative inline-block rounded-md before:bg-[--theme-primary] before:absolute before:top-0 before:left-0 before:w-full  before:h-full before:rounded before:opacity-10 before:z-[-1]  text-[--theme-primary]  text-sm font-medium">
-                Color Scheme
-            </div>
-
-            <div className=" grid grid-cols-3 gap-3">
-                {allThemes?.map((themeOption) => (
-                    <div key={themeOption.key} className="flex-1 w-full">
-                        <button
-                            onClick={() => setTheme(themeOption.key as any)}
-                            className={cn(
-                                "border  flex border-default-300 w-full text-center items-center justify-center py-[14px]  px-10 rounded relative",
-                                {
-                                    "text-default border-default-700 dark:border-default-600":
-                                        theme === themeOption.key,
-                                    "text-default-400 dark:text-default-600": theme !== themeOption.key,
-                                }
-                            )}
-                        >
-                            {theme === themeOption.key && (
-                                <Icon
-                                    icon="heroicons:check-circle-20-solid"
-                                    className=" text-[--theme-primary] absolute top-1 right-1"
-                                />
-                            )}
-                            <div>
-                                <Icon icon={themeOption.icon} className=" h-5 w-5" />
-                            </div>
-                        </button>
-                        <Label className=" text-muted-foreground font-normal block mt-2.5">
-                            {themeOption.label}
-                        </Label>
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
+      <div className=" grid grid-cols-3 gap-3">
+        {allThemes?.map((themeOption) => (
+          <div key={themeOption.key} className="flex-1 w-full">
+            <button
+              onClick={() => setTheme(themeOption.key as any)}
+              className={cn(
+                "border  flex border-default-300 w-full text-center items-center justify-center py-[14px]  px-10 rounded relative",
+                {
+                  "text-default border-default-700 dark:border-default-600":
+                    theme === themeOption.key,
+                  "text-default-400 dark:text-default-600": theme !== themeOption.key,
+                }
+              )}
+            >
+              {theme === themeOption.key && (
+                <Icon
+                  icon="heroicons:check-circle-20-solid"
+                  className=" text-[--theme-primary] absolute top-1 right-1"
+                />
+              )}
+              <div>
+                <Icon icon={themeOption.icon} className=" h-5 w-5" />
+              </div>
+            </button>
+            <Label className=" text-muted-foreground font-normal block mt-2.5">
+              {themeOption.label}
+            </Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default ColorSchema;
diff --git a/src/components/partials/customizer/copy-cutomizer.tsx b/src/components/partials/customizer/copy-cutomizer.tsx
index a16b90fc..d950e808 100644
--- a/src/components/partials/customizer/copy-cutomizer.tsx
+++ b/src/components/partials/customizer/copy-cutomizer.tsx
@@ -1,22 +1,21 @@
-'use client'
+"use client";
 
-import { CopyButton } from "@/components/ui/structures/copy-button"
-import { useConfig } from "@/lib/hooks/use-config"
+import { useConfig } from "@/lib/hooks/use-config";
+import { CopyButton } from "@/components/ui/structures/copy-button";
 
 const CopyCustomizer = () => {
-    const [config] = useConfig()
-    const code = JSON.stringify(config, null, 2)
-    return (
-        <CopyButton
-            event="copy_chunk_code"
-            name="Copy Customizer"
-            tooltip="Copy Customizer"
-            code={code}
-            variant="ghost"
-            className="  relative -top-1.5 [&_svg]-h-4 [&_svg]:w-4"
+  const [config] = useConfig();
+  const code = JSON.stringify(config, null, 2);
+  return (
+    <CopyButton
+      event="copy_chunk_code"
+      name="Copy Customizer"
+      tooltip="Copy Customizer"
+      code={code}
+      variant="ghost"
+      className="  relative -top-1.5 [&_svg]-h-4 [&_svg]:w-4"
+    />
+  );
+};
 
-        />
-    )
-}
-
-export default CopyCustomizer
\ No newline at end of file
+export default CopyCustomizer;
diff --git a/src/components/partials/customizer/data.tsx b/src/components/partials/customizer/data.tsx
index ebcf3524..ddf303c0 100644
--- a/src/components/partials/customizer/data.tsx
+++ b/src/components/partials/customizer/data.tsx
@@ -9,10 +9,7 @@ export const verticalLayoutSvg = (
       d="M0 4C0 1.79086 1.79086 0 4 0H9V72H4C1.79086 72 0 70.2091 0 68V4Z"
       className="fill-default-200 dark:fill-default-300"
     />
-    <path
-      d="M11 0H28V72H11V0Z"
-      className="fill-default-200 dark:fill-default-300"
-    />
+    <path d="M11 0H28V72H11V0Z" className="fill-default-200 dark:fill-default-300" />
     <rect
       x="32"
       y="4"
@@ -134,30 +131,10 @@ export const verticalLayoutSvg = (
       rx="1.5"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="38"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="38" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const horizontalLayoutSvg = (
@@ -202,30 +179,10 @@ export const horizontalLayoutSvg = (
       rx="1"
       className="fill-default-200 dark:fill-default-300"
     />
-    <circle
-      cx="11"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="11" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const semiBoxLayoutSvg = (
@@ -314,30 +271,10 @@ export const semiBoxLayoutSvg = (
       rx="1"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const compactLayoutSvg = (
@@ -430,39 +367,14 @@ export const compactLayoutSvg = (
       rx="2"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="24"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="24" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const classicSidebarSvg = (
-  <svg
-    width="107"
-    viewBox="0 0 107 72"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="107" viewBox="0 0 107 72" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M0 4C0 1.79086 1.79086 0 4 0H26V72H4C1.79086 72 0 70.2091 0 68V4Z"
       className="fill-default-200 dark:fill-default-300"
@@ -547,30 +459,10 @@ export const classicSidebarSvg = (
       rx="1"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const draggableSidebarSvg = (
@@ -751,30 +643,10 @@ export const draggableSidebarSvg = (
       rx="1"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const twoColumnSidebarSvg = (
@@ -783,10 +655,7 @@ export const twoColumnSidebarSvg = (
       d="M0 4C0 1.79086 1.79086 0 4 0H9V72H4C1.79086 72 0 70.2091 0 68V4Z"
       className="fill-default-200 dark:fill-default-300"
     />
-    <path
-      d="M11 0H28V72H11V0Z"
-      className="fill-default-200 dark:fill-default-300"
-    />
+    <path d="M11 0H28V72H11V0Z" className="fill-default-200 dark:fill-default-300" />
     <rect
       x="32"
       y="4"
@@ -907,30 +776,10 @@ export const twoColumnSidebarSvg = (
       rx="1.5"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="38"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="38" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const compactSidebarSvg = (
@@ -1023,30 +872,10 @@ export const compactSidebarSvg = (
       rx="2"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="24"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="24" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const pinnedSidebarSvg = (
@@ -1175,30 +1004,10 @@ export const pinnedSidebarSvg = (
       rx="1"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
     <defs>
       <clipPath id="clip0_4857_21246">
         <rect width="4" height="4" fill="white" transform="translate(20 22)" />
@@ -1251,30 +1060,10 @@ export const wideContentWidthSvg = (
       rx="1"
       className="fill-default-200 dark:fill-default-300"
     />
-    <circle
-      cx="14"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="85"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="91"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="97"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="14" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="85" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="91" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="97" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const boxedContentWidthSvg = (
@@ -1363,30 +1152,10 @@ export const boxedContentWidthSvg = (
       rx="1"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const defaultSkinSvg = (
@@ -1545,30 +1314,10 @@ export const borderedSkinSvg = (
       rx="1"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const defaultSidebarColorSvg = (
@@ -1657,38 +1406,15 @@ export const defaultSidebarColorSvg = (
       rx="1"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const colorSidebarColorSvg = (
   <svg viewBox="0 0 112 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M0 4C0 1.79086 1.79086 0 4 0H26V72H4C1.79086 72 0 70.2091 0 68V4Z"
-      fill="#405189"
-    />
+    <path d="M0 4C0 1.79086 1.79086 0 4 0H26V72H4C1.79086 72 0 70.2091 0 68V4Z" fill="#405189" />
     <path
       d="M106 4H31C30.4477 4 30 4.44772 30 5V11C30 11.5523 30.4477 12 31 12H106C106.552 12 107 11.5523 107 11V5C107 4.44772 106.552 4 106 4Z"
       className="fill-default-200 dark:fill-default-300"
@@ -1798,75 +1524,15 @@ export const gradientSidebarColorSvg = (
       rx="1"
       className="fill-default-200 dark:fill-default-300"
     />
-    <rect
-      x="8"
-      y="8"
-      width="10"
-      height="10"
-      rx="2"
-      fill="white"
-      fill-opacity="0.2"
-    />
-    <rect
-      x="3"
-      y="28"
-      width="21"
-      height="4"
-      rx="1"
-      fill="white"
-      fill-opacity="0.2"
-    />
-    <rect
-      x="3"
-      y="36"
-      width="21"
-      height="4"
-      rx="1"
-      fill="white"
-      fill-opacity="0.2"
-    />
-    <rect
-      x="3"
-      y="44"
-      width="21"
-      height="4"
-      rx="1"
-      fill="white"
-      fill-opacity="0.2"
-    />
-    <rect
-      x="3"
-      y="52"
-      width="21"
-      height="4"
-      rx="1"
-      fill="white"
-      fill-opacity="0.2"
-    />
-    <circle
-      cx="36"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <rect x="8" y="8" width="10" height="10" rx="2" fill="white" fill-opacity="0.2" />
+    <rect x="3" y="28" width="21" height="4" rx="1" fill="white" fill-opacity="0.2" />
+    <rect x="3" y="36" width="21" height="4" rx="1" fill="white" fill-opacity="0.2" />
+    <rect x="3" y="44" width="21" height="4" rx="1" fill="white" fill-opacity="0.2" />
+    <rect x="3" y="52" width="21" height="4" rx="1" fill="white" fill-opacity="0.2" />
+    <circle cx="36" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
     <defs>
       <linearGradient
         id="paint0_linear_4857_21630"
@@ -1888,10 +1554,7 @@ export const lightTopbarColorSvg = (
       d="M0 4C0 1.79086 1.79086 0 4 0H9V72H4C1.79086 72 0 70.2091 0 68V4Z"
       className="fill-default-200 dark:fill-default-300"
     />
-    <path
-      d="M11 0H28V72H11V0Z"
-      className="fill-default-200 dark:fill-default-300"
-    />
+    <path d="M11 0H28V72H11V0Z" className="fill-default-200 dark:fill-default-300" />
     <rect
       x="32"
       y="4"
@@ -2012,30 +1675,10 @@ export const lightTopbarColorSvg = (
       rx="1.5"
       className="fill-default-300  dark:text-default-400"
     />
-    <circle
-      cx="38"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="89"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="95"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
-    <circle
-      cx="101"
-      cy="8"
-      r="2"
-      className="fill-default-300  dark:text-default-400"
-    />
+    <circle cx="38" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="89" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="95" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
+    <circle cx="101" cy="8" r="2" className="fill-default-300  dark:text-default-400" />
   </svg>
 );
 export const colorTopbarColorSvg = (
diff --git a/src/components/partials/customizer/footer-style.tsx b/src/components/partials/customizer/footer-style.tsx
index ba636803..0e847980 100644
--- a/src/components/partials/customizer/footer-style.tsx
+++ b/src/components/partials/customizer/footer-style.tsx
@@ -1,7 +1,9 @@
 "use client";
-import { useConfig } from "@/lib/hooks/use-config";
+
 import { Check } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
@@ -20,15 +22,22 @@ const FooterStyle = () => {
         onValueChange={(value) => {
           setConfig({ ...config, footer: value as any });
         }}
-
       >
         {["sticky", "hidden", "default"].map((value, index) => {
           return (
             <div className="flex items-center space-x-2" key={index}>
-              <RadioGroupItem value={value} id={`footer-style-${value}`} disabled={config.layout === 'compact' && value !== 'sticky'} />
-              <Label className={cn('capitalize', {
-                'opacity-50 cursor-not-allowed': config.layout === 'compact' && value !== 'sticky'
-              })} htmlFor={`footer-style-${value}`}>
+              <RadioGroupItem
+                value={value}
+                id={`footer-style-${value}`}
+                disabled={config.layout === "compact" && value !== "sticky"}
+              />
+              <Label
+                className={cn("capitalize", {
+                  "opacity-50 cursor-not-allowed":
+                    config.layout === "compact" && value !== "sticky",
+                })}
+                htmlFor={`footer-style-${value}`}
+              >
                 {value}
               </Label>
             </div>
diff --git a/src/components/partials/customizer/full-screen.tsx b/src/components/partials/customizer/full-screen.tsx
index cc7492e9..b64b4435 100644
--- a/src/components/partials/customizer/full-screen.tsx
+++ b/src/components/partials/customizer/full-screen.tsx
@@ -1,8 +1,9 @@
-'use client'
+"use client";
+
 import { FC, MouseEventHandler } from "react";
-import { Button } from "@/components/ui/button";
 import { Maximize } from "lucide-react";
 
+import { Button } from "@/components/ui/button";
 
 type CustomDocument = Document & {
   mozCancelFullScreen?: () => void;
@@ -49,4 +50,4 @@ const FullScreenToggle: FC = () => {
   );
 };
 
-export default FullScreenToggle;
\ No newline at end of file
+export default FullScreenToggle;
diff --git a/src/components/partials/customizer/header-color.tsx b/src/components/partials/customizer/header-color.tsx
index 452fb395..c4db6d32 100644
--- a/src/components/partials/customizer/header-color.tsx
+++ b/src/components/partials/customizer/header-color.tsx
@@ -1,28 +1,21 @@
-'use client'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label"
-import { useConfig } from '@/lib/hooks/use-config'
-import { Icon } from "@/components/ui/icon"
-import { Check } from 'lucide-react';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+"use client";
 
-import {
-  lightTopbarColorSvg,
-  colorTopbarColorSvg,
-  borderedSkinSvg,
-} from "./data";
+import React from "react";
+import { Check } from "lucide-react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+import { borderedSkinSvg, colorTopbarColorSvg, lightTopbarColorSvg } from "./data";
 
 const HeaderColor = () => {
-  const [config, setConfig] = useConfig()
+  const [config, setConfig] = useConfig();
   const [show, setShow] = React.useState<boolean>(
-    config.headerTheme !== 'light' && config.headerTheme === 'transparent'
-  )
+    config.headerTheme !== "light" && config.headerTheme === "transparent"
+  );
 
   return (
     <div className="p-6 -mx-6">
@@ -39,19 +32,17 @@ const HeaderColor = () => {
             className={cn(
               " border  block  border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 overflow-hidden",
               {
-                "text-default  border-default-700 dark:border-default-600": config.headerTheme === "light",
+                "text-default  border-default-700 dark:border-default-600":
+                  config.headerTheme === "light",
                 "text-muted-foreground ": config.headerTheme !== "light",
               }
             )}
           >
             <Icon
               icon="heroicons:check-circle-20-solid"
-              className={cn(
-                "text-default absolute top-1 right-1 duration-100 scale-0",
-                {
-                  " scale-100": config.headerTheme === "light",
-                }
-              )}
+              className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                " scale-100": config.headerTheme === "light",
+              })}
             />
             {lightTopbarColorSvg}
           </button>
@@ -77,12 +68,9 @@ const HeaderColor = () => {
           >
             <Icon
               icon="heroicons:check-circle-20-solid"
-              className={cn(
-                "text-default absolute top-1 right-1 duration-100 scale-0",
-                {
-                  " scale-100": show,
-                }
-              )}
+              className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                " scale-100": show,
+              })}
             />
             {colorTopbarColorSvg}
           </button>
@@ -101,20 +89,16 @@ const HeaderColor = () => {
             className={cn(
               " border  block  border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 overflow-hidden",
               {
-                "text-default  border-default":
-                  config.headerTheme === "transparent",
+                "text-default  border-default": config.headerTheme === "transparent",
                 "text-muted-foreground ": config.headerTheme !== "transparent",
               }
             )}
           >
             <Icon
               icon="heroicons:check-circle-20-solid"
-              className={cn(
-                "text-default absolute top-1 right-1 duration-100 scale-0",
-                {
-                  " scale-100": config.headerTheme === "transparent",
-                }
-              )}
+              className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                " scale-100": config.headerTheme === "transparent",
+              })}
             />
             {borderedSkinSvg}
           </button>
@@ -126,61 +110,49 @@ const HeaderColor = () => {
 
       {show && (
         <div className="flex gap-1 flex-wrap bg-default-200 p-3 rounded-md">
-          {[
-            "dark",
-            "rose",
-            "steel-blue",
-            "purple",
-            "redwood",
-            "green",
-            "ocean-blue",
-            "gray",
-          ].map((color) => (
-            <div key={color}>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setConfig({ ...config, headerTheme: color })
-                      }
-                      disabled={config.headerTheme === color}
-                      className={cn(
-                        " border    border-default-300  inline-flex justify-center rounded-md items-center relative h-8 w-8  disabled:cursor-not-allowed duration-150",
-                        {
-                          "bg-default": color === "dark",
-                          "bg-[#343A40]": color === "gray",
-                          "bg-[#B52755]": color === "rose",
-                          "bg-[#405189]": color === "steel-blue",
-                          "bg-[#4A154B]": color === "purple",
-                          "bg-[#5D3942]": color === "redwood",
-                          "bg-[#135846]": color === "green",
-                          "bg-[#0766AD]": color === "ocean-blue",
-                        }
-                      )}
-                    >
-                      <Check
+          {["dark", "rose", "steel-blue", "purple", "redwood", "green", "ocean-blue", "gray"].map(
+            (color) => (
+              <div key={color}>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() => setConfig({ ...config, headerTheme: color })}
+                        disabled={config.headerTheme === color}
                         className={cn(
-                          " text-white h-4 w-4  duration-100 scale-0",
+                          " border    border-default-300  inline-flex justify-center rounded-md items-center relative h-8 w-8  disabled:cursor-not-allowed duration-150",
                           {
-                            " scale-100": config.headerTheme === color,
+                            "bg-default": color === "dark",
+                            "bg-[#343A40]": color === "gray",
+                            "bg-[#B52755]": color === "rose",
+                            "bg-[#405189]": color === "steel-blue",
+                            "bg-[#4A154B]": color === "purple",
+                            "bg-[#5D3942]": color === "redwood",
+                            "bg-[#135846]": color === "green",
+                            "bg-[#0766AD]": color === "ocean-blue",
                           }
                         )}
-                      />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{color}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-          ))}
+                      >
+                        <Check
+                          className={cn(" text-white h-4 w-4  duration-100 scale-0", {
+                            " scale-100": config.headerTheme === color,
+                          })}
+                        />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{color}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            )
+          )}
         </div>
       )}
     </div>
   );
-}
+};
 
-export default HeaderColor
\ No newline at end of file
+export default HeaderColor;
diff --git a/src/components/partials/customizer/header-style.tsx b/src/components/partials/customizer/header-style.tsx
index 608dba56..43d3f001 100644
--- a/src/components/partials/customizer/header-style.tsx
+++ b/src/components/partials/customizer/header-style.tsx
@@ -1,17 +1,18 @@
 "use client";
-import { useConfig } from "@/lib/hooks/use-config";
-import { Check } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import { navBarType } from "@/lib/type";
-const HeaderStyle = () => {
 
+import { Check } from "lucide-react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { navBarType } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+const HeaderStyle = () => {
   const [config, setConfig] = useConfig();
 
   const { navbar } = config;
 
-
   return (
     <div className="-mx-6 p-6">
       <div className="text-sm font-medium mb-3">Navbar Type</div>
@@ -25,7 +26,11 @@ const HeaderStyle = () => {
         {["floating", "sticky", "hidden", "default"].map((value, index) => {
           return (
             <div className="flex items-center space-x-2" key={index}>
-              <RadioGroupItem value={value} id={`header-style-${value}`} disabled={config.layout === 'horizontal' && value === 'floating'} />
+              <RadioGroupItem
+                value={value}
+                id={`header-style-${value}`}
+                disabled={config.layout === "horizontal" && value === "floating"}
+              />
               <Label className="capitalize" htmlFor={`header-style-${value}`}>
                 {value}
               </Label>
diff --git a/src/components/partials/customizer/index.tsx b/src/components/partials/customizer/index.tsx
index b9fe28a0..3d8e0994 100644
--- a/src/components/partials/customizer/index.tsx
+++ b/src/components/partials/customizer/index.tsx
@@ -1,6 +1,10 @@
+import { Link } from "@/i18n/navigation";
+
 import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Sheet,
   SheetClose,
@@ -11,29 +15,27 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import { Link } from '@/i18n/navigation';
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Icon } from "@/components/ui/icon";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+import BuyButton from "./buy-button";
 import ColorSchema from "./color-schema";
-import SetSkin from "./set-skin";
+import CopyCustomizer from "./copy-cutomizer";
+import FooterStyle from "./footer-style";
+import FullScreenToggle from "./full-screen";
+import HeaderColor from "./header-color";
+import HeaderStyle from "./header-style";
 import MenuHidden from "./menu-hidden";
+import ResetConfig from "./reset-config";
 import SearchBarToggle from "./search-bar-toggle";
-import TeamSwitcherToggle from "./team-switcher-toggle";
 import SetContentWidth from "./set-content-width";
 import SetLayout from "./set-layout";
 import SetSidebar from "./set-sidebar";
-import SidebarColor from "./sidebar-color";
-import HeaderColor from "./header-color";
+import SetSkin from "./set-skin";
 import SidebarBg from "./sidebar-bg";
-import HeaderStyle from "./header-style";
-import FooterStyle from "./footer-style";
-import ResetConfig from "./reset-config";
-import FullScreenToggle from "./full-screen";
-import CopyCustomizer from "./copy-cutomizer";
-import BuyButton from "./buy-button";
+import SidebarColor from "./sidebar-color";
+import TeamSwitcherToggle from "./team-switcher-toggle";
 
-const ThemeCustomize = ({ }) => {
+const ThemeCustomize = ({}) => {
   return (
     <Sheet>
       <SheetTrigger asChild>
@@ -41,10 +43,7 @@ const ThemeCustomize = ({ }) => {
           type="button"
           className="fixed md:-end-10 end-0  top-1/2   z-40 translate-y-1/2 bg-default-800 dark:bg-default-300 dark:text-default-800 text-default-50   transform rotate-90 flex items-center text-sm font-medium px-2 py-2 shadow-md rounded"
         >
-          <Icon
-            icon="clarity:settings-line"
-            className=" text-lg animate-spin"
-          />
+          <Icon icon="clarity:settings-line" className=" text-lg animate-spin" />
           <span className="hidden md:inline-block  ms-2.5">Settings</span>
         </button>
       </SheetTrigger>
@@ -55,9 +54,7 @@ const ThemeCustomize = ({ }) => {
         <SheetHeader className=" text-start -mx-6 px-6 py-4 shadow-sm md:shadow-none">
           <SheetTitle className="flex justify-between items-start">
             <div className=" flex-1">
-              <p className="text-default-700 font-medium text-base">
-                Template Customizer
-              </p>
+              <p className="text-default-700 font-medium text-base">Template Customizer</p>
               <p className="text-default-500 dark:text-default-600 font-normal text-xs">
                 Customize and preview in real time
               </p>
diff --git a/src/components/partials/customizer/menu-hidden.tsx b/src/components/partials/customizer/menu-hidden.tsx
index 1ce20013..afc8e0c6 100644
--- a/src/components/partials/customizer/menu-hidden.tsx
+++ b/src/components/partials/customizer/menu-hidden.tsx
@@ -1,23 +1,21 @@
-'use client'
-import React from 'react'
-import { Checkbox } from "@/components/ui/checkbox"
-import { useConfig } from '@/lib/hooks/use-config'
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const MenuHidden = () => {
-  const [config, setConfig] = useConfig()
+  const [config, setConfig] = useConfig();
 
-  if (config.layout === 'horizontal') return null
+  if (config.layout === "horizontal") return null;
 
   return (
     <div className="flex items-center gap-2">
       <Checkbox
-
         checked={config.menuHidden}
         id="menuHidden"
-        onCheckedChange={() =>
-          setConfig({ ...config, menuHidden: !config.menuHidden })
-        }
-
+        onCheckedChange={() => setConfig({ ...config, menuHidden: !config.menuHidden })}
       />
       <label
         htmlFor="menuHidden"
@@ -27,6 +25,6 @@ const MenuHidden = () => {
       </label>
     </div>
   );
-}
+};
 
-export default MenuHidden
\ No newline at end of file
+export default MenuHidden;
diff --git a/src/components/partials/customizer/reset-config.tsx b/src/components/partials/customizer/reset-config.tsx
index d51fa3f9..06cdf0c7 100644
--- a/src/components/partials/customizer/reset-config.tsx
+++ b/src/components/partials/customizer/reset-config.tsx
@@ -1,26 +1,24 @@
-'use client'
-import React from 'react'
-import { RefreshCcw } from 'lucide-react';
-import { useConfig, defaultConfig } from '@/lib/hooks/use-config';
+"use client";
 
+import React from "react";
+import { RefreshCcw } from "lucide-react";
+
+import { defaultConfig, useConfig } from "@/lib/hooks/use-config";
 
 const ResetConfig = () => {
-    const [config, setConfig] = useConfig()
-    return (
-        <>
-            <RefreshCcw
-                onClick={() => {
-                    setConfig({
+  const [config, setConfig] = useConfig();
+  return (
+    <>
+      <RefreshCcw
+        onClick={() => {
+          setConfig({
+            ...defaultConfig,
+          });
+        }}
+        className=" h-4 w-4 cursor-pointer text-default-600 hover:rotate-180 duration-150 me-4"
+      />
+    </>
+  );
+};
 
-
-                        ...defaultConfig
-
-                    })
-                }}
-
-                className=" h-4 w-4 cursor-pointer text-default-600 hover:rotate-180 duration-150 me-4" />
-        </>
-    )
-}
-
-export default ResetConfig
\ No newline at end of file
+export default ResetConfig;
diff --git a/src/components/partials/customizer/search-bar-toggle.tsx b/src/components/partials/customizer/search-bar-toggle.tsx
index bd2ec1d4..61e35768 100644
--- a/src/components/partials/customizer/search-bar-toggle.tsx
+++ b/src/components/partials/customizer/search-bar-toggle.tsx
@@ -1,29 +1,28 @@
-'use client'
-import React from 'react'
-import { Checkbox } from "@/components/ui/checkbox"
-import { useConfig } from '@/lib/hooks/use-config'
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const SearchBarToggle = () => {
-    const [config, setConfig] = useConfig()
-    if (config.menuHidden || config.layout === 'horizontal') return null
-    return (
-      <div className="flex items-center gap-2">
-        <Checkbox
-          
-          checked={config.showSearchBar}
-          id="searchBarToggle"
-          onCheckedChange={() =>
-            setConfig({ ...config, showSearchBar: !config.showSearchBar })
-          }
-        />
-        <label
-          htmlFor="searchBarToggle"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          Show Search Bar
-        </label>
-      </div>
-    );
-}
+  const [config, setConfig] = useConfig();
+  if (config.menuHidden || config.layout === "horizontal") return null;
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox
+        checked={config.showSearchBar}
+        id="searchBarToggle"
+        onCheckedChange={() => setConfig({ ...config, showSearchBar: !config.showSearchBar })}
+      />
+      <label
+        htmlFor="searchBarToggle"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Show Search Bar
+      </label>
+    </div>
+  );
+};
 
-export default SearchBarToggle
\ No newline at end of file
+export default SearchBarToggle;
diff --git a/src/components/partials/customizer/set-content-width.tsx b/src/components/partials/customizer/set-content-width.tsx
index c92a3315..b5343a0a 100644
--- a/src/components/partials/customizer/set-content-width.tsx
+++ b/src/components/partials/customizer/set-content-width.tsx
@@ -1,11 +1,14 @@
 "use client";
+
 import React from "react";
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label";
+
 import { useConfig } from "@/lib/hooks/use-config";
-import { Icon } from "@/components/ui/icon";
-import { wideContentWidthSvg, boxedContentWidthSvg } from "./data";
 import { contentType } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
+
+import { boxedContentWidthSvg, wideContentWidthSvg } from "./data";
 
 const allContent: { key: contentType; label: string }[] = [
   { key: "wide", label: "Wide" },
@@ -36,19 +39,17 @@ const SetContentWidth = () => {
               className={cn(
                 " border  block  border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 overflow-hidden",
                 {
-                  "text-default  border-default-700 dark:border-default-600": config.contentWidth === key,
+                  "text-default  border-default-700 dark:border-default-600":
+                    config.contentWidth === key,
                   "text-muted-foreground ": config.contentWidth !== key,
                 }
               )}
             >
               <Icon
                 icon="heroicons:check-circle-20-solid"
-                className={cn(
-                  "text-default absolute top-1 right-1 duration-100 scale-0",
-                  {
-                    " scale-100": config.contentWidth === key,
-                  }
-                )}
+                className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                  " scale-100": config.contentWidth === key,
+                })}
               />
 
               {key === "wide"
diff --git a/src/components/partials/customizer/set-layout.tsx b/src/components/partials/customizer/set-layout.tsx
index 7f450cdb..d5e1ff06 100644
--- a/src/components/partials/customizer/set-layout.tsx
+++ b/src/components/partials/customizer/set-layout.tsx
@@ -1,36 +1,29 @@
-'use client'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label"
-import { useConfig } from '@/lib/hooks/use-config'
-import { Icon } from "@/components/ui/icon"
-import Image from 'next/image'
-import { layoutType } from '@/lib/type'
-import {
-  verticalLayoutSvg,
-  horizontalLayoutSvg,
-  semiBoxLayoutSvg,
-  compactLayoutSvg,
-} from "./data";
+"use client";
 
-const allLayouts: { key: layoutType, label: string, icon: string }[] = [
-  { key: "vertical", label: "Vertical", icon: "heroicons:chart-bar", },
+import React from "react";
+import Image from "next/image";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { layoutType } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
+
+import { compactLayoutSvg, horizontalLayoutSvg, semiBoxLayoutSvg, verticalLayoutSvg } from "./data";
+
+const allLayouts: { key: layoutType; label: string; icon: string }[] = [
+  { key: "vertical", label: "Vertical", icon: "heroicons:chart-bar" },
   {
     key: "horizontal",
     label: "Horizontal",
     icon: "heroicons:chart-pie",
-
   },
   { key: "semi-box", label: "SemiBox", icon: "heroicons:chart-pie" },
   { key: "compact", label: "Compact", icon: "heroicons:chart-pie" },
 ];
 
-
 const SetLayout = () => {
-  const [config, setConfig] = useConfig()
-
-
-
+  const [config, setConfig] = useConfig();
 
   return (
     <div>
@@ -44,7 +37,9 @@ const SetLayout = () => {
                 (config.sidebar === "two-column" && key === "compact")
               }
               type="button"
-              onClick={() => setConfig({ ...config, layout: key, footer: "sticky", navbar: 'default' })}
+              onClick={() =>
+                setConfig({ ...config, layout: key, footer: "sticky", navbar: "default" })
+              }
               className={cn(
                 " border  block border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 disabled:opacity-50  overflow-hidden",
                 {
@@ -55,12 +50,9 @@ const SetLayout = () => {
             >
               <Icon
                 icon="heroicons:check-circle-20-solid"
-                className={cn(
-                  "text-default absolute top-1 right-1 duration-100 scale-0",
-                  {
-                    " scale-100": config.layout === key,
-                  }
-                )}
+                className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                  " scale-100": config.layout === key,
+                })}
               />
 
               {key === "vertical"
@@ -86,6 +78,6 @@ const SetLayout = () => {
       </div>
     </div>
   );
-}
+};
 
-export default SetLayout
\ No newline at end of file
+export default SetLayout;
diff --git a/src/components/partials/customizer/set-sidebar.tsx b/src/components/partials/customizer/set-sidebar.tsx
index 0b663f40..cc09bf32 100644
--- a/src/components/partials/customizer/set-sidebar.tsx
+++ b/src/components/partials/customizer/set-sidebar.tsx
@@ -1,27 +1,29 @@
-'use client'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label"
-import { useConfig } from '@/lib/hooks/use-config'
-import { Icon } from "@/components/ui/icon"
-import { sidebarType } from '@/lib/type'
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { sidebarType } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
+
 import {
   classicSidebarSvg,
+  compactSidebarSvg,
   draggableSidebarSvg,
   twoColumnSidebarSvg,
-  compactSidebarSvg,
 } from "./data";
 
-const allSidebars: { key: sidebarType, label: string, icon: string }[] = [
+const allSidebars: { key: sidebarType; label: string; icon: string }[] = [
   { key: "classic", label: "Classic", icon: "heroicons:chart-bar" },
   { key: "draggable", label: "Draggable", icon: "heroicons:chart-pie" },
   { key: "two-column", label: "Two Column", icon: "heroicons:chart-pie" },
   { key: "compact", label: "Compact", icon: "heroicons:chart-pie" },
 ];
 
-
 const SetSidebar = () => {
-  const [config, setConfig] = useConfig()
+  const [config, setConfig] = useConfig();
 
   return (
     <div>
@@ -41,19 +43,17 @@ const SetSidebar = () => {
               className={cn(
                 " border  block  border-default-300 rounded relative h-[72px] w-full disabled:cursor-not-allowed duration-150 overflow-hidden",
                 {
-                  "text-default  border-default-700 dark:border-default-600": config.sidebar === key,
+                  "text-default  border-default-700 dark:border-default-600":
+                    config.sidebar === key,
                   "text-muted-foreground ": config.sidebar !== key,
                 }
               )}
             >
               <Icon
                 icon="heroicons:check-circle-20-solid"
-                className={cn(
-                  "text-default absolute top-1 right-1 duration-100 scale-0",
-                  {
-                    " scale-100": config.sidebar === key,
-                  }
-                )}
+                className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                  " scale-100": config.sidebar === key,
+                })}
               />
 
               {key === "classic"
@@ -75,6 +75,6 @@ const SetSidebar = () => {
       </div>
     </div>
   );
-}
+};
 
-export default SetSidebar
\ No newline at end of file
+export default SetSidebar;
diff --git a/src/components/partials/customizer/set-skin.tsx b/src/components/partials/customizer/set-skin.tsx
index 95f7bc74..26159c46 100644
--- a/src/components/partials/customizer/set-skin.tsx
+++ b/src/components/partials/customizer/set-skin.tsx
@@ -1,22 +1,22 @@
-'use client'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label"
-import { useConfig } from '@/lib/hooks/use-config'
-import { Icon } from "@/components/ui/icon"
-import {
-  borderedSkinSvg,
-  defaultSkinSvg,
-} from "./data";
-import { skinType } from '@/lib/type'
+"use client";
 
-const allSkin: { key: skinType; label: string; }[] = [
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { skinType } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
+
+import { borderedSkinSvg, defaultSkinSvg } from "./data";
+
+const allSkin: { key: skinType; label: string }[] = [
   { key: "default", label: "Default" },
   { key: "bordered", label: "Bordered" },
 ];
 
 const SetSkin = () => {
-  const [config, setConfig] = useConfig()
+  const [config, setConfig] = useConfig();
 
   return (
     <div>
@@ -43,12 +43,9 @@ const SetSkin = () => {
             >
               <Icon
                 icon="heroicons:check-circle-20-solid"
-                className={cn(
-                  "text-default absolute top-1 right-1 duration-100 scale-0",
-                  {
-                    " scale-100": config.skin === key,
-                  }
-                )}
+                className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                  " scale-100": config.skin === key,
+                })}
               />
 
               {key === "default"
@@ -66,6 +63,6 @@ const SetSkin = () => {
       </div>
     </div>
   );
-}
+};
 
-export default SetSkin
\ No newline at end of file
+export default SetSkin;
diff --git a/src/components/partials/customizer/sidebar-bg.tsx b/src/components/partials/customizer/sidebar-bg.tsx
index 22d37ac4..f52b782d 100644
--- a/src/components/partials/customizer/sidebar-bg.tsx
+++ b/src/components/partials/customizer/sidebar-bg.tsx
@@ -1,8 +1,11 @@
-'use client'
-import { useConfig } from '@/lib/hooks/use-config';
-import React, { useState } from 'react'
-import { Icon } from "@/components/ui/icon"
-import { cn } from "@/lib/utils/utils"
+"use client";
+
+import React, { useState } from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+
 const SidebarBg = () => {
   const [config, setConfig] = useConfig();
   const { sidebarBgImage } = config;
@@ -19,7 +22,7 @@ const SidebarBg = () => {
     setConfig({
       ...config,
       sidebarBgImage: undefined,
-    })
+    });
   };
   return (
     <div className="-mx-6 p-6 ">
@@ -41,13 +44,10 @@ const SidebarBg = () => {
           <button
             key={index}
             onClick={() => setConfig({ ...config, sidebarBgImage: file })}
-            className={cn(
-              " h-[72px] rounded relative bg-cover bg-no-repeat   bg-blend-multiply ",
-              {
-                "custom-bg-opacity": sidebarBgImage === file,
-                "": sidebarBgImage !== file,
-              }
-            )}
+            className={cn(" h-[72px] rounded relative bg-cover bg-no-repeat   bg-blend-multiply ", {
+              "custom-bg-opacity": sidebarBgImage === file,
+              "": sidebarBgImage !== file,
+            })}
             style={{
               backgroundImage: `url(${file})`,
             }}
@@ -68,6 +68,6 @@ const SidebarBg = () => {
       </div>
     </div>
   );
-}
+};
 
-export default SidebarBg
\ No newline at end of file
+export default SidebarBg;
diff --git a/src/components/partials/customizer/sidebar-color.tsx b/src/components/partials/customizer/sidebar-color.tsx
index 6636e8e3..5a813a52 100644
--- a/src/components/partials/customizer/sidebar-color.tsx
+++ b/src/components/partials/customizer/sidebar-color.tsx
@@ -1,32 +1,23 @@
-'use client'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label"
-import { useConfig } from '@/lib/hooks/use-config'
-import { Icon } from "@/components/ui/icon"
-import { Check } from 'lucide-react';
-import {
-  defaultSidebarColorSvg,
-  colorSidebarColorSvg,
-  gradientSidebarColorSvg,
-} from "./data";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
+"use client";
+
+import React from "react";
+import { Check } from "lucide-react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
+import { Icon } from "@/components/ui/icon";
+import { Label } from "@/components/ui/label";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+import { colorSidebarColorSvg, defaultSidebarColorSvg, gradientSidebarColorSvg } from "./data";
+
 const SidebarColor = () => {
-  const [config, setConfig] = useConfig()
-  const [show, setShow] = React.useState<boolean>(
-    config.sidebarTheme !== 'light'
-  )
+  const [config, setConfig] = useConfig();
+  const [show, setShow] = React.useState<boolean>(config.sidebarTheme !== "light");
 
   return (
     <div className="p-6 -mx-6">
-      <div className="text-muted-foreground font-normal text-xs mb-4 uppercase">
-        Sidebar Color
-      </div>
+      <div className="text-muted-foreground font-normal text-xs mb-4 uppercase">Sidebar Color</div>
       <div className=" grid grid-cols-3 gap-3 mb-4">
         <div>
           <button
@@ -47,18 +38,13 @@ const SidebarColor = () => {
           >
             <Icon
               icon="heroicons:check-circle-20-solid"
-              className={cn(
-                "text-default absolute top-1 right-1 duration-100 scale-0",
-                {
-                  " scale-100": config.sidebarTheme === "light",
-                }
-              )}
+              className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                " scale-100": config.sidebarTheme === "light",
+              })}
             />
             {defaultSidebarColorSvg}
           </button>
-          <Label className=" text-muted-foreground font-normal block mt-2.5">
-            Default
-          </Label>
+          <Label className=" text-muted-foreground font-normal block mt-2.5">Default</Label>
         </div>
         <div>
           <button
@@ -78,76 +64,61 @@ const SidebarColor = () => {
           >
             <Icon
               icon="heroicons:check-circle-20-solid"
-              className={cn(
-                "text-default absolute top-1 right-1 duration-100 scale-0",
-                {
-                  " scale-100": show,
-                }
-              )}
+              className={cn("text-default absolute top-1 right-1 duration-100 scale-0", {
+                " scale-100": show,
+              })}
             />
             {colorSidebarColorSvg}
           </button>
-          <Label className=" text-muted-foreground font-normal block mt-2.5">
-            color
-          </Label>
+          <Label className=" text-muted-foreground font-normal block mt-2.5">color</Label>
         </div>
       </div>
 
       {show && (
         <div className="flex gap-1 flex-wrap bg-default-200 p-3 rounded-md">
-          {[
-            "dark",
-            "rose",
-            "steel-blue",
-            "purple",
-            "redwood",
-            "green",
-            "ocean-blue",
-            "gray",
-
-          ].map((color) => (
-            <div key={color}>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      type="button"
-                      onClick={() => setConfig({ ...config, sidebarTheme: color })}
-                      disabled={config.sidebarTheme === color}
-                      className={cn(
-                        " border    border-default-300  inline-flex justify-center rounded-md items-center relative h-8 w-8  disabled:cursor-not-allowed duration-150",
-                        {
-                          "bg-default": color === "dark",
-                          "bg-[#343A40]": color === "gray",
-                          "bg-[#B52755]": color === "rose",
-                          "bg-[#405189]": color === "steel-blue",
-                          "bg-[#4A154B]": color === "purple",
-                          "bg-[#5D3942]": color === "redwood",
-                          "bg-[#135846]": color === "green",
-                          "bg-[#0766AD]": color === "ocean-blue",
-                        }
-                      )}
-                    >
-                      <Check
-                        className={cn(" text-white h-4 w-4  duration-100 scale-0", {
-                          " scale-100": config.sidebarTheme === color,
-                        })}
-                      />
-
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{color}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-
-            </div>
-          ))}
+          {["dark", "rose", "steel-blue", "purple", "redwood", "green", "ocean-blue", "gray"].map(
+            (color) => (
+              <div key={color}>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        onClick={() => setConfig({ ...config, sidebarTheme: color })}
+                        disabled={config.sidebarTheme === color}
+                        className={cn(
+                          " border    border-default-300  inline-flex justify-center rounded-md items-center relative h-8 w-8  disabled:cursor-not-allowed duration-150",
+                          {
+                            "bg-default": color === "dark",
+                            "bg-[#343A40]": color === "gray",
+                            "bg-[#B52755]": color === "rose",
+                            "bg-[#405189]": color === "steel-blue",
+                            "bg-[#4A154B]": color === "purple",
+                            "bg-[#5D3942]": color === "redwood",
+                            "bg-[#135846]": color === "green",
+                            "bg-[#0766AD]": color === "ocean-blue",
+                          }
+                        )}
+                      >
+                        <Check
+                          className={cn(" text-white h-4 w-4  duration-100 scale-0", {
+                            " scale-100": config.sidebarTheme === color,
+                          })}
+                        />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{color}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            )
+          )}
         </div>
       )}
     </div>
   );
-}
+};
 
-export default SidebarColor
\ No newline at end of file
+export default SidebarColor;
diff --git a/src/components/partials/customizer/team-switcher-toggle.tsx b/src/components/partials/customizer/team-switcher-toggle.tsx
index 280dbe73..1ae995de 100644
--- a/src/components/partials/customizer/team-switcher-toggle.tsx
+++ b/src/components/partials/customizer/team-switcher-toggle.tsx
@@ -1,28 +1,28 @@
-'use client'
-import React from 'react'
-import { Checkbox } from "@/components/ui/checkbox"
-import { useConfig } from '@/lib/hooks/use-config'
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { Checkbox } from "@/components/ui/checkbox";
 
 const TeamSwitcherToggle = () => {
-    const [config, setConfig] = useConfig()
-    if (config.menuHidden || config.layout === 'horizontal') return null
-    return (
-      <div className="flex items-center gap-2">
-        <Checkbox 
-          checked={config.showSwitcher}
-          id="team-switcher"
-          onCheckedChange={() =>
-            setConfig({ ...config, showSwitcher: !config.showSwitcher })
-          }
-        />
-        <label
-          htmlFor="team-switcher"
-          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-        >
-          Show Team
-        </label>
-      </div>
-    );
-}
+  const [config, setConfig] = useConfig();
+  if (config.menuHidden || config.layout === "horizontal") return null;
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox
+        checked={config.showSwitcher}
+        id="team-switcher"
+        onCheckedChange={() => setConfig({ ...config, showSwitcher: !config.showSwitcher })}
+      />
+      <label
+        htmlFor="team-switcher"
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        Show Team
+      </label>
+    </div>
+  );
+};
 
-export default TeamSwitcherToggle
\ No newline at end of file
+export default TeamSwitcherToggle;
diff --git a/src/components/partials/footer/footer-content.tsx b/src/components/partials/footer/footer-content.tsx
index c58c9d39..9df3ee78 100644
--- a/src/components/partials/footer/footer-content.tsx
+++ b/src/components/partials/footer/footer-content.tsx
@@ -1,49 +1,63 @@
-'use client'
+"use client";
 
-import React from 'react'
-import { useConfig } from '@/lib/hooks/use-config'
-import { cn } from "@/lib/utils/utils"
-import { useMediaQuery } from '@/lib/hooks/use-media-query'
+import React from "react";
 
+import { useConfig } from "@/lib/hooks/use-config";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { cn } from "@/lib/utils/utils";
 
 const FooterContent = ({ children }: { children: React.ReactNode }) => {
-    const [config] = useConfig()
-    const isMobile = useMediaQuery("(min-width: 768px)")
-    if (!isMobile) {
-        return <footer className='bg-card dark:bg-default-300 bg-no-repeat  shadow-md  backdrop-filter backdrop-blur-[40px] fixed left-0 w-full z-50 bottom-0 py-[12px] px-4'>
-            {children}
-        </footer>
-    }
-
-    if (config.sidebar === 'two-column') {
-        return (
-            <footer className={cn('flex-none bg-card relative py-4 px-6   xl:ms-[300px] bottom-0 z-50', config.footer, {
-                'xl:ms-[72px]': config.subMenu || !config.hasSubMenu,
-                'xl:ms-0': config.layout === "horizontal",
-                'border-b': config.skin === 'bordered',
-                'border': config.skin === 'bordered',
-                'shadow-base': config.skin === 'default',
-
-
-            })}>{children}</footer>
-        )
-    }
-
+  const [config] = useConfig();
+  const isMobile = useMediaQuery("(min-width: 768px)");
+  if (!isMobile) {
     return (
-        <footer className={cn('flex-none bg-card relative py-4 px-6   xl:ms-[248px] bottom-0 z-50', config.footer, {
-            'xl:ms-[72px]': config.collapsed && config.sidebar !== 'compact',
-            'xl:ms-0': config.menuHidden || config.layout === "horizontal",
-            'border-b': config.skin === 'bordered' && config.layout !== 'semi-box',
-            'border': config.skin === 'bordered' && config.layout === 'semi-box',
-            'shadow-base': config.skin === 'default',
-            'rounded-md mb-6': config.layout === 'semi-box',
-            'xl:ms-28': config.sidebar === 'compact' && config.layout !== 'horizontal',
-            'xl:ms-24': config.sidebar === 'compact' && config.layout === 'semi-box',
-            'bottom-10 has-sticky-footer': config.layout === 'compact'
+      <footer className="bg-card dark:bg-default-300 bg-no-repeat  shadow-md  backdrop-filter backdrop-blur-[40px] fixed left-0 w-full z-50 bottom-0 py-[12px] px-4">
+        {children}
+      </footer>
+    );
+  }
 
+  if (config.sidebar === "two-column") {
+    return (
+      <footer
+        className={cn(
+          "flex-none bg-card relative py-4 px-6   xl:ms-[300px] bottom-0 z-50",
+          config.footer,
+          {
+            "xl:ms-[72px]": config.subMenu || !config.hasSubMenu,
+            "xl:ms-0": config.layout === "horizontal",
+            "border-b": config.skin === "bordered",
+            border: config.skin === "bordered",
+            "shadow-base": config.skin === "default",
+          }
+        )}
+      >
+        {children}
+      </footer>
+    );
+  }
 
-        })}>{children}</footer>
-    )
-}
+  return (
+    <footer
+      className={cn(
+        "flex-none bg-card relative py-4 px-6   xl:ms-[248px] bottom-0 z-50",
+        config.footer,
+        {
+          "xl:ms-[72px]": config.collapsed && config.sidebar !== "compact",
+          "xl:ms-0": config.menuHidden || config.layout === "horizontal",
+          "border-b": config.skin === "bordered" && config.layout !== "semi-box",
+          border: config.skin === "bordered" && config.layout === "semi-box",
+          "shadow-base": config.skin === "default",
+          "rounded-md mb-6": config.layout === "semi-box",
+          "xl:ms-28": config.sidebar === "compact" && config.layout !== "horizontal",
+          "xl:ms-24": config.sidebar === "compact" && config.layout === "semi-box",
+          "bottom-10 has-sticky-footer": config.layout === "compact",
+        }
+      )}
+    >
+      {children}
+    </footer>
+  );
+};
 
-export default FooterContent
\ No newline at end of file
+export default FooterContent;
diff --git a/src/components/partials/footer/index.tsx b/src/components/partials/footer/index.tsx
index d1f1982b..575c7ad3 100644
--- a/src/components/partials/footer/index.tsx
+++ b/src/components/partials/footer/index.tsx
@@ -1,9 +1,11 @@
 import React from "react";
-import FooterContent from "./footer-content";
-import { Link } from "@/i18n/navigation";
 import Image from "next/image";
+import { Link } from "@/i18n/navigation";
+
 import { Icon } from "@/components/ui/icon";
 
+import FooterContent from "./footer-content";
+
 const DashCodeFooter = () => {
   return (
     <FooterContent>
@@ -47,9 +49,7 @@ const DashCodeFooter = () => {
                 2
               </span>
             </span>
-            <span className="block text-xs text-default-600">
-              Notifications
-            </span>
+            <span className="block text-xs text-default-600">Notifications</span>
           </div>
         </Link>
       </div>
diff --git a/src/components/partials/header/cart.tsx b/src/components/partials/header/cart.tsx
index f6ae53a6..ca3b9a3b 100644
--- a/src/components/partials/header/cart.tsx
+++ b/src/components/partials/header/cart.tsx
@@ -1,126 +1,129 @@
-import { Button } from "@/components/ui/button"
-import {
-    Sheet,
-    SheetClose,
-    SheetContent,
-    SheetDescription,
-    SheetFooter,
-    SheetHeader,
-    SheetTitle,
-    SheetTrigger,
-} from "@/components/ui/sheet"
-import { Icon } from "@/components/ui/icon";
-import { Badge } from "@/components/ui/badge";
 import Image from "next/image";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
 import ProductCounterButton from "@/components/features/ecommarce/product-counter-button";
 
 export function Cart() {
-    const cartProducts = [
-        {
-            id: 1,
-            productImage: "/images/e-commerce/product-card/classical-black-tshirt.png"
-        },
-        {
-            id: 2,
-            productImage: "/images/e-commerce/product-card/black-t-shirt.png"
-        },
-        {
-            id: 3,
-            productImage: "/images/e-commerce/product-card/check-shirt.png"
-        },
-        {
-            id: 4,
-            productImage: "/images/e-commerce/product-card/gray-jumper.png"
-        },
-        {
-            id: 5,
-            productImage: "/images/e-commerce/product-card/gray-t-shirt.png"
-        },
-        {
-            id: 6,
-            productImage: "/images/e-commerce/product-card/pink-blazer.png"
-        }
-    ]
-    return (
-        <Sheet >
-            <SheetTrigger asChild>
-                <button type="button" className="relative focus:ring-none focus:outline-none md:h-8 md:w-8 md:bg-secondary  text-secondary-foreground   rounded-full  flex flex-col items-center justify-center">
-                    <Icon icon="heroicons:shopping-cart" className="h-5 w-5" />
-                    <Badge className=" w-4 h-4 p-0 text-[8px] rounded-full  font-semibold  items-center justify-center absolute left-[calc(100%-12px)] bottom-[calc(100%-10px)] " color="destructive">
-                        0
-                    </Badge>
-                </button>
-            </SheetTrigger>
-            <SheetContent overlayClass="bg-transparent backdrop-blur-none" className="p-0 flex flex-col">
-                <SheetHeader className="flex-none items-start space-y-1 border-b border-default-100 px-6 py-4">
-                    <SheetTitle className="text-xl text-default-900 font-medium">Cart</SheetTitle>
-                    <SheetDescription className="text-sm font-light text-default-600">
-                        Total Price $0
-                    </SheetDescription>
-                </SheetHeader>
-                {
-                    cartProducts.length > 0 ? (
-                        <ScrollArea className="h-full">
-                            <div className=" h-full divide-y divide-default-200 space-y-3">
-                                {cartProducts.map((product, i) => (
-                                    <div className="flex gap-4 px-4 pt-3 first:pt-0 " key={i}>
-                                        <div className="flex-none mt-0.5">
-                                            <div className="md:w-20 md:h-20 w-14 h-14 bg-default-200 dark:bg-default-600  rounded">
-                                                <Image
-                                                    src={product.productImage}
-                                                    alt=""
-                                                    className=" w-full h-full object-cover p-3"
-                                                    width={100}
-                                                    height={100}
-                                                />
-                                            </div>
-                                        </div>
-                                        <div className="flex-1  space-y-1 ">
-                                            <div className="md:text-base text-sm   font-normal  text-default-900">
-                                                Classical Black T-Shirt Classical Black T-Shirt
-                                            </div>
-                                            <div className="text-sm text-default-500 pb-2">
-                                                Price: <span className="text-xs">$489</span>
-                                            </div>
-                                            <div className="flex items-center gap-4">
-                                                <ProductCounterButton />
-                                                <Button
-                                                    size="icon"
-                                                    className="h-8 w-8 rounded-full   bg-default-200 text-default-800 hover:bg-destructive hover:text-destructive-foreground hover:ring-transparent hover:ring-0">
-                                                    <Icon icon="heroicons:trash" className="w-4 h-4" />
-                                                </Button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        </ScrollArea>
-                    )
-                        : (
-                            <div className="flex-1 h-full flex flex-col justify-center items-center">
-                                <div className="h-40 w-40 overflow-hidden bg-default-200/60  rounded-full mx-auto relative flex items-center justify-center">
-                                    <Icon
-                                        icon="solar:cart-2-bold-duotone"
-                                        className=" w-32  h-32 relative "
-                                    />
-                                </div>
-                            </div>
-                        )
-                }
-
-
-                <SheetFooter className="flex-none block border-t border-default-100 p-6">
-                    <div className="flex">
-                        <div className="flex-1  text-base font-medium leading-none text-default-900">Subtotal</div>
-                        <div className="flex-none text-base font-medium leading-none text-default-900">$0</div>
+  const cartProducts = [
+    {
+      id: 1,
+      productImage: "/images/e-commerce/product-card/classical-black-tshirt.png",
+    },
+    {
+      id: 2,
+      productImage: "/images/e-commerce/product-card/black-t-shirt.png",
+    },
+    {
+      id: 3,
+      productImage: "/images/e-commerce/product-card/check-shirt.png",
+    },
+    {
+      id: 4,
+      productImage: "/images/e-commerce/product-card/gray-jumper.png",
+    },
+    {
+      id: 5,
+      productImage: "/images/e-commerce/product-card/gray-t-shirt.png",
+    },
+    {
+      id: 6,
+      productImage: "/images/e-commerce/product-card/pink-blazer.png",
+    },
+  ];
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <button
+          type="button"
+          className="relative focus:ring-none focus:outline-none md:h-8 md:w-8 md:bg-secondary  text-secondary-foreground   rounded-full  flex flex-col items-center justify-center"
+        >
+          <Icon icon="heroicons:shopping-cart" className="h-5 w-5" />
+          <Badge
+            className=" w-4 h-4 p-0 text-[8px] rounded-full  font-semibold  items-center justify-center absolute left-[calc(100%-12px)] bottom-[calc(100%-10px)] "
+            color="destructive"
+          >
+            0
+          </Badge>
+        </button>
+      </SheetTrigger>
+      <SheetContent overlayClass="bg-transparent backdrop-blur-none" className="p-0 flex flex-col">
+        <SheetHeader className="flex-none items-start space-y-1 border-b border-default-100 px-6 py-4">
+          <SheetTitle className="text-xl text-default-900 font-medium">Cart</SheetTitle>
+          <SheetDescription className="text-sm font-light text-default-600">
+            Total Price $0
+          </SheetDescription>
+        </SheetHeader>
+        {cartProducts.length > 0 ? (
+          <ScrollArea className="h-full">
+            <div className=" h-full divide-y divide-default-200 space-y-3">
+              {cartProducts.map((product, i) => (
+                <div className="flex gap-4 px-4 pt-3 first:pt-0 " key={i}>
+                  <div className="flex-none mt-0.5">
+                    <div className="md:w-20 md:h-20 w-14 h-14 bg-default-200 dark:bg-default-600  rounded">
+                      <Image
+                        src={product.productImage}
+                        alt=""
+                        className=" w-full h-full object-cover p-3"
+                        width={100}
+                        height={100}
+                      />
                     </div>
-                    <div className="flex gap-3 mt-4 flex-wrap">
-                        <Button className="flex-1">Continue to Shipping</Button>
-                        <Button className="flex-1">View Cart</Button>
+                  </div>
+                  <div className="flex-1  space-y-1 ">
+                    <div className="md:text-base text-sm   font-normal  text-default-900">
+                      Classical Black T-Shirt Classical Black T-Shirt
                     </div>
-                </SheetFooter>
-            </SheetContent>
-        </Sheet>
-    )
+                    <div className="text-sm text-default-500 pb-2">
+                      Price: <span className="text-xs">$489</span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <ProductCounterButton />
+                      <Button
+                        size="icon"
+                        className="h-8 w-8 rounded-full   bg-default-200 text-default-800 hover:bg-destructive hover:text-destructive-foreground hover:ring-transparent hover:ring-0"
+                      >
+                        <Icon icon="heroicons:trash" className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        ) : (
+          <div className="flex-1 h-full flex flex-col justify-center items-center">
+            <div className="h-40 w-40 overflow-hidden bg-default-200/60  rounded-full mx-auto relative flex items-center justify-center">
+              <Icon icon="solar:cart-2-bold-duotone" className=" w-32  h-32 relative " />
+            </div>
+          </div>
+        )}
+
+        <SheetFooter className="flex-none block border-t border-default-100 p-6">
+          <div className="flex">
+            <div className="flex-1  text-base font-medium leading-none text-default-900">
+              Subtotal
+            </div>
+            <div className="flex-none text-base font-medium leading-none text-default-900">$0</div>
+          </div>
+          <div className="flex gap-3 mt-4 flex-wrap">
+            <Button className="flex-1">Continue to Shipping</Button>
+            <Button className="flex-1">View Cart</Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
 }
diff --git a/src/components/partials/header/data.ts b/src/components/partials/header/data.ts
index 93861842..0713d6a7 100644
--- a/src/components/partials/header/data.ts
+++ b/src/components/partials/header/data.ts
@@ -1,13 +1,10 @@
-
-
 export const notifications = [
   {
     id: 1,
     title: "Your order is placed",
     role: "Frontend Developer",
-    desc:
-      "Amet minim mollit non deser unt ullamco est sit aliqua.",
-    avatar: 'ss.png',
+    desc: "Amet minim mollit non deser unt ullamco est sit aliqua.",
+    avatar: "ss.png",
     status: "online",
     unreadmessage: false,
     date: "2 days ago",
@@ -16,9 +13,8 @@ export const notifications = [
     id: 2,
     title: "Congratulations Darlene  🎉",
     role: "UI/UX Designer",
-    desc:
-      "Won the monthly best seller badge",
-     avatar: 'ss.png',
+    desc: "Won the monthly best seller badge",
+    avatar: "ss.png",
     status: "online",
     unreadmessage: true,
     date: "11 am",
@@ -27,9 +23,8 @@ export const notifications = [
     id: 3,
     title: "Joaquina Weisenborn",
     role: "Town planner",
-    desc:
-      "Soufflé soufflé caramels sweet roll. Jelly lollipop sesame snaps bear claw jelly beans sugar plum sugar plum.",
-      avatar: 'ss.png',
+    desc: "Soufflé soufflé caramels sweet roll. Jelly lollipop sesame snaps bear claw jelly beans sugar plum sugar plum.",
+    avatar: "ss.png",
     status: "busy",
     unreadmessage: true,
     date: "12 pm",
@@ -38,9 +33,8 @@ export const notifications = [
     id: 4,
     title: "Brooklyn Simmons",
     role: "Data scientist",
-    desc:
-      "Added you to Top Secret Project group...",
-    avatar: 'ss.png',
+    desc: "Added you to Top Secret Project group...",
+    avatar: "ss.png",
     status: "online",
     unreadmessage: true,
     date: "1 pm",
@@ -49,9 +43,8 @@ export const notifications = [
     id: 5,
     title: "Margot Henschke",
     role: "Dietitian",
-    desc:
-      "Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing",
-      avatar: 'ss.png',
+    desc: "Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing",
+    avatar: "ss.png",
     status: "busy",
     unreadmessage: false,
     date: "3 pm",
@@ -60,9 +53,8 @@ export const notifications = [
     id: 6,
     title: "Sal Piggee",
     role: "Marketing executive",
-    desc:
-      "Toffee caramels jelly-o tart gummi bears cake I love ice cream lollipop. Sweet liquorice croissant candy danish dessert icing. Cake macaroon gingerbread toffee sweet.",
-      avatar: 'ss.png',
+    desc: "Toffee caramels jelly-o tart gummi bears cake I love ice cream lollipop. Sweet liquorice croissant candy danish dessert icing. Cake macaroon gingerbread toffee sweet.",
+    avatar: "ss.png",
     status: "online",
     unreadmessage: false,
     date: "4 pm",
@@ -71,9 +63,8 @@ export const notifications = [
     id: 7,
     title: "Miguel Guelff",
     role: "Special educational needs teacher",
-    desc:
-      "Biscuit powder oat cake donut brownie ice cream I love soufflé. I love tootsie roll I love powder tootsie roll.",
-      avatar: 'ss.png',
+    desc: "Biscuit powder oat cake donut brownie ice cream I love soufflé. I love tootsie roll I love powder tootsie roll.",
+    avatar: "ss.png",
     status: "online",
     unreadmessage: true,
     date: "7 pm",
@@ -82,9 +73,8 @@ export const notifications = [
     id: 8,
     title: "Mauro Elenbaas",
     role: "Advertising copywriter",
-    desc:
-      "Bear claw ice cream lollipop gingerbread carrot cake. Brownie gummi bears chocolate muffin croissant jelly I love marzipan wafer.",
-     avatar: 'ss.png',
+    desc: "Bear claw ice cream lollipop gingerbread carrot cake. Brownie gummi bears chocolate muffin croissant jelly I love marzipan wafer.",
+    avatar: "ss.png",
     status: "away",
     unreadmessage: true,
     date: "10 pm",
@@ -93,9 +83,8 @@ export const notifications = [
     id: 9,
     title: "Bridgett Omohundro",
     role: "Designer, television/film set",
-    desc:
-      "Gummies gummi bears I love candy icing apple pie I love marzipan bear claw. I love tart biscuit I love candy canes pudding chupa chups liquorice croissant.",
-     avatar: 'ss.png',
+    desc: "Gummies gummi bears I love candy icing apple pie I love marzipan bear claw. I love tart biscuit I love candy canes pudding chupa chups liquorice croissant.",
+    avatar: "ss.png",
     status: "offline",
     unreadmessage: false,
     date: "10 pm",
@@ -104,9 +93,8 @@ export const notifications = [
     id: 10,
     title: "Zenia Jacobs",
     role: "Building surveyor",
-    desc:
-      "Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing",
-     avatar: 'ss.png',
+    desc: "Cake pie jelly jelly beans. Marzipan lemon drops halvah cake. Pudding cookie lemon drops icing",
+    avatar: "ss.png",
     status: "away",
     unreadmessage: false,
     date: "10 am",
@@ -175,6 +163,5 @@ export const messages = [
   },
 ];
 
-export type Message  = ( typeof messages) [number]
-export type Notification =  (typeof notifications) [number]
-
+export type Message = (typeof messages)[number];
+export type Notification = (typeof notifications)[number];
diff --git a/src/components/partials/header/header-content.tsx b/src/components/partials/header/header-content.tsx
index 5fbfc927..0a37938b 100644
--- a/src/components/partials/header/header-content.tsx
+++ b/src/components/partials/header/header-content.tsx
@@ -1,59 +1,72 @@
-'use client';
-import React from 'react'
-import { useConfig } from '@/lib/hooks/use-config'
-import { cn } from '@/lib/utils'
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
 
 const HeaderContent = ({ children }: { children: React.ReactNode }) => {
-  const [config] = useConfig()
-  const headerTheme = config.headerTheme !== 'light' && config.headerTheme !== 'transparent' ? ` dark theme-${config.headerTheme}` : `theme-${config.headerTheme}`
-  if (config.sidebar === 'two-column') {
+  const [config] = useConfig();
+  const headerTheme =
+    config.headerTheme !== "light" && config.headerTheme !== "transparent"
+      ? ` dark theme-${config.headerTheme}`
+      : `theme-${config.headerTheme}`;
+  if (config.sidebar === "two-column") {
     return (
-      <header className={cn('top-0 z-50', config.navbar, {
-        'has-sticky-header sticky top-6  px-6 ': config.navbar === 'floating'
-      })}>
-        <div className={cn('flex-none   bg-header backdrop-blur-lg md:px-6 px-[15px] py-3    xl:ms-[300px] flex items-center justify-between  relative', headerTheme, {
-          'xl:ms-[72px]': config.subMenu || !config.hasSubMenu,
-          'border-b': config.skin === 'bordered' && config.layout !== 'semi-box',
-          'xl:ms-0': config.menuHidden || config.layout === "horizontal",
-          'border': config.skin === 'bordered' && config.layout === 'semi-box',
-          'shadow-base': config.skin === 'default',
-          'rounded-md': config.navbar === 'floating'
-
-
-        })}>
+      <header
+        className={cn("top-0 z-50", config.navbar, {
+          "has-sticky-header sticky top-6  px-6 ": config.navbar === "floating",
+        })}
+      >
+        <div
+          className={cn(
+            "flex-none   bg-header backdrop-blur-lg md:px-6 px-[15px] py-3    xl:ms-[300px] flex items-center justify-between  relative",
+            headerTheme,
+            {
+              "xl:ms-[72px]": config.subMenu || !config.hasSubMenu,
+              "border-b": config.skin === "bordered" && config.layout !== "semi-box",
+              "xl:ms-0": config.menuHidden || config.layout === "horizontal",
+              border: config.skin === "bordered" && config.layout === "semi-box",
+              "shadow-base": config.skin === "default",
+              "rounded-md": config.navbar === "floating",
+            }
+          )}
+        >
           {children}
         </div>
-
       </header>
-    )
+    );
   }
 
   return (
-    <header className={cn('top-0 z-50', config.navbar, {
-      'has-sticky-header sticky top-6  px-6 ': config.navbar === 'floating',
-      'top-10 has-sticky-header': config.layout === 'compact',
-      'has-sticky-header': config.layout === 'semi-box' && config.navbar !== 'floating',
-      'top-0 px-0': config.layout === 'semi-box' && config.navbar === 'floating'
-    })}>
-      <div className={cn('flex-none    bg-header backdrop-blur-lg md:px-6 px-[15px] py-3    xl:ms-[248px]  flex items-center justify-between relative', headerTheme, {
-        'xl:ms-[72px]': config.collapsed,
-        'border-b': config.skin === 'bordered' && config.layout !== 'semi-box',
-        'border': config.skin === 'bordered' && config.layout === 'semi-box',
-        'shadow-base': config.skin === 'default',
-        'xl:ms-0': config.menuHidden || config.layout === "horizontal",
-        'top-6 rounded-md': config.layout === 'semi-box',
-        'xl:ms-28': config.sidebar === 'compact' && config.layout !== 'horizontal',
-        'rounded-md': config.navbar === 'floating'
-
-
-
-      })}>
-
-
+    <header
+      className={cn("top-0 z-50", config.navbar, {
+        "has-sticky-header sticky top-6  px-6 ": config.navbar === "floating",
+        "top-10 has-sticky-header": config.layout === "compact",
+        "has-sticky-header": config.layout === "semi-box" && config.navbar !== "floating",
+        "top-0 px-0": config.layout === "semi-box" && config.navbar === "floating",
+      })}
+    >
+      <div
+        className={cn(
+          "flex-none    bg-header backdrop-blur-lg md:px-6 px-[15px] py-3    xl:ms-[248px]  flex items-center justify-between relative",
+          headerTheme,
+          {
+            "xl:ms-[72px]": config.collapsed,
+            "border-b": config.skin === "bordered" && config.layout !== "semi-box",
+            border: config.skin === "bordered" && config.layout === "semi-box",
+            "shadow-base": config.skin === "default",
+            "xl:ms-0": config.menuHidden || config.layout === "horizontal",
+            "top-6 rounded-md": config.layout === "semi-box",
+            "xl:ms-28": config.sidebar === "compact" && config.layout !== "horizontal",
+            "rounded-md": config.navbar === "floating",
+          }
+        )}
+      >
         {children}
       </div>
     </header>
-  )
-}
+  );
+};
 
-export default HeaderContent
\ No newline at end of file
+export default HeaderContent;
diff --git a/src/components/partials/header/header-logo.tsx b/src/components/partials/header/header-logo.tsx
index bcf126f2..199d26c4 100644
--- a/src/components/partials/header/header-logo.tsx
+++ b/src/components/partials/header/header-logo.tsx
@@ -1,9 +1,11 @@
 "use client";
+
 import React from "react";
 import { Link } from "@/i18n/navigation";
-import DashCodeLogo from "@/components/dascode-logo";
+
 import { useConfig } from "@/lib/hooks/use-config";
 import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import DashCodeLogo from "@/components/ui/structures/dascode-logo";
 
 const HeaderLogo = () => {
   const [config] = useConfig();
@@ -12,22 +14,12 @@ const HeaderLogo = () => {
 
   return config.layout === "horizontal" ? (
     <Link href="/" className="flex gap-2 items-center    ">
-      <img
-        className="w-100"
-        src="/../images/all-img/mediahub-logo.png"
-        alt="logo"
-        width={150}
-      />
+      <img className="w-100" src="/../images/all-img/mediahub-logo.png" alt="logo" width={150} />
     </Link>
   ) : (
     !isDesktop && (
       <Link href="/" className="flex gap-2 items-center    ">
-        <img
-          className="w-100"
-          src="/../images/all-img/mediahub-logo.png"
-          alt="logo"
-          width={150}
-        />
+        <img className="w-100" src="/../images/all-img/mediahub-logo.png" alt="logo" width={150} />
       </Link>
     )
   );
diff --git a/src/components/partials/header/header-search.tsx b/src/components/partials/header/header-search.tsx
index 09908d21..678a9914 100644
--- a/src/components/partials/header/header-search.tsx
+++ b/src/components/partials/header/header-search.tsx
@@ -1,222 +1,220 @@
-'use client'
+"use client";
+
 import React from "react";
-import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Link } from "@/i18n/navigation";
 import { X } from "lucide-react";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from "@/components/ui/command";
-import { Button } from "@/components/ui/button";
-import { Link } from '@/i18n/navigation';
-import { Icon } from "@/components/ui/icon";
+
 import { useConfig } from "@/lib/hooks/use-config";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Icon } from "@/components/ui/icon";
+
 const HeaderSearch = () => {
-    const [config] = useConfig();
-    if (config.layout === 'horizontal') return null
-    return (
-        <Dialog>
-            <DialogTrigger asChild>
-
-                <button
-                    type="button"
-                    className="flex items-center xl:text-sm text-lg xl:text-default-400 text-default-800 dark:text-default-700 gap-3"
-
-                >
-                    <Icon icon="heroicons-outline:search" />
-                    <span className="xl:inline-block hidden">Search... </span>
-                </button>
-            </DialogTrigger>
-            <DialogContent className="p-0">
-                <Command className=" bg-card">
-                    <div className="flex items-center border-b border-default-200">
-                        <CommandInput
-                            placeholder=""
-                            className="h-14 border-b-0"
-                        />
-                    </div>
-                    <CommandList className="py-5 px-3 max-h-[500px]">
-                        <CommandEmpty>No results found.</CommandEmpty>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
-                            <CommandGroup
-                                heading="Populer Searches"
-                                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
+  const [config] = useConfig();
+  if (config.layout === "horizontal") return null;
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <button
+          type="button"
+          className="flex items-center xl:text-sm text-lg xl:text-default-400 text-default-800 dark:text-default-700 gap-3"
+        >
+          <Icon icon="heroicons-outline:search" />
+          <span className="xl:inline-block hidden">Search... </span>
+        </button>
+      </DialogTrigger>
+      <DialogContent className="p-0">
+        <Command className=" bg-card">
+          <div className="flex items-center border-b border-default-200">
+            <CommandInput placeholder="" className="h-14 border-b-0" />
+          </div>
+          <CommandList className="py-5 px-3 max-h-[500px]">
+            <CommandEmpty>No results found.</CommandEmpty>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+              <CommandGroup
+                heading="Populer Searches"
+                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
                 [&_[cmdk-group-heading]]:uppercase    [&_[cmdk-group-heading]]:tracking-widest
                 "
-                            >
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/calendar-page"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:calendar-days" />
-                                        <span>Calendar</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/dashboard"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:chart-bar" />
-                                        <span>Analytics</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/ecommerce"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:shopping-bag" />
-                                        <span>eCommerce</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 ">
-                                    <Link
-                                        href="/project"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:building-library" />
-                                        <span>Project Page</span>
-                                    </Link>
-                                </CommandItem>
-                            </CommandGroup>
-                            <CommandGroup
-                                heading="Apps & Pages"
-                                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
+              >
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/calendar-page"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:calendar-days" />
+                    <span>Calendar</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/dashboard"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:chart-bar" />
+                    <span>Analytics</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/ecommerce"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:shopping-bag" />
+                    <span>eCommerce</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 ">
+                  <Link
+                    href="/project"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:building-library" />
+                    <span>Project Page</span>
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup
+                heading="Apps & Pages"
+                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
                 [&_[cmdk-group-heading]]:uppercase    [&_[cmdk-group-heading]]:tracking-widest
                 "
-                            >
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/chat"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:chat-bubble-bottom-center" />
-                                        <span>Chat</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/email"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:envelope" />
-                                        <span>Email</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/dashboard"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:user" />
-                                        <span>Sign In</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0">
-                                    <Link
-                                        href="/calendar-page"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:chart-bar" />
-                                        <span>Appex Chart</span>
-                                    </Link>
-                                </CommandItem>
-                            </CommandGroup>
-                            <CommandGroup
-                                heading="UI Elements"
-                                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
+              >
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/chat"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:chat-bubble-bottom-center" />
+                    <span>Chat</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/email"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:envelope" />
+                    <span>Email</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/dashboard"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:user" />
+                    <span>Sign In</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0">
+                  <Link
+                    href="/calendar-page"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:chart-bar" />
+                    <span>Appex Chart</span>
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup
+                heading="UI Elements"
+                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
                 [&_[cmdk-group-heading]]:uppercase    [&_[cmdk-group-heading]]:tracking-widest"
-                            >
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/accordion"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:bars-3" />
-                                        <span>Accordion</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-1">
-                                    <Link
-                                        href="/checkbox"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:check" />
-                                        <span>Checkboxes</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-1">
-                                    <Link
-                                        href="/alert"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:megaphone" />
-                                        <span>Alert</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-1">
-                                    <Link
-                                        href="/pagination"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:document-text" />
-                                        <span>Pagination</span>
-                                    </Link>
-                                </CommandItem>
-                            </CommandGroup>
-                            <CommandGroup
-                                heading="Forms & Tables"
-                                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
+              >
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/accordion"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:bars-3" />
+                    <span>Accordion</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-1">
+                  <Link
+                    href="/checkbox"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:check" />
+                    <span>Checkboxes</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-1">
+                  <Link
+                    href="/alert"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:megaphone" />
+                    <span>Alert</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-1">
+                  <Link
+                    href="/pagination"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:document-text" />
+                    <span>Pagination</span>
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup
+                heading="Forms & Tables"
+                className="[&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-normal [&_[cmdk-group-heading]]:text-default-400 [&_[cmdk-group-heading]]:mb-2.5
                 [&_[cmdk-group-heading]]:uppercase    [&_[cmdk-group-heading]]:tracking-widest"
-                            >
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/simple-table"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:table-cells" />
-                                        <span>Simple Table</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/tailwindui-table"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:table-cells" />
-                                        <span>Tailwind Ui Table</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
-                                    <Link
-                                        href="/data-table"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:table-cells" />
-                                        <span>Tanstack Table</span>
-                                    </Link>
-                                </CommandItem>
-                                <CommandItem className="aria-selected:bg-transparent p-0">
-                                    <Link
-                                        href="/calendar-page"
-                                        className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
-                                    >
-                                        <Icon icon="heroicons:clipboard-document-list" />
-                                        <span>Forms</span>
-                                    </Link>
-                                </CommandItem>
-                            </CommandGroup>
-                        </div>
-                    </CommandList>
-                </Command>
-            </DialogContent>
-        </Dialog>
-    );
+              >
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/simple-table"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:table-cells" />
+                    <span>Simple Table</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/tailwindui-table"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:table-cells" />
+                    <span>Tailwind Ui Table</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0 mb-2.5">
+                  <Link
+                    href="/data-table"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:table-cells" />
+                    <span>Tanstack Table</span>
+                  </Link>
+                </CommandItem>
+                <CommandItem className="aria-selected:bg-transparent p-0">
+                  <Link
+                    href="/calendar-page"
+                    className="flex gap-1 items-center px-2 text-default-500 hover:text-primary "
+                  >
+                    <Icon icon="heroicons:clipboard-document-list" />
+                    <span>Forms</span>
+                  </Link>
+                </CommandItem>
+              </CommandGroup>
+            </div>
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
 };
 
 export default HeaderSearch;
diff --git a/src/components/partials/header/horizontal-menu.tsx b/src/components/partials/header/horizontal-menu.tsx
index 6018fc9f..cb1e62fa 100644
--- a/src/components/partials/header/horizontal-menu.tsx
+++ b/src/components/partials/header/horizontal-menu.tsx
@@ -1,11 +1,14 @@
-'use client'
+"use client";
+
 import React from "react";
-import { cn } from "@/lib/utils/utils"
-import { ChevronDown } from "lucide-react";
 import { Link, usePathname } from "@/i18n/navigation";
-import { useConfig } from '@/lib/hooks/use-config'
-import { useTranslations } from 'next-intl';
-import { getHorizontalMenuList } from "@/lib/menus";
+import { ChevronDown } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { getHorizontalMenuList } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
 import { Icon } from "@/components/ui/icon";
 import {
   Menubar,
@@ -21,23 +24,21 @@ import {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
-} from "@/components/ui/menubar"
-import { useMediaQuery } from "@/lib/hooks/use-media-query";
+} from "@/components/ui/menubar";
 
 export default function HorizontalMenu() {
-
-  const [config] = useConfig()
+  const [config] = useConfig();
 
   const t = useTranslations("Menu");
   const pathname = usePathname();
 
-  const menuList = getHorizontalMenuList(pathname, t)
+  const menuList = getHorizontalMenuList(pathname, t);
 
   const [openDropdown, setOpenDropdown] = React.useState<boolean>(false);
 
-  const isDesktop = useMediaQuery('(min-width: 1280px)')
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
 
-  if (config.layout !== 'horizontal' || !isDesktop) return null
+  if (config.layout !== "horizontal" || !isDesktop) return null;
   return (
     <div>
       <Menubar className=" py-2.5 h-auto flex-wrap bg-card">
@@ -57,62 +58,40 @@ export default function HorizontalMenu() {
                 <MenubarMenu key={index}>
                   <MenubarTrigger className=" cursor-pointer items-center">
                     <Icon icon={icon} fontSize={18} className=" me-1.5 leading-1" />
-                    <span>{label}
-
-                    </span>
+                    <span>{label}</span>
                     <ChevronDown className="ms-1 h-4 w-4" />
                   </MenubarTrigger>
-                  <MenubarContent >
-                    {submenus.map(
-                      ({ href, label, icon, children: subChildren }, index) =>
-                        subChildren?.length === 0 ? (
-                          <MenubarItem key={`sub-index-${index}`} className=" cursor-pointer" asChild>
-                            <Link href={href}>
-                              <Icon icon={icon} fontSize={16} className=" me-1.5" />
-                              {label}
-                            </Link>
-                          </MenubarItem>
-                        ) : (
-                          <React.Fragment key={`sub-in-${index}`}>
-
-                            <MenubarSub   >
-                              <MenubarSubTrigger>
-                                <Link
-                                  href={href}
-                                  className="flex cursor-pointer"
-                                >
-                                  {icon && (
-                                    <Icon
-                                      icon={icon}
-                                      fontSize={18}
-                                      className=" me-1.5"
-                                    />
-                                  )}
-                                  {label}
-                                </Link>
-                              </MenubarSubTrigger>
-                              <MenubarSubContent >
-                                {subChildren?.map(
-                                  ({ href, label }, index) => (
-                                    <MenubarItem key={index}>
-                                      <Link
-                                        href={href}
-                                        className="flex cursor-pointer"
-                                      >
-
-
-                                        {label}
-                                      </Link>
-                                    </MenubarItem>
-                                  )
-                                )}
-                              </MenubarSubContent>
-                            </MenubarSub>
-                          </React.Fragment>
-                        )
+                  <MenubarContent>
+                    {submenus.map(({ href, label, icon, children: subChildren }, index) =>
+                      subChildren?.length === 0 ? (
+                        <MenubarItem key={`sub-index-${index}`} className=" cursor-pointer" asChild>
+                          <Link href={href}>
+                            <Icon icon={icon} fontSize={16} className=" me-1.5" />
+                            {label}
+                          </Link>
+                        </MenubarItem>
+                      ) : (
+                        <React.Fragment key={`sub-in-${index}`}>
+                          <MenubarSub>
+                            <MenubarSubTrigger>
+                              <Link href={href} className="flex cursor-pointer">
+                                {icon && <Icon icon={icon} fontSize={18} className=" me-1.5" />}
+                                {label}
+                              </Link>
+                            </MenubarSubTrigger>
+                            <MenubarSubContent>
+                              {subChildren?.map(({ href, label }, index) => (
+                                <MenubarItem key={index}>
+                                  <Link href={href} className="flex cursor-pointer">
+                                    {label}
+                                  </Link>
+                                </MenubarItem>
+                              ))}
+                            </MenubarSubContent>
+                          </MenubarSub>
+                        </React.Fragment>
+                      )
                     )}
-
-
                   </MenubarContent>
                 </MenubarMenu>
               )
@@ -123,5 +102,3 @@ export default function HorizontalMenu() {
     </div>
   );
 }
-
-
diff --git a/src/components/partials/header/index.tsx b/src/components/partials/header/index.tsx
index f63ec322..87c28ea9 100644
--- a/src/components/partials/header/index.tsx
+++ b/src/components/partials/header/index.tsx
@@ -1,18 +1,20 @@
 "use client";
 
 import React from "react";
-import HeaderContent from "./header-content";
-import HeaderSearch from "./header-search";
-import ProfileInfo from "./profile-info";
-import Notifications from "./notifications";
-import Messages from "./messages";
-import { Cart } from "./cart";
-import ThemeSwitcher from "./theme-switcher";
-import { SidebarToggle } from "@/components/partials/sidebar/sidebar-toggle";
+
 import { SheetMenu } from "@/components/partials/sidebar/menu/sheet-menu";
+import { SidebarToggle } from "@/components/partials/sidebar/sidebar-toggle";
+
+import { Cart } from "./cart";
+import HeaderContent from "./header-content";
+import HeaderLogo from "./header-logo";
+import HeaderSearch from "./header-search";
 import HorizontalMenu from "./horizontal-menu";
 import LocalSwitcher from "./locale-switcher";
-import HeaderLogo from "./header-logo";
+import Messages from "./messages";
+import Notifications from "./notifications";
+import ProfileInfo from "./profile-info";
+import ThemeSwitcher from "./theme-switcher";
 
 const DashCodeHeader = () => {
   return (
diff --git a/src/components/partials/header/locale-switcher.tsx b/src/components/partials/header/locale-switcher.tsx
index 7ebb11d0..4ded0810 100644
--- a/src/components/partials/header/locale-switcher.tsx
+++ b/src/components/partials/header/locale-switcher.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import { useLocale } from "next-intl";
+import { useEffect, useState, useTransition } from "react";
+import Image from "next/image";
 import { useParams } from "next/navigation";
 import { locales } from "@/config";
 import { usePathname, useRouter } from "@/i18n/navigation";
+import Cookies from "js-cookie";
+import { useLocale } from "next-intl";
 
-import { useEffect, useState, useTransition } from "react";
 import {
   Select,
   SelectContent,
@@ -13,8 +15,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import Image from "next/image";
-import Cookies from "js-cookie";
 
 export const getLanguage = (): string | null => {
   if (typeof window === "undefined") return null;
@@ -74,9 +74,7 @@ export default function LocalSwitcher() {
               height={24}
               className="w-6 h-6 rounded-full"
             />
-            <span className="font-medium text-sm text-default-600 dark:text-default-700">
-              In
-            </span>
+            <span className="font-medium text-sm text-default-600 dark:text-default-700">In</span>
           </div>
         </SelectItem>
         <SelectItem value="en" className="border-none">
@@ -88,9 +86,7 @@ export default function LocalSwitcher() {
               height={24}
               className="w-6 h-6 rounded-full"
             />
-            <span className="font-medium text-sm text-default-600 dark:text-default-700">
-              En
-            </span>
+            <span className="font-medium text-sm text-default-600 dark:text-default-700">En</span>
           </div>
         </SelectItem>
 
diff --git a/src/components/partials/header/messages.tsx b/src/components/partials/header/messages.tsx
index 87dd780d..fb0d744a 100644
--- a/src/components/partials/header/messages.tsx
+++ b/src/components/partials/header/messages.tsx
@@ -1,93 +1,85 @@
+import { Link } from "@/i18n/navigation";
+import shortImage from "@/public/images/all-img/short-image-2.png";
 
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Link } from '@/i18n/navigation';
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { cn } from "@/lib/utils/utils"
-import { messages, type Message } from "./data";
-import shortImage from "@/public/images/all-img/short-image-2.png";
 import { Icon } from "@/components/ui/icon";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+import { messages, type Message } from "./data";
 
 const Messages = () => {
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <button type="button" className="relative focus:ring-none focus:outline-none md:h-8 md:w-8 md:bg-secondary  text-secondary-foreground    rounded-full  md:flex hidden flex-col items-center justify-center">
-                    <Icon icon="heroicons-outline:mail" className="h-5 w-5" />
-                    <Badge className=" w-4 h-4 p-0 text-[8px] rounded-full  font-semibold  items-center justify-center absolute left-[calc(100%-12px)] bottom-[calc(100%-10px)] " color="destructive">
-                        10
-                    </Badge>
-                </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-                align="end"
-                className=" z-[999] mx-4 lg:w-[320px] p-0"
-            >
-                <DropdownMenuLabel
-
-
-                >
-                    <div className="flex justify-between px-4 py-3 border-b border-default-100 ">
-                        <div className="text-sm text-default-800  font-medium ">
-                            Messages
-                        </div>
-                        <div className="text-default-800  text-xs md:text-right">
-                            <Link href="/chats" className="underline">
-                                View all
-                            </Link>
-                        </div>
-                    </div>
-                </DropdownMenuLabel>
-                <div className="h-[300px] xl:h-[350px]">
-                    <ScrollArea className="h-full">
-                        {messages?.map((item: Message, index: number) => (
-                            <DropdownMenuItem
-                                key={`inbox-${index}`}
-                                className="flex  items-start gap-3 py-2 px-4 cursor-pointer group "
-                            >
-
-                                <div className="flex-none">
-                                    <Avatar className="h-8 w-8 ">
-                                        <AvatarImage src={item?.image} />
-                                        <AvatarFallback> {item.title.charAt(0)}</AvatarFallback>
-                                    </Avatar>
-                                </div>
-                                <div className="flex-1 flex flex-col gap-0.5">
-                                    <div className="text-default-800  text-sm font-medium ">
-                                        {item.title}
-                                    </div>
-                                    <div className="text-xs text-default-600  dark:group-hover:text-default-700 ">
-                                        {item.desc}
-                                    </div>
-                                    <div className="text-default-400 dark:text-default-500 dark:group-hover:text-default-600 text-xs">
-                                        3 min ago
-                                    </div>
-                                </div>
-                                {item.hasnotifaction && (
-
-                                    <div className="flex-none">
-                                        <span className="h-[10px] w-[10px] bg-destructive border border-destructive-foreground dark:border-default-400 rounded-full inline-block" />
-                                    </div>
-                                )}
-
-
-                            </DropdownMenuItem>
-                        ))}
-                    </ScrollArea>
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="relative focus:ring-none focus:outline-none md:h-8 md:w-8 md:bg-secondary  text-secondary-foreground    rounded-full  md:flex hidden flex-col items-center justify-center"
+        >
+          <Icon icon="heroicons-outline:mail" className="h-5 w-5" />
+          <Badge
+            className=" w-4 h-4 p-0 text-[8px] rounded-full  font-semibold  items-center justify-center absolute left-[calc(100%-12px)] bottom-[calc(100%-10px)] "
+            color="destructive"
+          >
+            10
+          </Badge>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className=" z-[999] mx-4 lg:w-[320px] p-0">
+        <DropdownMenuLabel>
+          <div className="flex justify-between px-4 py-3 border-b border-default-100 ">
+            <div className="text-sm text-default-800  font-medium ">Messages</div>
+            <div className="text-default-800  text-xs md:text-right">
+              <Link href="/chats" className="underline">
+                View all
+              </Link>
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <div className="h-[300px] xl:h-[350px]">
+          <ScrollArea className="h-full">
+            {messages?.map((item: Message, index: number) => (
+              <DropdownMenuItem
+                key={`inbox-${index}`}
+                className="flex  items-start gap-3 py-2 px-4 cursor-pointer group "
+              >
+                <div className="flex-none">
+                  <Avatar className="h-8 w-8 ">
+                    <AvatarImage src={item?.image} />
+                    <AvatarFallback> {item.title.charAt(0)}</AvatarFallback>
+                  </Avatar>
                 </div>
-
-            </DropdownMenuContent>
-        </DropdownMenu>
-    );
+                <div className="flex-1 flex flex-col gap-0.5">
+                  <div className="text-default-800  text-sm font-medium ">{item.title}</div>
+                  <div className="text-xs text-default-600  dark:group-hover:text-default-700 ">
+                    {item.desc}
+                  </div>
+                  <div className="text-default-400 dark:text-default-500 dark:group-hover:text-default-600 text-xs">
+                    3 min ago
+                  </div>
+                </div>
+                {item.hasnotifaction && (
+                  <div className="flex-none">
+                    <span className="h-[10px] w-[10px] bg-destructive border border-destructive-foreground dark:border-default-400 rounded-full inline-block" />
+                  </div>
+                )}
+              </DropdownMenuItem>
+            ))}
+          </ScrollArea>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 };
 
 export default Messages;
diff --git a/src/components/partials/header/notifications.tsx b/src/components/partials/header/notifications.tsx
index 9f2c790d..6578350a 100644
--- a/src/components/partials/header/notifications.tsx
+++ b/src/components/partials/header/notifications.tsx
@@ -1,21 +1,7 @@
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Link } from "@/i18n/navigation";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { cn } from "@/lib/utils/utils"
-import shortImage from "@/public/images/all-img/short-image-2.png";
-import { Icon } from "@/components/ui/icon";
 import { useEffect, useState } from "react";
-import { getNotifications } from "@/lib/services/notifications/notifications";
+import { useRouter } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import shortImage from "@/public/images/all-img/short-image-2.png";
 import { format, formatDate } from "date-fns";
 import {
   CalendarCheck,
@@ -26,7 +12,22 @@ import {
   SquareCheck,
   UploadIcon,
 } from "lucide-react";
-import { useRouter } from "next/navigation";
+
+import { getNotifications } from "@/lib/services/notifications/notifications";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export type Notification = {
   id: number;
@@ -96,10 +97,7 @@ const Notifications = () => {
           type="button"
           className="relative  hidden focus:ring-none focus:outline-none md:h-8 md:w-8 md:bg-secondary   text-secondary-foreground    rounded-full  md:flex flex-col items-center justify-center"
         >
-          <Icon
-            icon="heroicons-outline:bell"
-            className="animate-tada h-5 w-5"
-          />
+          <Icon icon="heroicons-outline:bell" className="animate-tada h-5 w-5" />
           <Badge
             className=" w-4 h-4 p-0 text-[8px] rounded-full  font-semibold  items-center justify-center absolute left-[calc(100%-12px)] bottom-[calc(100%-10px)]"
             color="destructive"
@@ -108,15 +106,11 @@ const Notifications = () => {
           </Badge>
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align="end"
-        className=" z-[999] mx-4 lg:w-[320px] p-0"
-      >
+      <DropdownMenuContent align="end" className=" z-[999] mx-4 lg:w-[320px] p-0">
         <DropdownMenuLabel>
           <div className="flex justify-between px-4 py-3 border-b border-default-100 ">
             <div className="text-sm text-default-800  font-medium ">
-              you have {notificationTotal > 99 ? "99+" : notificationTotal}{" "}
-              notifications
+              you have {notificationTotal > 99 ? "99+" : notificationTotal} notifications
             </div>
             <div className="text-default-800  text-xs md:text-right">
               <Link href="/notifications" className="underline">
@@ -134,9 +128,7 @@ const Notifications = () => {
                 onClick={() => handleNotificationClick(item?.redirectUrl)}
               >
                 <div className="flex items-start gap-2 flex-1 ">
-                  <div className="flex-none">
-                    {getNotificationIcon(item.notificationTypeId)}
-                  </div>
+                  <div className="flex-none">{getNotificationIcon(item.notificationTypeId)}</div>
                   <div className="flex-1 flex flex-col gap-0.5">
                     <div className="text-sm   text-default-600  dark:group-hover:text-default-800  font-normal   truncate whitespace-normal ">
                       {item?.message}
diff --git a/src/components/partials/header/profile-info.tsx b/src/components/partials/header/profile-info.tsx
index a2693232..b1980bc9 100644
--- a/src/components/partials/header/profile-info.tsx
+++ b/src/components/partials/header/profile-info.tsx
@@ -1,4 +1,12 @@
 "use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { Link, useRouter } from "@/i18n/navigation";
+import Cookies from "js-cookie";
+
+import { getInfoProfile } from "@/lib/services/auth";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,13 +21,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Icon } from "@/components/ui/icon";
-import Image from "next/image";
-import { Link } from "@/i18n/navigation";
-import { Button } from "@/components/ui/button";
-import Cookies from "js-cookie";
-import { useEffect, useState } from "react";
-import { useRouter } from "@/i18n/navigation";
-import { getInfoProfile } from "@/lib/services/auth";
 
 type Detail = {
   id: number;
@@ -121,11 +122,7 @@ const ProfileInfo = () => {
                 href: "/profile",
               },
             ].map((item, index) => (
-              <Link
-                href={item.href}
-                key={`info-menu-${index}`}
-                className="cursor-pointer"
-              >
+              <Link href={item.href} key={`info-menu-${index}`} className="cursor-pointer">
                 <DropdownMenuItem className="flex items-center gap-2 text-sm font-medium text-default-600 capitalize px-3 py-1.5 cursor-pointer">
                   <Icon icon={item.icon} className="w-4 h-4" />
                   {item.name}
diff --git a/src/components/partials/header/theme-switcher.tsx b/src/components/partials/header/theme-switcher.tsx
index 94bf6f3c..bf2a93ae 100644
--- a/src/components/partials/header/theme-switcher.tsx
+++ b/src/components/partials/header/theme-switcher.tsx
@@ -1,13 +1,17 @@
 "use client";
 
 import * as React from "react";
+import { Check, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { hexToRGB } from "@/lib/utils/utils";
+
+import { cn, hexToRGB } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
-import { Moon, Sun } from "lucide-react";
-import { Check } from "lucide-react";
-import { cn } from "@/lib/utils/utils"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Icon } from "@/components/ui/icon";
 
 const ThemeButton = () => {
@@ -15,7 +19,11 @@ const ThemeButton = () => {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button size="icon" rounded="full" className=" md:bg-transparent bg-transparent  text-secondary-foreground hover:ring-0  md:h-8 md:w-8 h-auto w-auto text-default-900 hover:bg-secondary hover:ring-offset-0">
+        <Button
+          size="icon"
+          rounded="full"
+          className=" md:bg-transparent bg-transparent  text-secondary-foreground hover:ring-0  md:h-8 md:w-8 h-auto w-auto text-default-900 hover:bg-secondary hover:ring-offset-0"
+        >
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 " />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
@@ -38,9 +46,12 @@ const ThemeButton = () => {
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setTheme("dark")}
-          className={cn("p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]", {
-            "bg-default text-default-foreground": theme === "dark",
-          })}
+          className={cn(
+            "p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]",
+            {
+              "bg-default text-default-foreground": theme === "dark",
+            }
+          )}
         >
           <Icon icon="heroicons-outline:moon" className="w-5 h-5 me-2" />
           <span className="me-2">Dark</span>
@@ -52,9 +63,12 @@ const ThemeButton = () => {
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => setTheme("system")}
-          className={cn("p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]", {
-            "bg-default text-default-foreground": theme === "system",
-          })}
+          className={cn(
+            "p-2 font-medium text-sm text-default-600 hover:bg-default hover:text-default-foreground  dark:hover:bg-background cursor-pointer mb-[2px]",
+            {
+              "bg-default text-default-foreground": theme === "system",
+            }
+          )}
         >
           <Icon icon="heroicons:computer-desktop" className="w-5 h-5 me-2" />
           <span className="me-2">system</span>
diff --git a/src/components/partials/sidebar/common/classic-multi-collapse-button.tsx b/src/components/partials/sidebar/common/classic-multi-collapse-button.tsx
index b249168b..bcd84c7b 100644
--- a/src/components/partials/sidebar/common/classic-multi-collapse-button.tsx
+++ b/src/components/partials/sidebar/common/classic-multi-collapse-button.tsx
@@ -1,136 +1,100 @@
 "use client";
-import React, { CSSProperties } from 'react'
+
+import React, { CSSProperties, useState } from "react";
 import { Link, usePathname } from "@/i18n/navigation";
-import { useState } from "react";
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
 import { ChevronDown, Dot, LucideIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { useMobileMenuConfig } from "@/lib/hooks/use-mobile-menu";
+import { SubChildren } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
-import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger
-} from "@/components/ui/collapsible";
-
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Icon } from "@/components/ui/icon";
-import { SubChildren } from '@/lib/menus';
-import { useMobileMenuConfig } from '@/lib/hooks/use-mobile-menu';
-
-
-
 
 interface CollapseMenuButtonProps {
-    icon?: string;
-    label: string;
-    active: boolean;
-    submenus: SubChildren[]
-
-
+  icon?: string;
+  label: string;
+  active: boolean;
+  submenus: SubChildren[];
 }
 
 export function MultiCollapseMenuButton({
-    icon,
-    label,
-    active,
-    submenus,
-
-
-
+  icon,
+  label,
+  active,
+  submenus,
 }: CollapseMenuButtonProps) {
-    const pathname = usePathname();
-    const isSubmenuActive = submenus.some((submenu) => submenu.active || pathname.startsWith(submenu.href));
-    const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
-    const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
-    return (
-
-        <Collapsible
-            open={isCollapsed}
-            onOpenChange={setIsCollapsed}
-            className="w-full mb-2 last:mb-0 "
-        >
-            <CollapsibleTrigger
-                asChild
-            >
-                <div className=' flex items-center group [&[data-state=open]>button>div>div>svg]:rotate-180 first:mt-3 ' >
-
-                    <Button
-                        color='secondary'
-                        variant="ghost"
-                        className="w-full justify-start h-auto hover:bg-transparent hover:ring-offset-0 capitalize text-sm font-normal   md:px-5 px-5 "
-                        fullWidth
-                    >
-                        <div className="w-full items-center flex justify-between">
-                            <div className="flex items-center">
-                                <span
-                                    className={cn(
-                                        "h-1.5 w-1.5 me-3 rounded-full  transition-all duration-150 ring-1     ring-default-600 ",
-                                        {
-                                            "ring-4 bg-default ring-opacity-30 ring-default": active,
-
-                                        }
-                                    )}
-                                ></span>
-                                <p
-                                    className={cn(
-                                        "max-w-[150px] truncate",
-                                    )}
-                                >
-                                    {label}
-                                </p>
-                            </div>
-                            <div
-                                className={cn(
-                                    "whitespace-nowrap inline-flex items-center justify-center rounded-full h-5 w-5 bg-menu-arrow text-menu-menu-foreground  group-hover:bg-menu-arrow-active transition-all duration-300 ",
-                                    {
-                                        'bg-menu-arrow-active': active
-                                    }
-                                )}
-                            >
-                                <ChevronDown
-                                    size={16}
-                                    className="transition-transform duration-200"
-                                />
-                            </div>
-                        </div>
-                    </Button>
-                </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-                {submenus.map(({ href, label, active }, index) => (
-
-
-                    <Button
-                        key={index}
-                        onClick={() => setMobileMenuConfig({ ...mobileMenuConfig, isOpen: false })}
-                        color='secondary'
-                        variant="ghost"
-                        className="w-full justify-start  h-auto mb-1.5  hover:bg-transparent first:mt-3 text-[13px]  font-normal "
-                        asChild
-                    >
-                        <Link href={href}>
-                            <span
-                                className={cn(
-                                    "h-1 w-1 me-3 rounded-full  transition-all duration-150 ring-0   bg-default-300 dark:bg-secondary  dark:ring-menu-arrow-active  ring-default-300 ",
-                                    {
-                                        "ring-4 bg-default ring-opacity-30 ring-default": active,
-
-                                    }
-                                )}
-                            ></span>
-                            <p
-                                className={cn(
-                                    "max-w-[170px] truncate",
-                                )}
-                            >
-                                {label}
-                            </p>
-                        </Link>
-                    </Button>
-
-                ))}
-            </CollapsibleContent>
-        </Collapsible>
-
-    )
+  const pathname = usePathname();
+  const isSubmenuActive = submenus.some(
+    (submenu) => submenu.active || pathname.startsWith(submenu.href)
+  );
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
+  const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
+  return (
+    <Collapsible
+      open={isCollapsed}
+      onOpenChange={setIsCollapsed}
+      className="w-full mb-2 last:mb-0 "
+    >
+      <CollapsibleTrigger asChild>
+        <div className=" flex items-center group [&[data-state=open]>button>div>div>svg]:rotate-180 first:mt-3 ">
+          <Button
+            color="secondary"
+            variant="ghost"
+            className="w-full justify-start h-auto hover:bg-transparent hover:ring-offset-0 capitalize text-sm font-normal   md:px-5 px-5 "
+            fullWidth
+          >
+            <div className="w-full items-center flex justify-between">
+              <div className="flex items-center">
+                <span
+                  className={cn(
+                    "h-1.5 w-1.5 me-3 rounded-full  transition-all duration-150 ring-1     ring-default-600 ",
+                    {
+                      "ring-4 bg-default ring-opacity-30 ring-default": active,
+                    }
+                  )}
+                ></span>
+                <p className={cn("max-w-[150px] truncate")}>{label}</p>
+              </div>
+              <div
+                className={cn(
+                  "whitespace-nowrap inline-flex items-center justify-center rounded-full h-5 w-5 bg-menu-arrow text-menu-menu-foreground  group-hover:bg-menu-arrow-active transition-all duration-300 ",
+                  {
+                    "bg-menu-arrow-active": active,
+                  }
+                )}
+              >
+                <ChevronDown size={16} className="transition-transform duration-200" />
+              </div>
+            </div>
+          </Button>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+        {submenus.map(({ href, label, active }, index) => (
+          <Button
+            key={index}
+            onClick={() => setMobileMenuConfig({ ...mobileMenuConfig, isOpen: false })}
+            color="secondary"
+            variant="ghost"
+            className="w-full justify-start  h-auto mb-1.5  hover:bg-transparent first:mt-3 text-[13px]  font-normal "
+            asChild
+          >
+            <Link href={href}>
+              <span
+                className={cn(
+                  "h-1 w-1 me-3 rounded-full  transition-all duration-150 ring-0   bg-default-300 dark:bg-secondary  dark:ring-menu-arrow-active  ring-default-300 ",
+                  {
+                    "ring-4 bg-default ring-opacity-30 ring-default": active,
+                  }
+                )}
+              ></span>
+              <p className={cn("max-w-[170px] truncate")}>{label}</p>
+            </Link>
+          </Button>
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  );
 }
diff --git a/src/components/partials/sidebar/common/collapse-menu-button.tsx b/src/components/partials/sidebar/common/collapse-menu-button.tsx
index 39ce0baf..d7181ea0 100644
--- a/src/components/partials/sidebar/common/collapse-menu-button.tsx
+++ b/src/components/partials/sidebar/common/collapse-menu-button.tsx
@@ -1,357 +1,310 @@
 "use client";
-import React, { CSSProperties } from 'react'
+
+import React, { CSSProperties, useState } from "react";
 import { Link, usePathname } from "@/i18n/navigation";
-import { useState } from "react";
-import { ChevronDown, Dot, LucideIcon } from "lucide-react";
-import { GripVertical } from 'lucide-react';
-import { cn } from "@/lib/utils/utils"
-import { Button } from "@/components/ui/button";
-import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
-import { ScrollArea } from "@/components/ui/scroll-area"
+// for dnd
 
 import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger
-} from "@/components/ui/collapsible";
-import {
-    Tooltip,
-    TooltipTrigger,
-    TooltipContent,
-    TooltipProvider
-} from "@/components/ui/tooltip";
-import {
-    DropdownMenu,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuSeparator,
-    DropdownMenuGroup,
-    DropdownMenuSub,
-    DropdownMenuSubTrigger,
-    DropdownMenuPortal,
-    DropdownMenuSubContent
-} from "@/components/ui/dropdown-menu";
-import { Icon } from "@/components/ui/icon";
-import { Submenu } from "@/lib/menus"
-
-// for dnd 
-
-import {
-    useSortable,
-    arrayMove,
-    SortableContext,
-    verticalListSortingStrategy,
-    horizontalListSortingStrategy,
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { useConfig } from '@/lib/hooks/use-config';
-import { MultiCollapseMenuButton } from './classic-multi-collapse-button';
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import { useMobileMenuConfig } from '@/lib/hooks/use-mobile-menu';
-import { useMenuHoverConfig } from '@/lib/hooks/use-menu-hover';
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
+import { ChevronDown, Dot, GripVertical, LucideIcon } from "lucide-react";
 
+import { useConfig } from "@/lib/hooks/use-config";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
+import { useMobileMenuConfig } from "@/lib/hooks/use-mobile-menu";
+import { Submenu } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Icon } from "@/components/ui/icon";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+import { MultiCollapseMenuButton } from "./classic-multi-collapse-button";
 
 interface CollapseMenuButtonProps {
-    icon: string;
-    label: string;
-    active: boolean;
-    submenus: Submenu[];
-    collapsed: boolean | undefined;
-    id: string
-
+  icon: string;
+  label: string;
+  active: boolean;
+  submenus: Submenu[];
+  collapsed: boolean | undefined;
+  id: string;
 }
 
 export function CollapseMenuButton({
-    icon,
-    label,
-    active,
-    submenus,
-    collapsed,
-    id,
-
+  icon,
+  label,
+  active,
+  submenus,
+  collapsed,
+  id,
 }: CollapseMenuButtonProps) {
-    const pathname = usePathname();
-    const isSubmenuActive = submenus.some((submenu) => submenu.active || pathname.startsWith(submenu.href));
-    const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
-    const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig()
-    const [config] = useConfig();
-    const [hoverConfig] = useMenuHoverConfig();
-    const { hovered } = hoverConfig;
-    const sidebarTheme = config.sidebarTheme !== 'light' ? `dark theme-${config.sidebarTheme}` : `theme-${config.sidebarTheme}`
-    const isDesktop = useMediaQuery("(min-width: 1280px)");
-    const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
-        id: id,
+  const pathname = usePathname();
+  const isSubmenuActive = submenus.some(
+    (submenu) => submenu.active || pathname.startsWith(submenu.href)
+  );
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
+  const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
+  const [config] = useConfig();
+  const [hoverConfig] = useMenuHoverConfig();
+  const { hovered } = hoverConfig;
+  const sidebarTheme =
+    config.sidebarTheme !== "light"
+      ? `dark theme-${config.sidebarTheme}`
+      : `theme-${config.sidebarTheme}`;
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
+    id: id,
+  });
 
-    })
+  React.useEffect(() => {
+    setIsCollapsed(isSubmenuActive);
+  }, [isSubmenuActive, pathname]);
 
-    React.useEffect(() => {
-        setIsCollapsed(isSubmenuActive);
-    }, [isSubmenuActive, pathname]);
-
-
-    const style: CSSProperties = {
-        transform: CSS.Transform.toString(transform),
-        transition: transition,
-        opacity: isDragging ? 0.8 : 1,
-        zIndex: isDragging ? 1 : 0,
-        position: "relative",
-    };
-
-    if (config.sidebar === 'compact' && isDesktop) {
-        return (
-            <Collapsible
-                open={isCollapsed}
-                onOpenChange={setIsCollapsed}
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+  };
 
+  if (config.sidebar === "compact" && isDesktop) {
+    return (
+      <Collapsible open={isCollapsed} onOpenChange={setIsCollapsed}>
+        <CollapsibleTrigger asChild>
+          <Button
+            variant={active ? "default" : "ghost"}
+            fullWidth
+            color={active ? "default" : "secondary"}
+            className={cn(
+              "flex-col h-auto py-1.5 px-3.5 capitalize font-semibold ring-offset-sidebar",
+              {
+                "data-[state=open]:bg-secondary": !active,
+              }
+            )}
+          >
+            <Icon icon={icon} className={cn("h-6 w-6 mb-1 ")} />
 
+            <p className={cn("max-w-[200px]  text-[11px] truncate ")}>{label}</p>
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+          {submenus.map(({ href, label, active }, index) => (
+            <Button
+              key={index}
+              color={active ? "default" : "secondary"}
+              variant="ghost"
+              fullWidth
+              size="sm"
+              className={cn(
+                "w-full justify-center text-center p-0  h-auto  hover:bg-transparent hover:text-default capitalize text-xs font-normal mb-2 first:mt-4 last:mb-0",
+                {
+                  "font-semibold": active,
+                }
+              )}
+              asChild
             >
-                <CollapsibleTrigger
-
-                    asChild
-                >
-                    <Button
-
-                        variant={active ? "default" : "ghost"}
-                        fullWidth
-                        color={active ? 'default' : 'secondary'}
-                        className={cn('flex-col h-auto py-1.5 px-3.5 capitalize font-semibold ring-offset-sidebar', {
-                            'data-[state=open]:bg-secondary': !active
-                        })}
-
-
-                    >
-
-                        <Icon icon={icon} className={cn('h-6 w-6 mb-1 ')} />
-
-                        <p
-                            className={cn(
-                                "max-w-[200px]  text-[11px] truncate ",
-                            )}
-                        >
-                            {label}
-                        </p>
-
-
-                    </Button>
-                </CollapsibleTrigger>
-                <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-                    {submenus.map(({ href, label, active }, index) => (
-
-
-                        <Button
-                            key={index}
-                            color={active ? 'default' : 'secondary'}
-                            variant="ghost"
-                            fullWidth
-                            size='sm'
-                            className={cn('w-full justify-center text-center p-0  h-auto  hover:bg-transparent hover:text-default capitalize text-xs font-normal mb-2 first:mt-4 last:mb-0', {
-                                'font-semibold': active
-                            })}
-                            asChild
-                        >
-                            <Link href={href}>
-
-                                {label}
-                            </Link>
-                        </Button>
-
-                    ))}
-                </CollapsibleContent>
-            </Collapsible>
-        )
-    }
-    return !collapsed || hovered ? (
-        <Collapsible
-            open={isCollapsed}
-            onOpenChange={setIsCollapsed}
-
-
-        >
-            <CollapsibleTrigger
-                className=""
-                asChild
-            >
-                <div className='peer flex items-center group [&[data-state=open]>button>div>div>svg]:rotate-180' >
-
-                    <Button
-                        style={style}
-                        ref={setNodeRef}
-                        variant={active ? "default" : "ghost"}
-                        color='secondary'
-                        className={cn('justify-start capitalize group  h-auto py-3 md:px-3 px-3   ring-offset-sidebar group-data-[state=open]:bg-secondary ', {
-                            'hover:md:ps-8': config.sidebar === 'draggable' && isDesktop
-                        })}
-                        fullWidth
-                    >
-                        <div className="w-full items-center flex justify-between">
-
-                            <div className="flex items-center">
-                                {config.sidebar === 'draggable' && isDesktop && (
-                                    <GripVertical
-
-                                        {...attributes} {...listeners} className={cn('inset-t-0 absolute me-1 h-5 w-5 ltr:-translate-x-6 rtl:translate-x-6 invisible opacity-0 group-hover:opacity-100 transition-all group-hover:visible ltr:group-hover:-translate-x-5 rtl:group-hover:translate-x-5 ', {
-
-                                        })} />
-                                )}
-                                <span className="me-4">
-                                    <Icon icon={icon} className="h-5 w-5" />
-                                </span>
-                                <p
-                                    className={cn(
-                                        "max-w-[150px] truncate",
-                                        !collapsed || hovered
-                                            ? "translate-x-0 opacity-100"
-                                            : "-translate-x-96 opacity-0"
-                                    )}
-                                >
-                                    {label}
-                                </p>
-                            </div>
-                            <div
-                                className={cn(
-                                    "whitespace-nowrap inline-flex items-center justify-center rounded-full h-5 w-5 bg-menu-arrow text-menu-menu-foreground  group-hover:bg-menu-arrow-active transition-all duration-300 ",
-                                    !collapsed || hovered
-                                        ? "translate-x-0 opacity-100"
-                                        : "-translate-x-96 opacity-0", {
-                                    'bg-menu-arrow-active': active
-                                }
-                                )}
-                            >
-                                <ChevronDown
-                                    size={16}
-                                    className="transition-transform duration-200"
-                                />
-                            </div>
-                        </div>
-                    </Button>
-                </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-                {submenus.map(({ href, label, active, children: subChildren }, index) => (
-
-                    subChildren?.length === 0 ? (
-                        <Button
-                            onClick={() => setMobileMenuConfig({ ...mobileMenuConfig, isOpen: false })}
-                            key={index}
-                            color='secondary'
-                            variant="ghost"
-                            className={cn('w-full  justify-start h-auto hover:bg-transparent hover:ring-offset-0 capitalize text-sm font-normal mb-2 last:mb-0 first:mt-3 md:px-5 px-5', {
-                                'font-medium': active,
-                                'dark:opacity-80': !active,
-                            })}
-                            asChild
-                        >
-                            <Link href={href}>
-
-                                <span
-                                    className={cn(
-                                        "h-1.5 w-1.5 me-3 rounded-full  transition-all duration-150 ring-1    ring-default-600 ",
-                                        {
-                                            "ring-4 bg-default ring-opacity-30 ring-default": active,
-
-                                        }
-                                    )}
-                                ></span>
-                                <p
-                                    className={cn(
-                                        "max-w-[170px] truncate",
-                                        !collapsed || hovered
-                                            ? "translate-x-0 opacity-100"
-                                            : "-translate-x-96 opacity-0"
-                                    )}
-                                >
-                                    {label}
-                                </p>
-                            </Link>
-                        </Button>
-                    ) : (
-                        <React.Fragment key={index}>
-                            <MultiCollapseMenuButton
-                                label={label}
-                                active={active}
-                                submenus={subChildren as any}
-
-
-                            />
-                        </React.Fragment>
-                    )
-
-
-                ))}
-            </CollapsibleContent>
-        </Collapsible>
-    ) : (
-        <DropdownMenu >
-            <TooltipProvider disableHoverableContent>
-                <Tooltip delayDuration={100}>
-                    <TooltipTrigger asChild>
-                        <DropdownMenuTrigger asChild>
-                            <Button
-                                variant={active ? "default" : "ghost"}
-                                color='secondary'
-                                className="w-full justify-center"
-                                size="icon"
-                            >
-
-                                <Icon icon={icon} className="h-5 w-5" />
-
-                            </Button>
-                        </DropdownMenuTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent side="right" align="start" alignOffset={2}>
-                        {label}
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
-            <DropdownMenuContent side="right" sideOffset={20} align="start" className={` border-sidebar space-y-1.5 ${sidebarTheme}`} >
-                <DropdownMenuLabel className="max-w-[190px] truncate">
-                    {label}
-                </DropdownMenuLabel>
-                <DropdownMenuSeparator className='bg-default-300' />
-                <DropdownMenuGroup>
-
-
-                    {submenus.map(({ href, label, icon, active, children }, index) => (
-                        children?.length === 0 ? (
-                            <DropdownMenuItem key={index} asChild className={cn('focus:bg-secondary', {
-                                'bg-secondary text-secondary-foreground ': active
-                            })}>
-                                <Link className="cursor-pointer flex-flex gap-3" href={href}>
-                                    {icon && (
-                                        <Icon icon={icon} className=' h-4 w-4' />
-                                    )}
-                                    <p className="max-w-[180px] truncate">{label} </p>
-                                </Link>
-                            </DropdownMenuItem>
-                        ) : (
-                            <DropdownMenuSub key={index}>
-                                <DropdownMenuSubTrigger>
-                                    <span>{label}</span>
-                                </DropdownMenuSubTrigger>
-                                <DropdownMenuPortal>
-                                    <DropdownMenuSubContent>
-                                        <ScrollArea className='h-[200px]'>
-
-
-                                            {children?.map(({ href, label, active }, index) => (
-
-
-                                                <DropdownMenuItem key={`nested-index-${index}`}>
-                                                    <Link href={href}>{label}</Link>
-                                                </DropdownMenuItem>
-                                            ))}
-                                        </ScrollArea>
-                                    </DropdownMenuSubContent>
-                                </DropdownMenuPortal>
-                            </DropdownMenuSub>
-                        )
-
-
-                    ))}
-                </DropdownMenuGroup>
-            </DropdownMenuContent>
-        </DropdownMenu>
+              <Link href={href}>{label}</Link>
+            </Button>
+          ))}
+        </CollapsibleContent>
+      </Collapsible>
     );
+  }
+  return !collapsed || hovered ? (
+    <Collapsible open={isCollapsed} onOpenChange={setIsCollapsed}>
+      <CollapsibleTrigger className="" asChild>
+        <div className="peer flex items-center group [&[data-state=open]>button>div>div>svg]:rotate-180">
+          <Button
+            style={style}
+            ref={setNodeRef}
+            variant={active ? "default" : "ghost"}
+            color="secondary"
+            className={cn(
+              "justify-start capitalize group  h-auto py-3 md:px-3 px-3   ring-offset-sidebar group-data-[state=open]:bg-secondary ",
+              {
+                "hover:md:ps-8": config.sidebar === "draggable" && isDesktop,
+              }
+            )}
+            fullWidth
+          >
+            <div className="w-full items-center flex justify-between">
+              <div className="flex items-center">
+                {config.sidebar === "draggable" && isDesktop && (
+                  <GripVertical
+                    {...attributes}
+                    {...listeners}
+                    className={cn(
+                      "inset-t-0 absolute me-1 h-5 w-5 ltr:-translate-x-6 rtl:translate-x-6 invisible opacity-0 group-hover:opacity-100 transition-all group-hover:visible ltr:group-hover:-translate-x-5 rtl:group-hover:translate-x-5 ",
+                      {}
+                    )}
+                  />
+                )}
+                <span className="me-4">
+                  <Icon icon={icon} className="h-5 w-5" />
+                </span>
+                <p
+                  className={cn(
+                    "max-w-[150px] truncate",
+                    !collapsed || hovered
+                      ? "translate-x-0 opacity-100"
+                      : "-translate-x-96 opacity-0"
+                  )}
+                >
+                  {label}
+                </p>
+              </div>
+              <div
+                className={cn(
+                  "whitespace-nowrap inline-flex items-center justify-center rounded-full h-5 w-5 bg-menu-arrow text-menu-menu-foreground  group-hover:bg-menu-arrow-active transition-all duration-300 ",
+                  !collapsed || hovered ? "translate-x-0 opacity-100" : "-translate-x-96 opacity-0",
+                  {
+                    "bg-menu-arrow-active": active,
+                  }
+                )}
+              >
+                <ChevronDown size={16} className="transition-transform duration-200" />
+              </div>
+            </div>
+          </Button>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+        {submenus.map(({ href, label, active, children: subChildren }, index) =>
+          subChildren?.length === 0 ? (
+            <Button
+              onClick={() => setMobileMenuConfig({ ...mobileMenuConfig, isOpen: false })}
+              key={index}
+              color="secondary"
+              variant="ghost"
+              className={cn(
+                "w-full  justify-start h-auto hover:bg-transparent hover:ring-offset-0 capitalize text-sm font-normal mb-2 last:mb-0 first:mt-3 md:px-5 px-5",
+                {
+                  "font-medium": active,
+                  "dark:opacity-80": !active,
+                }
+              )}
+              asChild
+            >
+              <Link href={href}>
+                <span
+                  className={cn(
+                    "h-1.5 w-1.5 me-3 rounded-full  transition-all duration-150 ring-1    ring-default-600 ",
+                    {
+                      "ring-4 bg-default ring-opacity-30 ring-default": active,
+                    }
+                  )}
+                ></span>
+                <p
+                  className={cn(
+                    "max-w-[170px] truncate",
+                    !collapsed || hovered
+                      ? "translate-x-0 opacity-100"
+                      : "-translate-x-96 opacity-0"
+                  )}
+                >
+                  {label}
+                </p>
+              </Link>
+            </Button>
+          ) : (
+            <React.Fragment key={index}>
+              <MultiCollapseMenuButton
+                label={label}
+                active={active}
+                submenus={subChildren as any}
+              />
+            </React.Fragment>
+          )
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  ) : (
+    <DropdownMenu>
+      <TooltipProvider disableHoverableContent>
+        <Tooltip delayDuration={100}>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant={active ? "default" : "ghost"}
+                color="secondary"
+                className="w-full justify-center"
+                size="icon"
+              >
+                <Icon icon={icon} className="h-5 w-5" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="right" align="start" alignOffset={2}>
+            {label}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DropdownMenuContent
+        side="right"
+        sideOffset={20}
+        align="start"
+        className={` border-sidebar space-y-1.5 ${sidebarTheme}`}
+      >
+        <DropdownMenuLabel className="max-w-[190px] truncate">{label}</DropdownMenuLabel>
+        <DropdownMenuSeparator className="bg-default-300" />
+        <DropdownMenuGroup>
+          {submenus.map(({ href, label, icon, active, children }, index) =>
+            children?.length === 0 ? (
+              <DropdownMenuItem
+                key={index}
+                asChild
+                className={cn("focus:bg-secondary", {
+                  "bg-secondary text-secondary-foreground ": active,
+                })}
+              >
+                <Link className="cursor-pointer flex-flex gap-3" href={href}>
+                  {icon && <Icon icon={icon} className=" h-4 w-4" />}
+                  <p className="max-w-[180px] truncate">{label} </p>
+                </Link>
+              </DropdownMenuItem>
+            ) : (
+              <DropdownMenuSub key={index}>
+                <DropdownMenuSubTrigger>
+                  <span>{label}</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    <ScrollArea className="h-[200px]">
+                      {children?.map(({ href, label, active }, index) => (
+                        <DropdownMenuItem key={`nested-index-${index}`}>
+                          <Link href={href}>{label}</Link>
+                        </DropdownMenuItem>
+                      ))}
+                    </ScrollArea>
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+            )
+          )}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
 }
diff --git a/src/components/partials/sidebar/common/collapse-menu-button2.tsx b/src/components/partials/sidebar/common/collapse-menu-button2.tsx
index fa448a7e..10a705b8 100644
--- a/src/components/partials/sidebar/common/collapse-menu-button2.tsx
+++ b/src/components/partials/sidebar/common/collapse-menu-button2.tsx
@@ -1,141 +1,87 @@
 "use client";
-import React, { CSSProperties } from 'react'
+
+import React, { CSSProperties, useState } from "react";
 import { Link, usePathname } from "@/i18n/navigation";
-import { useState } from "react";
+import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
 import { ChevronDown, Dot, LucideIcon } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { SubChildren } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
-import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu";
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger
-} from "@/components/ui/collapsible";
-
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Icon } from "@/components/ui/icon";
-import { SubChildren } from '@/lib/menus';
-
-
-
 
 interface CollapseMenuButtonProps {
-    icon: string;
-    label: string;
-    active: boolean;
-    submenus: SubChildren[]
-
-
+  icon: string;
+  label: string;
+  active: boolean;
+  submenus: SubChildren[];
 }
 
-export function CollapseMenuButton2({
-    icon,
-    label,
-    active,
-    submenus,
+export function CollapseMenuButton2({ icon, label, active, submenus }: CollapseMenuButtonProps) {
+  const pathname = usePathname();
+  const isSubmenuActive = submenus.some(
+    (submenu) => submenu.active || pathname.startsWith(submenu.href)
+  );
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
 
-
-
-}: CollapseMenuButtonProps) {
-    const pathname = usePathname();
-    const isSubmenuActive = submenus.some((submenu) => submenu.active || pathname.startsWith(submenu.href));
-    const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
-
-
-
-
-
-
-
-    return (
-
-        <Collapsible
-            open={isCollapsed}
-            onOpenChange={setIsCollapsed}
-            className="w-full"
-        >
-            <CollapsibleTrigger
-                className=" mb-1"
-                asChild
-            >
-                <div className=' flex items-center group [&[data-state=open]>button>div>div>svg]:rotate-180' >
-
-                    <Button
-
-                        variant={active ? "default" : "ghost"}
-                        color={active ? 'default' : 'secondary'}
-                        className={cn('justify-start capitalize md:px-3 px-3 h-10', {
-                            'group-data-[state=open]:bg-secondary': !active
-                        })}
-                        fullWidth
-                    >
-                        <div className="w-full items-center flex justify-between">
-                            <div className="flex items-center">
-                                {icon && (
-                                    <span className="me-4">
-                                        <Icon icon={icon} className="h-5 w-5" />
-                                    </span>
-                                )}
-                                <p
-                                    className={cn(
-                                        "max-w-[150px] truncate",
-                                    )}
-                                >
-                                    {label}
-                                </p>
-                            </div>
-                            <div
-                                className={cn(
-                                    "whitespace-nowrap",
-                                )}
-                            >
-                                <ChevronDown
-                                    size={18}
-                                    className="transition-transform duration-200"
-                                />
-                            </div>
-                        </div>
-                    </Button>
-                </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-                {submenus.map(({ href, label, active }, index) => (
-
-
-                    <Button
-                        key={index}
-                        color='secondary'
-                        variant="ghost"
-                        className={cn('w-full justify-start  h-auto mb-3 md:px-3 px-3 hover:bg-transparent first:mt-2', {
-                            "opacity-100": active,
-                            "dark:opacity-75": !active,
-                        })}
-                        asChild
-                    >
-                        <Link href={href}>
-
-                            <span
-                                className={cn(
-                                    "h-1.5 w-1.5 me-3 rounded-full  transition-all duration-150 ring-0   bg-default-300 dark:bg-default   dark:ring-menu-arrow-active  ring-default-300",
-                                    {
-                                        "ring-4 bg-default ring-opacity-30 ring-default": active,
-
-                                    }
-                                )}
-                            ></span>
-                            <p
-                                className={cn(
-                                    "max-w-[170px] truncate",
-                                )}
-                            >
-                                {label}
-                            </p>
-                        </Link>
-                    </Button>
-
-                ))}
-            </CollapsibleContent>
-        </Collapsible>
-
-    )
+  return (
+    <Collapsible open={isCollapsed} onOpenChange={setIsCollapsed} className="w-full">
+      <CollapsibleTrigger className=" mb-1" asChild>
+        <div className=" flex items-center group [&[data-state=open]>button>div>div>svg]:rotate-180">
+          <Button
+            variant={active ? "default" : "ghost"}
+            color={active ? "default" : "secondary"}
+            className={cn("justify-start capitalize md:px-3 px-3 h-10", {
+              "group-data-[state=open]:bg-secondary": !active,
+            })}
+            fullWidth
+          >
+            <div className="w-full items-center flex justify-between">
+              <div className="flex items-center">
+                {icon && (
+                  <span className="me-4">
+                    <Icon icon={icon} className="h-5 w-5" />
+                  </span>
+                )}
+                <p className={cn("max-w-[150px] truncate")}>{label}</p>
+              </div>
+              <div className={cn("whitespace-nowrap")}>
+                <ChevronDown size={18} className="transition-transform duration-200" />
+              </div>
+            </div>
+          </Button>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+        {submenus.map(({ href, label, active }, index) => (
+          <Button
+            key={index}
+            color="secondary"
+            variant="ghost"
+            className={cn(
+              "w-full justify-start  h-auto mb-3 md:px-3 px-3 hover:bg-transparent first:mt-2",
+              {
+                "opacity-100": active,
+                "dark:opacity-75": !active,
+              }
+            )}
+            asChild
+          >
+            <Link href={href}>
+              <span
+                className={cn(
+                  "h-1.5 w-1.5 me-3 rounded-full  transition-all duration-150 ring-0   bg-default-300 dark:bg-default   dark:ring-menu-arrow-active  ring-default-300",
+                  {
+                    "ring-4 bg-default ring-opacity-30 ring-default": active,
+                  }
+                )}
+              ></span>
+              <p className={cn("max-w-[170px] truncate")}>{label}</p>
+            </Link>
+          </Button>
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  );
 }
diff --git a/src/components/partials/sidebar/common/menu-icon.tsx b/src/components/partials/sidebar/common/menu-icon.tsx
index 1c774caf..ff3b842b 100644
--- a/src/components/partials/sidebar/common/menu-icon.tsx
+++ b/src/components/partials/sidebar/common/menu-icon.tsx
@@ -1,9 +1,7 @@
-import React from 'react'
+import React from "react";
 
 const MenuIcon = () => {
-    return (
-        <div>MenuIcon</div>
-    )
-}
+  return <div>MenuIcon</div>;
+};
 
-export default MenuIcon
\ No newline at end of file
+export default MenuIcon;
diff --git a/src/components/partials/sidebar/common/menu-item.tsx b/src/components/partials/sidebar/common/menu-item.tsx
index c0aa438a..04cce4be 100644
--- a/src/components/partials/sidebar/common/menu-item.tsx
+++ b/src/components/partials/sidebar/common/menu-item.tsx
@@ -1,156 +1,140 @@
+"use client";
 
-'use client'
-import React, { CSSProperties } from 'react'
-import { Button } from "@/components/ui/button";
-import { Icon } from '@/components/ui/icon'
-import { type Menu } from '@/lib/menus';
-import { Link } from '@/i18n/navigation';
-import { cn } from "@/lib/utils/utils"
-import { GripVertical } from 'lucide-react';
-
-// for dnd 
+import React, { CSSProperties } from "react";
+import { Link } from "@/i18n/navigation";
+// for dnd
 
 import {
-    useSortable,
-    arrayMove,
-    SortableContext,
-    verticalListSortingStrategy,
-    horizontalListSortingStrategy,
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-interface MenuItemProps {
-    id: string
-    href: string
-    label: string
-    icon: string
-    active: boolean
-    collapsed: boolean
-
-}
 import { CSS } from "@dnd-kit/utilities";
-import { useConfig } from '@/lib/hooks/use-config';
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import { useMobileMenuConfig } from '@/lib/hooks/use-mobile-menu';
-import { useMenuHoverConfig } from '@/lib/hooks/use-menu-hover';
-const MenuItem = ({ href, label, icon, active, id, collapsed }: MenuItemProps) => {
-    const [config] = useConfig();
-    const [hoverConfig] = useMenuHoverConfig();
-    const { hovered } = hoverConfig;
-    const isDesktop = useMediaQuery("(min-width: 1280px)");
-    const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
-    const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
-        id: id,
+import { GripVertical } from "lucide-react";
 
-    })
+import { useConfig } from "@/lib/hooks/use-config";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
+import { useMobileMenuConfig } from "@/lib/hooks/use-mobile-menu";
+import { type Menu } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 
-    const style: CSSProperties = {
-        transform: CSS.Transform.toString(transform),
-        transition: transition,
-        opacity: isDragging ? 0.8 : 1,
-        zIndex: isDragging ? 1 : 0,
-        position: "relative",
-    };
-    if (config.sidebar === 'draggable' && isDesktop) {
-        return (
-            <Button
-                ref={setNodeRef}
-                style={style}
-                variant={active ? "default" : "ghost"}
-                color={active ? "default" : "secondary"}
-                fullWidth
-                className={cn('', {
-                    'justify-start text-sm font-medium capitalize group hover:md:px-8 h-auto py-3 md:px-3 px-3': !collapsed,
-                    'hover:ring-transparent hover:ring-offset-0': !active
-                })}
-                asChild
-                size={collapsed ? "icon" : "default"}
-            >
-
-
-                <Link href={href} onClick={(e) => {
-                    e.stopPropagation();
-                }}>
-                    {!collapsed && (
-                        <GripVertical
-
-                            {...attributes} {...listeners} className={cn('inset-t-0 absolute me-1 h-5 w-5 ltr:-translate-x-6 rtl:translate-x-6 invisible opacity-0 group-hover:opacity-100 transition-all group-hover:visible ltr:group-hover:-translate-x-5 rtl:group-hover:translate-x-5', {
-
-                            })} />
-
-
-                    )}
-                    <Icon icon={icon} className={cn('h-5 w-5 ', {
-                        'me-2': !collapsed
-                    })} />
-                    {!collapsed && (
-                        <p
-                            className={cn(
-                                "max-w-[200px] truncate",
-                            )}
-                        >
-                            {label}
-                        </p>
-                    )}
-                </Link>
-
-            </Button>
-        )
-    }
-
-    if (config.sidebar === 'compact' && isDesktop) {
-        return (
-            <Button
-
-                variant={active ? "default" : "ghost"}
-                fullWidth
-                color={active ? "default" : "secondary"}
-                className="flex-col h-auto py-1.5 px-3.5 capitalize font-semibold"
-                asChild
-
-            >
-                <Link href={href}>
-                    <Icon icon={icon} className={cn('h-6 w-6 mb-1 ')} />
-
-                    <p
-                        className={cn(
-                            "max-w-[200px]  text-[11px] truncate ",
-                        )}
-                    >
-                        {label}
-                    </p>
-
-                </Link>
-            </Button>
-        )
-    }
-    return (
-        <Button
-            onClick={() => setMobileMenuConfig({ ...mobileMenuConfig, isOpen: false })}
-            variant={active ? "default" : "ghost"}
-            fullWidth
-            color={active ? "default" : "secondary"}
-            className={cn('', {
-                'justify-start text-sm font-medium capitalize h-auto py-3 md:px-3 px-3': !collapsed || hovered,
-                'hover:ring-transparent hover:ring-offset-0': !active
-            })}
-            asChild
-            size={(collapsed && !hovered) ? "icon" : "default"}
-        >
-            <Link href={href}>
-                <Icon icon={icon} className={cn('h-5 w-5 ', {
-                    'me-4': !collapsed || hovered
-                })} />
-                {(!collapsed || hovered) && (
-                    <p
-                        className={cn(
-                            "max-w-[200px] truncate",
-                        )}
-                    >
-                        {label}
-                    </p>
-                )}
-            </Link>
-        </Button>
-    )
+interface MenuItemProps {
+  id: string;
+  href: string;
+  label: string;
+  icon: string;
+  active: boolean;
+  collapsed: boolean;
 }
 
-export default MenuItem
\ No newline at end of file
+const MenuItem = ({ href, label, icon, active, id, collapsed }: MenuItemProps) => {
+  const [config] = useConfig();
+  const [hoverConfig] = useMenuHoverConfig();
+  const { hovered } = hoverConfig;
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
+  const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
+    id: id,
+  });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+  };
+  if (config.sidebar === "draggable" && isDesktop) {
+    return (
+      <Button
+        ref={setNodeRef}
+        style={style}
+        variant={active ? "default" : "ghost"}
+        color={active ? "default" : "secondary"}
+        fullWidth
+        className={cn("", {
+          "justify-start text-sm font-medium capitalize group hover:md:px-8 h-auto py-3 md:px-3 px-3":
+            !collapsed,
+          "hover:ring-transparent hover:ring-offset-0": !active,
+        })}
+        asChild
+        size={collapsed ? "icon" : "default"}
+      >
+        <Link
+          href={href}
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          {!collapsed && (
+            <GripVertical
+              {...attributes}
+              {...listeners}
+              className={cn(
+                "inset-t-0 absolute me-1 h-5 w-5 ltr:-translate-x-6 rtl:translate-x-6 invisible opacity-0 group-hover:opacity-100 transition-all group-hover:visible ltr:group-hover:-translate-x-5 rtl:group-hover:translate-x-5",
+                {}
+              )}
+            />
+          )}
+          <Icon
+            icon={icon}
+            className={cn("h-5 w-5 ", {
+              "me-2": !collapsed,
+            })}
+          />
+          {!collapsed && <p className={cn("max-w-[200px] truncate")}>{label}</p>}
+        </Link>
+      </Button>
+    );
+  }
+
+  if (config.sidebar === "compact" && isDesktop) {
+    return (
+      <Button
+        variant={active ? "default" : "ghost"}
+        fullWidth
+        color={active ? "default" : "secondary"}
+        className="flex-col h-auto py-1.5 px-3.5 capitalize font-semibold"
+        asChild
+      >
+        <Link href={href}>
+          <Icon icon={icon} className={cn("h-6 w-6 mb-1 ")} />
+
+          <p className={cn("max-w-[200px]  text-[11px] truncate ")}>{label}</p>
+        </Link>
+      </Button>
+    );
+  }
+  return (
+    <Button
+      onClick={() => setMobileMenuConfig({ ...mobileMenuConfig, isOpen: false })}
+      variant={active ? "default" : "ghost"}
+      fullWidth
+      color={active ? "default" : "secondary"}
+      className={cn("", {
+        "justify-start text-sm font-medium capitalize h-auto py-3 md:px-3 px-3":
+          !collapsed || hovered,
+        "hover:ring-transparent hover:ring-offset-0": !active,
+      })}
+      asChild
+      size={collapsed && !hovered ? "icon" : "default"}
+    >
+      <Link href={href}>
+        <Icon
+          icon={icon}
+          className={cn("h-5 w-5 ", {
+            "me-4": !collapsed || hovered,
+          })}
+        />
+        {(!collapsed || hovered) && <p className={cn("max-w-[200px] truncate")}>{label}</p>}
+      </Link>
+    </Button>
+  );
+};
+
+export default MenuItem;
diff --git a/src/components/partials/sidebar/common/menu-label.tsx b/src/components/partials/sidebar/common/menu-label.tsx
index 26eb3a20..e3dd31f8 100644
--- a/src/components/partials/sidebar/common/menu-label.tsx
+++ b/src/components/partials/sidebar/common/menu-label.tsx
@@ -1,16 +1,23 @@
-'use client'
-import { cn } from "@/lib/utils/utils"
-import { useConfig } from '@/lib/hooks/use-config'
-import React from 'react'
+"use client";
 
-const MenuLabel = ({ label, className }: { label: string, className?: string }) => {
-    const [config] = useConfig()
-    if (config.sidebar === 'compact') return null
-    return (
-        <p className={cn('text-xs font-semibold text-default-800  py-4 max-w-[248px] truncate uppercase', className)}>
-            {label}
-        </p>
-    )
-}
+import React from "react";
 
-export default MenuLabel
\ No newline at end of file
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
+
+const MenuLabel = ({ label, className }: { label: string; className?: string }) => {
+  const [config] = useConfig();
+  if (config.sidebar === "compact") return null;
+  return (
+    <p
+      className={cn(
+        "text-xs font-semibold text-default-800  py-4 max-w-[248px] truncate uppercase",
+        className
+      )}
+    >
+      {label}
+    </p>
+  );
+};
+
+export default MenuLabel;
diff --git a/src/components/partials/sidebar/common/menu-widget.tsx b/src/components/partials/sidebar/common/menu-widget.tsx
index 3bd4288d..6a688e9b 100644
--- a/src/components/partials/sidebar/common/menu-widget.tsx
+++ b/src/components/partials/sidebar/common/menu-widget.tsx
@@ -1,17 +1,18 @@
-'use client'
-import { Button } from '@/components/ui/button'
-import { useConfig } from '@/lib/hooks/use-config'
-import Image from 'next/image'
-import React from 'react'
+"use client";
+
+import React from "react";
+import Image from "next/image";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { Button } from "@/components/ui/button";
 
 const MenuWidget = () => {
-    const [config] = useConfig();
-    if (config.sidebar === 'compact') return null
-    return (
-        <div className="dark">
-            <div className="bg-default-50 mb-16 mt-24 p-4 relative text-center rounded-2xl  text-white">
-
-                {/* <Image className="mx-auto relative -mt-[73px]" alt="" src="/images/svg/rabit.svg" priority width={99} height={114} />
+  const [config] = useConfig();
+  if (config.sidebar === "compact") return null;
+  return (
+    <div className="dark">
+      <div className="bg-default-50 mb-16 mt-24 p-4 relative text-center rounded-2xl  text-white">
+        {/* <Image className="mx-auto relative -mt-[73px]" alt="" src="/images/svg/rabit.svg" priority width={99} height={114} />
                 <div className="max-w-[160px] mx-auto mt-6">
                     <div className="">Unlimited Access</div>
                     <div className="text-xs font-light">
@@ -23,9 +24,9 @@ const MenuWidget = () => {
                         Upgrade
                     </Button>
                 </div> */}
-            </div>
-        </div>
-    )
-}
+      </div>
+    </div>
+  );
+};
 
-export default MenuWidget
\ No newline at end of file
+export default MenuWidget;
diff --git a/src/components/partials/sidebar/common/search-bar.tsx b/src/components/partials/sidebar/common/search-bar.tsx
index 9aac5fae..0a920f6a 100644
--- a/src/components/partials/sidebar/common/search-bar.tsx
+++ b/src/components/partials/sidebar/common/search-bar.tsx
@@ -1,78 +1,77 @@
-'use client'
-import { Input } from '@/components/ui/input'
-import { useConfig } from '@/lib/hooks/use-config'
-import React from 'react'
-import {
-    InputGroup,
-    InputGroupButton,
-    InputGroupText,
-} from "@/components/ui/input-group";
-import { Search } from 'lucide-react';
+"use client";
+
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Search } from "lucide-react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
 import { Button } from "@/components/ui/button";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-    HoverCard,
-    HoverCardContent,
-    HoverCardTrigger,
-} from "@/components/ui/hover-card"
-import { useMenuHoverConfig } from '@/lib/hooks/use-menu-hover';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupButton, InputGroupText } from "@/components/ui/input-group";
+
 const SearchBar = () => {
-    const [config] = useConfig()
-    const [hoverConfig] = useMenuHoverConfig();
-    const { hovered } = hoverConfig;
+  const [config] = useConfig();
+  const [hoverConfig] = useMenuHoverConfig();
+  const { hovered } = hoverConfig;
 
-    if (config.showSearchBar === false || config.sidebar === 'compact') return null
+  if (config.showSearchBar === false || config.sidebar === "compact") return null;
 
+  return (
+    <AnimatePresence>
+      <motion.div
+        key={config.collapsed && !hovered ? "collapsed" : "expanded"}
+        initial={{ scale: 0.9 }}
+        animate={{ scale: 1 }}
+        transition={{ type: "spring", stiffness: 300, damping: 20 }}
+      >
+        {config.collapsed && !hovered ? (
+          <CollapsedSearchBar />
+        ) : (
+          <InputGroup merged>
+            <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+              <Search className=" h-4 w-4 dark:text-white" />
+            </InputGroupText>
+            <Input
+              type="text"
+              placeholder="Search Menu..."
+              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+            />
+          </InputGroup>
+        )}
+      </motion.div>
+    </AnimatePresence>
+  );
+};
 
-    return (
-        <AnimatePresence>
-            <motion.div
-                key={(config.collapsed && !hovered) ? "collapsed" : "expanded"}
-                initial={{ scale: 0.9 }}
-                animate={{ scale: 1 }}
-                transition={{ type: "spring", stiffness: 300, damping: 20 }}
-
-            >
-                {(config.collapsed && !hovered) ? <CollapsedSearchBar /> :
-                    <InputGroup merged >
-                        <InputGroupText className='bg-transparent dark:border-secondary dark:group-focus-within:border-secondary'>
-                            <Search className=' h-4 w-4 dark:text-white' />
-                        </InputGroupText>
-                        <Input type="text" placeholder="Search Menu..." className='bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white' />
-                    </InputGroup>
-                }
-            </motion.div>
-        </AnimatePresence>
-
-    )
-}
-
-export default SearchBar
-
+export default SearchBar;
 
 const CollapsedSearchBar = () => {
-    return (
-        <HoverCard>
-            <HoverCardTrigger asChild>
-                <Button
-                    variant="outline"
-                    color="secondary"
-
-                    fullWidth
-
-                    className="h-10 w-14 mx-auto  p-0 md:p-0  dark:border-secondary ring-offset-sidebar"
-                >
-                    <Search className=' h-4 w-4 dark:text-white' />
-                </Button>
-            </HoverCardTrigger>
-            <HoverCardContent className=' dark:bg-sidebar border-sidebar '>
-                <InputGroup merged >
-                    <InputGroupText className='bg-transparent dark:border-secondary dark:group-focus-within:border-secondary'>
-                        <Search className=' h-4 w-4 dark:text-white' />
-                    </InputGroupText>
-                    <Input type="text" placeholder="Search Menu..." className='bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white' />
-                </InputGroup>
-            </HoverCardContent>
-        </HoverCard>
-    )
-}
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button
+          variant="outline"
+          color="secondary"
+          fullWidth
+          className="h-10 w-14 mx-auto  p-0 md:p-0  dark:border-secondary ring-offset-sidebar"
+        >
+          <Search className=" h-4 w-4 dark:text-white" />
+        </Button>
+      </HoverCardTrigger>
+      <HoverCardContent className=" dark:bg-sidebar border-sidebar ">
+        <InputGroup merged>
+          <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+            <Search className=" h-4 w-4 dark:text-white" />
+          </InputGroupText>
+          <Input
+            type="text"
+            placeholder="Search Menu..."
+            className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+          />
+        </InputGroup>
+      </HoverCardContent>
+    </HoverCard>
+  );
+};
diff --git a/src/components/partials/sidebar/common/team-switcher.tsx b/src/components/partials/sidebar/common/team-switcher.tsx
index 97292d46..faf58d03 100644
--- a/src/components/partials/sidebar/common/team-switcher.tsx
+++ b/src/components/partials/sidebar/common/team-switcher.tsx
@@ -1,268 +1,250 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronsUpDown, Check, CirclePlus } from 'lucide-react';
+import * as React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Check, ChevronsUpDown, CirclePlus } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-} from "@/components/ui/command"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
 import { useConfig } from "@/lib/hooks/use-config";
 import { useMediaQuery } from "@/lib/hooks/use-media-query";
-import { motion, AnimatePresence } from "framer-motion";
 import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
+import { cn } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 const groups = [
-    {
-        label: "Personal Account",
-        teams: [
-            {
-                label: "Designing Workspace",
-                value: "personal",
-            },
-        ],
-    },
-    {
-        label: "Teams",
-        teams: [
-            {
-                label: "Core Workspace",
-                value: "acme-inc",
-            },
-            {
-                label: "Dev.Workspace",
-                value: "monsters",
-            },
-        ],
-    },
-]
+  {
+    label: "Personal Account",
+    teams: [
+      {
+        label: "Designing Workspace",
+        value: "personal",
+      },
+    ],
+  },
+  {
+    label: "Teams",
+    teams: [
+      {
+        label: "Core Workspace",
+        value: "acme-inc",
+      },
+      {
+        label: "Dev.Workspace",
+        value: "monsters",
+      },
+    ],
+  },
+];
 
-type Team = (typeof groups)[number]["teams"][number]
+type Team = (typeof groups)[number]["teams"][number];
 
-type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>
+type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>;
 
-interface TeamSwitcherProps extends PopoverTriggerProps { }
+interface TeamSwitcherProps extends PopoverTriggerProps {}
 
 const scaleVariants = {
-    collapsed: { scale: 0.8 },
-    expanded: { scale: 1 }
+  collapsed: { scale: 0.8 },
+  expanded: { scale: 1 },
 };
 
 export default function TeamSwitcher({ className }: TeamSwitcherProps) {
-    const [config] = useConfig();
-    const [hoverConfig] = useMenuHoverConfig();
-    const { hovered } = hoverConfig;
-    const [data, setData] = React.useState<any>();
-    const [open, setOpen] = React.useState(false)
-    const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false)
-    const [selectedTeam, setSelectedTeam] = React.useState<Team>(
-        groups[0].teams[0]
-    )
-    const isDesktop = useMediaQuery("(min-width: 1280px)")
-    if (config.showSwitcher === false || config.sidebar === 'compact') return null
+  const [config] = useConfig();
+  const [hoverConfig] = useMenuHoverConfig();
+  const { hovered } = hoverConfig;
+  const [data, setData] = React.useState<any>();
+  const [open, setOpen] = React.useState(false);
+  const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false);
+  const [selectedTeam, setSelectedTeam] = React.useState<Team>(groups[0].teams[0]);
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  if (config.showSwitcher === false || config.sidebar === "compact") return null;
 
+  return (
+    <Dialog open={showNewTeamDialog} onOpenChange={setShowNewTeamDialog}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <motion.div
+            key={config.collapsed && !hovered ? "collapsed" : "expanded"}
+            initial={{ scale: 0.9 }}
+            animate={{ scale: 1 }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+          >
+            {config.collapsed && !hovered ? (
+              <Button
+                variant="outline"
+                color="secondary"
+                role="combobox"
+                fullWidth
+                aria-expanded={open}
+                aria-label="Select a team"
+                className={cn(
+                  "  h-14 w-14 mx-auto  p-0 md:p-0  dark:border-secondary ring-offset-sidebar",
+                  className
+                )}
+              >
+                <Avatar className="">
+                  <AvatarImage
+                    height={24}
+                    width={24}
+                    // src={session?.user?.image as any}
+                    alt={selectedTeam.label}
+                    className="grayscale"
+                  />
 
-    return (
-        <Dialog open={showNewTeamDialog} onOpenChange={setShowNewTeamDialog}>
-            <Popover open={open} onOpenChange={setOpen}>
+                  <AvatarFallback>Username</AvatarFallback>
+                </Avatar>
+              </Button>
+            ) : (
+              <Button
+                variant="outline"
+                color="secondary"
+                role="combobox"
+                fullWidth
+                aria-expanded={open}
+                aria-label="Select a team"
+                className={cn(
+                  "  h-auto py-3 md:px-3 px-3 justify-start dark:border-secondary ring-offset-sidebar",
+                  className
+                )}
+              >
+                <div className=" flex  gap-2 flex-1 items-center">
+                  <Avatar className=" flex-none h-[38px] w-[38px]">
+                    <AvatarImage
+                      height={38}
+                      width={38}
+                      // src={session?.user?.image as any}
+                      alt={selectedTeam.label}
+                      className="grayscale"
+                    />
 
-
-                <PopoverTrigger asChild>
-
-
-
-                    <motion.div
-                        key={(config.collapsed && !hovered) ? "collapsed" : "expanded"}
-                        initial={{ scale: 0.9 }}
-                        animate={{ scale: 1 }}
-                        transition={{ type: "spring", stiffness: 300, damping: 20 }}
-
-
-                    >
-                        {(config.collapsed && !hovered) ? <Button
-                            variant="outline"
-                            color="secondary"
-                            role="combobox"
-                            fullWidth
-                            aria-expanded={open}
-                            aria-label="Select a team"
-                            className={cn("  h-14 w-14 mx-auto  p-0 md:p-0  dark:border-secondary ring-offset-sidebar", className)}
-                        >
-                            <Avatar className="">
-                                <AvatarImage
-                                    height={24}
-                                    width={24}
-                                    // src={session?.user?.image as any}
-                                    alt={selectedTeam.label}
-                                    className="grayscale"
-                                />
-
-                                <AvatarFallback>Username</AvatarFallback>
-                            </Avatar>
-                        </Button> : <Button
-                            variant="outline"
-                            color="secondary"
-                            role="combobox"
-                            fullWidth
-                            aria-expanded={open}
-                            aria-label="Select a team"
-                            className={cn("  h-auto py-3 md:px-3 px-3 justify-start dark:border-secondary ring-offset-sidebar", className)}
-                        >
-                            <div className=" flex  gap-2 flex-1 items-center">
-                                <Avatar className=" flex-none h-[38px] w-[38px]">
-                                    <AvatarImage
-                                        height={38}
-                                        width={38}
-                                        // src={session?.user?.image as any}
-                                        alt={selectedTeam.label}
-                                        className="grayscale"
-                                    />
-
-                                    <AvatarFallback>Username</AvatarFallback>
-                                </Avatar>
-                                <div className="flex-1 text-start w-[100px]">
-
-                                    <div className=" text-sm  font-semibold text-default-900">Codeshaper</div>
-                                    <div className=" text-xs font-normal text-default-500 dark:text-default-700 truncate ">{selectedTeam.label}</div>
-
-                                </div>
-                                <div className="">
-                                    <ChevronsUpDown className="ml-auto h-5 w-5 shrink-0  text-default-500 dark:text-default-700" />
-                                </div>
-                            </div>
-                        </Button>}
-                    </motion.div>
-
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                    <Command>
-                        <CommandList>
-                            <CommandInput placeholder="Search team..." className=" placeholder:text-xs" />
-                            <CommandEmpty>No team found.</CommandEmpty>
-                            {groups.map((group) => (
-                                <CommandGroup key={group.label} heading={group.label}>
-                                    {group.teams.map((team) => (
-                                        <CommandItem
-                                            key={team.value}
-                                            onSelect={() => {
-                                                setSelectedTeam(team)
-                                                setOpen(false)
-                                            }}
-                                            className="text-sm font-normal"
-                                        >
-
-                                            {team.label}
-                                            <Check
-                                                className={cn(
-                                                    "ml-auto h-4 w-4",
-                                                    selectedTeam.value === team.value
-                                                        ? "opacity-100"
-                                                        : "opacity-0"
-                                                )}
-                                            />
-                                        </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                            ))}
-                        </CommandList>
-                        <CommandSeparator />
-                        <CommandList>
-                            <CommandGroup>
-                                <DialogTrigger asChild>
-                                    <CommandItem
-                                        onSelect={() => {
-                                            setOpen(false)
-                                            setShowNewTeamDialog(true)
-                                        }}
-                                    >
-                                        <CirclePlus className="mr-2 h-5 w-5" />
-                                        Create Team
-                                    </CommandItem>
-                                </DialogTrigger>
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-                </PopoverContent>
-            </Popover>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Create team</DialogTitle>
-                    <DialogDescription>
-                        Add a new team to manage products and customers.
-                    </DialogDescription>
-                </DialogHeader>
-                <div>
-                    <div className="space-y-4 py-2 pb-4">
-                        <div className="space-y-2">
-                            <Label htmlFor="name">Team name</Label>
-                            <Input id="name" placeholder="Acme Inc." />
-                        </div>
-                        <div className="space-y-2">
-                            <Label htmlFor="plan">Subscription plan</Label>
-                            <Select>
-                                <SelectTrigger>
-                                    <SelectValue placeholder="Select a plan" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="free">
-                                        <span className="font-medium">Free</span> -{" "}
-                                        <span className="text-muted-foreground">
-                                            Trial for two weeks
-                                        </span>
-                                    </SelectItem>
-                                    <SelectItem value="pro">
-                                        <span className="font-medium">Pro</span> -{" "}
-                                        <span className="text-muted-foreground">
-                                            $9/month per user
-                                        </span>
-                                    </SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
+                    <AvatarFallback>Username</AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 text-start w-[100px]">
+                    <div className=" text-sm  font-semibold text-default-900">Codeshaper</div>
+                    <div className=" text-xs font-normal text-default-500 dark:text-default-700 truncate ">
+                      {selectedTeam.label}
                     </div>
+                  </div>
+                  <div className="">
+                    <ChevronsUpDown className="ml-auto h-5 w-5 shrink-0  text-default-500 dark:text-default-700" />
+                  </div>
                 </div>
-                <DialogFooter>
-                    <Button variant="outline" onClick={() => setShowNewTeamDialog(false)}>
-                        Cancel
-                    </Button>
-                    <Button type="submit">Continue</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
+              </Button>
+            )}
+          </motion.div>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0">
+          <Command>
+            <CommandList>
+              <CommandInput placeholder="Search team..." className=" placeholder:text-xs" />
+              <CommandEmpty>No team found.</CommandEmpty>
+              {groups.map((group) => (
+                <CommandGroup key={group.label} heading={group.label}>
+                  {group.teams.map((team) => (
+                    <CommandItem
+                      key={team.value}
+                      onSelect={() => {
+                        setSelectedTeam(team);
+                        setOpen(false);
+                      }}
+                      className="text-sm font-normal"
+                    >
+                      {team.label}
+                      <Check
+                        className={cn(
+                          "ml-auto h-4 w-4",
+                          selectedTeam.value === team.value ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+            </CommandList>
+            <CommandSeparator />
+            <CommandList>
+              <CommandGroup>
+                <DialogTrigger asChild>
+                  <CommandItem
+                    onSelect={() => {
+                      setOpen(false);
+                      setShowNewTeamDialog(true);
+                    }}
+                  >
+                    <CirclePlus className="mr-2 h-5 w-5" />
+                    Create Team
+                  </CommandItem>
+                </DialogTrigger>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create team</DialogTitle>
+          <DialogDescription>Add a new team to manage products and customers.</DialogDescription>
+        </DialogHeader>
+        <div>
+          <div className="space-y-4 py-2 pb-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Team name</Label>
+              <Input id="name" placeholder="Acme Inc." />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="plan">Subscription plan</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a plan" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="free">
+                    <span className="font-medium">Free</span> -{" "}
+                    <span className="text-muted-foreground">Trial for two weeks</span>
+                  </SelectItem>
+                  <SelectItem value="pro">
+                    <span className="font-medium">Pro</span> -{" "}
+                    <span className="text-muted-foreground">$9/month per user</span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowNewTeamDialog(false)}>
+            Cancel
+          </Button>
+          <Button type="submit">Continue</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
 }
diff --git a/src/components/partials/sidebar/common/team-workspace-switcher.tsx b/src/components/partials/sidebar/common/team-workspace-switcher.tsx
index 08fb7ef8..7cb7fdd3 100644
--- a/src/components/partials/sidebar/common/team-workspace-switcher.tsx
+++ b/src/components/partials/sidebar/common/team-workspace-switcher.tsx
@@ -1,53 +1,48 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronsUpDown, Check, CirclePlus } from 'lucide-react';
+import * as React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Check, ChevronsUpDown, CirclePlus } from "lucide-react";
 
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils"
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-} from "@/components/ui/command"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
 import { useConfig } from "@/lib/hooks/use-config";
 import { useMediaQuery } from "@/lib/hooks/use-media-query";
-import { motion, AnimatePresence } from "framer-motion";
 import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
 import { getInfoProfile } from "@/lib/services/auth";
-import { getUserRolePlacements, saveUserRolePlacements } from "@/lib/services/management-user/management-user";
+import {
+  getUserRolePlacements,
+  saveUserRolePlacements,
+} from "@/lib/services/management-user/management-user";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 // var groups = [
 //     {
@@ -58,111 +53,112 @@ import { getUserRolePlacements, saveUserRolePlacements } from "@/lib/services/ma
 
 // type Team = (typeof groups)[number]["teams"][number]
 
-type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>
+type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverTrigger>;
 
-interface TeamSwitcherProps extends PopoverTriggerProps { }
+interface TeamSwitcherProps extends PopoverTriggerProps {}
 
 const scaleVariants = {
-    collapsed: { scale: 0.8 },
-    expanded: { scale: 1 }
+  collapsed: { scale: 0.8 },
+  expanded: { scale: 1 },
 };
 
 export default function TeamWorkspaceSwitcher({ className }: TeamSwitcherProps) {
-    const [config] = useConfig();
-    const [hoverConfig] = useMenuHoverConfig();
-    const { hovered } = hoverConfig;
-    const [detail, setDetail] = React.useState<any>();
-    const userId = getCookiesDecrypt("uie");
-    const [open, setOpen] = React.useState(false);
-    const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false);
-    const [groups, setGroups] = React.useState<any>()
-    const [selectedTeam, setSelectedTeam] = React.useState<any>({ label: "", value: "" });
-    const isDesktop = useMediaQuery("(min-width: 1280px)")
-    if (config.showSwitcher === false || config.sidebar === 'compact') return null
+  const [config] = useConfig();
+  const [hoverConfig] = useMenuHoverConfig();
+  const { hovered } = hoverConfig;
+  const [detail, setDetail] = React.useState<any>();
+  const userId = getCookiesDecrypt("uie");
+  const [open, setOpen] = React.useState(false);
+  const [showNewTeamDialog, setShowNewTeamDialog] = React.useState(false);
+  const [groups, setGroups] = React.useState<any>();
+  const [selectedTeam, setSelectedTeam] = React.useState<any>({ label: "", value: "" });
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  if (config.showSwitcher === false || config.sidebar === "compact") return null;
 
-    React.useEffect(() => {
-        async function initState() {
-            const response = await getInfoProfile();
-            const details = response?.data?.data;
+  React.useEffect(() => {
+    async function initState() {
+      const response = await getInfoProfile();
+      const details = response?.data?.data;
 
-            setDetail(details);
-            console.log("data", details);
-        }
+      setDetail(details);
+      console.log("data", details);
+    }
 
-        async function getPlacement() {
-            const response = await getUserRolePlacements(Number(userId));
-            const data = response?.data?.data;
+    async function getPlacement() {
+      const response = await getUserRolePlacements(Number(userId));
+      const data = response?.data?.data;
 
-            var placementArr: any[] = [];
-            data?.forEach((row: any) => {
-              placementArr.push({
-                label: row.roleName + " | " + row.userLevelName,
-                value: Number(row.id),
-              });
-            });
-            const groupsTemp = [
-                {
-                    label: "Wilayah Tugas",
-                    teams: placementArr,
-                }
-            ];
-            setGroups(groupsTemp);
-        }
+      var placementArr: any[] = [];
+      data?.forEach((row: any) => {
+        placementArr.push({
+          label: row.roleName + " | " + row.userLevelName,
+          value: Number(row.id),
+        });
+      });
+      const groupsTemp = [
+        {
+          label: "Wilayah Tugas",
+          teams: placementArr,
+        },
+      ];
+      setGroups(groupsTemp);
+    }
 
-        initState();
-        getPlacement();
-    }, []);
-    
+    initState();
+    getPlacement();
+  }, []);
 
-    return (
-        <Dialog open={showNewTeamDialog} onOpenChange={setShowNewTeamDialog}>
-            <Popover open={open} onOpenChange={setOpen}>
+  return (
+    <Dialog open={showNewTeamDialog} onOpenChange={setShowNewTeamDialog}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <motion.div
+            key={config.collapsed && !hovered ? "collapsed" : "expanded"}
+            initial={{ scale: 0.9 }}
+            animate={{ scale: 1 }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+          >
+            {config.collapsed && !hovered ? (
+              <Button
+                variant="outline"
+                color="secondary"
+                role="combobox"
+                fullWidth
+                aria-expanded={open}
+                aria-label="Select a team"
+                className={cn(
+                  "  h-14 w-14 mx-auto  p-0 md:p-0  dark:border-secondary ring-offset-sidebar",
+                  className
+                )}
+              >
+                <Avatar className="">
+                  <AvatarImage
+                    height={24}
+                    width={24}
+                    // src={session?.user?.image as any}
+                    alt={selectedTeam.label}
+                    className="grayscale"
+                  />
 
-
-                <PopoverTrigger asChild>
-
-
-
-                    <motion.div
-                        key={(config.collapsed && !hovered) ? "collapsed" : "expanded"}
-                        initial={{ scale: 0.9 }}
-                        animate={{ scale: 1 }}
-                        transition={{ type: "spring", stiffness: 300, damping: 20 }}
-
-
-                    >
-                        {(config.collapsed && !hovered) ? <Button
-                            variant="outline"
-                            color="secondary"
-                            role="combobox"
-                            fullWidth
-                            aria-expanded={open}
-                            aria-label="Select a team"
-                            className={cn("  h-14 w-14 mx-auto  p-0 md:p-0  dark:border-secondary ring-offset-sidebar", className)}
-                        >
-                            <Avatar className="">
-                                <AvatarImage
-                                    height={24}
-                                    width={24}
-                                    // src={session?.user?.image as any}
-                                    alt={selectedTeam.label}
-                                    className="grayscale"
-                                />
-
-                                <AvatarFallback>{detail?.username}</AvatarFallback>
-                            </Avatar>
-                        </Button> : <Button
-                            variant="outline"
-                            color="secondary"
-                            role="combobox"
-                            fullWidth
-                            aria-expanded={open}
-                            aria-label="Select a team"
-                            className={cn("  h-auto py-3 md:px-3 px-3 justify-start dark:border-secondary ring-offset-sidebar", className)}
-                        >
-                            <div className=" flex  gap-2 flex-1 items-center">
-                                <Avatar className=" flex-none h-[38px] w-[38px]">
-                                    {/* <AvatarImage
+                  <AvatarFallback>{detail?.username}</AvatarFallback>
+                </Avatar>
+              </Button>
+            ) : (
+              <Button
+                variant="outline"
+                color="secondary"
+                role="combobox"
+                fullWidth
+                aria-expanded={open}
+                aria-label="Select a team"
+                className={cn(
+                  "  h-auto py-3 md:px-3 px-3 justify-start dark:border-secondary ring-offset-sidebar",
+                  className
+                )}
+              >
+                <div className=" flex  gap-2 flex-1 items-center">
+                  <Avatar className=" flex-none h-[38px] w-[38px]">
+                    {/* <AvatarImage
                                         height={38}
                                         width={38}
                                         // src={session?.user?.image as any}
@@ -170,55 +166,56 @@ export default function TeamWorkspaceSwitcher({ className }: TeamSwitcherProps)
                                         className="grayscale"
                                     /> */}
 
-                                    <AvatarFallback><p className="text-md uppercase">{detail?.username[0]}</p></AvatarFallback>
-                                </Avatar>
-                                <div className="flex-1 text-start w-[100px]">
-
-                                    <div className=" text-sm  font-semibold text-default-900">{detail?.username}</div>
-                                    <div className=" text-xs font-normal text-default-500 dark:text-default-700 truncate ">{selectedTeam.label}</div>
-
-                                </div>
-                                <div className="">
-                                    <ChevronsUpDown className="ml-auto h-5 w-5 shrink-0  text-default-500 dark:text-default-700" />
-                                </div>
-                            </div>
-                        </Button>}
-                    </motion.div>
-
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                    <Command>
-                        <CommandList>
-                            <CommandInput placeholder="Search team..." className=" placeholder:text-xs" />
-                            <CommandEmpty>No team found.</CommandEmpty>
-                            {groups?.map((group: any) => (
-                                <CommandGroup key={group.label} heading={group.label}>
-                                    {group.teams.map((team: any) => (
-                                        <CommandItem
-                                            key={team.value}
-                                            onSelect={() => {
-                                                setSelectedTeam(team)
-                                                setOpen(false)
-                                            }}
-                                            className="text-sm font-normal"
-                                        >
-
-                                            {team.label}
-                                            <Check
-                                                className={cn(
-                                                    "ml-auto h-4 w-4",
-                                                    selectedTeam.value === team.value
-                                                        ? "opacity-100"
-                                                        : "opacity-0"
-                                                )}
-                                            />
-                                        </CommandItem>
-                                    ))}
-                                </CommandGroup>
-                            ))}
-                        </CommandList>
-                        {/* <CommandSeparator /> */}
-                        {/* <CommandList>
+                    <AvatarFallback>
+                      <p className="text-md uppercase">{detail?.username[0]}</p>
+                    </AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 text-start w-[100px]">
+                    <div className=" text-sm  font-semibold text-default-900">
+                      {detail?.username}
+                    </div>
+                    <div className=" text-xs font-normal text-default-500 dark:text-default-700 truncate ">
+                      {selectedTeam.label}
+                    </div>
+                  </div>
+                  <div className="">
+                    <ChevronsUpDown className="ml-auto h-5 w-5 shrink-0  text-default-500 dark:text-default-700" />
+                  </div>
+                </div>
+              </Button>
+            )}
+          </motion.div>
+        </PopoverTrigger>
+        <PopoverContent className="w-[200px] p-0">
+          <Command>
+            <CommandList>
+              <CommandInput placeholder="Search team..." className=" placeholder:text-xs" />
+              <CommandEmpty>No team found.</CommandEmpty>
+              {groups?.map((group: any) => (
+                <CommandGroup key={group.label} heading={group.label}>
+                  {group.teams.map((team: any) => (
+                    <CommandItem
+                      key={team.value}
+                      onSelect={() => {
+                        setSelectedTeam(team);
+                        setOpen(false);
+                      }}
+                      className="text-sm font-normal"
+                    >
+                      {team.label}
+                      <Check
+                        className={cn(
+                          "ml-auto h-4 w-4",
+                          selectedTeam.value === team.value ? "opacity-100" : "opacity-0"
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+            </CommandList>
+            {/* <CommandSeparator /> */}
+            {/* <CommandList>
                             <CommandGroup>
                                 <DialogTrigger asChild>
                                     <CommandItem
@@ -233,53 +230,47 @@ export default function TeamWorkspaceSwitcher({ className }: TeamSwitcherProps)
                                 </DialogTrigger>
                             </CommandGroup>
                         </CommandList> */}
-                    </Command>
-                </PopoverContent>
-            </Popover>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Create team</DialogTitle>
-                    <DialogDescription>
-                        Add a new team to manage products and customers.
-                    </DialogDescription>
-                </DialogHeader>
-                <div>
-                    <div className="space-y-4 py-2 pb-4">
-                        <div className="space-y-2">
-                            <Label htmlFor="name">Team name</Label>
-                            <Input id="name" placeholder="Acme Inc." />
-                        </div>
-                        <div className="space-y-2">
-                            <Label htmlFor="plan">Subscription plan</Label>
-                            <Select>
-                                <SelectTrigger>
-                                    <SelectValue placeholder="Select a plan" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="free">
-                                        <span className="font-medium">Free</span> -{" "}
-                                        <span className="text-muted-foreground">
-                                            Trial for two weeks
-                                        </span>
-                                    </SelectItem>
-                                    <SelectItem value="pro">
-                                        <span className="font-medium">Pro</span> -{" "}
-                                        <span className="text-muted-foreground">
-                                            $9/month per user
-                                        </span>
-                                    </SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button variant="outline" onClick={() => setShowNewTeamDialog(false)}>
-                        Cancel
-                    </Button>
-                    <Button type="submit">Continue</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create team</DialogTitle>
+          <DialogDescription>Add a new team to manage products and customers.</DialogDescription>
+        </DialogHeader>
+        <div>
+          <div className="space-y-4 py-2 pb-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Team name</Label>
+              <Input id="name" placeholder="Acme Inc." />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="plan">Subscription plan</Label>
+              <Select>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a plan" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="free">
+                    <span className="font-medium">Free</span> -{" "}
+                    <span className="text-muted-foreground">Trial for two weeks</span>
+                  </SelectItem>
+                  <SelectItem value="pro">
+                    <span className="font-medium">Pro</span> -{" "}
+                    <span className="text-muted-foreground">$9/month per user</span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setShowNewTeamDialog(false)}>
+            Cancel
+          </Button>
+          <Button type="submit">Continue</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
 }
diff --git a/src/components/partials/sidebar/index.tsx b/src/components/partials/sidebar/index.tsx
index fef6bdc3..4c132425 100644
--- a/src/components/partials/sidebar/index.tsx
+++ b/src/components/partials/sidebar/index.tsx
@@ -1,21 +1,15 @@
+import React from "react";
 
-import React from 'react'
-import SidebarContent from './sidebar-content'
-import Logo from '/components/logo'
-import { Menu } from './menu'
-
+import { Menu } from "./menu";
+import SidebarContent from "./sidebar-content";
+import Logo from "@/components/ui/structures/logo";
 
 const DashCodeSidebar = () => {
-    return (
-        <SidebarContent>
+  return (
+    <SidebarContent>
+      <Menu />
+    </SidebarContent>
+  );
+};
 
-
-
-            <Menu />
-
-
-        </SidebarContent>
-    )
-}
-
-export default DashCodeSidebar
\ No newline at end of file
+export default DashCodeSidebar;
diff --git a/src/components/partials/sidebar/menu/icon-nav.tsx b/src/components/partials/sidebar/menu/icon-nav.tsx
index 9b598fc3..a1e84113 100644
--- a/src/components/partials/sidebar/menu/icon-nav.tsx
+++ b/src/components/partials/sidebar/menu/icon-nav.tsx
@@ -1,19 +1,16 @@
 "use client";
+
 import React from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import DashCodeLogo from "@/components/dascode-logo";
-import { Group, Submenu } from "@/lib/menus";
+import { Link } from "@/i18n/navigation";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { Group, Submenu } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Link } from "@/i18n/navigation";
-import { cn } from "@/lib/utils/utils"
-import { useConfig } from "@/lib/hooks/use-config";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import DashCodeLogo from "@/components/ui/structures/dascode-logo";
 
 interface IconNavProps {
   menuList: Group[];
@@ -31,75 +28,73 @@ const IconNav = ({ menuList }: IconNavProps) => {
           <ul className=" h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-2 ">
             {menuList?.map(({ groupLabel, menus }, index) => (
               <li key={index} className=" block w-full">
-                {menus?.map(
-                  ({ href, label, icon, active, id, submenus }, menuIndex) => (
-                    <TooltipProvider disableHoverableContent key={menuIndex}>
-                      <Tooltip delayDuration={100}>
-                        <TooltipTrigger asChild>
-                          {submenus.length === 0 ? (
-                            <Button
-                              onClick={() =>
-                                setConfig((prevConfig) => ({
-                                  ...prevConfig,
-                                  hasSubMenu: false,
-                                  subMenu: true,
-                                }))
+                {menus?.map(({ href, label, icon, active, id, submenus }, menuIndex) => (
+                  <TooltipProvider disableHoverableContent key={menuIndex}>
+                    <Tooltip delayDuration={100}>
+                      <TooltipTrigger asChild>
+                        {submenus.length === 0 ? (
+                          <Button
+                            onClick={() =>
+                              setConfig((prevConfig) => ({
+                                ...prevConfig,
+                                hasSubMenu: false,
+                                subMenu: true,
+                              }))
+                            }
+                            asChild
+                            size="icon"
+                            color="secondary"
+                            variant={active ? "default" : "ghost"}
+                            className={cn(
+                              "h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active  hover:bg-default-100 dark:hover:bg-secondary   ",
+                              {
+                                "bg-default-100 dark:bg-secondary  hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
+                                  active,
                               }
-                              asChild
-                              size="icon"
-                              color="secondary"
-                              variant={active ? "default" : "ghost"}
-                              className={cn(
-                                "h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active  hover:bg-default-100 dark:hover:bg-secondary   ",
-                                {
-                                  "bg-default-100 dark:bg-secondary  hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
-                                    active,
-                                }
-                              )}
-                            >
-                              <Link href={href}>
-                                <Icon
-                                  icon={icon}
-                                  className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
-                                />
-                              </Link>
-                            </Button>
-                          ) : (
-                            <Button
-                              onClick={() =>
-                                setConfig((prevConfig) => ({
-                                  ...prevConfig,
-                                  hasSubMenu: true,
-                                  subMenu: false,
-                                }))
+                            )}
+                          >
+                            <Link href={href}>
+                              <Icon
+                                icon={icon}
+                                className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
+                              />
+                            </Link>
+                          </Button>
+                        ) : (
+                          <Button
+                            onClick={() =>
+                              setConfig((prevConfig) => ({
+                                ...prevConfig,
+                                hasSubMenu: true,
+                                subMenu: false,
+                              }))
+                            }
+                            asChild
+                            size="icon"
+                            color="secondary"
+                            variant={active ? "default" : "ghost"}
+                            className={cn(
+                              "h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active  hover:bg-default-100 dark:hover:bg-secondary   ",
+                              {
+                                "bg-default-100 dark:bg-secondary  hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
+                                  active,
                               }
-                              asChild
-                              size="icon"
-                              color="secondary"
-                              variant={active ? "default" : "ghost"}
-                              className={cn(
-                                "h-12 w-12 mx-auto mb-2 hover:ring-1 hover:ring-offset-0 hover:ring-default-200 dark:hover:ring-menu-arrow-active  hover:bg-default-100 dark:hover:bg-secondary   ",
-                                {
-                                  "bg-default-100 dark:bg-secondary  hover:bg-default-200/80 dark:hover:bg-menu-arrow-active ring-1 ring-default-200 dark:ring-menu-arrow-active":
-                                    active,
-                                }
-                              )}
-                            >
-                              <Link href={href}>
-                                <Icon
-                                  icon={icon}
-                                  className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
-                                />
-                              </Link>
-                            </Button>
-                          )}
-                        </TooltipTrigger>
+                            )}
+                          >
+                            <Link href={href}>
+                              <Icon
+                                icon={icon}
+                                className=" w-6 h-6 text-default-500 dark:text-secondary-foreground "
+                              />
+                            </Link>
+                          </Button>
+                        )}
+                      </TooltipTrigger>
 
-                        <TooltipContent side="right">{label}</TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  )
-                )}
+                      <TooltipContent side="right">{label}</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                ))}
               </li>
             ))}
           </ul>
diff --git a/src/components/partials/sidebar/menu/index.tsx b/src/components/partials/sidebar/menu/index.tsx
index 57daa77f..d706346c 100644
--- a/src/components/partials/sidebar/menu/index.tsx
+++ b/src/components/partials/sidebar/menu/index.tsx
@@ -1,30 +1,25 @@
 "use client";
 
-import React from 'react'
-
+import React from "react";
 
 import { useConfig } from "@/lib/hooks/use-config";
-import { MenuClassic } from './menu-classic';
-import { MenuTwoColumn } from './menu-two-column';
-import { MenuDragAble } from './menu-dragable';
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+
+import { MenuClassic } from "./menu-classic";
+import { MenuDragAble } from "./menu-dragable";
+import { MenuTwoColumn } from "./menu-two-column";
 
 export function Menu() {
+  const [config, setConfig] = useConfig();
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
 
-    const [config, setConfig] = useConfig()
-    const isDesktop = useMediaQuery('(min-width: 1280px)')
+  if (config.sidebar === "draggable") {
+    return <MenuDragAble />;
+  }
 
-    if (config.sidebar === 'draggable') {
-        return <MenuDragAble />
-    }
+  if (config.sidebar === "two-column") {
+    return <MenuTwoColumn />;
+  }
 
-    if (config.sidebar === 'two-column') {
-        return <MenuTwoColumn />
-    }
-
-
-
-    return (
-        <MenuClassic />
-    );
+  return <MenuClassic />;
 }
diff --git a/src/components/partials/sidebar/menu/menu-classic.tsx b/src/components/partials/sidebar/menu/menu-classic.tsx
index 6691efdb..b0dc8597 100644
--- a/src/components/partials/sidebar/menu/menu-classic.tsx
+++ b/src/components/partials/sidebar/menu/menu-classic.tsx
@@ -1,158 +1,149 @@
 "use client";
 
-import React from 'react'
-import { Ellipsis, LogOut } from "lucide-react";
+import React from "react";
+import { useParams } from "next/navigation";
 import { usePathname } from "@/i18n/navigation";
-import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
-import { getMenuList } from "@/lib/menus";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-    Tooltip,
-    TooltipTrigger,
-    TooltipContent,
-    TooltipProvider
-} from "@/components/ui/tooltip";
+import { Ellipsis, LogOut } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { getLangDir } from "rtl-detect";
+
 import { useConfig } from "@/lib/hooks/use-config";
-import MenuLabel from "../common/menu-label";
-import MenuItem from "../common/menu-item";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
+import { getMenuList } from "@/lib/utils/menus";
+import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
 import { CollapseMenuButton } from "../common/collapse-menu-button";
+import MenuItem from "../common/menu-item";
+import MenuLabel from "../common/menu-label";
 import MenuWidget from "../common/menu-widget";
-import SearchBar from '/components/partials/sidebar/common/search-bar'
-import TeamSwitcher from '../common/team-switcher'
-import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation'
-import { getLangDir } from 'rtl-detect';
-import Logo from '/components/logo';
-import SidebarHoverToggle from '/components/partials/sidebar/sidebar-hover-toggle';
-import { useMenuHoverConfig } from '@/lib/hooks/use-menu-hover';
-import { useMediaQuery } from '@/lib/hooks/use-media-query';
-import TeamWorkspaceSwitcher from '../common/team-workspace-switcher';
+import TeamSwitcher from "../common/team-switcher";
+import TeamWorkspaceSwitcher from "../common/team-workspace-switcher";
+import Logo from "@/components/ui/structures/logo";
+import SearchBar from "@/components/partials/sidebar/common/search-bar";
+import SidebarHoverToggle from "@/components/partials/sidebar/sidebar-hover-toggle";
 
+export function MenuClassic({}) {
+  // translate
+  const t = useTranslations("Menu");
+  const pathname = usePathname();
+  const params = useParams<{ locale: string }>();
+  const direction = getLangDir(params?.locale ?? "");
 
-export function MenuClassic({ }) {
-    // translate
-    const t = useTranslations("Menu")
-    const pathname = usePathname();
-    const params = useParams<{ locale: string; }>();
-    const direction = getLangDir(params?.locale ?? '');
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  const userRoleId = getCookiesDecrypt("urie");
 
-    const isDesktop = useMediaQuery('(min-width: 1280px)')
-    const userRoleId = getCookiesDecrypt("urie");
+  const menuList = getMenuList(pathname, t);
+  const [config, setConfig] = useConfig();
+  const collapsed = config.collapsed;
+  const [hoverConfig] = useMenuHoverConfig();
+  const { hovered } = hoverConfig;
 
-    const menuList = getMenuList(pathname, t);
-    const [config, setConfig] = useConfig()
-    const collapsed = config.collapsed
-    const [hoverConfig] = useMenuHoverConfig();
-    const { hovered } = hoverConfig;
+  const scrollableNodeRef = React.useRef<HTMLDivElement>(null);
+  const [scroll, setScroll] = React.useState(false);
 
-    const scrollableNodeRef = React.useRef<HTMLDivElement>(null);
-    const [scroll, setScroll] = React.useState(false);
+  React.useEffect(() => {
+    const handleScroll = () => {
+      if (scrollableNodeRef.current && scrollableNodeRef.current.scrollTop > 0) {
+        setScroll(true);
+      } else {
+        setScroll(false);
+      }
+    };
+    scrollableNodeRef.current?.addEventListener("scroll", handleScroll);
+  }, [scrollableNodeRef]);
 
-    React.useEffect(() => {
-        const handleScroll = () => {
-            if (scrollableNodeRef.current && scrollableNodeRef.current.scrollTop > 0) {
-                setScroll(true);
-            } else {
-                setScroll(false);
-            }
-        };
-        scrollableNodeRef.current?.addEventListener("scroll", handleScroll);
-    }, [scrollableNodeRef]);
+  return (
+    <>
+      {isDesktop && (
+        <div className="flex items-center justify-center mt-2 px-4 py-4">
+          <Logo />
+          <SidebarHoverToggle />
+        </div>
+      )}
 
-    return (
-        <>
-            {isDesktop && (
-                <div className="flex items-center justify-center mt-2 px-4 py-4">
-                    <Logo />
-                    <SidebarHoverToggle />
-                </div>
-            )}
+      <ScrollArea className="[&>div>div[style]]:!block" dir={direction}>
+        {isDesktop && Number(userRoleId) == 19 ? (
+          <div
+            className={cn(" space-y-3 mt-6 ", {
+              "px-4": !collapsed || hovered,
+              "text-center": collapsed || !hovered,
+            })}
+          >
+            <TeamWorkspaceSwitcher />
+            {/* <SearchBar /> */}
+          </div>
+        ) : (
+          ""
+        )}
 
+        <nav className="mt-4 h-full w-full">
+          <ul className=" h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-4">
+            {menuList?.map(({ groupLabel, menus }, index) => (
+              <li className={cn("w-full", groupLabel ? "" : "")} key={index}>
+                {((!collapsed || hovered) && groupLabel) || !collapsed === undefined ? (
+                  <MenuLabel label={groupLabel} />
+                ) : collapsed && !hovered && !collapsed !== undefined && groupLabel ? (
+                  <TooltipProvider>
+                    <Tooltip delayDuration={100}>
+                      <TooltipTrigger className="w-full">
+                        <div className="w-full flex justify-center items-center">
+                          <Ellipsis className="h-5 w-5 text-default-700" />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="right">
+                        <p>{groupLabel}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                ) : null}
 
-
-
-            <ScrollArea className="[&>div>div[style]]:!block" dir={direction}>
-                {isDesktop && Number(userRoleId) == 19 ? (
-                    <div className={cn(' space-y-3 mt-6 ', {
-                        'px-4': !collapsed || hovered,
-                        'text-center': collapsed || !hovered
-                    })}>
-                        <TeamWorkspaceSwitcher />
-                        {/* <SearchBar /> */}
+                {menus.map(({ href, label, icon, active, id, submenus }, index) =>
+                  submenus.length === 0 ? (
+                    <div className="w-full mb-2 last:mb-0" key={index}>
+                      <TooltipProvider disableHoverableContent>
+                        <Tooltip delayDuration={100}>
+                          <TooltipTrigger asChild>
+                            <div>
+                              <MenuItem
+                                label={label}
+                                icon={icon}
+                                href={href}
+                                active={active}
+                                id={id}
+                                collapsed={collapsed}
+                              />
+                            </div>
+                          </TooltipTrigger>
+                          {collapsed && <TooltipContent side="right">{label}</TooltipContent>}
+                        </Tooltip>
+                      </TooltipProvider>
                     </div>
-
-                ) : ""}
-
-                <nav className="mt-4 h-full w-full">
-                    <ul className=" h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-4">
-                        {menuList?.map(({ groupLabel, menus }, index) => (
-                            <li className={cn("w-full", groupLabel ? "" : "")} key={index}>
-                                {(!collapsed || hovered) && groupLabel || !collapsed === undefined ? (
-                                    <MenuLabel label={groupLabel} />
-                                ) : collapsed && !hovered && !collapsed !== undefined && groupLabel ? (
-                                    <TooltipProvider>
-                                        <Tooltip delayDuration={100}>
-                                            <TooltipTrigger className="w-full">
-                                                <div className="w-full flex justify-center items-center">
-                                                    <Ellipsis className="h-5 w-5 text-default-700" />
-                                                </div>
-                                            </TooltipTrigger>
-                                            <TooltipContent side="right">
-                                                <p>{groupLabel}</p>
-                                            </TooltipContent>
-                                        </Tooltip>
-                                    </TooltipProvider>
-                                ) : (
-                                    null
-                                )}
-
-                                {menus.map(
-                                    ({ href, label, icon, active, id, submenus }, index) =>
-                                        submenus.length === 0 ? (
-                                            <div className="w-full mb-2 last:mb-0" key={index}>
-                                                <TooltipProvider disableHoverableContent>
-                                                    <Tooltip delayDuration={100}>
-                                                        <TooltipTrigger asChild>
-
-                                                            <div>
-
-                                                                <MenuItem label={label} icon={icon} href={href} active={active} id={id} collapsed={collapsed} />
-                                                            </div>
-                                                        </TooltipTrigger>
-                                                        {collapsed && (
-                                                            <TooltipContent side="right">
-                                                                {label}
-                                                            </TooltipContent>
-                                                        )}
-                                                    </Tooltip>
-                                                </TooltipProvider>
-                                            </div>
-                                        ) : (
-                                            <div className="w-full mb-2" key={index}>
-                                                <CollapseMenuButton
-                                                    icon={icon}
-                                                    label={label}
-                                                    active={active}
-                                                    submenus={submenus}
-                                                    collapsed={collapsed}
-                                                    id={id}
-
-                                                />
-                                            </div>
-                                        )
-                                )}
-
-                            </li>
-                        ))}
-                        {!collapsed && (
-                            <li className="w-full grow flex items-end">
-                                <MenuWidget />
-                            </li>
-                        )}
-                    </ul>
-                </nav>
-
-            </ScrollArea>
-        </>
-    );
+                  ) : (
+                    <div className="w-full mb-2" key={index}>
+                      <CollapseMenuButton
+                        icon={icon}
+                        label={label}
+                        active={active}
+                        submenus={submenus}
+                        collapsed={collapsed}
+                        id={id}
+                      />
+                    </div>
+                  )
+                )}
+              </li>
+            ))}
+            {!collapsed && (
+              <li className="w-full grow flex items-end">
+                <MenuWidget />
+              </li>
+            )}
+          </ul>
+        </nav>
+      </ScrollArea>
+    </>
+  );
 }
diff --git a/src/components/partials/sidebar/menu/menu-dragable.tsx b/src/components/partials/sidebar/menu/menu-dragable.tsx
index 01d0e7f0..20ab2bcc 100644
--- a/src/components/partials/sidebar/menu/menu-dragable.tsx
+++ b/src/components/partials/sidebar/menu/menu-dragable.tsx
@@ -1,212 +1,198 @@
 "use client";
 
-import React from 'react'
-import Logo from '/components/logo';
-import SidebarHoverToggle from '/components/partials/sidebar/sidebar-hover-toggle';
-import { Ellipsis, LogOut } from "lucide-react";
+import React from "react";
+import { useParams } from "next/navigation";
 import { usePathname } from "@/i18n/navigation";
-
-import { cn } from "@/lib/utils/utils"
-import { getMenuList } from "@/lib/menus";
-
-import { ScrollArea } from "@/components/ui/scroll-area";
+// for dnd
 import {
-    Tooltip,
-    TooltipTrigger,
-    TooltipContent,
-    TooltipProvider
-} from "@/components/ui/tooltip";
-import { useConfig } from "@/lib/hooks/use-config";
-import MenuLabel from "../common/menu-label";
-
-import MenuItem from "../common/menu-item";
-import { CollapseMenuButton } from "../common/collapse-menu-button";
-import MenuWidget from "../common/menu-widget";
-import SearchBar from '/components/partials/sidebar/common/search-bar'
-import TeamSwitcher from '../common/team-switcher'
-
-// for dnd 
-import {
-    DndContext,
-    KeyboardSensor,
-    MouseSensor,
-    TouchSensor,
-    closestCenter,
-    useSensor,
-    type DragEndEvent,
-    type UniqueIdentifier,
-    useSensors,
+  closestCenter,
+  DndContext,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+  type UniqueIdentifier,
 } from "@dnd-kit/core";
+import { restrictToHorizontalAxis, restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import {
-    restrictToVerticalAxis,
-    restrictToHorizontalAxis,
-} from "@dnd-kit/modifiers";
-import {
-    useSortable,
-    arrayMove,
-    SortableContext,
-    verticalListSortingStrategy,
-    horizontalListSortingStrategy,
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation'
-import { getLangDir } from 'rtl-detect';
 import { CSS } from "@dnd-kit/utilities";
+import { Ellipsis, LogOut } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { getLangDir } from "rtl-detect";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { getMenuList } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+import { CollapseMenuButton } from "../common/collapse-menu-button";
+import MenuItem from "../common/menu-item";
+import MenuLabel from "../common/menu-label";
+import MenuWidget from "../common/menu-widget";
+import TeamSwitcher from "../common/team-switcher";
+import Logo from "@/components/ui/structures/logo";
+import SearchBar from "@/components/partials/sidebar/common/search-bar";
+import SidebarHoverToggle from "@/components/partials/sidebar/sidebar-hover-toggle";
 
 export function MenuDragAble() {
-    const t = useTranslations("Menu")
-    const pathname = usePathname();
-    const menuList = getMenuList(pathname, t);
-    const [config, setConfig] = useConfig()
-    const collapsed = config.collapsed
+  const t = useTranslations("Menu");
+  const pathname = usePathname();
+  const menuList = getMenuList(pathname, t);
+  const [config, setConfig] = useConfig();
+  const collapsed = config.collapsed;
 
-    const params = useParams<{ locale: string; }>();
-    const direction = getLangDir(params?.locale ?? '');
-    // for dnd 
-    // reorder rows after drag & drop
-    const [data, setData] = React.useState(menuList);
+  const params = useParams<{ locale: string }>();
+  const direction = getLangDir(params?.locale ?? "");
+  // for dnd
+  // reorder rows after drag & drop
+  const [data, setData] = React.useState(menuList);
 
-    const dataIds = React.useMemo<UniqueIdentifier[]>(
-        () => data.flatMap(group => group.menus.map(menu => menu.id)), [data]
+  const dataIds = React.useMemo<UniqueIdentifier[]>(
+    () => data.flatMap((group) => group.menus.map((menu) => menu.id)),
+    [data]
+  );
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
 
-    );
-    function handleDragEnd(event: DragEndEvent) {
-        const { active, over } = event;
+    if (active && over && active.id !== over.id) {
+      setData((data) => {
+        const dataIds = data.flatMap((group) => group.menus.map((menu) => menu.id));
 
-        if (active && over && active.id !== over.id) {
-            setData((data) => {
+        const oldIndex = dataIds.indexOf(active.id as string);
+        const newIndex = dataIds.indexOf(over.id as string);
 
-                const dataIds = data.flatMap(group => group.menus.map(menu => menu.id));
+        if (oldIndex !== -1 && newIndex !== -1) {
+          // Flatten data
+          const flattenedMenus = data.flatMap((group) => group.menus);
+          const updatedMenus = arrayMove(flattenedMenus, oldIndex, newIndex);
 
-                const oldIndex = dataIds.indexOf(active.id as string);
-                const newIndex = dataIds.indexOf(over.id as string);
+          // Reconstruct the data structure
+          let currentIndex = 0;
+          const updatedData = data.map((group) => {
+            const groupMenusCount = group.menus.length;
+            const updatedGroupMenus = updatedMenus.slice(
+              currentIndex,
+              currentIndex + groupMenusCount
+            );
+            currentIndex += groupMenusCount;
+            return { ...group, menus: updatedGroupMenus };
+          });
 
-                if (oldIndex !== -1 && newIndex !== -1) {
-                    // Flatten data
-                    const flattenedMenus = data.flatMap(group => group.menus);
-                    const updatedMenus = arrayMove(flattenedMenus, oldIndex, newIndex);
-
-                    // Reconstruct the data structure
-                    let currentIndex = 0;
-                    const updatedData = data.map(group => {
-                        const groupMenusCount = group.menus.length;
-                        const updatedGroupMenus = updatedMenus.slice(currentIndex, currentIndex + groupMenusCount);
-                        currentIndex += groupMenusCount;
-                        return { ...group, menus: updatedGroupMenus };
-                    });
-
-                    return updatedData;
-                }
-                return data;
-            });
+          return updatedData;
         }
+        return data;
+      });
     }
+  }
 
-    const sensors = useSensors(
-        useSensor(MouseSensor, {}),
-        useSensor(TouchSensor, {}),
-        useSensor(KeyboardSensor, {})
-    );
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
 
-    return (
+  return (
+    <>
+      <div className="flex items-center justify-between  px-4 py-4">
+        <Logo />
+        <SidebarHoverToggle />
+      </div>
 
-        <>
+      <ScrollArea className="[&>div>div[style]]:!block" dir={direction}>
+        <div
+          className={cn(" space-y-3 mt-6 ", {
+            "px-4": !collapsed,
+            "text-center": collapsed,
+          })}
+        >
+          <TeamSwitcher />
+          <SearchBar />
+        </div>
 
-
-            <div className="flex items-center justify-between  px-4 py-4">
-                <Logo />
-                <SidebarHoverToggle />
-            </div>
-
-            <ScrollArea className="[&>div>div[style]]:!block" dir={direction}>
-                <div className={cn(' space-y-3 mt-6 ', {
-                    'px-4': !collapsed,
-                    'text-center': collapsed
-                })}>
-
-                    <TeamSwitcher />
-                    <SearchBar />
-                </div>
-
-
-                <DndContext
-                    collisionDetection={closestCenter}
-                    modifiers={[restrictToVerticalAxis]}
-                    onDragEnd={handleDragEnd}
-                    sensors={sensors}
-                >
-                    <nav className="h-full w-full">
-                        <ul className="h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-4">
-                            {data?.map(({ groupLabel, menus }, index) => (
-                                <li className={cn("w-full", groupLabel ? "pt-5" : "")} key={index}>
-                                    {(!collapsed && groupLabel) || !collapsed === undefined ? (
-                                        <MenuLabel label={groupLabel} />
-                                    ) : collapsed && !collapsed !== undefined && groupLabel ? (
-                                        <TooltipProvider>
-                                            <Tooltip delayDuration={100}>
-                                                <TooltipTrigger className="w-full">
-                                                    <div className="w-full flex justify-center items-center">
-                                                        <Ellipsis className="h-5 w-5" />
-                                                    </div>
-                                                </TooltipTrigger>
-                                                <TooltipContent side="right">
-                                                    <p>{groupLabel}</p>
-                                                </TooltipContent>
-                                            </Tooltip>
-                                        </TooltipProvider>
-                                    ) : (
-                                        <p className="pb-2"> </p>
-                                    )}
-                                    <SortableContext
-                                        items={dataIds}
-                                        strategy={verticalListSortingStrategy}
-                                    >
-                                        {menus.map(
-                                            ({ href, label, icon, active, id, submenus }, index) =>
-                                                submenus.length === 0 ? (
-                                                    <div className="w-full" key={index}>
-                                                        <TooltipProvider disableHoverableContent>
-                                                            <Tooltip delayDuration={100}>
-                                                                <TooltipTrigger asChild>
-
-                                                                    <div>
-
-                                                                        <MenuItem label={label} icon={icon} href={href} active={active} id={id} collapsed={collapsed} />
-                                                                    </div>
-                                                                </TooltipTrigger>
-                                                                {collapsed && (
-                                                                    <TooltipContent side="right">
-                                                                        {label}
-                                                                    </TooltipContent>
-                                                                )}
-                                                            </Tooltip>
-                                                        </TooltipProvider>
-                                                    </div>
-                                                ) : (
-                                                    <div className="w-full" key={index}>
-                                                        <CollapseMenuButton
-                                                            icon={icon}
-                                                            label={label}
-                                                            active={active}
-                                                            submenus={submenus}
-                                                            collapsed={collapsed}
-                                                            id={id}
-                                                        />
-                                                    </div>
-                                                )
-                                        )}
-                                    </SortableContext>
-                                </li>
-                            ))}
-                            {!collapsed && (
-                                <li className="w-full grow flex items-end">
-                                    <MenuWidget />
-                                </li>
-                            )}
-                        </ul>
-                    </nav>
-                </DndContext>
-            </ScrollArea>
-        </>
-    );
-}
\ No newline at end of file
+        <DndContext
+          collisionDetection={closestCenter}
+          modifiers={[restrictToVerticalAxis]}
+          onDragEnd={handleDragEnd}
+          sensors={sensors}
+        >
+          <nav className="h-full w-full">
+            <ul className="h-full flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-4">
+              {data?.map(({ groupLabel, menus }, index) => (
+                <li className={cn("w-full", groupLabel ? "pt-5" : "")} key={index}>
+                  {(!collapsed && groupLabel) || !collapsed === undefined ? (
+                    <MenuLabel label={groupLabel} />
+                  ) : collapsed && !collapsed !== undefined && groupLabel ? (
+                    <TooltipProvider>
+                      <Tooltip delayDuration={100}>
+                        <TooltipTrigger className="w-full">
+                          <div className="w-full flex justify-center items-center">
+                            <Ellipsis className="h-5 w-5" />
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                          <p>{groupLabel}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  ) : (
+                    <p className="pb-2"> </p>
+                  )}
+                  <SortableContext items={dataIds} strategy={verticalListSortingStrategy}>
+                    {menus.map(({ href, label, icon, active, id, submenus }, index) =>
+                      submenus.length === 0 ? (
+                        <div className="w-full" key={index}>
+                          <TooltipProvider disableHoverableContent>
+                            <Tooltip delayDuration={100}>
+                              <TooltipTrigger asChild>
+                                <div>
+                                  <MenuItem
+                                    label={label}
+                                    icon={icon}
+                                    href={href}
+                                    active={active}
+                                    id={id}
+                                    collapsed={collapsed}
+                                  />
+                                </div>
+                              </TooltipTrigger>
+                              {collapsed && <TooltipContent side="right">{label}</TooltipContent>}
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
+                      ) : (
+                        <div className="w-full" key={index}>
+                          <CollapseMenuButton
+                            icon={icon}
+                            label={label}
+                            active={active}
+                            submenus={submenus}
+                            collapsed={collapsed}
+                            id={id}
+                          />
+                        </div>
+                      )
+                    )}
+                  </SortableContext>
+                </li>
+              ))}
+              {!collapsed && (
+                <li className="w-full grow flex items-end">
+                  <MenuWidget />
+                </li>
+              )}
+            </ul>
+          </nav>
+        </DndContext>
+      </ScrollArea>
+    </>
+  );
+}
diff --git a/src/components/partials/sidebar/menu/menu-two-column.tsx b/src/components/partials/sidebar/menu/menu-two-column.tsx
index 61e3493e..eaf71a37 100644
--- a/src/components/partials/sidebar/menu/menu-two-column.tsx
+++ b/src/components/partials/sidebar/menu/menu-two-column.tsx
@@ -1,45 +1,35 @@
 "use client";
 
-import React from 'react'
-import { Ellipsis, LogOut } from "lucide-react";
+import React from "react";
 import { usePathname } from "@/i18n/navigation";
+import { Ellipsis, LogOut } from "lucide-react";
+import { useTranslations } from "next-intl";
 
-
-import { cn } from "@/lib/utils/utils"
-import { getMenuList, type Group, type Menu, type Submenu } from "@/lib/menus";
-
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-    Tooltip,
-    TooltipTrigger,
-    TooltipContent,
-    TooltipProvider
-} from "@/components/ui/tooltip";
 import { useConfig } from "@/lib/hooks/use-config";
-import MenuLabel from "../common/menu-label";
+import { getMenuList, type Group, type Menu, type Submenu } from "@/lib/utils/menus";
+import { cn } from "@/lib/utils/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-import MenuItem from "../common/menu-item";
 import { CollapseMenuButton } from "../common/collapse-menu-button";
+import MenuItem from "../common/menu-item";
+import MenuLabel from "../common/menu-label";
 import MenuWidget from "../common/menu-widget";
-import SearchBar from '/components/partials/sidebar/common/search-bar'
-import TeamSwitcher from '../common/team-switcher'
-import IconNav from './icon-nav';
-import SidebarNav from './sidebar-nav';
-import { useTranslations } from 'next-intl';
-
+import TeamSwitcher from "../common/team-switcher";
+import IconNav from "./icon-nav";
+import SidebarNav from "./sidebar-nav";
+import SearchBar from "@/components/partials/sidebar/common/search-bar";
 
 export function MenuTwoColumn() {
-    // translate
-    const t = useTranslations("Menu")
-    const pathname = usePathname();
-    const menuList = getMenuList(pathname, t);
+  // translate
+  const t = useTranslations("Menu");
+  const pathname = usePathname();
+  const menuList = getMenuList(pathname, t);
 
-    return (
-        <>
-            <IconNav menuList={menuList} />
-            <SidebarNav menuList={menuList} />
-        </>
-
-
-    );
+  return (
+    <>
+      <IconNav menuList={menuList} />
+      <SidebarNav menuList={menuList} />
+    </>
+  );
 }
diff --git a/src/components/partials/sidebar/menu/sheet-menu.tsx b/src/components/partials/sidebar/menu/sheet-menu.tsx
index 35e2ecc7..9ad99111 100644
--- a/src/components/partials/sidebar/menu/sheet-menu.tsx
+++ b/src/components/partials/sidebar/menu/sheet-menu.tsx
@@ -1,20 +1,18 @@
 "use client";
+
 import { Link } from "@/i18n/navigation";
 import { MenuIcon, PanelsTopLeft } from "lucide-react";
-import { Icon } from "@/components/ui/icon";
-import { Button } from "@/components/ui/button";
-import { Menu } from "@/components/partials/sidebar/menu";
-import {
-  Sheet,
-  SheetHeader,
-  SheetContent,
-  SheetTrigger,
-} from "@/components/ui/sheet";
-import { MenuClassic } from "./menu-classic";
-import DashCodeLogo from "@/components/dascode-logo";
-import { useMobileMenuConfig } from "@/lib/hooks/use-mobile-menu";
-import { useMediaQuery } from "@/lib/hooks/use-media-query";
+
 import { useConfig } from "@/lib/hooks/use-config";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useMobileMenuConfig } from "@/lib/hooks/use-mobile-menu";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { Sheet, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet";
+import DashCodeLogo from "@/components/ui/structures/dascode-logo";
+import { Menu } from "@/components/partials/sidebar/menu";
+
+import { MenuClassic } from "./menu-classic";
 
 export function SheetMenu() {
   const [mobileMenuConfig, setMobileMenuConfig] = useMobileMenuConfig();
@@ -24,10 +22,7 @@ export function SheetMenu() {
   const isDesktop = useMediaQuery("(min-width: 1280px)");
   if (isDesktop) return null;
   return (
-    <Sheet
-      open={isOpen}
-      onOpenChange={() => setMobileMenuConfig({ isOpen: !isOpen })}
-    >
+    <Sheet open={isOpen} onOpenChange={() => setMobileMenuConfig({ isOpen: !isOpen })}>
       <SheetTrigger className="xl:hidden" asChild>
         <Button
           className="h-8"
diff --git a/src/components/partials/sidebar/menu/sidebar-nav.tsx b/src/components/partials/sidebar/menu/sidebar-nav.tsx
index 326f6e25..4108c438 100644
--- a/src/components/partials/sidebar/menu/sidebar-nav.tsx
+++ b/src/components/partials/sidebar/menu/sidebar-nav.tsx
@@ -1,36 +1,37 @@
-'use client'
-import React, { useEffect, useState } from 'react'
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useParams, usePathname } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { getLangDir } from "rtl-detect";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { Group, Submenu } from "@/lib/utils/menus";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Submenu, Group } from '@/lib/menus';
-import { useParams, usePathname } from 'next/navigation';
-import { Link } from "@/i18n/navigation"
-import { useConfig } from '@/lib/hooks/use-config';
-import { Button } from '@/components/ui/button';
-import MenuLabel from '../common/menu-label';
-import MenuItem from '../common/menu-item';
-import { Icon } from '@/components/ui/icon';
-import { CollapseMenuButton2 } from '../common/collapse-menu-button2';
-import TeamSwitcher from '../common/team-switcher';
-import SearchBar from '../common/search-bar';
-import { getLangDir } from 'rtl-detect';
+
+import { CollapseMenuButton2 } from "../common/collapse-menu-button2";
+import MenuItem from "../common/menu-item";
+import MenuLabel from "../common/menu-label";
+import SearchBar from "../common/search-bar";
+import TeamSwitcher from "../common/team-switcher";
+
 const SidebarNav = ({ menuList }: { menuList: Group[] }) => {
-  const [config, setConfig] = useConfig()
+  const [config, setConfig] = useConfig();
   const pathname = usePathname();
-  const params = useParams<{ locale: string; }>();
-  const direction = getLangDir(params?.locale ?? '');
-  const activeKey = pathname?.split('/')?.[2];
-  const data = menuList.find(item => item.id === activeKey);
+  const params = useParams<{ locale: string }>();
+  const direction = getLangDir(params?.locale ?? "");
+  const activeKey = pathname?.split("/")?.[2];
+  const data = menuList.find((item) => item.id === activeKey);
 
   // Render null if config.subMenu is true
   if (config.subMenu || !config.hasSubMenu) {
     return null;
   }
 
-
-
-
   return (
-    <div className=' h-full bg-sidebar  shadow-base  w-[228px] relative z-20'>
+    <div className=" h-full bg-sidebar  shadow-base  w-[228px] relative z-20">
       {config.sidebarBgImage !== undefined && (
         <div
           className=" absolute left-0 top-0  z-10 w-full h-full bg-cover bg-center opacity-[0.07]"
@@ -38,57 +39,56 @@ const SidebarNav = ({ menuList }: { menuList: Group[] }) => {
         ></div>
       )}
 
-
       <ScrollArea className="[&>div>div[style]]:!block h-full" dir={direction}>
         <div className="px-4 space-y-3 mt-6">
-
           <TeamSwitcher />
           <SearchBar />
         </div>
-        <div className='px-4 pt-6  sticky top-0  bg-sidebar z-20'>
+        <div className="px-4 pt-6  sticky top-0  bg-sidebar z-20">
           {data?.groupLabel && (
-            <MenuLabel label={data?.groupLabel} className=' text-xl py-0 font-semibold  capitalize text-default ' />
+            <MenuLabel
+              label={data?.groupLabel}
+              className=" text-xl py-0 font-semibold  capitalize text-default "
+            />
           )}
         </div>
         <nav className="mt-6 h-full w-full ">
           <ul className=" h-full  space-y-1.5 flex flex-col  items-start  px-4 pb-8 ">
+            {data?.menus.map(({ submenus }, index) =>
+              submenus?.map(({ href, label, active, icon, children: subChildren }, i) => (
+                <li key={`double-menu-index-${i}`} className=" w-full ">
+                  {subChildren?.length === 0 ? (
+                    <Button
+                      asChild
+                      color={active ? "default" : "secondary"}
+                      variant={active ? "default" : "ghost"}
+                      fullWidth
+                      className="  h-10 capitalize justify-start md:px-3 px-3 "
+                    >
+                      <Link href={href}>
+                        {icon && <Icon icon={icon} className="h-5 w-5 me-2" />}
 
-            {data?.menus.map(
-              ({ submenus }, index) =>
-                submenus?.map(({ href, label, active, icon, children: subChildren }, i) => (
-                  <li key={`double-menu-index-${i}`} className=' w-full '>
-                    {subChildren?.length === 0 ? (
-                      <Button asChild color={active ? 'default' : 'secondary'} variant={active ? 'default' : 'ghost'} fullWidth className='  h-10 capitalize justify-start md:px-3 px-3 '>
-                        <Link href={href}>
-                          {icon && (
-                            <Icon icon={icon} className="h-5 w-5 me-2" />
-                          )}
-
-                          <p>
-                            {label}
-                          </p>
-                        </Link>
-                      </Button>
-                    ) : (
-                      subChildren &&
+                        <p>{label}</p>
+                      </Link>
+                    </Button>
+                  ) : (
+                    subChildren && (
                       <CollapseMenuButton2
                         icon={icon}
                         label={label}
                         active={active}
                         submenus={subChildren}
                       />
-                    )}
-
-                  </li>
-                ))
+                    )
+                  )}
+                </li>
+              ))
             )}
-
           </ul>
         </nav>
-
       </ScrollArea>
     </div>
-  )
-}
+  );
+};
 
-export default SidebarNav
\ No newline at end of file
+export default SidebarNav;
diff --git a/src/components/partials/sidebar/sidebar-content.tsx b/src/components/partials/sidebar/sidebar-content.tsx
index 96080468..1fb59cae 100644
--- a/src/components/partials/sidebar/sidebar-content.tsx
+++ b/src/components/partials/sidebar/sidebar-content.tsx
@@ -1,61 +1,61 @@
-'use client'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
-import { useConfig } from '@/lib/hooks/use-config'
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
 import { useMediaQuery } from "@/lib/hooks/use-media-query";
-import { useMenuHoverConfig } from '@/lib/hooks/use-menu-hover';
+import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
+import { cn } from "@/lib/utils/utils";
 
 const SidebarContent = ({ children }: { children: React.ReactNode }) => {
-    const isDesktop = useMediaQuery("(min-width: 1280px)");
-    const [config] = useConfig()
-    const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
-    const sidebarTheme = config.sidebarTheme !== 'light' ? `dark theme-${config.sidebarTheme}` : `theme-${config.sidebarTheme}`
-
-    if (config.menuHidden || config.layout === "horizontal") return null
-
-    if (config.sidebar === 'two-column') {
-        return (
-
-            <aside className={cn('fixed  z-50    h-full  xl:flex hidden', sidebarTheme, {
-
-
-
-            })}>
-                <div className=" relative  flex   h-full  ">
-                    {children}
-                </div>
-            </aside>
-        )
-    }
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  const [config] = useConfig();
+  const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
+  const sidebarTheme =
+    config.sidebarTheme !== "light"
+      ? `dark theme-${config.sidebarTheme}`
+      : `theme-${config.sidebarTheme}`;
 
+  if (config.menuHidden || config.layout === "horizontal") return null;
 
+  if (config.sidebar === "two-column") {
     return (
-        <aside
-            onMouseEnter={() => config.sidebar === 'draggable' && setHoverConfig({ hovered: true })}
-            onMouseLeave={() => config.sidebar === 'draggable' && setHoverConfig({ hovered: false })}
+      <aside className={cn("fixed  z-50    h-full  xl:flex hidden", sidebarTheme, {})}>
+        <div className=" relative  flex   h-full  ">{children}</div>
+      </aside>
+    );
+  }
 
-            className={cn('fixed  z-50 w-[248px]  bg-sidebar  shadow-base    xl:block hidden ', sidebarTheme, {
-                'w-[72px]': config.collapsed && config.sidebar !== 'compact',
-                'border-b': config.skin === 'bordered',
-                'shadow-base': config.skin === 'default',
-                'h-full start-0': config.layout !== 'semi-box' && config.layout !== 'compact',
-                'm-6 bottom-0 top-0  start-0   rounded-md': config.layout === 'semi-box',
-                'm-10 bottom-0 top-0  start-0   ': config.layout === 'compact',
-                'w-28': config.sidebar === 'compact',
-                "w-[248px]": hoverConfig.hovered
+  return (
+    <aside
+      onMouseEnter={() => config.sidebar === "draggable" && setHoverConfig({ hovered: true })}
+      onMouseLeave={() => config.sidebar === "draggable" && setHoverConfig({ hovered: false })}
+      className={cn(
+        "fixed  z-50 w-[248px]  bg-sidebar  shadow-base    xl:block hidden ",
+        sidebarTheme,
+        {
+          "w-[72px]": config.collapsed && config.sidebar !== "compact",
+          "border-b": config.skin === "bordered",
+          "shadow-base": config.skin === "default",
+          "h-full start-0": config.layout !== "semi-box" && config.layout !== "compact",
+          "m-6 bottom-0 top-0  start-0   rounded-md": config.layout === "semi-box",
+          "m-10 bottom-0 top-0  start-0   ": config.layout === "compact",
+          "w-28": config.sidebar === "compact",
+          "w-[248px]": hoverConfig.hovered,
+        }
+      )}
+    >
+      <div className=" relative  flex flex-col h-full  ">
+        {config.sidebarBgImage !== undefined && (
+          <div
+            className=" absolute left-0 top-0   z-[-1] w-full h-full bg-cover bg-center opacity-[0.07]"
+            style={{ backgroundImage: `url(${config.sidebarBgImage})` }}
+          ></div>
+        )}
+        {children}
+      </div>
+    </aside>
+  );
+};
 
-            })}>
-            <div className=" relative  flex flex-col h-full  ">
-                {config.sidebarBgImage !== undefined && (
-                    <div
-                        className=" absolute left-0 top-0   z-[-1] w-full h-full bg-cover bg-center opacity-[0.07]"
-                        style={{ backgroundImage: `url(${config.sidebarBgImage})` }}
-                    ></div>
-                )}
-                {children}
-            </div>
-        </aside>
-    )
-}
-
-export default SidebarContent
\ No newline at end of file
+export default SidebarContent;
diff --git a/src/components/partials/sidebar/sidebar-hover-toggle.tsx b/src/components/partials/sidebar/sidebar-hover-toggle.tsx
index 5ee4a0ec..fbc95798 100644
--- a/src/components/partials/sidebar/sidebar-hover-toggle.tsx
+++ b/src/components/partials/sidebar/sidebar-hover-toggle.tsx
@@ -1,34 +1,33 @@
-'use client'
-import React from 'react'
-import { useMenuHoverConfig } from '@/lib/hooks/use-menu-hover'
-import { cn } from "@/lib/utils/utils"
-import { useConfig } from '@/lib/hooks/use-config'
-import { useMediaQuery } from '@/lib/hooks/use-media-query'
+"use client";
 
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
+import { cn } from "@/lib/utils/utils";
 
 const SidebarHoverToggle = () => {
-    const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
-    const [config, setConfig] = useConfig();
+  const [hoverConfig, setHoverConfig] = useMenuHoverConfig();
+  const [config, setConfig] = useConfig();
 
-    const isDesktop = useMediaQuery("(min-width: 1280px)");
-    if (config.sidebar !== 'draggable' || !isDesktop) {
-        return null
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  if (config.sidebar !== "draggable" || !isDesktop) {
+    return null;
+  }
 
-    }
+  return !config.collapsed || hoverConfig.hovered ? (
+    <div
+      onClick={() => setConfig({ ...config, collapsed: !config.collapsed })}
+      className={cn(
+        "h-4 w-4 border-[1.5px] border-default-900 dark:border-default-700 rounded-full transition-all duration-150",
+        {
+          "ring-2 ring-inset ring-offset-4 ring-black-900 dark:ring-default-400 bg-default-900 dark:bg-default-400 dark:ring-offset-default-700":
+            !config.collapsed,
+        }
+      )}
+    ></div>
+  ) : null;
+};
 
-    return (
-        !config.collapsed || hoverConfig.hovered ? <div
-            onClick={() => setConfig({ ...config, collapsed: !config.collapsed })}
-
-            className={cn("h-4 w-4 border-[1.5px] border-default-900 dark:border-default-700 rounded-full transition-all duration-150", {
-                "ring-2 ring-inset ring-offset-4 ring-black-900 dark:ring-default-400 bg-default-900 dark:bg-default-400 dark:ring-offset-default-700": !config.collapsed
-            })}
-
-        ></div>
-            : null
-
-
-    )
-}
-
-export default SidebarHoverToggle
\ No newline at end of file
+export default SidebarHoverToggle;
diff --git a/src/components/partials/sidebar/sidebar-toggle.tsx b/src/components/partials/sidebar/sidebar-toggle.tsx
index 023cfccd..9d5aa468 100644
--- a/src/components/partials/sidebar/sidebar-toggle.tsx
+++ b/src/components/partials/sidebar/sidebar-toggle.tsx
@@ -1,86 +1,87 @@
-'use client'
+"use client";
+
+import { motion } from "framer-motion";
 import { ChevronLeft } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import { Button } from "@/components/ui/button";
 import { useConfig } from "@/lib/hooks/use-config";
 import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
-import { motion } from 'framer-motion';
-
 
 export function SidebarToggle() {
-    const [config, setConfig] = useConfig()
-    const collapsed = config.collapsed
-    const isDesktop = useMediaQuery('(min-width: 1280px)')
-    if (!isDesktop) return null
-    if (config.sidebar === 'two-column' && !config.hasSubMenu || config.menuHidden || config.layout === "horizontal" || config.sidebar === 'draggable' ) {
-        return null
-    }
-    if (config.sidebar === 'two-column') {
-        return (
-
-            <Button
-                onClick={() => setConfig((prevConfig) => ({ ...prevConfig, subMenu: !prevConfig.subMenu }))}
-                className="rounded-md h-auto p-0 hover:bg-transparent hover:text-default-800 text-default-500 "
-                variant="ghost"
-                size="icon"
-            >
-                {config.subMenu ? (
-                    <motion.div
-                        key={config.subMenu ? 'collapsed' : 'expanded'}
-                        initial={{ x: -20, opacity: 0 }}
-                        animate={{ x: 0, opacity: 1 }}
-                        exit={{ x: -20, opacity: 0 }}
-                        transition={{ type: "spring", stiffness: 300, damping: 20 }}
-                    >
-                        <Icon icon="heroicons:arrow-small-right-solid" className="h-6 w-6" />
-                    </motion.div>
-                ) : (
-                    <motion.div
-                        key={config.subMenu ? 'collapsed' : 'expanded'}
-                        initial={{ scale: 0.5, opacity: 0 }}
-                        animate={{ scale: 1, opacity: 1 }}
-                        exit={{ scale: 0.5, opacity: 0 }}
-                        transition={{ type: "spring", stiffness: 300, damping: 20 }}
-                    >
-                        <Icon icon="heroicons:bars-3-bottom-left-solid" className="h-6 w-6" />
-                    </motion.div>
-                )}
-            </Button>
-
-        )
-    }
+  const [config, setConfig] = useConfig();
+  const collapsed = config.collapsed;
+  const isDesktop = useMediaQuery("(min-width: 1280px)");
+  if (!isDesktop) return null;
+  if (
+    (config.sidebar === "two-column" && !config.hasSubMenu) ||
+    config.menuHidden ||
+    config.layout === "horizontal" ||
+    config.sidebar === "draggable"
+  ) {
+    return null;
+  }
+  if (config.sidebar === "two-column") {
     return (
-
-        <Button
-            onClick={() => setConfig({ ...config, collapsed: !collapsed })}
-            className="rounded-md h-auto p-0 hover:bg-transparent hover:text-default-800 text-default-500 "
-            variant="ghost"
-            size="icon"
-        >
-            {collapsed ? (
-                <motion.div
-                    key={collapsed ? 'collapsed' : 'expanded'}
-                    initial={{ x: -20, opacity: 0 }}
-                    animate={{ x: 0, opacity: 1 }}
-                    exit={{ x: -20, opacity: 0 }}
-                    transition={{ type: "spring", stiffness: 300, damping: 20 }}
-                >
-                    <Icon icon="heroicons:arrow-small-right-solid" className="h-6 w-6" />
-                </motion.div>
-            ) : (
-                <motion.div
-                    key={collapsed ? 'collapsed' : 'expanded'}
-                    initial={{ scale: 0.5, opacity: 0 }}
-                    animate={{ scale: 1, opacity: 1 }}
-                    exit={{ scale: 0.5, opacity: 0 }}
-                    transition={{ type: "spring", stiffness: 300, damping: 20 }}
-                >
-                    <Icon icon="heroicons:bars-3-bottom-left-solid" className="h-6 w-6" />
-                </motion.div>
-            )}
-        </Button>
-
+      <Button
+        onClick={() => setConfig((prevConfig) => ({ ...prevConfig, subMenu: !prevConfig.subMenu }))}
+        className="rounded-md h-auto p-0 hover:bg-transparent hover:text-default-800 text-default-500 "
+        variant="ghost"
+        size="icon"
+      >
+        {config.subMenu ? (
+          <motion.div
+            key={config.subMenu ? "collapsed" : "expanded"}
+            initial={{ x: -20, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: -20, opacity: 0 }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+          >
+            <Icon icon="heroicons:arrow-small-right-solid" className="h-6 w-6" />
+          </motion.div>
+        ) : (
+          <motion.div
+            key={config.subMenu ? "collapsed" : "expanded"}
+            initial={{ scale: 0.5, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.5, opacity: 0 }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+          >
+            <Icon icon="heroicons:bars-3-bottom-left-solid" className="h-6 w-6" />
+          </motion.div>
+        )}
+      </Button>
     );
-}
\ No newline at end of file
+  }
+  return (
+    <Button
+      onClick={() => setConfig({ ...config, collapsed: !collapsed })}
+      className="rounded-md h-auto p-0 hover:bg-transparent hover:text-default-800 text-default-500 "
+      variant="ghost"
+      size="icon"
+    >
+      {collapsed ? (
+        <motion.div
+          key={collapsed ? "collapsed" : "expanded"}
+          initial={{ x: -20, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          exit={{ x: -20, opacity: 0 }}
+          transition={{ type: "spring", stiffness: 300, damping: 20 }}
+        >
+          <Icon icon="heroicons:arrow-small-right-solid" className="h-6 w-6" />
+        </motion.div>
+      ) : (
+        <motion.div
+          key={collapsed ? "collapsed" : "expanded"}
+          initial={{ scale: 0.5, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          exit={{ scale: 0.5, opacity: 0 }}
+          transition={{ type: "spring", stiffness: 300, damping: 20 }}
+        >
+          <Icon icon="heroicons:bars-3-bottom-left-solid" className="h-6 w-6" />
+        </motion.div>
+      )}
+    </Button>
+  );
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index cf5fbe76..bd55294d 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -17,8 +17,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border border-default-200 dark:border-default-300 rounded-md mb-4", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -38,7 +38,7 @@ const AccordionTrigger = React.forwardRef<
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -51,8 +51,8 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
+));
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index ec01dc48..b74ac1cb 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -24,8 +24,8 @@ const AlertDialogOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -42,36 +42,21 @@ const AlertDialogContent = React.forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2", className)}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -82,8 +67,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -94,21 +79,16 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -116,15 +96,11 @@ const AlertDialogCancel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -138,4 +114,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-}
+};
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 212a89c5..6e13e282 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,9 +1,11 @@
 "use client";
+
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 import { Icon } from "@iconify/react";
-import { cn } from "@/lib/utils/utils"
+import { cva, type VariantProps } from "class-variance-authority";
+
 import { color, rounded, shadow } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const alertVariants = cva(
   "relative w-full py-[18px] px-6 font-normal text-sm rounded-md flex md:items-center items-start gap-4",
@@ -83,17 +85,17 @@ const alertVariants = cva(
         variant: "soft",
         color: "destructive",
         className: "text-destructive bg-destructive/10",
-      }
+      },
     ],
     defaultVariants: {
       color: "default",
-    }
+    },
   }
 );
 
 export interface AlertProps
   extends React.HTMLAttributes<HTMLDivElement>,
-  VariantProps<typeof alertVariants> {
+    VariantProps<typeof alertVariants> {
   dismissible?: boolean;
   onDismiss?: () => void;
   color?: color;
@@ -155,4 +157,3 @@ const AlertDescription = React.forwardRef<
 AlertDescription.displayName = "AlertDescription";
 
 export { Alert, AlertTitle, AlertDescription };
-
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
index 9ee389ba..afd78518 100644
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@@ -2,10 +2,10 @@
 
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/lib/utils/utils"
 import { cva } from "class-variance-authority";
+
 import { color, rounded } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: "sm" | "base" | "md" | "lg" | "xl";
@@ -22,17 +22,21 @@ const avatarVariant = cva(
       color: {
         default: "bg-default text-default-foreground hover:bg-default/90 hover:ring-default",
         primary: "bg-primary text-primary-foreground hover:bg-primary/90 hover:ring-primary",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:ring-secondary",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:ring-destructive",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 hover:ring-secondary",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:ring-destructive",
         warning: "bg-warning text-warning-foreground hover:bg-warning/90 hover:ring-warning",
         info: "bg-info text-info-foreground hover:bg-info/90 hover:ring-info",
         success: "bg-success text-success-foreground hover:bg-success/90 hover:ring-success",
       },
       variant: {
         default: "",
-        outline: "border border-default text-default bg-transparent hover:bg-default hover:text-default-foreground hover:ring-0 hover:ring-transparent",
+        outline:
+          "border border-default text-default bg-transparent hover:bg-default hover:text-default-foreground hover:ring-0 hover:ring-transparent",
         soft: "bg-opacity-10 text-default-foreground hover:bg-opacity-100 hover:text-primary-foreground",
-        ghost: "bg-transparent text-default hover:bg-transparent-10 hover:ring-0 hover:ring-transparent",
+        ghost:
+          "bg-transparent text-default hover:bg-transparent-10 hover:ring-0 hover:ring-transparent",
       },
       size: {
         sm: "h-10 w-10 text-xs",
@@ -45,7 +49,7 @@ const avatarVariant = cva(
         sm: "rounded-sm",
         md: "rounded-md",
         lg: "rounded-lg",
-        full: "rounded-full"
+        full: "rounded-full",
       },
       shape: {
         circle: "rounded-full",
@@ -56,17 +60,20 @@ const avatarVariant = cva(
       {
         variant: "outline",
         color: "primary",
-        class: "text-primary border-primary hover:text-primary-foreground hover:border-primary hover:bg-primary",
+        class:
+          "text-primary border-primary hover:text-primary-foreground hover:border-primary hover:bg-primary",
       },
       {
         variant: "outline",
         color: "secondary",
-        class: "text-secondary border-secondary hover:text-secondary-foreground hover:border-secondary hover:bg-secondary",
+        class:
+          "text-secondary border-secondary hover:text-secondary-foreground hover:border-secondary hover:bg-secondary",
       },
       {
         variant: "outline",
         color: "success",
-        class: "text-success border-success hover:text-success-foreground hover:border-success hover:bg-success",
+        class:
+          "text-success border-success hover:text-success-foreground hover:border-success hover:bg-success",
       },
       {
         variant: "outline",
@@ -76,12 +83,14 @@ const avatarVariant = cva(
       {
         variant: "outline",
         color: "warning",
-        class: "text-warning border-warning hover:text-warning-foreground hover:border-warning hover:bg-warning",
+        class:
+          "text-warning border-warning hover:text-warning-foreground hover:border-warning hover:bg-warning",
       },
       {
         variant: "outline",
         color: "destructive",
-        class: "text-destructive border-destructive hover:text-destructive-foreground hover:border-destructive hover:bg-destructive",
+        class:
+          "text-destructive border-destructive hover:text-destructive-foreground hover:border-destructive hover:bg-destructive",
       },
       {
         variant: "outline",
@@ -158,7 +167,7 @@ const avatarVariant = cva(
       color: "default",
       size: "sm",
       rounded: "full",
-      variant: "default"
+      variant: "default",
     },
   }
 );
@@ -176,8 +185,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
 );
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-
-export interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> { }
+export interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}
 
 const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
   ({ className, ...props }, ref) => {
@@ -192,8 +200,7 @@ const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
 );
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
-
-export interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> { }
+export interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {}
 
 const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(
   ({ className, ...props }, ref) => {
@@ -208,6 +215,4 @@ const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(
 );
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-
 export { Avatar, AvatarImage, AvatarFallback };
-
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index f8282ab2..101e2841 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils/utils"
 import { color, rounded } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border py-1 px-2 text-xs  capitalize font-semibold  transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -22,7 +22,7 @@ const badgeVariants = cva(
         md: "rounded-md",
         lg: "rounded-lg",
         full: "rounded-full",
-      }
+      },
     },
 
     defaultVariants: {
@@ -33,20 +33,13 @@ const badgeVariants = cva(
 );
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-  VariantProps<typeof badgeVariants> {
-
+    VariantProps<typeof badgeVariants> {
   color?: color;
   rounded?: rounded;
 }
 
-
 function Badge({ className, color, rounded, ...props }: BadgeProps) {
-  return (
-    <div
-      className={cn(badgeVariants({ color, rounded }), className)}
-      {...props}
-    />
-  );
+  return <div className={cn(badgeVariants({ color, rounded }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index bbf4db22..cef383ff 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,51 +1,45 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+    separator?: React.ReactNode;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
 
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
 
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -53,45 +47,32 @@ const BreadcrumbLink = React.forwardRef<
       className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
   )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
 
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:size-5", className)}
-    {...props}
-  >
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-5", className)} {...props}>
     {children ?? <ChevronRight />}
   </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     role="presentation"
     aria-hidden="true"
@@ -101,8 +82,8 @@ const BreadcrumbEllipsis = ({
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
   Breadcrumb,
@@ -112,4 +93,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-}
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 009d5875..76d12f4d 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,29 +1,33 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-import { color, shadow, rounded } from "@/lib/type"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils/utils"
+import { color, rounded, shadow } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center px-4 md:px-6 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-300 hover:ring-2 hover:ring-offset-2 ring-offset-background transition-all focus-visible:outline-none focus-visible:hidden focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       color: {
-        default: "bg-default text-default-foreground hover:bg-default/90 hover:ring-default dark:disabled:bg-default-500",
+        default:
+          "bg-default text-default-foreground hover:bg-default/90 hover:ring-default dark:disabled:bg-default-500",
         primary: "bg-primary text-primary-foreground hover:bg-primary/90  hover:ring-primary",
         secondary: "bg-secondary text-secondary-foreground  hover:ring-secondary",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:ring-destructive",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:ring-destructive",
         warning: "bg-warning text-warning-foreground hover:bg-warning/90 hover:ring-warning",
         info: "bg-info text-info-foreground hover:bg-info/90 hover:ring-info",
         success: "bg-success text-success-foreground hover:bg-success/90 hover:ring-success",
       },
       variant: {
         default: "",
-        outline: "border  border-default text-default bg-transparent hover:bg-default hover:text-default-foreground hover:ring-0 hover:ring-transparent",
+        outline:
+          "border  border-default text-default bg-transparent hover:bg-default hover:text-default-foreground hover:ring-0 hover:ring-transparent",
         soft: "text-default bg-default/10 hover:bg-default  hover:text-default-foreground",
-        ghost: "text-default bg-transparent hover:bg-default  hover:text-default-foreground hover:ring-0 hover:ring-transparent hover:ring-offset-0",
-        shadow: "shadow-md"
+        ghost:
+          "text-default bg-transparent hover:bg-default  hover:text-default-foreground hover:ring-0 hover:ring-transparent hover:ring-offset-0",
+        shadow: "shadow-md",
       },
       shadow: {
         sm: "shadow",
@@ -46,14 +50,14 @@ const buttonVariants = cva(
         md: "h-9",
         lg: "h-12  px-8 text-base md:px-10 px-7",
         icon: "h-10 w-10 p-0 md:px-0 flex justify-center items-center",
-
-      }
+      },
     },
     compoundVariants: [
       {
         variant: "outline",
         color: "primary",
-        className: "text-primary border-primary hover:text-primary-foreground hover:border-primary hover:bg-primary",
+        className:
+          "text-primary border-primary hover:text-primary-foreground hover:border-primary hover:bg-primary",
       },
       {
         variant: "outline",
@@ -81,7 +85,8 @@ const buttonVariants = cva(
       {
         variant: "outline",
         color: "destructive",
-        className: "text-destructive  border-destructive hover:text-destructive-foreground hover:border-destructive hover:bg-destructive",
+        className:
+          "text-destructive  border-destructive hover:text-destructive-foreground hover:border-destructive hover:bg-destructive",
       },
       {
         variant: "outline",
@@ -91,32 +96,33 @@ const buttonVariants = cva(
       {
         variant: "soft",
         color: "primary",
-        className: "text-primary bg-primary/10 hover:bg-primary hover:text-primary-foreground"
+        className: "text-primary bg-primary/10 hover:bg-primary hover:text-primary-foreground",
       },
       {
         variant: "soft",
         color: "secondary",
-        className: "bg-secondary/90 hover:bg-secondary/80 hover:text-secondary-foreground"
+        className: "bg-secondary/90 hover:bg-secondary/80 hover:text-secondary-foreground",
       },
       {
         variant: "soft",
         color: "success",
-        className: "text-success bg-success/10 hover:bg-success hover:text-success-foreground"
+        className: "text-success bg-success/10 hover:bg-success hover:text-success-foreground",
       },
       {
         variant: "soft",
         color: "info",
-        className: "text-info bg-info/10 hover:bg-info hover:text-info-foreground"
+        className: "text-info bg-info/10 hover:bg-info hover:text-info-foreground",
       },
       {
         variant: "soft",
         color: "warning",
-        className: "text-warning bg-warning/10 hover:bg-warning hover:text-warning-foreground"
+        className: "text-warning bg-warning/10 hover:bg-warning hover:text-warning-foreground",
       },
       {
         variant: "soft",
         color: "destructive",
-        className: "text-destructive bg-destructive/10 hover:bg-destructive hover:text-destructive-foreground"
+        className:
+          "text-destructive bg-destructive/10 hover:bg-destructive hover:text-destructive-foreground",
       },
       {
         variant: "ghost",
@@ -148,7 +154,7 @@ const buttonVariants = cva(
         variant: "ghost",
         color: "destructive",
         className: "text-destructive hover:text-destructive-foreground hover:bg-destructive",
-      }
+      },
     ],
     defaultVariants: {
       variant: "default",
@@ -160,27 +166,32 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-  color?: color
-  shadow?: shadow
-  rounded?: rounded
-  fullWidth?: boolean
-  size?: "default" | "sm" | "md" | "lg" | "icon"
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  color?: color;
+  shadow?: shadow;
+  rounded?: rounded;
+  fullWidth?: boolean;
+  size?: "default" | "sm" | "md" | "lg" | "icon";
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, color, fullWidth, shadow, rounded, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+  (
+    { className, variant, size, color, fullWidth, shadow, rounded, asChild = false, ...props },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, fullWidth, rounded, color, shadow, className }))}
+        className={cn(
+          buttonVariants({ variant, size, fullWidth, rounded, color, shadow, className })
+        )}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx
index b96a2484..9fa87d03 100644
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@@ -1,20 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ChevronLeft, ChevronRight } from "lucide-react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
 
-import { cn } from "@/lib/utils/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
@@ -33,8 +28,7 @@ function Calendar({
         nav_button_next: "absolute end-2",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
-        head_cell:
-          "flex-1 text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        head_cell: "flex-1 text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         row: "flex w-full gap-1 mt-2",
         cell: "flex-1 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-default [&:has([aria-selected])]:rounded-md focus-within:relative focus-within:z-20",
         day: "w-full h-9 rounded  p-0 font-normal aria-selected:opacity-100 bg-transparent text-current hover:text-default",
@@ -53,8 +47,8 @@ function Calendar({
       }}
       {...props}
     />
-  )
+  );
 }
-Calendar.displayName = "Calendar"
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 26576f68..4513cc35 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,86 +1,65 @@
-'use client'
-import * as React from "react"
+"use client";
 
-import { cn } from "@/lib/utils/utils"
-import { useConfig } from "@/lib/hooks/use-config"
+import * as React from "react";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-  const [config] = useConfig();
-  return (
-    <div
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const [config] = useConfig();
+    return (
+      <div
+        ref={ref}
+        className={cn("rounded-lg bg-card text-card-foreground ", className, {
+          border: config?.skin === "bordered",
+          "shadow-base": config?.skin === "default",
+        })}
+        {...props}
+      />
+    );
+  }
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
       ref={ref}
-      className={cn(
-        "rounded-lg bg-card text-card-foreground ",
-        className, {
-        'border': config?.skin === 'bordered',
-        'shadow-base': config?.skin === 'default'
-      }
-      )}
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
       {...props}
     />
   )
-}
-
-)
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+);
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 001c2158..a92c7ad5 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 import { Button } from "@/components/ui/button";
 
 type CarouselApi = UseEmblaCarouselType[1];
@@ -40,7 +40,10 @@ function useCarousel() {
   return context;
 }
 
-const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
@@ -116,7 +119,14 @@ const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
         canScrollNext,
       }}
     >
-      <div ref={ref} onKeyDownCapture={handleKeyDown} className={cn("relative", className)} role="region" aria-roledescription="carousel" {...props}>
+      <div
+        ref={ref}
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        {...props}
+      >
         {children}
       </div>
     </CarouselContext.Provider>
@@ -124,62 +134,109 @@ const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivEl
 });
 Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div ref={ref} className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props} />
-    </div>
-  );
-});
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
 CarouselContent.displayName = "CarouselContent";
 
-const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
 
-  return <div ref={ref} role="group" aria-roledescription="slide" className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)} {...props} />;
-});
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn(
+          "min-w-0 shrink-0 grow-0 basis-full",
+          orientation === "horizontal" ? "pl-4" : "pt-4",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
 CarouselItem.displayName = "CarouselItem";
 
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn("absolute h-6 w-6 rounded-full text-white bg-black -ml-6", orientation === "horizontal" ? "-left-0 top-1/2 -translate-y-1/2" : "-top-0 left-1/2 -translate-x-1/2 rotate-90", className)}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4 text-white bg-black" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-6 w-6 rounded-full text-white bg-black -ml-6",
+          orientation === "horizontal"
+            ? "-left-0 top-1/2 -translate-y-1/2"
+            : "-top-0 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4 text-white bg-black" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
 CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn("absolute h-6 w-6 rounded-full bg-black text-white -mr-6", orientation === "horizontal" ? "-right-0 top-1/2 -translate-y-1/2" : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90", className)}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4 bg-black text-white" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-6 w-6 rounded-full bg-black text-white -mr-6",
+          orientation === "horizontal"
+            ? "-right-0 top-1/2 -translate-y-1/2"
+            : "-bottom-0 left-1/2 -translate-x-1/2 rotate-90",
+          className
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4 bg-black text-white" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  }
+);
 CarouselNext.displayName = "CarouselNext";
 
-export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+};
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 944401a4..4d64465f 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,11 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
-import { cn } from "@/lib/utils/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-import { color } from "@/lib/type"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Check } from "lucide-react";
+
+import { color } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const checkboxVariants = cva(
   "peer  group shrink-0 ring-offset-background dark:ring-offset-card  bg-default-300/70 transition-all duration-300 data-[state=checked]:outline-none data-[state=checked]:ring-2 data-[state=checked]:ring-ring data-[state=checked]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50  rounded h-4 w-4 [&_svg]:stroke-default-foreground [&_svg]:h-3.5 [&_svg]:w-3.5",
@@ -33,34 +34,26 @@ const checkboxVariants = cva(
   }
 );
 
-
 type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
   VariantProps<typeof checkboxVariants> & {
-    color?: color
+    color?: color;
     icon?: React.ReactNode;
   };
 
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(({ className, color, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      checkboxVariants({ color }),
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current ")}
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, color, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      className={cn(checkboxVariants({ color }), className)}
+      {...props}
     >
-      <Check className="h-3 w-3" strokeWidth={3} />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+      <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current ")}>
+        <Check className="h-3 w-3" strokeWidth={3} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+);
 
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };
diff --git a/src/components/ui/cleave.tsx b/src/components/ui/cleave.tsx
index 686a76a3..b3851245 100644
--- a/src/components/ui/cleave.tsx
+++ b/src/components/ui/cleave.tsx
@@ -1,30 +1,37 @@
 "use client";
+
 import * as React from "react";
 import Cleave from "cleave.js/react";
+
 import "cleave.js/dist/addons/cleave-phone.us";
-import { cn } from "@/lib/utils/utils"
+
 import { CleaveOptions } from "cleave.js/options";
+
+import { cn } from "@/lib/utils/utils";
+
 interface CleaveInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   options: CleaveOptions;
 }
 
-const CleaveInput = React.forwardRef<HTMLInputElement, CleaveInputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <div className=" flex-1 w-full" ref={ref}>
-      <div className=" relative">
-        <Cleave
-          type={type}
-          className={cn(
-            "flex h-10 w-full rounded border  border-default-300 bg-background  px-3 py-2 text-sm focus:outline-none focus:border-primary  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-accent-foreground/50  disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-secondary read-only:bg-secondary transition duration-300",
+const CleaveInput = React.forwardRef<HTMLInputElement, CleaveInputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <div className=" flex-1 w-full" ref={ref}>
+        <div className=" relative">
+          <Cleave
+            type={type}
+            className={cn(
+              "flex h-10 w-full rounded border  border-default-300 bg-background  px-3 py-2 text-sm focus:outline-none focus:border-primary  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-accent-foreground/50  disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-secondary read-only:bg-secondary transition duration-300",
 
-            className
-          )}
-          {...props}
-        />
+              className
+            )}
+            {...props}
+          />
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 CleaveInput.displayName = "CleaveInput";
 
 export { CleaveInput };
diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx
index 9fa48946..cb003d17 100644
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
-const Collapsible = CollapsiblePrimitive.Root
+const Collapsible = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index ab0fa48b..40ba0046 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -20,10 +20,10 @@ const Command = React.forwardRef<
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps { }
+interface CommandDialogProps extends DialogProps {}
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
@@ -34,8 +34,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -52,9 +52,9 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -65,22 +65,18 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -94,9 +90,9 @@ const CommandGroup = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -107,8 +103,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -122,25 +118,19 @@ const CommandItem = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
-const CommandShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -152,4 +142,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/src/components/ui/context-menu.tsx b/src/components/ui/context-menu.tsx
index 2d339838..02fecc65 100644
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenu = ContextMenuPrimitive.Root;
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
-const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuGroup = ContextMenuPrimitive.Group;
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
 
-const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuSub = ContextMenuPrimitive.Sub;
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
@@ -36,8 +36,8 @@ const ContextMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -51,8 +51,8 @@ const ContextMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -68,13 +68,13 @@ const ContextMenuContent = React.forwardRef<
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
@@ -86,8 +86,8 @@ const ContextMenuItem = React.forwardRef<
     )}
     {...props}
   />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -109,9 +109,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -132,26 +131,22 @@ const ContextMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
     {...props}
   />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -162,24 +157,18 @@ const ContextMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
   ContextMenu,
@@ -197,4 +186,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-}
+};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 1f68648a..d0dd9fad 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import { cva } from "class-variance-authority"
-import { size } from "@/lib/type"
+import { size } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
-const Dialog = DialogPrimitive.Root
-const DialogTrigger = DialogPrimitive.Trigger
-const DialogPortal = DialogPrimitive.Portal
-const DialogClose = DialogPrimitive.Close
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
 
-const  dialogVariants = cva(
+const dialogVariants = cva(
   "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
   {
     variants: {
@@ -22,11 +22,11 @@ const  dialogVariants = cva(
         default: "md:max-w-[444px] w-[90%]",
         md: "md:max-w-[996px] w-[90%]",
         lg: "md:max-w-[90%] w-[90%]",
-      }
+      },
     },
     defaultVariants: {
-      size: "default"
-    }
+      size: "default",
+    },
   }
 );
 const DialogOverlay = React.forwardRef<
@@ -41,10 +41,11 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   size?: size;
 }
 
@@ -57,7 +58,6 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(dialogVariants({ size }), className)}
-
       {...props}
     >
       {children}
@@ -67,36 +67,21 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end gap-2", className)}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end gap-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -104,14 +89,11 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight text-default-900",
-      className
-    )}
+    className={cn("text-lg font-semibold leading-none tracking-tight text-default-900", className)}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -122,8 +104,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -136,5 +118,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
-
+};
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 0b6051bf..ccc46774 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,26 +1,23 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const Drawer = ({
   shouldScaleBackground = true,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = "Drawer";
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,8 +28,8 @@ const DrawerOverlay = React.forwardRef<
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -52,30 +49,18 @@ const DrawerContent = React.forwardRef<
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
+));
+DrawerContent.displayName = "DrawerContent";
 
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
 
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -83,14 +68,11 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -101,8 +83,8 @@ const DrawerDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
   Drawer,
@@ -115,4 +97,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-}
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index d2ef13b8..da756222 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -26,7 +26,11 @@ const DropdownMenuSubTrigger = React.forwardRef<
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
-    className={cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-secondary data-[state=open]:bg-secondary", inset && "ps-8", className)}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-secondary data-[state=open]:bg-secondary",
+      inset && "ps-8",
+      className
+    )}
     {...props}
   >
     {children}
@@ -35,7 +39,10 @@ const DropdownMenuSubTrigger = React.forwardRef<
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>>(({ className, ...props }, ref) => (
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
@@ -47,7 +54,10 @@ const DropdownMenuSubContent = React.forwardRef<React.ElementRef<typeof Dropdown
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>>(({ className, sideOffset = 4, ...props }, ref) => (
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
@@ -70,13 +80,20 @@ const DropdownMenuItem = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
-    className={cn("relative flex cursor-default select-none items-start rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "ps-8", className)}
+    className={cn(
+      "relative flex cursor-default select-none items-start rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "ps-8",
+      className
+    )}
     {...props}
   />
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>>(({ className, children, checked, ...props }, ref) => (
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
@@ -96,7 +113,10 @@ const DropdownMenuCheckboxItem = React.forwardRef<React.ElementRef<typeof Dropdo
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>>(({ className, children, ...props }, ref) => (
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
@@ -120,16 +140,31 @@ const DropdownMenuLabel = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
   }
->(({ className, inset, ...props }, ref) => <DropdownMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props} />);
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>>(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn("ms-auto text-xs tracking-widest opacity-60", className)} {...props} />;
+  return (
+    <span className={cn("ms-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  );
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index d6c361fa..4b310fdb 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   ControllerProps,
@@ -10,27 +10,25 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -38,21 +36,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,36 +59,33 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -99,37 +94,33 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
       ref={ref}
       id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -138,19 +129,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -162,9 +153,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -175,4 +166,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/src/components/ui/hover-card.tsx b/src/components/ui/hover-card.tsx
index f6cc80e7..4ccdd291 100644
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
@@ -23,7 +23,7 @@ const HoverCardContent = React.forwardRef<
     )}
     {...props}
   />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/src/components/ui/icon.tsx b/src/components/ui/icon.tsx
index fe7b6cce..ee87f143 100644
--- a/src/components/ui/icon.tsx
+++ b/src/components/ui/icon.tsx
@@ -1,11 +1,16 @@
 "use client";
+
 import React from "react";
 import { Icon as IconIfyIcon } from "@iconify/react";
-import { cn } from "@/lib/utils/utils"
 
-const Icon = React.forwardRef<React.ElementRef<typeof IconIfyIcon>, React.ComponentPropsWithoutRef<typeof IconIfyIcon>>(({ className, ...props }, ref) => {
-    return <IconIfyIcon className={cn("", className)} ref={ref} {...props} />;
+import { cn } from "@/lib/utils/utils";
+
+const Icon = React.forwardRef<
+  React.ElementRef<typeof IconIfyIcon>,
+  React.ComponentPropsWithoutRef<typeof IconIfyIcon>
+>(({ className, ...props }, ref) => {
+  return <IconIfyIcon className={cn("", className)} ref={ref} {...props} />;
 });
 Icon.displayName = "Icon";
 
-export { Icon };
\ No newline at end of file
+export { Icon };
diff --git a/src/components/ui/image-blurry.tsx b/src/components/ui/image-blurry.tsx
index fc32ef6d..f2640c1d 100644
--- a/src/components/ui/image-blurry.tsx
+++ b/src/components/ui/image-blurry.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 
 interface ImageBlurryProps {
   src: string;
@@ -19,12 +19,12 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
   }, [src]);
 
   const handleImage = () => {
-    const pics = document.querySelectorAll<HTMLImageElement>('img');
+    const pics = document.querySelectorAll<HTMLImageElement>("img");
     pics.forEach((pic) => {
       if (pic.complete) {
         checkImage(pic);
       } else {
-        pic.addEventListener('load', function () {
+        pic.addEventListener("load", function () {
           checkImage(this);
         });
       }
@@ -33,16 +33,16 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
 
   const checkImage = (img: HTMLImageElement) => {
     if (img.naturalHeight > img.naturalWidth) {
-      img.classList.add('portrait');
+      img.classList.add("portrait");
     } else if (Math.abs(img.naturalHeight - img.naturalWidth) < 10) {
-      img.classList.add('square');
+      img.classList.add("square");
     } else {
-      img.classList.add('landscape');
+      img.classList.add("landscape");
     }
   };
 
   const onLoad = () => {
-    console.log('Image loaded:', src);
+    console.log("Image loaded:", src);
     handleImage();
   };
 
@@ -51,9 +51,19 @@ const ImageBlurry: React.FC<ImageBlurryProps> = (props) => {
     //     <div className="absolute -top-6 -bottom-6 left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
     //     <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
     // </div>
-    <div className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg" key={key} style={style}>
-      <div className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
-      <div className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg" style={{ backgroundImage: `url(${imgSrc})` }}></div>
+    <div
+      className="blurry-wrapper relative overflow-hidden bg-[#e9e9e9] rounded-lg"
+      key={key}
+      style={style}
+    >
+      <div
+        className="absolute -top-6 -bottom-6 -left-0 -right-6 bg-[#e9e9e9] blur-[8px] scale-[1.8] bg-center bg-no-repeat bg-contain blur-bg"
+        style={{ backgroundImage: `url(${imgSrc})` }}
+      ></div>
+      <div
+        className="absolute inset-0 bg-transparent bg-center bg-no-repeat bg-contain image-bg"
+        style={{ backgroundImage: `url(${imgSrc})` }}
+      ></div>
     </div>
   );
 };
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
index 81648fe6..967343e5 100644
--- a/src/components/ui/input-group.tsx
+++ b/src/components/ui/input-group.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
-import { cn } from "@/lib/utils/utils"
+
+import { cn } from "@/lib/utils/utils";
 
 interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  merged?: boolean
-
+  merged?: boolean;
 }
 
 const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
@@ -23,19 +23,18 @@ const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
 );
 InputGroup.displayName = "InputGroup";
 
-const InputGroupButton = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "[&>*]:first:rounded-r-none [&>*]:last:rounded-l-none focus:border-default dark:focus:border-default-500",
-      className
-    )}
-    {...props}
-  />
-));
+const InputGroupButton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "[&>*]:first:rounded-r-none [&>*]:last:rounded-l-none focus:border-default dark:focus:border-default-500",
+        className
+      )}
+      {...props}
+    />
+  )
+);
 InputGroupButton.displayName = "InputGroupButton";
 
 const InputGroupText = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
@@ -51,7 +50,7 @@ const InputGroupText = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
           "border-warning/50 ": color === "warning",
           "border-info/50 ": color === "info",
           "border-success/50": color === "success",
-          "border-destructive/50 ": color === "destructive"
+          "border-destructive/50 ": color === "destructive",
         }
       )}
       {...props}
diff --git a/src/components/ui/input-otp.tsx b/src/components/ui/input-otp.tsx
index 8c67bc69..0d12ca1b 100644
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -19,23 +19,23 @@ const InputOTP = React.forwardRef<
     className={cn("disabled:cursor-not-allowed", className)}
     {...props}
   />
-))
-InputOTP.displayName = "InputOTP"
+));
+InputOTP.displayName = "InputOTP";
 
 const InputOTPGroup = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
+));
+InputOTPGroup.displayName = "InputOTPGroup";
 
 const InputOTPSlot = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
   return (
     <div
@@ -54,9 +54,9 @@ const InputOTPSlot = React.forwardRef<
         </div>
       )}
     </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
 
 const InputOTPSeparator = React.forwardRef<
   React.ElementRef<"div">,
@@ -65,7 +65,7 @@ const InputOTPSeparator = React.forwardRef<
   <div ref={ref} role="separator" {...props}>
     <Dot />
   </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 83b52a20..6eca8aff 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,7 +1,8 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils/utils"
+
 import { InputColor } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 export const inputVariants = cva(
   " w-full  bg-background  rounded py-2 px-3 h-9 border text-sm font-normal border border-solid border-default-200 outline-none focus:outline-none  file:border-0 file:bg-transparent file:text-sm file:font-medium read-only:bg-default-200 disabled:cursor-not-allowed disabled:opacity-50  transition-all duration-300 ",
@@ -40,33 +41,22 @@ export const inputVariants = cva(
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement>,
-  VariantProps<typeof inputVariants> {
-  color?: InputColor
-  size?: any
+    VariantProps<typeof inputVariants> {
+  color?: InputColor;
+  size?: any;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      type,
-      size,
-      color,
-      ...props
-    },
-    ref
-  ) =>
+  ({ className, type, size, color, ...props }, ref) => (
     <div className="flex-1 w-full">
       <input
         type={type}
-        className={cn(
-          inputVariants({ color, size }),
-          className
-        )}
+        className={cn(inputVariants({ color, size }), className)}
         ref={ref}
         {...props}
       />
     </div>
+  )
 );
 Input.displayName = "Input";
 
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 6a81c0b6..38600a82 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,26 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const labelVariants = cva(
   "text-sm text-default-500 dark:text-default-600 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-  VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/src/components/ui/maps/Map copy.js b/src/components/ui/maps/Map copy.js
index 1c0197d3..44dc8ff2 100644
--- a/src/components/ui/maps/Map copy.js	
+++ b/src/components/ui/maps/Map copy.js	
@@ -1,14 +1,9 @@
-import Cookies from "js-cookie";
 import React, { Component } from "react";
+import Cookies from "js-cookie";
 import Geocode from "react-geocode";
 import Autocomplete from "react-google-autocomplete";
-import {
-  GoogleMap,
-  InfoWindow,
-  Marker,
-  withGoogleMap,
-  withScriptjs,
-} from "react-google-maps";
+import { GoogleMap, InfoWindow, Marker, withGoogleMap, withScriptjs } from "react-google-maps";
+
 import { GoogleMapsAPI } from "./client-config";
 
 Geocode.setApiKey(GoogleMapsAPI);
@@ -37,10 +32,7 @@ class Map extends Component {
    * Get the current address from the default map position and set those values in the state
    */
   componentDidMount() {
-    Geocode.fromLatLng(
-      this.state.mapPosition.lat,
-      this.state.mapPosition.lng,
-    ).then(
+    Geocode.fromLatLng(this.state.mapPosition.lat, this.state.mapPosition.lng).then(
       (response) => {
         const address = response.results[0].formatted_address;
         const addressArray = response.results[0].address_components;
@@ -59,7 +51,7 @@ class Map extends Component {
       },
       (error) => {
         console.error(error);
-      },
+      }
     );
   }
 
@@ -96,10 +88,7 @@ class Map extends Component {
     let city = "";
 
     for (const element of addressArray) {
-      if (
-        element.types[0] &&
-        element.types[0] == "administrative_area_level_2"
-      ) {
+      if (element.types[0] && element.types[0] == "administrative_area_level_2") {
         city = element.long_name;
         return city;
       }
@@ -117,10 +106,7 @@ class Map extends Component {
     for (const element of addressArray) {
       if (element.types[0]) {
         for (let j = 0; j < element.types.length; j++) {
-          if (
-            element.types[j] == "sublocality_level_1" ||
-            element.types[j] == "locality"
-          ) {
+          if (element.types[j] == "sublocality_level_1" || element.types[j] == "locality") {
             area = element.long_name;
             return area;
           }
@@ -139,10 +125,7 @@ class Map extends Component {
 
     for (let i = 0; i < addressArray.length; i++) {
       for (const element of addressArray) {
-        if (
-          element.types[0] &&
-          element.types[0] == "administrative_area_level_1"
-        ) {
+        if (element.types[0] && element.types[0] == "administrative_area_level_1") {
           state = element.long_name;
           return state;
         }
@@ -198,16 +181,16 @@ class Map extends Component {
           },
         });
         Cookies.set("map_lat", `${newLat}`, {
-          expires: 1
+          expires: 1,
         });
         Cookies.set("map_long", `${newLng}`, {
-          expires: 1
+          expires: 1,
         });
         $(".input-location-schedule").val(address);
       },
       (error) => {
         console.error(error);
-      },
+      }
     );
   };
   /**
@@ -240,10 +223,10 @@ class Map extends Component {
       },
     });
     Cookies.set("map_lat", `${latValue}`, {
-      expires: 1
+      expires: 1,
     });
     Cookies.set("map_long", `${lngValue}`, {
-      expires: 1
+      expires: 1,
     });
     $(".input-location-schedule").val(address);
   };
@@ -304,7 +287,7 @@ class Map extends Component {
           <Marker />
           {/* For Auto complete Search Box */}
         </GoogleMap>
-      )),
+      ))
     );
 
     let map;
diff --git a/src/components/ui/maps/Map.tsx b/src/components/ui/maps/Map.tsx
index cac3b811..d2341f14 100644
--- a/src/components/ui/maps/Map.tsx
+++ b/src/components/ui/maps/Map.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import Geocode from "react-geocode";
 import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
+import Geocode from "react-geocode";
+
 import { GoogleMapsAPI } from "./client-config";
 
 Geocode.setApiKey(GoogleMapsAPI);
@@ -37,11 +38,7 @@ function Map({ lat, lng, draggable, onLocationChange }: MapProps) {
   };
 
   return (
-    <GoogleMap
-      zoom={10}
-      center={selected || { lat, lng }}
-      mapContainerStyle={containerStyle}
-    >
+    <GoogleMap zoom={10} center={selected || { lat, lng }} mapContainerStyle={containerStyle}>
       <Marker
         draggable={draggable}
         position={selected || { lat, lng }}
diff --git a/src/components/ui/maps/MapHome.tsx b/src/components/ui/maps/MapHome.tsx
index 74517c6e..bad27b13 100644
--- a/src/components/ui/maps/MapHome.tsx
+++ b/src/components/ui/maps/MapHome.tsx
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+
 import Places from "./Maps"; // Pastikan ini adalah komponen Places
 
 interface MapHomeProps {
diff --git a/src/components/ui/maps/Maps.tsx b/src/components/ui/maps/Maps.tsx
index 249f5727..89a4df53 100644
--- a/src/components/ui/maps/Maps.tsx
+++ b/src/components/ui/maps/Maps.tsx
@@ -1,4 +1,6 @@
 import "@reach/combobox/styles.css";
+
+import { useEffect, useState } from "react";
 import {
   Combobox,
   ComboboxInput,
@@ -8,13 +10,10 @@ import {
 } from "@reach/combobox";
 import { GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";
 import Cookies from "js-cookie";
-import { useEffect, useState } from "react";
-import usePlacesAutocomplete, {
-  getGeocode,
-  getLatLng,
-} from "use-places-autocomplete";
-import { GoogleMapsAPI } from "./client-config";
 import Geocode from "react-geocode";
+import usePlacesAutocomplete, { getGeocode, getLatLng } from "use-places-autocomplete";
+
+import { GoogleMapsAPI } from "./client-config";
 
 Geocode.setApiKey(GoogleMapsAPI);
 
@@ -61,9 +60,7 @@ function Map(props: MapProps) {
     lng: 106.8272,
   };
 
-  const [selected, setSelected] = useState<{ lat: number; lng: number } | null>(
-    null
-  );
+  const [selected, setSelected] = useState<{ lat: number; lng: number } | null>(null);
 
   const { lat, lng, draggable, onLocationChange } = props;
 
@@ -110,11 +107,7 @@ function Map(props: MapProps) {
         mapContainerStyle={containerStyle}
       >
         {selected && (
-          <Marker
-            draggable={draggable}
-            position={selected}
-            onDragEnd={onMarkerDragEnd}
-          />
+          <Marker draggable={draggable} position={selected} onDragEnd={onMarkerDragEnd} />
         )}
       </GoogleMap>
     </>
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index b69b3adf..e62b72f0 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,20 +1,20 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const MenubarMenu = MenubarPrimitive.Menu
+const MenubarMenu = MenubarPrimitive.Menu;
 
-const MenubarGroup = MenubarPrimitive.Group
+const MenubarGroup = MenubarPrimitive.Group;
 
-const MenubarPortal = MenubarPrimitive.Portal
+const MenubarPortal = MenubarPrimitive.Portal;
 
-const MenubarSub = MenubarPrimitive.Sub
+const MenubarSub = MenubarPrimitive.Sub;
 
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
 const Menubar = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Root>,
@@ -28,8 +28,8 @@ const Menubar = React.forwardRef<
     )}
     {...props}
   />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
 
 const MenubarTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -43,13 +43,13 @@ const MenubarTrigger = React.forwardRef<
     )}
     {...props}
   />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <MenubarPrimitive.SubTrigger
@@ -64,8 +64,8 @@ const MenubarSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubContent>,
@@ -79,38 +79,33 @@ const MenubarSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-card   dark:border-default-300 p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-card   dark:border-default-300 p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Item
@@ -122,8 +117,8 @@ const MenubarItem = React.forwardRef<
     )}
     {...props}
   />
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 const MenubarCheckboxItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
@@ -145,8 +140,8 @@ const MenubarCheckboxItem = React.forwardRef<
     </span>
     {children}
   </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
 const MenubarRadioItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
@@ -167,26 +162,22 @@ const MenubarRadioItem = React.forwardRef<
     </span>
     {children}
   </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
 const MenubarLabel = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
     {...props}
   />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -197,24 +188,18 @@ const MenubarSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
   Menubar,
@@ -233,4 +218,4 @@ export {
   MenubarGroup,
   MenubarSub,
   MenubarShortcut,
-}
+};
diff --git a/src/components/ui/navigation-menu.tsx b/src/components/ui/navigation-menu.tsx
index 53af188f..4a895eab 100644
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@@ -3,18 +3,32 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const NavigationMenu = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Root>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>>(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root ref={ref} className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)} {...props}>
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    {...props}
+  >
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
-const NavigationMenuList = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.List>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>>(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List ref={ref} className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)} {...props} />
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+    {...props}
+  />
 ));
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
@@ -24,14 +38,28 @@ const navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-[#f7f7f7] dark:bg-black px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 );
 
-const NavigationMenuTrigger = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>>(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger ref={ref} className={cn(navigationMenuTriggerStyle(), "group", className)} {...props}>
-    {children} <ChevronDown className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" />
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
   </NavigationMenuPrimitive.Trigger>
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
-const NavigationMenuContent = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>>(({ className, ...props }, ref) => (
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
@@ -45,7 +73,10 @@ NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Viewport>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>>(({ className, ...props }, ref) => (
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
@@ -59,10 +90,16 @@ const NavigationMenuViewport = React.forwardRef<React.ElementRef<typeof Navigati
 ));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
 
-const NavigationMenuIndicator = React.forwardRef<React.ElementRef<typeof NavigationMenuPrimitive.Indicator>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>>(({ className, ...props }, ref) => (
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Indicator
     ref={ref}
-    className={cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", className)}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
     {...props}
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
@@ -70,4 +107,14 @@ const NavigationMenuIndicator = React.forwardRef<React.ElementRef<typeof Navigat
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
 
-export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport };
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};
diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index de5892ff..564a8d29 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import { ButtonProps, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
   <nav
@@ -11,40 +11,27 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
     className={cn("mx-auto flex w-full justify-center", className)}
     {...props}
   />
-)
-Pagination.displayName = "Pagination"
+);
+Pagination.displayName = "Pagination";
 
-const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
-))
-PaginationContent.displayName = "PaginationContent"
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  )
+);
+PaginationContent.displayName = "PaginationContent";
 
-const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
-))
-PaginationItem.displayName = "PaginationItem"
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(
+  ({ className, ...props }, ref) => <li ref={ref} className={cn("", className)} {...props} />
+);
+PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;
 
-const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) => (
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
   <a
     aria-current={isActive ? "page" : undefined}
     className={cn(
@@ -56,8 +43,8 @@ const PaginationLink = ({
     )}
     {...props}
   />
-)
-PaginationLink.displayName = "PaginationLink"
+);
+PaginationLink.displayName = "PaginationLink";
 
 const PaginationPrevious = ({
   className,
@@ -72,13 +59,10 @@ const PaginationPrevious = ({
     <ChevronLeft className="h-4 w-4" />
     <span>Previous</span>
   </PaginationLink>
-)
-PaginationPrevious.displayName = "PaginationPrevious"
+);
+PaginationPrevious.displayName = "PaginationPrevious";
 
-const PaginationNext = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
     aria-label="Go to next page"
     size="default"
@@ -88,13 +72,10 @@ const PaginationNext = ({
     <span>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
-)
-PaginationNext.displayName = "PaginationNext"
+);
+PaginationNext.displayName = "PaginationNext";
 
-const PaginationEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
     aria-hidden
     className={cn("flex h-9 w-9 items-center justify-center", className)}
@@ -103,8 +84,8 @@ const PaginationEllipsis = ({
     <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
-)
-PaginationEllipsis.displayName = "PaginationEllipsis"
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export {
   Pagination,
@@ -114,4 +95,4 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-}
+};
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index cc21d30a..d048f183 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
-const PopoverArrow = PopoverPrimitive.Arrow
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverArrow = PopoverPrimitive.Arrow;
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
@@ -25,7 +25,7 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverArrow }
+export { Popover, PopoverTrigger, PopoverContent, PopoverArrow };
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 74b83b29..eec8b2da 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,9 +1,11 @@
-"use client"
+"use client";
+
 import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cva } from "class-variance-authority";
-import { cn } from "@/lib/utils/utils"
+
 import { color, size } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const progressVariants = cva(
   "relative overflow-hidden rounded-full bg-default-200 dark:bg-default-300",
@@ -23,7 +25,7 @@ const progressVariants = cva(
         default: "h-3",
         md: "h-3.5",
         lg: "h-4",
-      }
+      },
     },
     defaultVariants: {
       color: "default",
@@ -33,18 +35,19 @@ const progressVariants = cva(
 );
 
 interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
-  size?: size,
-  value?: number,
-  showValue?: boolean,
-  color?: color,
-  isStripe?: boolean,
-  isAnimate?: boolean
+  size?: size;
+  value?: number;
+  showValue?: boolean;
+  color?: color;
+  isStripe?: boolean;
+  isAnimate?: boolean;
 }
 
-const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(({ className, value, color, size, showValue, isStripe, isAnimate, ...props }, ref) => {
-  const stripeStyles = isStripe
-    ? {
-      backgroundImage: `linear-gradient(
+const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(
+  ({ className, value, color, size, showValue, isStripe, isAnimate, ...props }, ref) => {
+    const stripeStyles = isStripe
+      ? {
+          backgroundImage: `linear-gradient(
           45deg,
           hsla(0, 0%, 100%, 0.15) 25%,
           transparent 0,
@@ -54,42 +57,38 @@ const Progress = React.forwardRef<React.ElementRef<typeof ProgressPrimitive.Root
           transparent 0,
           transparent
         )`,
-      backgroundSize: "0.857rem 0.857rem",
-    }
-    : {};
-  return (
-    <ProgressPrimitive.Root
-      ref={ref}
-      className={cn(
-        progressVariants({ color, size }),
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        className={cn(
-          "flex-1 transition-all h-full w-full flex items-center justify-center",
-          className,
-          {
-            "animate-stripes": isAnimate,
-          }
-        )}
-        style={{
-          transform: `translateX(-${100 - (value || 0)}%)`,
-          ...stripeStyles,
-        }}
+          backgroundSize: "0.857rem 0.857rem",
+        }
+      : {};
+    return (
+      <ProgressPrimitive.Root
+        ref={ref}
+        className={cn(progressVariants({ color, size }), className)}
+        {...props}
       >
-        {showValue && (
-          <span className="text-end pe-1 text-xs  text-primary-foreground block w-full">
-            {value}%
-          </span>
-        )}
-      </ProgressPrimitive.Indicator>
-    </ProgressPrimitive.Root>
-  );
-}
+        <ProgressPrimitive.Indicator
+          className={cn(
+            "flex-1 transition-all h-full w-full flex items-center justify-center",
+            className,
+            {
+              "animate-stripes": isAnimate,
+            }
+          )}
+          style={{
+            transform: `translateX(-${100 - (value || 0)}%)`,
+            ...stripeStyles,
+          }}
+        >
+          {showValue && (
+            <span className="text-end pe-1 text-xs  text-primary-foreground block w-full">
+              {value}%
+            </span>
+          )}
+        </ProgressPrimitive.Indicator>
+      </ProgressPrimitive.Root>
+    );
+  }
 );
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
-
 export { Progress };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
index 9beb9d33..c400cbd6 100644
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@@ -1,29 +1,24 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { Circle } from "lucide-react"
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-import { color, size } from "@/lib/type"
+import { color, size } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const radioVariants = cva(
   "aspect-square h-[18px] w-[18px] rounded-full border border-default-400 data-[state=checked]:text-default-700 ring-offset-background  disabled:cursor-not-allowed disabled:bg-default-100 disabled:border-default-400 disabled:opacity-50 [&_svg]:fill-current [&_svg]:text-current transition-all duration-100",
   {
     variants: {
       color: {
-        default:
-          "data-[state=checked]:border-default data-[state=checked]:text-default",
-        primary:
-          "data-[state=checked]:border-primary data-[state=checked]:text-primary",
-        secondary:
-          "data-[state=checked]:border-default-300 data-[state=checked]:text-default-300",
+        default: "data-[state=checked]:border-default data-[state=checked]:text-default",
+        primary: "data-[state=checked]:border-primary data-[state=checked]:text-primary",
+        secondary: "data-[state=checked]:border-default-300 data-[state=checked]:text-default-300",
         info: "data-[state=checked]:border-info data-[state=checked]:text-info",
-        warning:
-          "data-[state=checked]:border-warning data-[state=checked]:text-warning",
-        success:
-          "data-[state=checked]:border-success data-[state=checked]:text-success",
+        warning: "data-[state=checked]:border-warning data-[state=checked]:text-warning",
+        success: "data-[state=checked]:border-success data-[state=checked]:text-success",
         destructive:
           "data-[state=checked]:border-destructive data-[state=checked]:text-destructive",
       },
@@ -38,7 +33,7 @@ const radioVariants = cva(
 
     defaultVariants: {
       color: "default",
-    }
+    },
   }
 );
 
@@ -46,19 +41,13 @@ const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  )
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
 });
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 interface RadioGroupItemProps
   extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,
-  VariantProps<typeof radioVariants> {
+    VariantProps<typeof radioVariants> {
   icon?: React.ReactNode;
   color?: color;
   size?: size;
@@ -67,23 +56,19 @@ interface RadioGroupItemProps
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
   RadioGroupItemProps
->(({ className, color,size, icon, ...props }, ref) => {
+>(({ className, color, size, icon, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
-      className={cn(
-        radioVariants({ color,size }),
-        className
-      )}
+      className={cn(radioVariants({ color, size }), className)}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
         {icon || <Circle className="h-2.5 w-2.5 fill-current text-current" />}
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
+  );
 });
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/ui/resizable.tsx b/src/components/ui/resizable.tsx
index da6dc316..474b2f41 100644
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@@ -1,31 +1,28 @@
-"use client"
+"use client";
 
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const ResizablePanelGroup = ({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
   <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
+    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
     {...props}
   />
-)
+);
 
-const ResizablePanel = ResizablePrimitive.Panel
+const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
+  withHandle?: boolean;
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
@@ -40,6 +37,6 @@ const ResizableHandle = ({
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
-)
+);
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index 5288ec2f..ffba611f 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -20,8 +20,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -32,17 +32,15 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 9836e383..5286d14f 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
-import { cva, type VariantProps } from "class-variance-authority"
-import { InputColor, size } from "@/lib/type"
+import { InputColor, size } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const selectVariants = cva(
   " w-full  px-3 h-10 text-sm flex [&>svg]:h-5 [&>svg]:w-5 rounded-md border border-input   justify-between items-center  read-only:bg-background  disabled:cursor-not-allowed disabled:opacity-50  transition duration-300 ",
@@ -39,7 +39,7 @@ const selectVariants = cva(
         default: "h-9 text-xs",
         md: "h-10 text-sm",
         lg: "h-12 text-base",
-      }
+      },
     },
 
     defaultVariants: {
@@ -48,40 +48,27 @@ const selectVariants = cva(
     },
   }
 );
-interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
-  VariantProps<typeof selectVariants> {
-  size?: size
-  color?: InputColor
+interface SelectTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
+    VariantProps<typeof selectVariants> {
+  size?: size;
+  color?: InputColor;
 }
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(
-  (
-    {
-      className,
-      children,
-      color,
-      size,
-      ...props
-    },
-    ref
-  ) => (
-    <SelectPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        selectVariants({ color, size }),
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDown className="h-4 w-4 " />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-);
+>(({ className, children, color, size, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(selectVariants({ color, size }), className)}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 " />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
@@ -90,16 +77,13 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -107,17 +91,13 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
     <ChevronDown className="h-4 w-4 " />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -129,7 +109,7 @@ const SelectContent = React.forwardRef<
       className={cn(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
-        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       )}
       position={position}
@@ -140,7 +120,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
@@ -148,8 +128,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -160,8 +140,8 @@ const SelectLabel = React.forwardRef<
     className={cn("py-1.5 ps-4 pr-2 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -183,8 +163,8 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -195,8 +175,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -209,4 +189,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index c720539b..2a5a1a8e 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,31 +1,26 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border dark:bg-default-300",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border dark:bg-default-300",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index ea5d0d57..ec3e18d7 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -27,8 +27,8 @@ const SheetOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-card dark:border dark:border-secondary p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -47,12 +47,12 @@ const sheetVariants = cva(
       side: "right",
     },
   }
-)
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-  VariantProps<typeof sheetVariants> {
-  overlayClass?: string
+    VariantProps<typeof sheetVariants> {
+  overlayClass?: string;
 }
 
 const SheetContent = React.forwardRef<
@@ -61,11 +61,7 @@ const SheetContent = React.forwardRef<
 >(({ side = "right", className, overlayClass, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay className={overlayClass} />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
+    <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
       <SheetPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
@@ -73,36 +69,21 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2", className)}
     {...props}
   />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -113,8 +94,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -125,8 +106,8 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -139,4 +120,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/src/components/ui/shimmer/page.tsx b/src/components/ui/shimmer/page.tsx
index a4e0e0d2..20f5fe7b 100644
--- a/src/components/ui/shimmer/page.tsx
+++ b/src/components/ui/shimmer/page.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
-import ViewSource from "../view-source/view-source";
 
+import ViewSource from "../view-source/view-source";
 
 const shimmer = (w: number, h: number) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -16,7 +16,8 @@ const shimmer = (w: number, h: number) => `
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`;
 
-const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+const toBase64 = (str: string) =>
+  typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
 const Shimmer = () => (
   <div>
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index c10c7202..e5b69757 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,15 +1,12 @@
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       className={cn("animate-pulse rounded-md bg-default-200 dark:bg-default-300", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 8e2d26e3..db9d428a 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
@@ -11,10 +11,7 @@ const Slider = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
     {...props}
   >
     <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-default-200 dark:bg-default-300">
@@ -22,7 +19,7 @@ const Slider = React.forwardRef<
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-default bg-background  disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-export { Slider }
+export { Slider };
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 452f4d9f..8d084f8f 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = "system" } = useTheme();
 
   return (
     <Sonner
@@ -17,15 +17,13 @@ const Toaster = ({ ...props }: ToasterProps) => {
           toast:
             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
         },
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/src/components/ui/structures/code-snippet.tsx b/src/components/ui/structures/code-snippet.tsx
index e9ce7a1a..b444baa9 100644
--- a/src/components/ui/structures/code-snippet.tsx
+++ b/src/components/ui/structures/code-snippet.tsx
@@ -1,70 +1,74 @@
 "use client";
-import React, { useState, useEffect } from "react";
-import {
-    Card,
-    CardContent,
-    CardDescription,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card";
 
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Label } from "@/components/ui/label";
-import { Switch } from "@/components/ui/switch";
-import { CopyButton } from "./copy-button";
+import React, { useEffect, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
-const CardSnippet = ({ title, code, children }: { title: string, code: string, children: React.ReactNode }) => {
-    const [show, setShow] = useState(false);
-    const toggle = () => {
-        setShow(!show);
-    };
 
-    return (
-        <Card>
-            <CardHeader className="flex flex-row items-center">
-                {title && (
-                    <CardTitle className="flex-1 leading-normal"> {title}</CardTitle>
-                )}
-                {code && (
-                    <div className="flex-none ">
-                        <Switch id="airplane-mode" onClick={toggle} />
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 
-                    </div>
-                )}
-            </CardHeader>
-            <CardContent>
-                {children}
-                <Collapsible open={show}>
-                    <CollapsibleContent className="CollapsibleContent relative" >
-                        <div className="absolute end-2 top-2">
-                            <CopyButton
-                                event="copy_chart_code"
-                                name={title}
-                                code={code}
-                                className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-background hover:bg-background hover:text-foreground text-foreground shadow-none  [&_svg]:w-3"
+import { CopyButton } from "./copy-button";
 
-                            /></div>
-                        <SyntaxHighlighter
-                            language="javascript"
-                            className=" rounded-md  text-sm mt-6 "
-                            style={atomOneDark}
-                            customStyle={{
-                                padding: "24px",
-                            }}
-                        >
-                            {`${code}`}
-                        </SyntaxHighlighter>
-                    </CollapsibleContent>
-                </Collapsible>
-            </CardContent>
-        </Card>
-    );
+const CardSnippet = ({
+  title,
+  code,
+  children,
+}: {
+  title: string;
+  code: string;
+  children: React.ReactNode;
+}) => {
+  const [show, setShow] = useState(false);
+  const toggle = () => {
+    setShow(!show);
+  };
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center">
+        {title && <CardTitle className="flex-1 leading-normal"> {title}</CardTitle>}
+        {code && (
+          <div className="flex-none ">
+            <Switch id="airplane-mode" onClick={toggle} />
+          </div>
+        )}
+      </CardHeader>
+      <CardContent>
+        {children}
+        <Collapsible open={show}>
+          <CollapsibleContent className="CollapsibleContent relative">
+            <div className="absolute end-2 top-2">
+              <CopyButton
+                event="copy_chart_code"
+                name={title}
+                code={code}
+                className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-background hover:bg-background hover:text-foreground text-foreground shadow-none  [&_svg]:w-3"
+              />
+            </div>
+            <SyntaxHighlighter
+              language="javascript"
+              className=" rounded-md  text-sm mt-6 "
+              style={atomOneDark}
+              customStyle={{
+                padding: "24px",
+              }}
+            >
+              {`${code}`}
+            </SyntaxHighlighter>
+          </CollapsibleContent>
+        </Collapsible>
+      </CardContent>
+    </Card>
+  );
 };
 
-export default CardSnippet;
\ No newline at end of file
+export default CardSnippet;
diff --git a/src/components/ui/structures/copy-button.tsx b/src/components/ui/structures/copy-button.tsx
index fff2f760..582bbe18 100644
--- a/src/components/ui/structures/copy-button.tsx
+++ b/src/components/ui/structures/copy-button.tsx
@@ -1,69 +1,64 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { CheckIcon, ClipboardIcon } from "lucide-react"
+import * as React from "react";
+import { CheckIcon, ClipboardIcon } from "lucide-react";
 
-import { Event, trackEvent } from "@/lib/events"
-import { cn } from "@/lib/utils/utils"
-import { Button, ButtonProps } from "@/components/ui/button"
-import {
-    TooltipProvider,
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
+import { Event, trackEvent } from "@/lib/utils/events";
+import { cn } from "@/lib/utils/utils";
+import { Button, ButtonProps } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 export function CopyButton({
-    event,
-    name,
-    code,
-    className,
-    tooltip = "Copy code",
-    ...props
+  event,
+  name,
+  code,
+  className,
+  tooltip = "Copy code",
+  ...props
 }: {
-    event: Event["name"]
-    name: string
-    code: string
-    tooltip?: string
+  event: Event["name"];
+  name: string;
+  code: string;
+  tooltip?: string;
 } & ButtonProps) {
-    const [hasCopied, setHasCopied] = React.useState(false)
+  const [hasCopied, setHasCopied] = React.useState(false);
 
-    React.useEffect(() => {
-        setTimeout(() => {
-            setHasCopied(false)
-        }, 2000)
-    }, [hasCopied])
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false);
+    }, 2000);
+  }, [hasCopied]);
 
-    return (
-        <TooltipProvider>
-
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <Button
-                        size="icon"
-                        className={cn(
-                            "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5 border-default-500 text-default-500 ",
-                            className
-                        )}
-                        onClick={() => {
-                            navigator.clipboard.writeText(code)
-                            trackEvent({
-                                name: event,
-                                properties: {
-                                    name,
-                                },
-                            })
-                            setHasCopied(true)
-                        }}
-                        {...props}
-                    >
-                        <span className="sr-only">Copy</span>
-                        {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
-                    </Button>
-                </TooltipTrigger>
-                <TooltipContent className="bg-default text-default-foreground text-sm font-normal">{tooltip}</TooltipContent>
-            </Tooltip>
-
-        </TooltipProvider>
-    )
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            size="icon"
+            className={cn(
+              "[&_svg]-h-3.5 h-7 w-7 rounded-[6px] [&_svg]:w-3.5 border-default-500 text-default-500 ",
+              className
+            )}
+            onClick={() => {
+              navigator.clipboard.writeText(code);
+              trackEvent({
+                name: event,
+                properties: {
+                  name,
+                },
+              });
+              setHasCopied(true);
+            }}
+            {...props}
+          >
+            <span className="sr-only">Copy</span>
+            {hasCopied ? <CheckIcon /> : <ClipboardIcon />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent className="bg-default text-default-foreground text-sm font-normal">
+          {tooltip}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
 }
diff --git a/src/components/ui/structures/dascode-logo.tsx b/src/components/ui/structures/dascode-logo.tsx
index 4a645287..ade9ae89 100644
--- a/src/components/ui/structures/dascode-logo.tsx
+++ b/src/components/ui/structures/dascode-logo.tsx
@@ -1,18 +1,32 @@
-import React from 'react'
-type IconProps = React.HTMLAttributes<SVGElement>
+import React from "react";
+
+type IconProps = React.HTMLAttributes<SVGElement>;
 const DashCodeLogo = (props: IconProps) => {
-    return (
-        <>
-            <svg
-                {...props}
-                width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M0 6C0 2.68629 2.68629 0 6 0H26C29.3137 0 32 2.68629 32 6V32H6C2.68629 32 0 29.3137 0 26V6Z" fill="currentColor" />
-                <path d="M20 23.2C19.0133 23.2 18.0933 23.02 17.24 22.66C16.4 22.3 15.6667 21.7933 15.04 21.14C14.4133 20.4867 13.9267 19.7333 13.58 18.88C13.2467 18.0133 13.08 17.0867 13.08 16.1C13.08 15.1133 13.2467 14.1933 13.58 13.34C13.9267 12.4733 14.4067 11.72 15.02 11.08C15.6467 10.44 16.38 9.94 17.22 9.58C18.06 9.22 18.9667 9.04 19.94 9.04C20.9933 9.04 21.9333 9.22667 22.76 9.6C23.6 9.97333 24.3333 10.4867 24.96 11.14L23.96 12.14C23.48 11.6067 22.9 11.1933 22.22 10.9C21.54 10.5933 20.78 10.44 19.94 10.44C19.1667 10.44 18.4533 10.58 17.8 10.86C17.16 11.14 16.5933 11.54 16.1 12.06C15.62 12.5667 15.2467 13.1667 14.98 13.86C14.7267 14.54 14.6 15.2867 14.6 16.1C14.6 16.9133 14.7333 17.6667 15 18.36C15.2667 19.0533 15.64 19.66 16.12 20.18C16.6 20.6867 17.1667 21.08 17.82 21.36C18.4733 21.64 19.1867 21.78 19.96 21.78C20.84 21.78 21.62 21.6267 22.3 21.32C22.9933 21.0133 23.58 20.5933 24.06 20.06L25.06 21.08C24.4467 21.7333 23.7133 22.2533 22.86 22.64C22.0067 23.0133 21.0533 23.2 20 23.2Z" fill='currentColor' />
-                <path d="M9.3 23V20.58H12.88C13.7867 20.58 14.58 20.3933 15.26 20.02C15.94 19.6333 16.4667 19.0933 16.84 18.4C17.2267 17.7067 17.42 16.8867 17.42 15.94C17.42 15.02 17.2267 14.22 16.84 13.54C16.4533 12.8467 15.92 12.3133 15.24 11.94C14.56 11.5533 13.7733 11.36 12.88 11.36H9.24V8.94H12.92C13.96 8.94 14.92 9.11333 15.8 9.46C16.6933 9.80667 17.4667 10.3 18.12 10.94C18.7867 11.5667 19.3 12.3067 19.66 13.16C20.0333 14.0133 20.22 14.9467 20.22 15.96C20.22 16.9733 20.0333 17.9133 19.66 18.78C19.3 19.6333 18.7933 20.38 18.14 21.02C17.4867 21.6467 16.7133 22.1333 15.82 22.48C14.94 22.8267 13.9867 23 12.96 23H9.3ZM7.44 23V8.94H10.16V23H7.44Z" fill='currentColor' />
-            </svg>
+  return (
+    <>
+      <svg
+        {...props}
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 6C0 2.68629 2.68629 0 6 0H26C29.3137 0 32 2.68629 32 6V32H6C2.68629 32 0 29.3137 0 26V6Z"
+          fill="currentColor"
+        />
+        <path
+          d="M20 23.2C19.0133 23.2 18.0933 23.02 17.24 22.66C16.4 22.3 15.6667 21.7933 15.04 21.14C14.4133 20.4867 13.9267 19.7333 13.58 18.88C13.2467 18.0133 13.08 17.0867 13.08 16.1C13.08 15.1133 13.2467 14.1933 13.58 13.34C13.9267 12.4733 14.4067 11.72 15.02 11.08C15.6467 10.44 16.38 9.94 17.22 9.58C18.06 9.22 18.9667 9.04 19.94 9.04C20.9933 9.04 21.9333 9.22667 22.76 9.6C23.6 9.97333 24.3333 10.4867 24.96 11.14L23.96 12.14C23.48 11.6067 22.9 11.1933 22.22 10.9C21.54 10.5933 20.78 10.44 19.94 10.44C19.1667 10.44 18.4533 10.58 17.8 10.86C17.16 11.14 16.5933 11.54 16.1 12.06C15.62 12.5667 15.2467 13.1667 14.98 13.86C14.7267 14.54 14.6 15.2867 14.6 16.1C14.6 16.9133 14.7333 17.6667 15 18.36C15.2667 19.0533 15.64 19.66 16.12 20.18C16.6 20.6867 17.1667 21.08 17.82 21.36C18.4733 21.64 19.1867 21.78 19.96 21.78C20.84 21.78 21.62 21.6267 22.3 21.32C22.9933 21.0133 23.58 20.5933 24.06 20.06L25.06 21.08C24.4467 21.7333 23.7133 22.2533 22.86 22.64C22.0067 23.0133 21.0533 23.2 20 23.2Z"
+          fill="currentColor"
+        />
+        <path
+          d="M9.3 23V20.58H12.88C13.7867 20.58 14.58 20.3933 15.26 20.02C15.94 19.6333 16.4667 19.0933 16.84 18.4C17.2267 17.7067 17.42 16.8867 17.42 15.94C17.42 15.02 17.2267 14.22 16.84 13.54C16.4533 12.8467 15.92 12.3133 15.24 11.94C14.56 11.5533 13.7733 11.36 12.88 11.36H9.24V8.94H12.92C13.96 8.94 14.92 9.11333 15.8 9.46C16.6933 9.80667 17.4667 10.3 18.12 10.94C18.7867 11.5667 19.3 12.3067 19.66 13.16C20.0333 14.0133 20.22 14.9467 20.22 15.96C20.22 16.9733 20.0333 17.9133 19.66 18.78C19.3 19.6333 18.7933 20.38 18.14 21.02C17.4867 21.6467 16.7133 22.1333 15.82 22.48C14.94 22.8267 13.9867 23 12.96 23H9.3ZM7.44 23V8.94H10.16V23H7.44Z"
+          fill="currentColor"
+        />
+      </svg>
+    </>
+  );
+};
 
-        </>
-    )
-}
-
-export default DashCodeLogo
\ No newline at end of file
+export default DashCodeLogo;
diff --git a/src/components/ui/structures/dashboard-dropdown.tsx b/src/components/ui/structures/dashboard-dropdown.tsx
index 9b9edf24..ec8db619 100644
--- a/src/components/ui/structures/dashboard-dropdown.tsx
+++ b/src/components/ui/structures/dashboard-dropdown.tsx
@@ -1,3 +1,5 @@
+import { MoreHorizontal } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -5,11 +7,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { MoreHorizontal } from "lucide-react";
-import { useTranslations } from "next-intl";
+} from "@/components/ui/dropdown-menu";
+
 const DashboardDropdown = () => {
-    const t = useTranslations("AnalyticsDashboard");
+  const t = useTranslations("AnalyticsDashboard");
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -35,4 +36,4 @@ const DashboardDropdown = () => {
   );
 };
 
-export default DashboardDropdown;
\ No newline at end of file
+export default DashboardDropdown;
diff --git a/src/components/ui/structures/date-range-picker.tsx b/src/components/ui/structures/date-range-picker.tsx
index 2c5d375a..79d5df14 100644
--- a/src/components/ui/structures/date-range-picker.tsx
+++ b/src/components/ui/structures/date-range-picker.tsx
@@ -3,57 +3,52 @@
 import * as React from "react";
 import { format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils/utils"
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover";
 import { useTheme } from "next-themes";
 
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+
 export default function DateRangePicker({ className }: { className?: string }) {
-    const [date, setDate] = React.useState<any | null>(null);
-    const { theme: mode } = useTheme();
+  const [date, setDate] = React.useState<any | null>(null);
+  const { theme: mode } = useTheme();
 
-    return (
-        <div className={cn("grid gap-2", className)}>
-            <Popover>
-                <PopoverTrigger asChild>
-                    <Button
-
-                        className={cn(" font-normal", {
-                            "  bg-background hover:bg-background hover:ring-background text-default-600": mode !== "dark",
-                        })}
-                    >
-                        <CalendarIcon className="ltr:mr-2 rtl:ml-2 h-4 w-4" />
-                        {date?.from ? (
-                            date.to ? (
-                                <>
-                                    {format(date.from, "LLL dd, y")} -{" "}
-                                    {format(date.to, "LLL dd, y")}
-                                </>
-                            ) : (
-                                format(date.from, "LLL dd, y")
-                            )
-                        ) : (
-                            <span>Pick a date</span>
-                        )}
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="end">
-                    <Calendar
-                        initialFocus
-                        mode="range"
-                        defaultMonth={date?.from}
-                        selected={date}
-                        onSelect={setDate}
-                        numberOfMonths={2}
-                    />
-                </PopoverContent>
-            </Popover>
-        </div>
-    );
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            className={cn(" font-normal", {
+              "  bg-background hover:bg-background hover:ring-background text-default-600":
+                mode !== "dark",
+            })}
+          >
+            <CalendarIcon className="ltr:mr-2 rtl:ml-2 h-4 w-4" />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, "LLL dd, y")} - {format(date.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(date.from, "LLL dd, y")
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="end">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
 }
diff --git a/src/components/ui/structures/delete-confirmation-dialog.tsx b/src/components/ui/structures/delete-confirmation-dialog.tsx
index 5f483093..a26db09e 100644
--- a/src/components/ui/structures/delete-confirmation-dialog.tsx
+++ b/src/components/ui/structures/delete-confirmation-dialog.tsx
@@ -1,4 +1,7 @@
 import React, { useState, useTransition } from "react";
+import { Loader2 } from "lucide-react";
+import { toast } from "react-hot-toast";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -9,8 +12,6 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { toast } from "react-hot-toast";
-import { Loader2 } from "lucide-react";
 
 const DeleteConfirmationDialog = ({
   open,
@@ -48,8 +49,8 @@ const DeleteConfirmationDialog = ({
         <AlertDialogHeader>
           <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
           <AlertDialogDescription>
-            This action cannot be undone. This will permanently delete your
-            account and remove your data from our servers.
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
diff --git a/src/components/ui/structures/loader.tsx b/src/components/ui/structures/loader.tsx
index 9641beb4..77204dcd 100644
--- a/src/components/ui/structures/loader.tsx
+++ b/src/components/ui/structures/loader.tsx
@@ -1,34 +1,36 @@
+"use client";
 
-'use client'
 import React from "react";
-import { Loader2 } from "lucide-react";
-import DashCodeLogo from "./dascode-logo";
-import { useMounted } from "@/lib/hooks/use-mounted";
 import Image from "next/image";
+import { Loader2 } from "lucide-react";
+
+import { useMounted } from "@/lib/hooks/use-mounted";
+
+import DashCodeLogo from "./dascode-logo";
+
 const Loader = () => {
-    const mounted = useMounted()
-    return (
-        mounted ? null : <div className=" h-screen flex items-center justify-center flex-col space-y-2">
-            <div className="flex gap-2 items-center ">
-                {/* <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" /> */}
-                <Image
-                    src="/assets/mediahub-logo-min.png"
-                    alt=""
-                    width={80}
-                    height={80}
-                    className="mb-4 w-full h-full"
-                />
-                {/* <h1 className="text-xl font-semibold text-default-900 ">
+  const mounted = useMounted();
+  return mounted ? null : (
+    <div className=" h-screen flex items-center justify-center flex-col space-y-2">
+      <div className="flex gap-2 items-center ">
+        {/* <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" /> */}
+        <Image
+          src="/assets/mediahub-logo-min.png"
+          alt=""
+          width={80}
+          height={80}
+          className="mb-4 w-full h-full"
+        />
+        {/* <h1 className="text-xl font-semibold text-default-900 ">
                     DashCode
                 </h1> */}
-            </div>
-            <span className=" inline-flex gap-1  items-center">
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                Loading...
-            </span>
-        </div>
-    );
+      </div>
+      <span className=" inline-flex gap-1  items-center">
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        Loading...
+      </span>
+    </div>
+  );
 };
 
 export default Loader;
-
diff --git a/src/components/ui/structures/logo.tsx b/src/components/ui/structures/logo.tsx
index fff648ec..94ffb915 100644
--- a/src/components/ui/structures/logo.tsx
+++ b/src/components/ui/structures/logo.tsx
@@ -1,10 +1,13 @@
 "use client";
+
 import React from "react";
-import DashCodeLogo from "./dascode-logo";
 import { Link } from "@/i18n/navigation";
+
 import { useConfig } from "@/lib/hooks/use-config";
-import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
 import { useMediaQuery } from "@/lib/hooks/use-media-query";
+import { useMenuHoverConfig } from "@/lib/hooks/use-menu-hover";
+
+import DashCodeLogo from "./dascode-logo";
 
 const Logo = () => {
   const [config] = useConfig();
@@ -14,10 +17,7 @@ const Logo = () => {
 
   if (config.sidebar === "compact") {
     return (
-      <Link
-        href="/dashboard/analytics"
-        className="flex gap-2 items-center   justify-center    "
-      >
+      <Link href="/dashboard/analytics" className="flex gap-2 items-center   justify-center    ">
         <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" />
       </Link>
     );
@@ -30,12 +30,7 @@ const Logo = () => {
       {(!config?.collapsed || hovered) && (
         <h1 className="text-xl font-semibold text-default-900 ">D</h1>
       )} */}
-      <img
-        className="w-100"
-        src="/../images/all-img/mediahub-logo.png"
-        alt="logo"
-        width={150}
-      />
+      <img className="w-100" src="/../images/all-img/mediahub-logo.png" alt="logo" width={150} />
     </Link>
   );
 };
diff --git a/src/components/ui/structures/nav.tsx b/src/components/ui/structures/nav.tsx
index 4f48e5ce..5637378f 100644
--- a/src/components/ui/structures/nav.tsx
+++ b/src/components/ui/structures/nav.tsx
@@ -1,61 +1,68 @@
-'use client'
-import React from 'react'
-import { cn } from '@/lib/utils/utils'
-import { Icon } from '@/components/ui/icon'
-import { Button } from "@/components/ui/button"
+"use client";
+
+import React from "react";
+
+import { cn } from "@/lib/utils/utils";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+
 interface navProps {
-  dotStyle?: boolean
+  dotStyle?: boolean;
   links: {
-    title: string
-    href?: string
-    active: boolean
-    label?: string
-    icon?: any
-  }[]
+    title: string;
+    href?: string;
+    active: boolean;
+    label?: string;
+    icon?: any;
+  }[];
 }
 const Nav = ({ links, dotStyle = false }: navProps) => {
   if (dotStyle) {
     return (
-      <nav className=' space-y-1 px-5'>
-        {links.map(({ icon, title, active }, index) =>
+      <nav className=" space-y-1 px-5">
+        {links.map(({ icon, title, active }, index) => (
           <Button
             key={`link-${index}`}
-            fullWidth className='capitalize justify-start hover:bg-transparent hover:text-default-600'
-            variant="ghost">
+            fullWidth
+            className="capitalize justify-start hover:bg-transparent hover:text-default-600"
+            variant="ghost"
+          >
             <span
               className={cn(
                 "h-2 w-2 me-2 rounded-full  transition-all duration-150 ring-0   bg-default ring-default ring-opacity-30",
                 {
                   "ring-4": active,
-                  "bg-destructive ring-destructive": title === 'team' || title==="promotions",
-                  "bg-success ring-success": title === 'low' || title==="social",
-                  "bg-warning ring-warning": title === 'medium',
-                  "bg-primary ring-primary": title === 'high' || title==="buisness",
-                  "bg-info ring-info/30": title === 'update',
+                  "bg-destructive ring-destructive": title === "team" || title === "promotions",
+                  "bg-success ring-success": title === "low" || title === "social",
+                  "bg-warning ring-warning": title === "medium",
+                  "bg-primary ring-primary": title === "high" || title === "buisness",
+                  "bg-info ring-info/30": title === "update",
                 }
               )}
             ></span>
             {title}
           </Button>
-        )}
+        ))}
       </nav>
-    )
+    );
   }
   return (
-    <nav className=' space-y-1 px-5'>
-
-      {links.map(({ icon, title, active }, index) =>
-        <Button key={`link-${index}`} color='secondary' fullWidth className='hover:ring-0 hover:ring-transparent justify-start' variant={active ? 'default' : 'ghost'}>
-          <Icon
-            icon={icon}
-            className='me-2 h-5 w-5'
-          />
+    <nav className=" space-y-1 px-5">
+      {links.map(({ icon, title, active }, index) => (
+        <Button
+          key={`link-${index}`}
+          color="secondary"
+          fullWidth
+          className="hover:ring-0 hover:ring-transparent justify-start"
+          variant={active ? "default" : "ghost"}
+        >
+          <Icon icon={icon} className="me-2 h-5 w-5" />
 
           {title}
         </Button>
-      )}
+      ))}
     </nav>
-  )
-}
+  );
+};
 
-export default Nav
+export default Nav;
diff --git a/src/components/ui/structures/page-title.tsx b/src/components/ui/structures/page-title.tsx
index d8e7aa05..ca66b711 100644
--- a/src/components/ui/structures/page-title.tsx
+++ b/src/components/ui/structures/page-title.tsx
@@ -1,8 +1,14 @@
 "use client";
+
 import React, { useEffect, useState } from "react";
-import DateRangePicker from "@/components/ui/structures/date-range-picker";
 import { usePathname } from "@/i18n/navigation";
+
+import { tableauSignin, tableauViewImage } from "@/lib/services/tableau/tableau-service";
 import { cn, getCookiesDecrypt } from "@/lib/utils/utils";
+import pdfGenerator from "@/lib/utils/pdf-generator";
+import DateRangePicker from "@/components/ui/structures/date-range-picker";
+
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -10,23 +16,11 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
-import { Label } from "./ui/label";
-import { Input } from "./ui/input";
-import pdfGenerator from "@/lib/utils/video-player/pdf-generator";
-import {
-  tableauSignin,
-  tableauViewImage,
-} from "@/lib/services/tableau/tableau-service";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
-const PageTitle = ({
-  title,
-  className,
-}: {
-  title?: string;
-  className?: string;
-}) => {
+const PageTitle = ({ title, className }: { title?: string; className?: string }) => {
   const [reportDate, setReportDate] = useState<any>();
   const pathname = usePathname();
   const name = pathname?.split("/").slice(1).join(" ");
@@ -38,9 +32,10 @@ const PageTitle = ({
 
   const downloadReport = async () => {
     console.log(reportDate);
-    const formattedDate = `${reportDate.year}-${String(
-      reportDate.month
-    ).padStart(2, "0")}-${String(reportDate.day).padStart(2, "0")}`;
+    const formattedDate = `${reportDate.year}-${String(reportDate.month).padStart(
+      2,
+      "0"
+    )}-${String(reportDate.day).padStart(2, "0")}`;
 
     const resLogin = await tableauSignin();
     const token = resLogin?.data?.data?.credentials?.token;
@@ -126,34 +121,28 @@ const PageTitle = ({
     const blobInteractionContent = new Blob([resInteractionContent.data], {
       type: "image/png",
     });
-    const blobTotalInteractionContent = new Blob(
-      [resTotalInteractionContent.data],
-      { type: "image/png" }
-    );
-    const blobInteractionContentCategory1 = new Blob(
-      [resInteractionContentCategory1.data],
-      { type: "image/png" }
-    );
-    const blobInteractionContentCategory2 = new Blob(
-      [resInteractionContentCategory2.data],
-      { type: "image/png" }
-    );
-    const blobInteractionContentCategory3 = new Blob(
-      [resInteractionContentCategory3.data],
-      { type: "image/png" }
-    );
-    const blobInteractionDistribution = new Blob(
-      [resInteractionDistribution.data],
-      { type: "image/png" }
-    );
+    const blobTotalInteractionContent = new Blob([resTotalInteractionContent.data], {
+      type: "image/png",
+    });
+    const blobInteractionContentCategory1 = new Blob([resInteractionContentCategory1.data], {
+      type: "image/png",
+    });
+    const blobInteractionContentCategory2 = new Blob([resInteractionContentCategory2.data], {
+      type: "image/png",
+    });
+    const blobInteractionContentCategory3 = new Blob([resInteractionContentCategory3.data], {
+      type: "image/png",
+    });
+    const blobInteractionDistribution = new Blob([resInteractionDistribution.data], {
+      type: "image/png",
+    });
     const blobAssignments = new Blob([resAssignments.data], {
       type: "image/png",
     });
     const blobUserCount = new Blob([resUserCount.data], { type: "image/png" });
-    const blobUserCountDistribution = new Blob(
-      [resUserCountDistribution.data],
-      { type: "image/png" }
-    );
+    const blobUserCountDistribution = new Blob([resUserCountDistribution.data], {
+      type: "image/png",
+    });
     const blobBackCover = new Blob([resBackCover.data], { type: "image/png" });
 
     console.log(blobFrontCover);
@@ -226,15 +215,8 @@ const PageTitle = ({
   return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
     ""
   ) : (
-    <div
-      className={cn(
-        "flex flex-wrap gap-4 items-center justify-between",
-        className
-      )}
-    >
-      <div className="text-2xl font-medium text-default-800 capitalize">
-        Dashboard
-      </div>
+    <div className={cn("flex flex-wrap gap-4 items-center justify-between", className)}>
+      <div className="text-2xl font-medium text-default-800 capitalize">Dashboard</div>
       {/* <Dialog>
         <DialogTrigger asChild>
           <Button variant="outline">Download Report</Button>
diff --git a/src/components/ui/structures/revenue-bar-chart.tsx b/src/components/ui/structures/revenue-bar-chart.tsx
index dce15260..e56199ca 100644
--- a/src/components/ui/structures/revenue-bar-chart.tsx
+++ b/src/components/ui/structures/revenue-bar-chart.tsx
@@ -1,35 +1,38 @@
-"use client"
+"use client";
 
-import { useConfig } from "@/lib/hooks/use-config";
+import dynamic from "next/dynamic";
 import { useTranslations } from "next-intl";
 import { useTheme } from "next-themes";
-import dynamic from "next/dynamic";
+
+import { useConfig } from "@/lib/hooks/use-config";
+
 const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface RevenueBarChartProps {
   height?: number;
   chartType?: "bar" | "area";
   series?: any[];
-  chartColors?: string[]
+  chartColors?: string[];
 }
-const defaultSeries = [{
-  name: "Net Profit",
-  data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
-},
-{
-  name: "Revenue",
-  data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
-},
-{
-  name: "Free Cash Flow",
-  data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
-}]
+const defaultSeries = [
+  {
+    name: "Net Profit",
+    data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+  },
+  {
+    name: "Revenue",
+    data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+  },
+  {
+    name: "Free Cash Flow",
+    data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+  },
+];
 const RevenueBarChart = ({
   height = 400,
   chartType = "bar",
   series = defaultSeries,
-  chartColors = ["#4669FA", "#0CE7FA", "#FA916B"]
-
+  chartColors = ["#4669FA", "#0CE7FA", "#FA916B"],
 }: RevenueBarChartProps) => {
   const [config] = useConfig();
   const { isRtl } = config;
@@ -100,17 +103,7 @@ const RevenueBarChart = ({
       },
     },
     xaxis: {
-      categories: [
-        "Feb",
-        "Mar",
-        "Apr",
-        "May",
-        "Jun",
-        "Jul",
-        "Aug",
-        "Sep",
-        "Oct",
-      ],
+      categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
       labels: {
         style: {
           colors: mode === "dark" ? "#CBD5E1" : "#475569",
@@ -161,13 +154,7 @@ const RevenueBarChart = ({
     ],
   };
   return (
-    <Chart
-      options={options}
-      series={series}
-      type={chartType}
-      height={height}
-      width={"100%"}
-    />
+    <Chart options={options} series={series} type={chartType} height={height} width={"100%"} />
   );
 };
 
diff --git a/src/components/ui/structures/site-breadcrumb.tsx b/src/components/ui/structures/site-breadcrumb.tsx
index a098d4d4..23760ada 100644
--- a/src/components/ui/structures/site-breadcrumb.tsx
+++ b/src/components/ui/structures/site-breadcrumb.tsx
@@ -1,64 +1,58 @@
-'use client';
-import React from 'react'
+"use client";
+
+import React, { ReactNode } from "react";
 import { Link, usePathname, useRouter } from "@/i18n/navigation";
+
 import {
-    Breadcrumb,
-    BreadcrumbEllipsis,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    BreadcrumbList,
-    BreadcrumbPage,
-    BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import { Icon } from "@/components/ui/icon"
-import { ReactNode } from "react";
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Icon } from "@/components/ui/icon";
 
 const SiteBreadcrumb = ({ children }: { children?: ReactNode }) => {
-    const location = usePathname();
-    const locations = location.split('/').filter((path: any) => path)
+  const location = usePathname();
+  const locations = location.split("/").filter((path: any) => path);
 
+  return (
+    <div className="flex justify-between gap-3 items-center mb-6">
+      <div className="flex-1">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <Link href="/dashboard">
+                <Icon icon="heroicons:home" className=" h-5 w-5" />
+              </Link>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
 
-
-    return (
-        <div className="flex justify-between gap-3 items-center mb-6">
-            <div className="flex-1">
-                <Breadcrumb>
-                    <BreadcrumbList>
-
-                        <BreadcrumbItem
-                        >
-                            <Link href="/dashboard">
-                                <Icon icon="heroicons:home" className=" h-5 w-5" />
-                            </Link>
-
-                        </BreadcrumbItem>
-                        <BreadcrumbSeparator />
-
-                        {
-                            locations.map((link, index) => {
-                                let href = `/${locations.slice(0, index + 1).join('/')}`
-                                let itemLink = link
-                                const isLast = index === locations.length - 1;
-                                return (
-                                    <React.Fragment key={index}>
-                                        <BreadcrumbItem className=' capitalize'  >
-                                            {isLast ? (
-                                                itemLink?.replaceAll("-", " ")
-                                            ) : (
-                                                <Link href={href} >{itemLink?.replaceAll("-", "")}</Link>
-                                            )}
-                                        </BreadcrumbItem>
-                                        {locations.length !== index + 1 && <BreadcrumbSeparator />}
-                                    </React.Fragment>
-                                )
-                            })
-                        }
-                    </BreadcrumbList>
-                </Breadcrumb>
-            </div>
-            <div className=" flex-none flex  gap-2">{children}</div>
-        </div>
-    );
+            {locations.map((link, index) => {
+              let href = `/${locations.slice(0, index + 1).join("/")}`;
+              let itemLink = link;
+              const isLast = index === locations.length - 1;
+              return (
+                <React.Fragment key={index}>
+                  <BreadcrumbItem className=" capitalize">
+                    {isLast ? (
+                      itemLink?.replaceAll("-", " ")
+                    ) : (
+                      <Link href={href}>{itemLink?.replaceAll("-", "")}</Link>
+                    )}
+                  </BreadcrumbItem>
+                  {locations.length !== index + 1 && <BreadcrumbSeparator />}
+                </React.Fragment>
+              );
+            })}
+          </BreadcrumbList>
+        </Breadcrumb>
+      </div>
+      <div className=" flex-none flex  gap-2">{children}</div>
+    </div>
+  );
 };
 
-export default SiteBreadcrumb;
\ No newline at end of file
+export default SiteBreadcrumb;
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
index c222b01f..a7954abe 100644
--- a/src/components/ui/switch.tsx
+++ b/src/components/ui/switch.tsx
@@ -1,10 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-import { cn } from "@/lib/utils/utils"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cva, type VariantProps } from "class-variance-authority";
+
 import { color, size } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const switchVariants = cva(
   "peer relative  inline-flex items-center  [&_.content-box>svg]:h-3  [&_.content-box>svg]:w-3  [&_.content-box]:text-primary-foreground [&_.content-box]:text-[10px] justify-start group  flex-shrink-0  cursor-pointer rounded-full  transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-default-300",
@@ -35,44 +36,45 @@ const switchVariants = cva(
   }
 );
 
-interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
-  color?: color
-  size?:size
-  startContent?: React.ReactNode | string
-  endContent?: React.ReactNode | string
+interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
+    VariantProps<typeof switchVariants> {
+  color?: color;
+  size?: size;
+  startContent?: React.ReactNode | string;
+  endContent?: React.ReactNode | string;
 }
 
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  SwitchProps
->(({ color, size, startContent, endContent, className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(switchVariants({ color, size }), className)}
-    {...props}
-    ref={ref}
-  >
-    {startContent && (
-      <span className="absolute left-1  content-box   text-medium opacity-0 scale-50 transition-transform-opacity group-data-[state=checked]:scale-100 group-data-[state=checked]:opacity-100 ">
-        {startContent}
-      </span>
-    )}
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background data-[state=unchecked]:dark:bg-default-900 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[19px] data-[state=unchecked]:translate-x-[2px]",
-        {
-          "h-3.5 w-3.5 data-[state=checked]:translate-x-3.5 ": size === "sm",
-          "h-5 w-5 data-[state=checked]:translate-x-6 ": size === "md",
-          "h-5 w-5 data-[state=checked]:translate-x-[25px] ": size === "lg",
-        }
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+  ({ color, size, startContent, endContent, className, ...props }, ref) => (
+    <SwitchPrimitives.Root
+      className={cn(switchVariants({ color, size }), className)}
+      {...props}
+      ref={ref}
+    >
+      {startContent && (
+        <span className="absolute left-1  content-box   text-medium opacity-0 scale-50 transition-transform-opacity group-data-[state=checked]:scale-100 group-data-[state=checked]:opacity-100 ">
+          {startContent}
+        </span>
       )}
-    />
-    {endContent && (
-      <span className="z-0  content-box   absolute right-1  text-medium opacity-100 transition-transform-opacity group-data-[state=checked]:translate-x-3 group-data-[state=checked]:opacity-0  ">
-        {endContent}
-      </span>
-    )}
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName
+      <SwitchPrimitives.Thumb
+        className={cn(
+          "pointer-events-none block h-4 w-4 rounded-full bg-background data-[state=unchecked]:dark:bg-default-900 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[19px] data-[state=unchecked]:translate-x-[2px]",
+          {
+            "h-3.5 w-3.5 data-[state=checked]:translate-x-3.5 ": size === "sm",
+            "h-5 w-5 data-[state=checked]:translate-x-6 ": size === "md",
+            "h-5 w-5 data-[state=checked]:translate-x-[25px] ": size === "lg",
+          }
+        )}
+      />
+      {endContent && (
+        <span className="z-0  content-box   absolute right-1  text-medium opacity-100 transition-transform-opacity group-data-[state=checked]:translate-x-3 group-data-[state=checked]:opacity-0  ">
+          {endContent}
+        </span>
+      )}
+    </SwitchPrimitives.Root>
+  )
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 5a3a122c..d04cfb35 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,40 +1,31 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b [&_tr]:border-t", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -42,29 +33,25 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b border-default-100 dark:border-default-300 transition-colors  data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b border-default-100 dark:border-default-300 transition-colors  data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -78,8 +65,8 @@ const TableHead = React.forwardRef<
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -87,31 +74,21 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("px-6 h-14 text-default-600 text-sm font-normal capitalize  align-middle [&:has([role=checkbox])]:pe-0", className)}
+    className={cn(
+      "px-6 h-14 text-default-600 text-sm font-normal capitalize  align-middle [&:has([role=checkbox])]:pe-0",
+      className
+    )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
   React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
 
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 39f7943a..f3c337ca 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -13,14 +13,11 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(
-      "flex gap-5 flex-wrap items-center rounded-md  p-1 ",
-      className
-    )}
+    className={cn("flex gap-5 flex-wrap items-center rounded-md  p-1 ", className)}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -33,14 +30,14 @@ const TabsTrigger = React.forwardRef<
       className
     )}
     onClick={(e) => {
-        if (onClick) {
-            onClick()
-        }
+      if (onClick) {
+        onClick();
+      }
     }}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -54,7 +51,7 @@ const TabsContent = React.forwardRef<
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index c8c772d8..0f686fe8 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,9 +1,8 @@
 import * as React from "react";
-
-import { cn } from "@/lib/utils/utils"
-
 import { cva, type VariantProps } from "class-variance-authority";
+
 import { InputColor, radius } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 export const textareaVariants = cva(
   "flex flex-1 bg-background w-full min-h-[80px] rounded-md border border-solid   px-3 py-[10px] text-sm  file:border-0 file:bg-transparent file:text-sm file:font-medium  read-only:bg-background read-only:text-default-500 disabled:cursor-not-allowed disabled:opacity-50  transition duration-300 ",
@@ -24,7 +23,6 @@ export const textareaVariants = cva(
         destructive:
           "border-destructive/50 text-destructive focus:outline-none focus:border-destructive-700 disabled:bg-destructive/30 disabled:placeholder:text-destructive  placeholder:text-destructive/70",
       },
-
     },
 
     defaultVariants: {
@@ -35,22 +33,15 @@ export const textareaVariants = cva(
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  VariantProps<typeof textareaVariants> {
-  color?: InputColor
+    VariantProps<typeof textareaVariants> {
+  color?: InputColor;
 }
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, color,  defaultValue, ...props }, ref) => {
+  ({ className, color, defaultValue, ...props }, ref) => {
     return (
       <div className="flex-1 w-full">
-        <textarea
-          className={cn(
-            textareaVariants({ color }),
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
+        <textarea className={cn(textareaVariants({ color }), className)} ref={ref} {...props}>
           {defaultValue}
         </textarea>
       </div>
@@ -60,4 +51,3 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 Textarea.displayName = "Textarea";
 
 export { Textarea };
-
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 99146f70..7fdb54f7 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -21,8 +21,8 @@ const ToastViewport = React.forwardRef<
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
@@ -38,12 +38,11 @@ const toastVariants = cva(
       variant: "default",
     },
   }
-)
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
@@ -51,9 +50,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -67,8 +66,8 @@ const ToastAction = React.forwardRef<
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -85,20 +84,16 @@ const ToastClose = React.forwardRef<
   >
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold", className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -109,12 +104,12 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
   type ToastProps,
@@ -126,4 +121,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-}
+};
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
index e2233852..3aa665d1 100644
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   Toast,
@@ -7,11 +7,11 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
+} from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
@@ -20,16 +20,14 @@ export function Toaster() {
           <Toast key={id} {...props}>
             <div className="grid gap-1">
               {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
+              {description && <ToastDescription>{description}</ToastDescription>}
             </div>
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/src/components/ui/toggle-group.tsx b/src/components/ui/toggle-group.tsx
index 3a933122..5eba1716 100644
--- a/src/components/ui/toggle-group.tsx
+++ b/src/components/ui/toggle-group.tsx
@@ -1,18 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils/utils"
-import { toggleVariants } from "@/components/ui/toggle"
+import { cn } from "@/lib/utils/utils";
+import { toggleVariants } from "@/components/ui/toggle";
 
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
   size: "default",
   variant: "default",
-})
+});
 
 const ToggleGroup = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -24,20 +22,18 @@ const ToggleGroup = React.forwardRef<
     className={cn("flex items-center justify-center gap-1", className)}
     {...props}
   >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
-))
+));
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
 const ToggleGroupItem = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
     VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
+  const context = React.useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -53,9 +49,9 @@ const ToggleGroupItem = React.forwardRef<
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  )
-})
+  );
+});
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
index 53c83eaf..c8393cce 100644
--- a/src/components/ui/toggle.tsx
+++ b/src/components/ui/toggle.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils/utils"
+import { cn } from "@/lib/utils/utils";
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-secondary data-[state=on]:text-accent-foreground",
@@ -12,7 +12,8 @@ const toggleVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input dark:border-default-300 bg-transparent hover:bg-accent hover:text-accent-foreground",
+        outline:
+          "border border-input dark:border-default-300 bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
         default: "h-10 px-3",
@@ -25,20 +26,19 @@ const toggleVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
   <TogglePrimitive.Root
     ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
   />
-))
+));
 
-Toggle.displayName = TogglePrimitive.Root.displayName
+Toggle.displayName = TogglePrimitive.Root.displayName;
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index c98f9831..3186df1f 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "@/lib/utils/utils"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva, type VariantProps } from "class-variance-authority";
+
 import { color } from "@/lib/type";
+import { cn } from "@/lib/utils/utils";
 
 const tooltipVariants = cva(
   "z-50 overflow-hidden  rounded-md  px-3 py-1.5 text-sm  shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ",
@@ -27,46 +27,36 @@ const tooltipVariants = cva(
   }
 );
 
-interface ToolTipProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipVariants> {
-  color?: color
+interface ToolTipProps
+  extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+    VariantProps<typeof tooltipVariants> {
+  color?: color;
 }
-const Tooltip = TooltipPrimitive.Root
-const TooltipTrigger = TooltipPrimitive.Trigger
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipArrow = TooltipPrimitive.Arrow;
 
 const TooltipProvider = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Provider>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>
->(
-  ({ delayDuration = 0, ...props }, ref) => (
-    <TooltipPrimitive.Provider
-
-      {...props}
-      delayDuration={delayDuration}
-    />
-  )
-);
+>(({ delayDuration = 0, ...props }, ref) => (
+  <TooltipPrimitive.Provider {...props} delayDuration={delayDuration} />
+));
 TooltipProvider.displayName = TooltipPrimitive.Provider.displayName;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   ToolTipProps
->(
-  ({ className, sideOffset = 4, color, children, ...props }, ref) => (
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(tooltipVariants({ color }), className, {})}
-      {...props}
-    >
-      {children}
-    </TooltipPrimitive.Content>
-  )
-);
+>(({ className, sideOffset = 4, color, children, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(tooltipVariants({ color }), className, {})}
+    {...props}
+  >
+    {children}
+  </TooltipPrimitive.Content>
+));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow }
-
-
-
-
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow };
diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts
index 02e111d8..f6de74b7 100644
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -1,78 +1,75 @@
-"use client"
+"use client";
 
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
 
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
 
-let count = 0
+let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
 
 interface State {
-  toasts: ToasterToast[]
+  toasts: ToasterToast[];
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return
+    return;
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+    toastTimeouts.delete(toastId);
     dispatch({
       type: "REMOVE_TOAST",
       toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
+    });
+  }, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout)
-}
+  toastTimeouts.set(toastId, timeout);
+};
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -80,27 +77,25 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+      };
 
     case "UPDATE_TOAST":
       return {
         ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
 
     case "DISMISS_TOAST": {
-      const { toastId } = action
+      const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId)
+        addToRemoveQueue(toastId);
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+          addToRemoveQueue(toast.id);
+        });
       }
 
       return {
@@ -113,44 +108,44 @@ export const reducer = (state: State, action: Action): State => {
               }
             : t
         ),
-      }
+      };
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        }
+        };
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+      };
   }
-}
+};
 
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
 
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+  memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState)
-  })
+    listener(memoryState);
+  });
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
-  const id = genId()
+  const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
       toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
     type: "ADD_TOAST",
@@ -159,36 +154,36 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss()
+        if (!open) dismiss();
       },
     },
-  })
+  });
 
   return {
     id: id,
     dismiss,
     update,
-  }
+  };
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
-  }, [state])
+    };
+  }, [state]);
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+  };
 }
 
-export { useToast, toast }
+export { useToast, toast };
diff --git a/src/components/ui/view-source/view-source.tsx b/src/components/ui/view-source/view-source.tsx
index 14838de1..126821b7 100644
--- a/src/components/ui/view-source/view-source.tsx
+++ b/src/components/ui/view-source/view-source.tsx
@@ -5,10 +5,23 @@ type ViewSourceProps = {
 };
 
 const ViewSource = ({ pathname }: ViewSourceProps) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#151513" className={styles.svg}>
-    <a title="View Source" href={`https://github.com/vercel/next.js/blob/canary/examples/image-component/${pathname}`}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="80"
+    viewBox="0 0 250 250"
+    fill="#151513"
+    className={styles.svg}
+  >
+    <a
+      title="View Source"
+      href={`https://github.com/vercel/next.js/blob/canary/examples/image-component/${pathname}`}
+    >
       <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
-      <path className={styles.arm} d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" />
+      <path
+        className={styles.arm}
+        d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+      />
       <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
     </a>
   </svg>
diff --git a/src/config/fonts.ts b/src/config/fonts.ts
new file mode 100644
index 00000000..1d968d7c
--- /dev/null
+++ b/src/config/fonts.ts
@@ -0,0 +1,8 @@
+import { DM_Sans } from "next/font/google";
+
+export const dmSans = DM_Sans({
+  subsets: ["latin"],
+  variable: "--font-dm-sans",
+  display: "swap",
+  adjustFontFallback: false,
+}); 
\ No newline at end of file
diff --git a/src/config/locales.ts b/src/config/locales.ts
index 989f2d56..fcd03890 100644
--- a/src/config/locales.ts
+++ b/src/config/locales.ts
@@ -1,4 +1,4 @@
-export const locales = ['in', 'en'] as const;
+export const locales = ["in", "en"] as const;
 export type Locale = (typeof locales)[number];
 
-export const defaultLocale = 'in' as const; 
\ No newline at end of file
+export const defaultLocale = "in" as const;
diff --git a/src/config/site.ts b/src/config/site.ts
index 93a5840d..7cd75e0d 100644
--- a/src/config/site.ts
+++ b/src/config/site.ts
@@ -1,13 +1,14 @@
 export const siteConfig = {
   name: "DashCode",
   url: "https://themeforest.net/item/dashcode-admin-dashboard-template/42600453",
-  ogImage: "https://themeforest.img.customer.envatousercontent.com/files/489597052/01_Preview%20Image.__large_preview.png?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=cb5220f47f686ada2ec8a93545fb62c1",
+  ogImage:
+    "https://themeforest.img.customer.envatousercontent.com/files/489597052/01_Preview%20Image.__large_preview.png?auto=compress%2Cformat&q=80&fit=crop&crop=top&max-h=8000&max-w=590&s=cb5220f47f686ada2ec8a93545fb62c1",
   description:
     "DashCode presents you with the most powerful, simplest, and fastest developer-friendly and highly customizable React, Vue 3, and Tailwind templates to build web UI for your app.",
   links: {
     twitter: "#",
     github: "#",
   },
-}
+};
 
-export type SiteConfig = typeof siteConfig
\ No newline at end of file
+export type SiteConfig = typeof siteConfig;
diff --git a/src/i18n/navigation.ts b/src/i18n/navigation.ts
index 9d67c950..24221c6d 100644
--- a/src/i18n/navigation.ts
+++ b/src/i18n/navigation.ts
@@ -1,5 +1,5 @@
-import {createNavigation} from 'next-intl/navigation';
-import {routing} from './routing';
+import { createNavigation } from "next-intl/navigation";
 
-export const {Link, getPathname, redirect, usePathname, useRouter} =
-  createNavigation(routing);
+import { routing } from "./routing";
+
+export const { Link, getPathname, redirect, usePathname, useRouter } = createNavigation(routing);
diff --git a/src/i18n/request.ts b/src/i18n/request.ts
index eb44324b..1a9231c3 100644
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -1,16 +1,15 @@
-import { hasLocale } from 'next-intl';
-import { getRequestConfig } from 'next-intl/server';
-import { routing } from './routing';
+import { hasLocale } from "next-intl";
+import { getRequestConfig } from "next-intl/server";
 
-export default getRequestConfig(async ({requestLocale}) => {
+import { routing } from "./routing";
+
+export default getRequestConfig(async ({ requestLocale }) => {
   // Typically corresponds to the `[locale]` segment
   const requested = await requestLocale;
-  const locale = hasLocale(routing.locales, requested)
-    ? requested
-    : routing.defaultLocale;
+  const locale = hasLocale(routing.locales, requested) ? requested : routing.defaultLocale;
 
   return {
     locale,
-    messages: (await import(`./messages/${locale}.json`)).default
+    messages: (await import(`./messages/${locale}.json`)).default,
   };
 });
diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts
index 4d5a9214..07b4ac5c 100644
--- a/src/i18n/routing.ts
+++ b/src/i18n/routing.ts
@@ -1,9 +1,9 @@
-import {defineRouting} from 'next-intl/routing';
+import { defineRouting } from "next-intl/routing";
 
 export const routing = defineRouting({
-  locales: ['in', 'en'],
-  defaultLocale: 'in',
+  locales: ["in", "en"],
+  defaultLocale: "in",
   pathnames: {
-    '/': '/',
-  }
+    "/": "/",
+  },
 });
diff --git a/src/lib/hooks/use-chat.ts b/src/lib/hooks/use-chat.ts
index 0c4ae30b..a26f57bf 100644
--- a/src/lib/hooks/use-chat.ts
+++ b/src/lib/hooks/use-chat.ts
@@ -1,4 +1,3 @@
-
 import { atom, useAtom } from "jotai";
 
 export type ChatConfig = {
diff --git a/src/lib/hooks/use-config.ts b/src/lib/hooks/use-config.ts
index 9eeb3754..56370d55 100644
--- a/src/lib/hooks/use-config.ts
+++ b/src/lib/hooks/use-config.ts
@@ -1,57 +1,53 @@
-import { useAtom } from "jotai"
-import { atomWithStorage } from "jotai/utils"
-import { layoutType, sidebarType, navBarType} from "@/lib/type"
-
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 
+import { layoutType, navBarType, sidebarType } from "@/lib/type";
 
 export type Config = {
-  collapsed: boolean
-  theme: string
-  skin: 'default' | 'bordered'
-  layout: layoutType
-  sidebar: sidebarType
-  menuHidden: boolean,
-  showSearchBar: boolean,
-  showSwitcher: boolean
-  topHeader: 'default' | 'links'
-  contentWidth: 'wide' | 'boxed'
-  navbar: navBarType
-  footer: 'sticky' | 'default' | 'hidden'
-  isRtl: boolean
-  subMenu: boolean
-  hasSubMenu: boolean
-  sidebarTheme: string,
-  headerTheme: string,
-  sidebarBgImage?: string
-  radius: number
-
-}
+  collapsed: boolean;
+  theme: string;
+  skin: "default" | "bordered";
+  layout: layoutType;
+  sidebar: sidebarType;
+  menuHidden: boolean;
+  showSearchBar: boolean;
+  showSwitcher: boolean;
+  topHeader: "default" | "links";
+  contentWidth: "wide" | "boxed";
+  navbar: navBarType;
+  footer: "sticky" | "default" | "hidden";
+  isRtl: boolean;
+  subMenu: boolean;
+  hasSubMenu: boolean;
+  sidebarTheme: string;
+  headerTheme: string;
+  sidebarBgImage?: string;
+  radius: number;
+};
 export const defaultConfig: Config = {
   collapsed: false,
   theme: "zinc",
-  skin: 'default',
+  skin: "default",
   layout: "vertical",
-  sidebar: 'classic',
+  sidebar: "classic",
   menuHidden: false,
   showSearchBar: true,
-  topHeader: 'default',
-  contentWidth: 'wide',
-  navbar: 'sticky',
-  footer: 'default',
+  topHeader: "default",
+  contentWidth: "wide",
+  navbar: "sticky",
+  footer: "default",
   isRtl: false,
   showSwitcher: true,
   subMenu: false,
   hasSubMenu: false,
-  sidebarTheme: 'dark',
-  headerTheme: 'light',
+  sidebarTheme: "dark",
+  headerTheme: "light",
   sidebarBgImage: undefined,
   radius: 0.5,
-}
+};
 
-
-const configAtom = atomWithStorage<Config>("config", defaultConfig)
+const configAtom = atomWithStorage<Config>("config", defaultConfig);
 
 export function useConfig() {
-  
-  return useAtom(configAtom)
+  return useAtom(configAtom);
 }
diff --git a/src/lib/hooks/use-media-query.ts b/src/lib/hooks/use-media-query.ts
index 95e552cd..7ac3915a 100644
--- a/src/lib/hooks/use-media-query.ts
+++ b/src/lib/hooks/use-media-query.ts
@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from "react";
 
 export function useMediaQuery(query: string) {
-  const [value, setValue] = React.useState(false)
+  const [value, setValue] = React.useState(false);
 
   React.useEffect(() => {
     function onChange(event: MediaQueryListEvent) {
-      setValue(event.matches)
+      setValue(event.matches);
     }
 
-    const result = matchMedia(query)
-    result.addEventListener("change", onChange)
-    setValue(result.matches)
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
 
-    return () => result.removeEventListener("change", onChange)
-  }, [query])
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
 
-  return value
+  return value;
 }
diff --git a/src/lib/hooks/use-menu-hover.ts b/src/lib/hooks/use-menu-hover.ts
index 9d971fa9..095c3afd 100644
--- a/src/lib/hooks/use-menu-hover.ts
+++ b/src/lib/hooks/use-menu-hover.ts
@@ -1,14 +1,11 @@
-
 import { atom, useAtom } from "jotai";
 
 export type hoverConfig = {
   hovered: boolean;
-  
 };
 
 const menuHoverConfigAtom = atom<hoverConfig>({
   hovered: false,
-  
 });
 
 export function useMenuHoverConfig() {
diff --git a/src/lib/hooks/use-mobile-menu.ts b/src/lib/hooks/use-mobile-menu.ts
index 2162a3a2..dcd02cd7 100644
--- a/src/lib/hooks/use-mobile-menu.ts
+++ b/src/lib/hooks/use-mobile-menu.ts
@@ -1,4 +1,3 @@
-
 import { atom, useAtom } from "jotai";
 
 export type MobileMenuConfig = {
@@ -11,4 +10,4 @@ const mobileMenuConfig = atom<MobileMenuConfig>({
 
 export function useMobileMenuConfig() {
   return useAtom(mobileMenuConfig);
-}
\ No newline at end of file
+}
diff --git a/src/lib/hooks/use-mounted.ts b/src/lib/hooks/use-mounted.ts
index 3a20c62a..57bb851e 100644
--- a/src/lib/hooks/use-mounted.ts
+++ b/src/lib/hooks/use-mounted.ts
@@ -1,11 +1,11 @@
-import * as React from "react"
+import * as React from "react";
 
 export function useMounted() {
-  const [mounted, setMounted] = React.useState(false)
+  const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
-  return mounted
+  return mounted;
 }
diff --git a/src/lib/hooks/use-mutation-observer.ts b/src/lib/hooks/use-mutation-observer.ts
index ad9b7ec7..757e6620 100644
--- a/src/lib/hooks/use-mutation-observer.ts
+++ b/src/lib/hooks/use-mutation-observer.ts
@@ -1,4 +1,4 @@
-import * as React from "react"
+import * as React from "react";
 
 export const useMutationObserver = (
   ref: React.MutableRefObject<HTMLElement | null>,
@@ -12,9 +12,9 @@ export const useMutationObserver = (
 ) => {
   React.useEffect(() => {
     if (ref.current) {
-      const observer = new MutationObserver(callback)
-      observer.observe(ref.current, options)
-      return () => observer.disconnect()
+      const observer = new MutationObserver(callback);
+      observer.observe(ref.current, options);
+      return () => observer.disconnect();
     }
-  }, [ref, callback, options])
-}
+  }, [ref, callback, options]);
+};
diff --git a/src/lib/hooks/use-todo.ts b/src/lib/hooks/use-todo.ts
index 4d831430..8dfc87f4 100644
--- a/src/lib/hooks/use-todo.ts
+++ b/src/lib/hooks/use-todo.ts
@@ -1,16 +1,14 @@
-import { useAtom } from "jotai"
-import { atomWithStorage } from "jotai/utils"
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 
 export type TodoConfig = {
-  isOpen: boolean
-}
+  isOpen: boolean;
+};
 
 const todoConfigAtom = atomWithStorage<TodoConfig>("todoConfig", {
   isOpen: false,
- 
-})
+});
 
 export function useTodoConfig() {
-  
-  return useAtom(todoConfigAtom)
+  return useAtom(todoConfigAtom);
 }
diff --git a/src/lib/services/auth.ts b/src/lib/services/auth.ts
index ac094adb..ba7c0b1b 100644
--- a/src/lib/services/auth.ts
+++ b/src/lib/services/auth.ts
@@ -1,4 +1,5 @@
 import qs from "qs";
+
 import { getAPIDummy } from "./http-config/axiosCustom";
 import { httpGet, httpPost } from "./http-config/http-base-service";
 import {
diff --git a/src/lib/services/communication/communication.ts b/src/lib/services/communication/communication.ts
index 7ecfd5cb..4526cf84 100644
--- a/src/lib/services/communication/communication.ts
+++ b/src/lib/services/communication/communication.ts
@@ -1,9 +1,10 @@
+import { title } from "process";
+
 import {
   httpDeleteInterceptor,
   httpGetInterceptor,
   httpPostInterceptor,
 } from "../http-config/http-interceptor-service";
-import { title } from "process";
 
 export async function listTicketingInternal(
   page: number,
@@ -99,10 +100,7 @@ export async function getTicketCollaborationTeams(id: string | number) {
   return httpGetInterceptor(url);
 }
 
-export async function saveCollaborationTeams(
-  id: string | number,
-  userId: string | number
-) {
+export async function saveCollaborationTeams(id: string | number, userId: string | number) {
   const url = `ticketing/collaboration/teams?ticketId=${id}&userId=${userId}`;
   return httpPostInterceptor(url);
 }
diff --git a/src/lib/services/communication/report-account.ts b/src/lib/services/communication/report-account.ts
index 134cbd55..23c162a1 100644
--- a/src/lib/services/communication/report-account.ts
+++ b/src/lib/services/communication/report-account.ts
@@ -1,10 +1,6 @@
 import { httpGetInterceptor } from "../http-config/http-interceptor-service";
 
-export async function getUserReportsPagination(
-  page: any,
-  size: any,
-  title: string = ""
-) {
+export async function getUserReportsPagination(page: any, size: any, title: string = "") {
   return await httpGetInterceptor(
     `users/reports/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&sortBy=createdAt&sort=desc`
   );
diff --git a/src/lib/services/content/ai.ts b/src/lib/services/content/ai.ts
index 28a4f055..757efdc5 100644
--- a/src/lib/services/content/ai.ts
+++ b/src/lib/services/content/ai.ts
@@ -4,8 +4,7 @@ import { httpGet, httpPost } from "../http-config/nulisAIApi";
 export async function generateDataArticle(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/save-article", headers, data);
 }
@@ -13,8 +12,7 @@ export async function generateDataArticle(data: any) {
 export async function getGenerateTitle(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/generate-title", headers, data);
 }
@@ -22,8 +20,7 @@ export async function getGenerateTitle(data: any) {
 export async function getGenerateKeywords(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/generate-keywords", headers, data);
 }
@@ -31,8 +28,7 @@ export async function getGenerateKeywords(data: any) {
 export async function getDetailArticle(id: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpGet(`ai-writer/article/findArticleById/${id}`, headers);
 }
@@ -40,8 +36,7 @@ export async function getDetailArticle(id: any) {
 export async function getSeoScore(id: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpGet(`ai-writer/article/checkSEOScore/${id}`, headers);
 }
@@ -49,8 +44,7 @@ export async function getSeoScore(id: any) {
 export async function updateManualArticle(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/update-article", headers, data);
 }
@@ -58,8 +52,7 @@ export async function updateManualArticle(data: any) {
 export async function getGenerateTopicKeywords(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/generate-topic-keywords", headers, data);
 }
@@ -67,8 +60,7 @@ export async function getGenerateTopicKeywords(data: any) {
 export async function saveBulkArticle(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/save-bulk-article", headers, data);
 }
@@ -76,8 +68,7 @@ export async function saveBulkArticle(data: any) {
 export async function getGenerateRewriter(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/create-rewriter", headers, data);
 }
@@ -85,8 +76,7 @@ export async function getGenerateRewriter(data: any) {
 export async function generateSpeechToText(data: any) {
   const headers = {
     "content-type": "multipart/form-data",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/speech-to-text", headers, data);
 }
@@ -94,8 +84,7 @@ export async function generateSpeechToText(data: any) {
 export async function generateDataBulkArticle(data: any) {
   const headers = {
     "content-type": "application/json",
-    Authorization:
-      "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
+    Authorization: "Basic bmdETFBQaW9ycGx6bncyalRxVmUzWUZDejV4cUtmVUo6UHJEaERXUmNvdkJSNlc1Sg==",
   };
   return await httpPost("ai-writer/save-bulk-article", headers, data);
 }
@@ -109,5 +98,3 @@ export async function detailMediaNulis(id: any) {
   const url = `media/nulis-ai?id=${id}`;
   return httpGetInterceptor({ url });
 }
-
-
diff --git a/src/lib/services/content/content.ts b/src/lib/services/content/content.ts
index 257c24f1..23a9562d 100644
--- a/src/lib/services/content/content.ts
+++ b/src/lib/services/content/content.ts
@@ -145,9 +145,7 @@ export async function listNulisAI(limit: any, page: any, title: string = "") {
 }
 
 export async function getTagsBySubCategoryId(subCategory: any) {
-  return await httpGetInterceptor(
-    `media/tags/list?subCategoryId=${subCategory}`
-  );
+  return await httpGetInterceptor(`media/tags/list?subCategoryId=${subCategory}`);
 }
 
 export async function listEnableCategory(type: any) {
@@ -233,4 +231,4 @@ export async function postActivityLog(data: any) {
     "content-type": "application/json",
   };
   return httpPost(url, headers, data);
-}
\ No newline at end of file
+}
diff --git a/src/lib/services/contest/contest.ts b/src/lib/services/contest/contest.ts
index 9c9c2aeb..9790fea3 100644
--- a/src/lib/services/contest/contest.ts
+++ b/src/lib/services/contest/contest.ts
@@ -1,7 +1,4 @@
-import {
-  httpGetInterceptor,
-  httpPostInterceptor,
-} from "../http-config/http-interceptor-service";
+import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
 
 export async function listContest(title: string = "", size: any, page: number) {
   return await httpGetInterceptor(
diff --git a/src/lib/services/detail/detail.ts b/src/lib/services/detail/detail.ts
index 7d3db8e3..438f350e 100644
--- a/src/lib/services/detail/detail.ts
+++ b/src/lib/services/detail/detail.ts
@@ -1,4 +1,8 @@
-import { httpDeleteInterceptor, httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
+import {
+  httpDeleteInterceptor,
+  httpGetInterceptor,
+  httpPostInterceptor,
+} from "../http-config/http-interceptor-service";
 
 export async function getDetail(id: any, state: any) {
   const url = `media/public?slug=${id}&state=${state}`;
diff --git a/src/lib/services/http-config/axios-interceptor-instance.ts b/src/lib/services/http-config/axios-interceptor-instance.ts
index a3522e81..61875b9c 100644
--- a/src/lib/services/http-config/axios-interceptor-instance.ts
+++ b/src/lib/services/http-config/axios-interceptor-instance.ts
@@ -1,5 +1,6 @@
 import axios from "axios";
 import Cookies from "js-cookie";
+
 import { getCsrfToken, login } from "../auth";
 
 const baseURL = "https://netidhub.com/api/";
@@ -19,8 +20,7 @@ axiosInterceptorInstance.interceptors.request.use(
   (config) => {
     const accessToken = Cookies.get("access_token");
     if (accessToken) {
-      if (config.headers)
-        config.headers.Authorization = "Bearer " + accessToken;
+      if (config.headers) config.headers.Authorization = "Bearer " + accessToken;
     }
     return config;
   },
diff --git a/src/lib/services/http-config/http-base-service.ts b/src/lib/services/http-config/http-base-service.ts
index 3290e120..d151867f 100644
--- a/src/lib/services/http-config/http-base-service.ts
+++ b/src/lib/services/http-config/http-base-service.ts
@@ -1,8 +1,9 @@
-import axiosBaseInstance from "./axios-base-instance";
 import axios from "axios";
 import Cookies from "js-cookie";
 import qs from "qs";
+
 import { getCsrfToken } from "../auth";
+import axiosBaseInstance from "./axios-base-instance";
 
 export async function httpPost(pathUrl: any, headers: any, data?: any) {
   const resCsrf = await getCsrfToken();
@@ -17,34 +18,11 @@ export async function httpPost(pathUrl: any, headers: any, data?: any) {
     ...defaultHeaders,
     ...headers,
     ...(csrfToken ? { "X-XSRF-TOKEN": csrfToken } : {}),
-    ...(authToken ? { "Authorization" : `Bearer ${authToken}`} : {}),
+    ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
   };
-  
-  const response = await axiosBaseInstance
-        .post(pathUrl, data, { headers: mergedHeaders })
-        .catch(function (error: any) {
-            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 httpGet(pathUrl: any, headers: any) {
   const response = await axiosBaseInstance
-    .get(pathUrl, { headers })
+    .post(pathUrl, data, { headers: mergedHeaders })
     .catch(function (error: any) {
       console.log(error);
       return error.response;
@@ -65,6 +43,27 @@ export async function httpGet(pathUrl: any, headers: any) {
   }
 }
 
+export async function httpGet(pathUrl: any, headers: any) {
+  const response = await axiosBaseInstance.get(pathUrl, { headers }).catch(function (error: any) {
+    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 httpPut(pathUrl: any, headers: any, data?: any) {
   const resCsrf = await getCsrfToken();
   const csrfToken = resCsrf?.data?.token;
@@ -72,7 +71,7 @@ export async function httpPut(pathUrl: any, headers: any, data?: any) {
   const defaultHeaders = {
     "Content-Type": "application/json",
   };
-  
+
   const mergedHeaders = {
     ...defaultHeaders,
     ...headers,
diff --git a/src/lib/services/http-config/http-interceptor-prod-service.ts b/src/lib/services/http-config/http-interceptor-prod-service.ts
index 68b09b47..9f01fe0d 100644
--- a/src/lib/services/http-config/http-interceptor-prod-service.ts
+++ b/src/lib/services/http-config/http-interceptor-prod-service.ts
@@ -1,13 +1,12 @@
 import { useRouter } from "next/navigation";
 import Cookies from "js-cookie";
+
 import { getCsrfToken } from "../auth";
 import axiosBaseProdInstance from "./axios-base-prod-instance";
 
 export async function httpGetInterceptor(pathUrl: any) {
   const pathname = window.location.pathname;
-  const response = await axiosBaseProdInstance
-    .get(pathUrl)
-    .catch((error) => error.response);
+  const response = await axiosBaseProdInstance.get(pathUrl).catch((error) => error.response);
   console.log("Response interceptor : ", response);
   if (response?.status == 200 || response?.status == 201) {
     return {
@@ -35,11 +34,7 @@ export async function httpGetInterceptor(pathUrl: any) {
   }
 }
 
-export async function httpPostInterceptor(
-  pathUrl: any,
-  data?: any,
-  headers?: any
-) {
+export async function httpPostInterceptor(pathUrl: any, data?: any, headers?: any) {
   const resCsrf = await getCsrfToken();
 
   const defaultHeaders = {
@@ -74,11 +69,7 @@ export async function httpPostInterceptor(
   }
 }
 
-export async function httpPutInterceptor(
-  pathUrl: any,
-  data: any,
-  headers?: any
-) {
+export async function httpPutInterceptor(pathUrl: any, data: any, headers?: any) {
   const resCsrf = await getCsrfToken();
   const csrfToken = resCsrf?.data?.token;
 
diff --git a/src/lib/services/http-config/http-interceptor-service.ts b/src/lib/services/http-config/http-interceptor-service.ts
index 1df7c16d..91e9b849 100644
--- a/src/lib/services/http-config/http-interceptor-service.ts
+++ b/src/lib/services/http-config/http-interceptor-service.ts
@@ -1,14 +1,13 @@
 import { useRouter } from "next/navigation";
-import axiosInterceptorInstance from "./axios-interceptor-instance";
 import Cookies from "js-cookie";
+
 import { getCsrfToken } from "../auth";
 import axiosBaseInstance from "./axios-base-instance";
+import axiosInterceptorInstance from "./axios-interceptor-instance";
 import axiosInstanceJson from "./axiosInstanceJson";
 
 export async function httpGetInterceptorForMetadata(pathUrl: any) {
-  const response = await axiosInterceptorInstance
-    .get(pathUrl)
-    .catch((error) => error.response);
+  const response = await axiosInterceptorInstance.get(pathUrl).catch((error) => error.response);
   console.log("Response interceptor : ", response);
   if (response?.status == 200 || response?.status == 201) {
     return {
@@ -31,9 +30,7 @@ export async function httpGetInterceptorForMetadata(pathUrl: any) {
 
 export async function httpGetInterceptor(pathUrl: any) {
   const pathname = window?.location.pathname;
-  const response = await axiosInterceptorInstance
-    .get(pathUrl)
-    .catch((error) => error.response);
+  const response = await axiosInterceptorInstance.get(pathUrl).catch((error) => error.response);
   console.log("Response interceptor : ", response);
   if (response?.status == 200 || response?.status == 201) {
     return {
@@ -61,11 +58,7 @@ export async function httpGetInterceptor(pathUrl: any) {
   }
 }
 
-export async function httpPostInterceptor(
-  pathUrl: any,
-  data?: any,
-  headers?: any
-) {
+export async function httpPostInterceptor(pathUrl: any, data?: any, headers?: any) {
   const resCsrf = await getCsrfToken();
   const csrfToken = resCsrf?.data?.token;
 
@@ -102,11 +95,7 @@ export async function httpPostInterceptor(
   }
 }
 
-export async function httpPutInterceptor(
-  pathUrl: any,
-  data: any,
-  headers?: any
-) {
+export async function httpPutInterceptor(pathUrl: any, data: any, headers?: any) {
   const resCsrf = await getCsrfToken();
   const csrfToken = resCsrf?.data?.token;
 
diff --git a/src/lib/services/http-config/nulisAIApi.ts b/src/lib/services/http-config/nulisAIApi.ts
index 7963ed61..6c17edb7 100644
--- a/src/lib/services/http-config/nulisAIApi.ts
+++ b/src/lib/services/http-config/nulisAIApi.ts
@@ -1,12 +1,12 @@
 import axiosNulisAIInstance from "./axiosNulisAIInstance";
 
 export async function httpPost(pathUrl: any, headers: any, data: any) {
-  const response = await axiosNulisAIInstance
-    .post(pathUrl, data, { headers })
-    .catch(function (error: any) {
-      console.log(error);
-      return error.response;
-    });
+  const response = await axiosNulisAIInstance.post(pathUrl, data, { headers }).catch(function (
+    error: any
+  ) {
+    console.log(error);
+    return error.response;
+  });
   console.log("Response base svc : ", response);
   if (response?.status == 200 || response?.status == 201) {
     return {
@@ -24,12 +24,12 @@ export async function httpPost(pathUrl: any, headers: any, data: any) {
 }
 
 export async function httpGet(pathUrl: any, headers: any) {
-  const response = await axiosNulisAIInstance
-    .get(pathUrl, { headers })
-    .catch(function (error: any) {
-      console.log(error);
-      return error.response;
-    });
+  const response = await axiosNulisAIInstance.get(pathUrl, { headers }).catch(function (
+    error: any
+  ) {
+    console.log(error);
+    return error.response;
+  });
   console.log("Response base svc : ", response);
   if (response?.status == 200 || response?.status == 201) {
     return {
diff --git a/src/lib/services/landing/landing.ts b/src/lib/services/landing/landing.ts
index ffdcc2d4..9583e1bd 100644
--- a/src/lib/services/landing/landing.ts
+++ b/src/lib/services/landing/landing.ts
@@ -37,10 +37,7 @@ export async function getHeroData() {
   );
 }
 
-export async function listStaticBanner(
-  group: any = "",
-  isInt: Boolean = false
-) {
+export async function listStaticBanner(group: any = "", isInt: Boolean = false) {
   const url = `media/static-banner?group=${group}&isInt=${isInt}`;
   return httpGetInterceptor(url);
 }
@@ -72,9 +69,7 @@ export async function getPrivacy() {
 }
 
 export async function getIndeksData() {
-  return await httpGetInterceptor(
-    `blog/public/pagination?enablePage=1&page=0&size=20`
-  );
+  return await httpGetInterceptor(`blog/public/pagination?enablePage=1&page=0&size=20`);
 }
 
 export async function getDetail(slug: string) {
@@ -82,15 +77,11 @@ export async function getDetail(slug: string) {
 }
 
 export async function getDetailMetaData(slug: string) {
-  return await httpGetInterceptorForMetadata(
-    `media/public?slug=${slug}&state=mabes`
-  );
+  return await httpGetInterceptorForMetadata(`media/public?slug=${slug}&state=mabes`);
 }
 
 export async function getDetailIndeks() {
-  return await httpGetInterceptor(
-    `blog/public/pagination?enablePage=1&page=0&size=6`
-  );
+  return await httpGetInterceptor(`blog/public/pagination?enablePage=1&page=0&size=6`);
 }
 
 export async function getFeedback() {
@@ -195,9 +186,7 @@ export async function deleteWishlist(id: any) {
 }
 
 export async function getContentRewritePagination(page = 0, size = 10) {
-  return await httpGetInterceptor(
-    `media/rewrite/pagination?size=${size}&page=${page}`
-  );
+  return await httpGetInterceptor(`media/rewrite/pagination?size=${size}&page=${page}`);
 }
 
 export async function getContentRewrite(id: any) {
diff --git a/src/lib/services/login-services.ts b/src/lib/services/login-services.ts
index fa4a5281..b7ee9dad 100644
--- a/src/lib/services/login-services.ts
+++ b/src/lib/services/login-services.ts
@@ -1,7 +1,5 @@
 import { httpGet, httpPost } from "./http-config/http-base-service";
-import {
-  httpGetInterceptorWithToken,
-} from "./http-config/http-interceptor-service";
+import { httpGetInterceptorWithToken } from "./http-config/http-interceptor-service";
 
 export async function login(data: any) {
   const pathUrl = `signin`;
diff --git a/src/lib/services/media-tracking/media-tracking.ts b/src/lib/services/media-tracking/media-tracking.ts
index 402f7e05..57767bfe 100644
--- a/src/lib/services/media-tracking/media-tracking.ts
+++ b/src/lib/services/media-tracking/media-tracking.ts
@@ -1,7 +1,4 @@
-import {
-  httpGetInterceptor,
-  httpPostInterceptor,
-} from "../http-config/http-interceptor-service";
+import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
 
 export async function getMediaTrackingMonitoring(page: number, size: number) {
   const url = `cekmedsos/monitoring/pagination?page=${page}&size=${size}`;
@@ -18,11 +15,7 @@ export async function mediaTrackingSave(data: any) {
   return httpPostInterceptor(url, data);
 }
 
-export async function getMediaTracking(
-  page: any,
-  title: string = "",
-  size: any
-) {
+export async function getMediaTracking(page: any, title: string = "", size: any) {
   return httpGetInterceptor(
     `/media/tracking/monitoring/pagination?enablePagination=1&size=${size}&page=${page}&title=${title}`
   );
@@ -38,20 +31,14 @@ export async function getMediaTracking(
 
 export async function getMediaTrackingResult(data: any) {
   // const url = `/media/tracking/monitoring/pagination`;
-  const url = `/media/tracking/monitoring/results/pagination?trackingId=${
-    data.id || ""
-  }`;
+  const url = `/media/tracking/monitoring/results/pagination?trackingId=${data.id || ""}`;
   return httpGetInterceptor(url);
 }
 
 export async function listData5Data() {
-  return await httpGetInterceptor(
-    `media/public/list?enablePage=1&sort=desc&size=5`
-  );
+  return await httpGetInterceptor(`media/public/list?enablePage=1&sort=desc&size=5`);
 }
 
 export async function listDataAllNonPagination(search: string) {
-  return await httpGetInterceptor(
-    `media/public/list?enablePage=0&sort=desc&title=${search || ""}`
-  );
+  return await httpGetInterceptor(`media/public/list?enablePage=0&sort=desc&title=${search || ""}`);
 }
diff --git a/src/lib/services/report/report.ts b/src/lib/services/report/report.ts
index f469359e..2aef29a4 100644
--- a/src/lib/services/report/report.ts
+++ b/src/lib/services/report/report.ts
@@ -1,7 +1,4 @@
-import {
-  httpGetInterceptor,
-  httpPostInterceptor,
-} from "../http-config/http-interceptor-service";
+import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
 
 export async function paginationReport(
   size: any,
diff --git a/src/lib/services/schedule/schedule.ts b/src/lib/services/schedule/schedule.ts
index ffac5040..2597798f 100644
--- a/src/lib/services/schedule/schedule.ts
+++ b/src/lib/services/schedule/schedule.ts
@@ -1,10 +1,8 @@
-import {
-  httpGetInterceptor,
-  httpPostInterceptor,
-} from "../http-config/http-interceptor-service";
-import { httpGet } from "../http-config/http-base-service";
 import { any } from "zod";
 
+import { httpGet } from "../http-config/http-base-service";
+import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
+
 export async function paginationSchedule(
   size: any,
   page: number,
@@ -12,8 +10,7 @@ export async function paginationSchedule(
   title: string = "",
   statusFilter: number[] = []
 ) {
-  const statusQuery =
-    statusFilter.length > 0 ? `&statusId=${statusFilter.join(",")}` : "";
+  const statusQuery = statusFilter.length > 0 ? `&statusId=${statusFilter.join(",")}` : "";
   return await httpGetInterceptor(
     `schedule/pagination?enablePage=1&scheduleTypeId=${type}&page=${page}&size=${size}&title=${title}${statusQuery}`
   );
diff --git a/src/lib/services/survey/survey.ts b/src/lib/services/survey/survey.ts
index 940b967f..0d16d3a6 100644
--- a/src/lib/services/survey/survey.ts
+++ b/src/lib/services/survey/survey.ts
@@ -1,7 +1,4 @@
-import {
-  httpGetInterceptor,
-  httpPostInterceptor,
-} from "../http-config/http-interceptor-service";
+import { httpGetInterceptor, httpPostInterceptor } from "../http-config/http-interceptor-service";
 
 export async function createSurveyData(data: any) {
   const pathUrl = "users/satisfaction-survey";
diff --git a/src/lib/services/tableau/tableau-service.ts b/src/lib/services/tableau/tableau-service.ts
index bc7bb8f6..17c7ea8d 100644
--- a/src/lib/services/tableau/tableau-service.ts
+++ b/src/lib/services/tableau/tableau-service.ts
@@ -12,7 +12,10 @@ export async function tableauSignin() {
 
 export async function tableauViewImage(token: string, viewId: string, date?: string) {
   const headers = {
-    "x-token": token
-  }
-  return await httpGetArrayBuffer(`/admin/tableau-view-image?viewId=${viewId}&date=${date}`, headers);
-}
\ No newline at end of file
+    "x-token": token,
+  };
+  return await httpGetArrayBuffer(
+    `/admin/tableau-view-image?viewId=${viewId}&date=${date}`,
+    headers
+  );
+}
diff --git a/src/lib/services/task.ts b/src/lib/services/task.ts
index a103a2e3..d3654a18 100644
--- a/src/lib/services/task.ts
+++ b/src/lib/services/task.ts
@@ -1,4 +1,5 @@
 import { title } from "process";
+
 import {
   httpDeleteInterceptor,
   httpGetInterceptor,
diff --git a/src/lib/services/ticketing/ticketing.ts b/src/lib/services/ticketing/ticketing.ts
index cf19148f..2ab4b688 100644
--- a/src/lib/services/ticketing/ticketing.ts
+++ b/src/lib/services/ticketing/ticketing.ts
@@ -1,7 +1,8 @@
 import { title } from "process";
+
 import { httpGetInterceptor } from "../http-config/http-interceptor-service";
 
-export async function ticketingPagination(title: string = '', size: number, page: number) {
+export async function ticketingPagination(title: string = "", size: number, page: number) {
   return await httpGetInterceptor(
     `/ticketing/pagination?enablePage=1&page=${page}&size=${size}&title=${title}`
   );
diff --git a/src/lib/utils/appex-chart-options.ts b/src/lib/utils/appex-chart-options.ts
index e7fd6ce8..b78a2dff 100644
--- a/src/lib/utils/appex-chart-options.ts
+++ b/src/lib/utils/appex-chart-options.ts
@@ -2,23 +2,8 @@ export const getYAxisConfig = (colors: any) => ({
   labels: getLabel(colors),
 });
 
-
-
-export const getXAxisConfig = (colors: string): { } => ({
-  categories: [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ],
+export const getXAxisConfig = (colors: string): {} => ({
+  categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
   labels: getLabel(colors),
   axisBorder: {
     show: false,
@@ -28,17 +13,21 @@ export const getXAxisConfig = (colors: string): { } => ({
   },
 });
 
-export const getLabel = (colors:any): {  } => ({
+export const getLabel = (colors: any): {} => ({
   style: {
     colors: colors,
     fontFamily: "Inter",
   },
 });
 
-
-export const getGridConfig = (): { show: boolean; borderColor: string; strokeDashArray: number; position: string; } => ({
+export const getGridConfig = (): {
+  show: boolean;
+  borderColor: string;
+  strokeDashArray: number;
+  position: string;
+} => ({
   show: false,
-  borderColor: 'transparent',
+  borderColor: "transparent",
   strokeDashArray: 10,
   position: "back",
-});
\ No newline at end of file
+});
diff --git a/src/lib/utils/auth.ts b/src/lib/utils/auth.ts
index e144cdb9..7b780939 100644
--- a/src/lib/utils/auth.ts
+++ b/src/lib/utils/auth.ts
@@ -5,8 +5,6 @@
 // import CredentialsProvider from "next-auth/providers/credentials";
 // import { getUserByEmail, type User } from "./data";
 
-
-
 // export const { auth, handlers, signIn, signOut } = NextAuth({
 
 //   session: {
@@ -17,13 +15,13 @@
 //     GitHub,
 //      CredentialsProvider({
 //             credentials: {
-              
+
 //                 email: {},
 //                 password: {},
 //             },
 //             async authorize(credentials) {
 //                 if (credentials === null) return null;
-                
+
 //                 try {
 //                     const user = getUserByEmail(credentials?.email as string);
 //                     if (user) {
@@ -42,7 +40,6 @@
 //                 }
 //             },
 //         }),
-   
+
 //   ],
 // });
-
diff --git a/src/lib/utils/colors.ts b/src/lib/utils/colors.ts
index d72370e3..e8c1d7c2 100644
--- a/src/lib/utils/colors.ts
+++ b/src/lib/utils/colors.ts
@@ -7,8 +7,7 @@ export const colors = {
   light: "#425466",
   success: "#50C793",
   default: "#0f172a",
-  'default-800': "#1e293b",
-  'default-600': "#475569",
-  'default-300': "#cbd5e1"
-
-};
\ No newline at end of file
+  "default-800": "#1e293b",
+  "default-600": "#475569",
+  "default-300": "#cbd5e1",
+};
diff --git a/src/lib/utils/data.ts b/src/lib/utils/data.ts
index e4ece201..dd2292d2 100644
--- a/src/lib/utils/data.ts
+++ b/src/lib/utils/data.ts
@@ -1,16 +1,15 @@
-// user data 
+// user data
 const users = [
   {
     name: "dashcode",
     email: "dashcode@codeshaper.net",
     password: "password",
-    image: '/images/users/user-1.jpg',
+    image: "/images/users/user-1.jpg",
   },
-  
-]
+];
 
-export type User = (typeof users)[number]
+export type User = (typeof users)[number];
 
 export const getUserByEmail = (email: string) => {
-  return users.find((user) => user.email === email)
-}
\ No newline at end of file
+  return users.find((user) => user.email === email);
+};
diff --git a/src/lib/utils/events.ts b/src/lib/utils/events.ts
index e82162b8..17e43198 100644
--- a/src/lib/utils/events.ts
+++ b/src/lib/utils/events.ts
@@ -1,5 +1,5 @@
-import va from "@vercel/analytics"
-import { z } from "zod"
+import va from "@vercel/analytics";
+import { z } from "zod";
 
 const eventSchema = z.object({
   name: z.enum([
@@ -16,16 +16,14 @@ const eventSchema = z.object({
     "copy_chart_data",
     "copy_color",
   ]),
-  properties: z
-    .record(z.union([z.string(), z.number(), z.boolean(), z.null()]))
-    .optional(),
-})
+  properties: z.record(z.union([z.string(), z.number(), z.boolean(), z.null()])).optional(),
+});
 
-export type Event = z.infer<typeof eventSchema>
+export type Event = z.infer<typeof eventSchema>;
 
 export function trackEvent(input: Event): void {
-  const event = eventSchema.parse(input)
+  const event = eventSchema.parse(input);
   if (event) {
-    va.track(event.name, event.properties)
+    va.track(event.name, event.properties);
   }
 }
diff --git a/src/lib/utils/globals.tsx b/src/lib/utils/globals.tsx
index 81def301..bddcc4b1 100644
--- a/src/lib/utils/globals.tsx
+++ b/src/lib/utils/globals.tsx
@@ -1,8 +1,8 @@
 "use client";
 
+import { useEffect } from "react";
 import { format } from "date-fns";
 import { id, tr } from "date-fns/locale";
-import { useEffect } from "react";
 
 export const generateLocalizedPath = (href: string, locale: string): string => {
   if (href.startsWith(`/${locale}`)) {
@@ -11,7 +11,11 @@ export const generateLocalizedPath = (href: string, locale: string): string => {
   return `/${locale}${href}`;
 };
 
-export function textEllipsis(str: string, maxLength: number, { side = "end", ellipsis = "..." } = {}) {
+export function textEllipsis(
+  str: string,
+  maxLength: number,
+  { side = "end", ellipsis = "..." } = {}
+) {
   if (str !== undefined && str?.length > maxLength) {
     switch (side) {
       case "start":
@@ -116,7 +120,10 @@ export function secondToTimes(sec: number) {
 
 export function checkMaliciousText(str: any) {
   try {
-    const urlPattern = new RegExp("(https?:\\/\\/(?:www\\.|(?!www))[^\\s\\.]+\\.[^\\s]{2,}|www\\.[^\\s]+\\.[^\\s]{2,}|https?:\\/\\/[^\\s]+|\\b(?:https?|ftp):\\/\\/[^\\s/$.?#].[^\\s]*)", "gi");
+    const urlPattern = new RegExp(
+      "(https?:\\/\\/(?:www\\.|(?!www))[^\\s\\.]+\\.[^\\s]{2,}|www\\.[^\\s]+\\.[^\\s]{2,}|https?:\\/\\/[^\\s]+|\\b(?:https?|ftp):\\/\\/[^\\s/$.?#].[^\\s]*)",
+      "gi"
+    );
     const isContainUrl = urlPattern.test(str);
     if (isContainUrl) {
       return "Message mengandung URL yang tidak diizinkan";
@@ -155,7 +162,8 @@ export const shimmer = (w: number, h: number) => `
   <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
 </svg>`;
 
-export const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str));
+export const toBase64 = (str: string) =>
+  typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str);
 
 const LoadScript = () => {
   useEffect(() => {
diff --git a/src/lib/utils/menus.ts b/src/lib/utils/menus.ts
index e9e18288..847b523d 100644
--- a/src/lib/utils/menus.ts
+++ b/src/lib/utils/menus.ts
@@ -1671,10 +1671,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
         ],
       },
     ];
-  } else if (
-    (Number(roleId) == 3 || Number(roleId) == 4) &&
-    Number(levelNumber) == 2
-  ) {
+  } else if ((Number(roleId) == 3 || Number(roleId) == 4) && Number(levelNumber) == 2) {
     if (Number(userLevelId) != 761) {
       menusSelected = [
         {
@@ -2086,10 +2083,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
         },
       ];
     }
-  } else if (
-    (Number(roleId) == 3 || Number(roleId) == 4) &&
-    Number(levelNumber) == 3
-  ) {
+  } else if ((Number(roleId) == 3 || Number(roleId) == 4) && Number(levelNumber) == 3) {
     if (Number(userParentLevelId) != 761) {
       menusSelected = [
         {
@@ -2811,11 +2805,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
         ],
       },
     ];
-  } else if (
-    Number(roleId) == 11 ||
-    Number(roleId) == 19 ||
-    Number(roleId) == 12
-  ) {
+  } else if (Number(roleId) == 11 || Number(roleId) == 19 || Number(roleId) == 12) {
     menusSelected = [
       {
         groupLabel: t("apps"),
@@ -3909,9 +3899,7 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                 {
                   href: "/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
                   label: t("productDetails"),
-                  active:
-                    pathname ===
-                    "/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
+                  active: pathname === "/ecommerce/frontend/c06d48bf-7f35-4789-b71e-d80fee5b430t",
                 },
                 {
                   href: "/ecommerce/frontend/checkout/cart",
@@ -4584,146 +4572,110 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                 {
                   href: "/charts/appex-charts/charts-appex-area",
                   label: t("areaCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-area"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-area"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-bar",
                   label: t("barCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-bar"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-bar"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-boxplot",
                   label: t("boxplotCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-boxplot"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-boxplot"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-bubble",
                   label: t("bubbleCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-bubble"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-bubble"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-candlestick",
                   label: t("candlestickCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-candlestick"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-candlestick"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-column",
                   label: t("columnCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-column"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-column"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-combo",
                   label: t("comboCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-combo"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-combo"),
                   children: [],
                 },
 
                 {
                   href: "/charts/appex-charts/charts-appex-funnel",
                   label: t("funnelCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-funnel"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-funnel"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-heatmap",
                   label: t("heatmapCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-heatmap"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-heatmap"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-line",
                   label: t("lineCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-line"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-line"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-pie",
                   label: t("pieCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-pie"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-pie"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-polararea",
                   label: t("ploarareaCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-polararea"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-polararea"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-radar",
                   label: t("radarCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-radar"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-radar"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-radialbars",
                   label: t("radialbarCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-radialbars"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-radialbars"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-range",
                   label: t("rangeCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-range"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-range"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-scatter",
                   label: t("scatterCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-scatter"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-scatter"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-timeline",
                   label: t("timelineCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-timeline"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-timeline"),
                   children: [],
                 },
                 {
                   href: "/charts/appex-charts/charts-appex-treemap",
                   label: t("treemapCharts"),
-                  active: pathname.includes(
-                    "/charts/appex-charts/charts-appex-treemap"
-                  ),
+                  active: pathname.includes("/charts/appex-charts/charts-appex-treemap"),
                   children: [],
                 },
               ],
@@ -4737,73 +4689,55 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                 {
                   href: "/charts/rechart/charts-rechart-area",
                   label: t("areaCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-area"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-area"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-bar",
                   label: t("barCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-bar"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-bar"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-composed",
                   label: t("composedCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-composed"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-composed"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-line",
                   label: t("lineCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-line"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-line"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-pie",
                   label: t("pieCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-pie"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-pie"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-radar",
                   label: t("radarCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-radar"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-radar"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-radialbar",
                   label: t("radialbarCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-radialbar"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-radialbar"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-scatter",
                   label: t("scatterCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-scatter"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-scatter"),
                   children: [],
                 },
                 {
                   href: "/charts/rechart/charts-rechart-treemap",
                   label: t("treemapCharts"),
-                  active: pathname.includes(
-                    "/charts/rechart/charts-rechart-treemap"
-                  ),
+                  active: pathname.includes("/charts/rechart/charts-rechart-treemap"),
                   children: [],
                 },
               ],
@@ -4817,89 +4751,67 @@ export function getHorizontalMenuList(pathname: string, t: any): Group[] {
                 {
                   href: "/charts/chart-js/charts-chartjs-area",
                   label: t("areaCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-area"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-area"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-bar",
                   label: t("barCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-bar"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-bar"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-line",
                   label: t("lineCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-line"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-line"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-animations",
                   label: t("animationCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-animations"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-animations"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-legend",
                   label: t("legendCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-legend"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-legend"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-scaleoptions",
                   label: t("scaleOptionCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-scaleoptions"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-scaleoptions"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-scales",
                   label: t("scaleCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-scales"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-scales"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-scriptable",
                   label: t("scriptableCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-scriptable"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-scriptable"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-title",
                   label: t("titleCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-title"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-title"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-tooltip",
                   label: t("tooltipChart"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-tooltip"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-tooltip"),
                   children: [],
                 },
                 {
                   href: "/charts/chart-js/charts-chartjs-other",
                   label: t("otherCharts"),
-                  active: pathname.includes(
-                    "/charts/chart-js/charts-chartjs-other"
-                  ),
+                  active: pathname.includes("/charts/chart-js/charts-chartjs-other"),
                   children: [],
                 },
               ],
diff --git a/src/lib/utils/pdf-generator.tsx b/src/lib/utils/pdf-generator.tsx
index 4bdea08d..de64db60 100644
--- a/src/lib/utils/pdf-generator.tsx
+++ b/src/lib/utils/pdf-generator.tsx
@@ -1,8 +1,8 @@
-import { jsPDF } from 'jspdf';
+import { jsPDF } from "jspdf";
 
 export default async function pdfGenerator(blobs: Blob[]) {
   const pdf = new jsPDF({
-    unit: 'px',
+    unit: "px",
     compress: true,
   });
 
@@ -18,7 +18,7 @@ export default async function pdfGenerator(blobs: Blob[]) {
         const imgWidth = img.width;
         const imgHeight = img.height;
 
-        const orientation = imgWidth > imgHeight ? 'landscape' : 'portrait';
+        const orientation = imgWidth > imgHeight ? "landscape" : "portrait";
 
         if (i === 0) {
           // Set ukuran dan orientasi halaman pertama
@@ -31,13 +31,13 @@ export default async function pdfGenerator(blobs: Blob[]) {
           pdf.setPage(pdf.getNumberOfPages());
         }
 
-        pdf.addImage(img, 'PNG', 0, 0, imgWidth, imgHeight);
-        resolve('');
+        pdf.addImage(img, "PNG", 0, 0, imgWidth, imgHeight);
+        resolve("");
       };
     });
 
     URL.revokeObjectURL(imageUrl);
   }
 
-  pdf.save('downloaded-images.pdf');
+  pdf.save("downloaded-images.pdf");
 }
diff --git a/src/lib/utils/type.ts b/src/lib/utils/type.ts
index 18af5e35..a501a435 100644
--- a/src/lib/utils/type.ts
+++ b/src/lib/utils/type.ts
@@ -1,15 +1,28 @@
-export type color = "default" | "primary" | "secondary" | "success" | "info" | "warning" | "destructive"
-export type InputColor = "default" | "primary" | "secondary" | "success" | "info" | "warning" | "destructive"
-export type shadow = "sm" | "md" | "lg" | "xl"
-export type size = "default" | "sm" | "md" | "lg"
-export type rounded = "sm" | "md" | "lg" | "full"
-export type radius = "sm" | "md" | "lg" | "xl" | "none"
+export type color =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "info"
+  | "warning"
+  | "destructive";
+export type InputColor =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "info"
+  | "warning"
+  | "destructive";
+export type shadow = "sm" | "md" | "lg" | "xl";
+export type size = "default" | "sm" | "md" | "lg";
+export type rounded = "sm" | "md" | "lg" | "full";
+export type radius = "sm" | "md" | "lg" | "xl" | "none";
 
-
-// config 
+// config
 export type layoutType = "vertical" | "horizontal" | "semi-box" | "compact";
 export type contentType = "wide" | "boxed";
 export type skinType = "default" | "bordered";
-export type sidebarType = 'classic' | 'draggable' | 'two-column' | 'compact'
-export type navBarType = 'floating' | 'sticky' | 'hidden' | 'default'
-export type headerColorType = 'default' | 'coloured' | 'transparent'
+export type sidebarType = "classic" | "draggable" | "two-column" | "compact";
+export type navBarType = "floating" | "sticky" | "hidden" | "default";
+export type headerColorType = "default" | "coloured" | "transparent";
diff --git a/src/lib/utils/utils.ts b/src/lib/utils/utils.ts
index 2ed06ee6..8ac6188c 100644
--- a/src/lib/utils/utils.ts
+++ b/src/lib/utils/utils.ts
@@ -1,9 +1,10 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import Cookies from "js-cookie";
+import { clsx, type ClassValue } from "clsx";
 import CryptoJS from "crypto-js";
+import Cookies from "js-cookie";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
+import { twMerge } from "tailwind-merge";
+
 import Loading from "@/app/[locale]/(protected)/app/projects/loading";
 
 export function cn(...inputs: ClassValue[]) {
@@ -62,11 +63,7 @@ export function successToast(title: string, text: string) {
   });
 }
 
-export function setCookiesEncrypt(
-  param: string,
-  data: any,
-  options?: Cookies.CookieAttributes
-) {
+export function setCookiesEncrypt(param: string, data: any, options?: Cookies.CookieAttributes) {
   // Enkripsi data
   const cookiesEncrypt = CryptoJS.AES.encrypt(
     JSON.stringify(data),
diff --git a/src/lib/utils/video-player.tsx b/src/lib/utils/video-player.tsx
index 1275fd25..04f629b2 100644
--- a/src/lib/utils/video-player.tsx
+++ b/src/lib/utils/video-player.tsx
@@ -26,4 +26,4 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ url }) => {
   );
 };
 
-export default VideoPlayer;
\ No newline at end of file
+export default VideoPlayer;
diff --git a/src/messages/en.json b/src/messages/en.json
index f80a85d8..80dba199 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -7,4 +7,4 @@
     "search": "Search",
     "menu": "Menu"
   }
-} 
\ No newline at end of file
+}
diff --git a/src/messages/in.json b/src/messages/in.json
index 8f17152f..eff55b37 100644
--- a/src/messages/in.json
+++ b/src/messages/in.json
@@ -7,4 +7,4 @@
     "search": "Cari",
     "menu": "Menu"
   }
-} 
\ No newline at end of file
+}
diff --git a/src/middleware.ts b/src/middleware.ts
index f2f99614..620ecf7f 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,5 +1,5 @@
-import createMiddleware from 'next-intl/middleware';
-import {routing} from '@/i18n/routing';
+import { routing } from "@/i18n/routing";
+import createMiddleware from "next-intl/middleware";
 
 export default createMiddleware(routing);
 
@@ -7,5 +7,5 @@ export const config = {
   // Match all pathnames except for
   // - … if they start with `/api`, `/trpc`, `/_next` or `/_vercel`
   // - … the ones containing a dot (e.g. `favicon.ico`)
-  matcher: '/((?!api|trpc|_next|_vercel|.*\\..*).*)'
+  matcher: "/((?!api|trpc|_next|_vercel|.*\\..*).*)",
 };
diff --git a/src/providers/auth.provider.tsx b/src/providers/auth.provider.tsx
index 691083a5..28f98744 100644
--- a/src/providers/auth.provider.tsx
+++ b/src/providers/auth.provider.tsx
@@ -1,13 +1,10 @@
-'use client'
+"use client";
+
 // import { SessionProvider } from "next-auth/react"
-import React from 'react'
+import React from "react";
 
 const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-    return (
-        <div>
-            {children}
-        </div>
-    )
-}
+  return <div>{children}</div>;
+};
 
-export default AuthProvider
\ No newline at end of file
+export default AuthProvider;
diff --git a/src/providers/content.provider.tsx b/src/providers/content.provider.tsx
index 26fed2c6..855c0fcc 100644
--- a/src/providers/content.provider.tsx
+++ b/src/providers/content.provider.tsx
@@ -1,54 +1,59 @@
-'use client'
-import { useConfig } from '@/lib/hooks/use-config'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
 
 const LayoutContentProvider = ({ children }: { children: React.ReactNode }) => {
-    const [config, setConfig] = useConfig();
-
-    if (config.sidebar === 'two-column') {
-        return (
-            <main className={cn('flex-1 xl:ms-[300px]  ', {
-                'xl:ms-[72px]': config.subMenu || !config.hasSubMenu,
-                'bg-default-100 dark:bg-background': config.skin === 'default',
-                'bg-transparent': config.skin === 'bordered',
-                'xl:ms-0': config.menuHidden || config.layout === "horizontal",
-
-            })}>
-                <div className={cn('p-6 mb-24 md:mb-0', {
-                    'container ': config.contentWidth === 'boxed',
-
-
-                })}>
-                    {children}
-                </div>
-            </main>
-        )
-    }
+  const [config, setConfig] = useConfig();
 
+  if (config.sidebar === "two-column") {
     return (
-        <>
+      <main
+        className={cn("flex-1 xl:ms-[300px]  ", {
+          "xl:ms-[72px]": config.subMenu || !config.hasSubMenu,
+          "bg-default-100 dark:bg-background": config.skin === "default",
+          "bg-transparent": config.skin === "bordered",
+          "xl:ms-0": config.menuHidden || config.layout === "horizontal",
+        })}
+      >
+        <div
+          className={cn("p-6 mb-24 md:mb-0", {
+            "container ": config.contentWidth === "boxed",
+          })}
+        >
+          {children}
+        </div>
+      </main>
+    );
+  }
 
-            <main className={cn('flex-1 xl:ms-[248px]', {
-                'xl:ms-[72px]': config.collapsed,
-                'bg-default-100 dark:bg-background': config.skin === 'default',
-                'bg-transparent': config.skin === 'bordered',
-                'xl:ms-0': config.menuHidden || config.layout === "horizontal",
-                'xl:ms-28': config.sidebar === 'compact',
-                'pt-6': config.navbar === 'floating' && config.layout !== 'semi-box'
-            })}>
-                <div className={cn('mb-24 md:mb-0', {
-                    'container': config.contentWidth === 'boxed',
-                    'p-6': config.layout !== 'semi-box',
-                    'py-10': config.layout === 'semi-box',
-                    'lg:p-0 px-0 lg:ms-6 mt-6 md:mb-6': config.layout === 'compact'
+  return (
+    <>
+      <main
+        className={cn("flex-1 xl:ms-[248px]", {
+          "xl:ms-[72px]": config.collapsed,
+          "bg-default-100 dark:bg-background": config.skin === "default",
+          "bg-transparent": config.skin === "bordered",
+          "xl:ms-0": config.menuHidden || config.layout === "horizontal",
+          "xl:ms-28": config.sidebar === "compact",
+          "pt-6": config.navbar === "floating" && config.layout !== "semi-box",
+        })}
+      >
+        <div
+          className={cn("mb-24 md:mb-0", {
+            container: config.contentWidth === "boxed",
+            "p-6": config.layout !== "semi-box",
+            "py-10": config.layout === "semi-box",
+            "lg:p-0 px-0 lg:ms-6 mt-6 md:mb-6": config.layout === "compact",
+          })}
+        >
+          {children}
+        </div>
+      </main>
+    </>
+  );
+};
 
-                })}>
-                    {children}
-                </div>
-            </main>
-        </>
-    )
-}
-
-export default LayoutContentProvider
\ No newline at end of file
+export default LayoutContentProvider;
diff --git a/src/providers/direction-provider.tsx b/src/providers/direction-provider.tsx
index b9a701b3..e0715d7b 100644
--- a/src/providers/direction-provider.tsx
+++ b/src/providers/direction-provider.tsx
@@ -1,23 +1,27 @@
-'use client'
-import React from 'react'
-import { DirectionProvider as RadixDirProvider } from '@radix-ui/react-direction';
-import { useConfig } from '@/lib/hooks/use-config';
+"use client";
 
-const DirectionProvider = ({ direction, children }: { direction: any, children: React.ReactNode }) => {
-    const [, setConfig] = useConfig();
+import React from "react";
+import { DirectionProvider as RadixDirProvider } from "@radix-ui/react-direction";
 
-    React.useEffect(() => {
-        setConfig((prevConfig) => ({
-            ...prevConfig,
-            isRtl: direction === 'rtl',
-        }));
+import { useConfig } from "@/lib/hooks/use-config";
 
-    }, [direction, setConfig]);
+const DirectionProvider = ({
+  direction,
+  children,
+}: {
+  direction: any;
+  children: React.ReactNode;
+}) => {
+  const [, setConfig] = useConfig();
 
-    return (
-        <RadixDirProvider dir={direction}>
-            {children}</RadixDirProvider>
-    )
-}
+  React.useEffect(() => {
+    setConfig((prevConfig) => ({
+      ...prevConfig,
+      isRtl: direction === "rtl",
+    }));
+  }, [direction, setConfig]);
 
-export default DirectionProvider
+  return <RadixDirProvider dir={direction}>{children}</RadixDirProvider>;
+};
+
+export default DirectionProvider;
diff --git a/src/providers/layout.provider.tsx b/src/providers/layout.provider.tsx
index d7bb96a8..fa2f9209 100644
--- a/src/providers/layout.provider.tsx
+++ b/src/providers/layout.provider.tsx
@@ -1,24 +1,24 @@
-'use client'
-import { useConfig } from '@/lib/hooks/use-config'
-import React from 'react'
-import { cn } from "@/lib/utils/utils"
+"use client";
+
+import React from "react";
+
+import { useConfig } from "@/lib/hooks/use-config";
+import { cn } from "@/lib/utils/utils";
 
 const LayoutProvider = ({ children }: { children: React.ReactNode }) => {
-    const [config, setConfig] = useConfig();
+  const [config, setConfig] = useConfig();
 
-    return (
+  return (
+    <div
+      className={cn("flex  min-h-svh w-full flex-col bg-default-100 dark:bg-background ", {
+        "bg-transparent": config.skin === "bordered",
+        "xl:px-20": config.layout === "semi-box",
+        "lg:p-10  p-6": config.layout === "compact",
+      })}
+    >
+      {children}
+    </div>
+  );
+};
 
-
-        <div className={cn('flex  min-h-svh w-full flex-col bg-default-100 dark:bg-background ', {
-            'bg-transparent': config.skin === 'bordered',
-            'xl:px-20': config.layout === 'semi-box',
-            'lg:p-10  p-6': config.layout === 'compact'
-
-        })}>
-            {children}
-        </div>
-
-    )
-}
-
-export default LayoutProvider
\ No newline at end of file
+export default LayoutProvider;
diff --git a/src/providers/mounted.provider.tsx b/src/providers/mounted.provider.tsx
index cb08c1f0..721e9ace 100644
--- a/src/providers/mounted.provider.tsx
+++ b/src/providers/mounted.provider.tsx
@@ -1,10 +1,17 @@
 "use client";
-import Loader from "@/components/ui/structures/loader";
 
-import { useMounted } from "@/lib/hooks/use-mounted";
 import React from "react";
 
-const MountedProvider = ({ children, isProtected }: { children: React.ReactNode, isProtected: Boolean }) => {
+import { useMounted } from "@/lib/hooks/use-mounted";
+import Loader from "@/components/ui/structures/loader";
+
+const MountedProvider = ({
+  children,
+  isProtected,
+}: {
+  children: React.ReactNode;
+  isProtected: Boolean;
+}) => {
   const mounted = useMounted();
   if (!mounted) return isProtected ? <Loader /> : null;
   return children;
diff --git a/src/providers/theme-provider.tsx b/src/providers/theme-provider.tsx
index e90aa8c9..b0ff2660 100644
--- a/src/providers/theme-provider.tsx
+++ b/src/providers/theme-provider.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-import { type ThemeProviderProps } from "next-themes/dist/types"
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
 
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
-    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index fe0e9d4a..cac94f99 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -75,6 +73,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 }
diff --git a/src/vendor/ckeditor5/LICENSE.md b/src/vendor/ckeditor5/LICENSE.md
index ff911156..d84ccad1 100644
--- a/src/vendor/ckeditor5/LICENSE.md
+++ b/src/vendor/ckeditor5/LICENSE.md
@@ -1,21 +1,20 @@
-Software License Agreement
-==========================
+# Software License Agreement
 
 Copyright (c) 2014-2024, CKSource Holding sp. z o.o. All rights reserved.
 
 Online builder code samples are licensed under the terms of the MIT License (see Appendix A):
 
-	http://en.wikipedia.org/wiki/MIT_License
+    http://en.wikipedia.org/wiki/MIT_License
 
 CKEditor 5 collaboration features are only available under a commercial license. [Contact us](https://ckeditor.com/contact/) for more details.
 
 Free 30-days trials of CKEditor 5 collaboration features are available:
- * https://ckeditor.com/collaboration/ - Real-time collaboration (with all features).
- * https://ckeditor.com/collaboration/comments/ - Inline comments feature (without real-time collaborative editing).
- * https://ckeditor.com/collaboration/track-changes/ - Track changes feature (without real-time collaborative editing).
 
-Trademarks
-----------
+- https://ckeditor.com/collaboration/ - Real-time collaboration (with all features).
+- https://ckeditor.com/collaboration/comments/ - Inline comments feature (without real-time collaborative editing).
+- https://ckeditor.com/collaboration/track-changes/ - Track changes feature (without real-time collaborative editing).
+
+## Trademarks
 
 CKEditor is a trademark of CKSource Holding sp. z o.o. All other brand
 and product names are trademarks, registered trademarks or service
@@ -23,8 +22,7 @@ marks of their respective holders.
 
 ---
 
-Appendix A: The MIT License
----------------------------
+## Appendix A: The MIT License
 
 The MIT License (MIT)
 
diff --git a/src/vendor/ckeditor5/README.md b/src/vendor/ckeditor5/README.md
index d1faad48..7927d36f 100644
--- a/src/vendor/ckeditor5/README.md
+++ b/src/vendor/ckeditor5/README.md
@@ -12,7 +12,7 @@ This repository presents a CKEditor 5 editor build generated by the [Online buil
 
 Changes like changing toolbar items, changing order of icons or customizing plugin configurations should be relatively easy to make. Open the `sample/index.html` file and edit the script that initialized the CKEditor 5. Save the file and refresh the browser. That's all.
 
-*Note:* If you have any problems with browser caching use the `Ctrl + R` or `Cmd + R` shortcut depending on your system.
+_Note:_ If you have any problems with browser caching use the `Ctrl + R` or `Cmd + R` shortcut depending on your system.
 
 However if you want to remove or add a plugin to the build you need to follow the next step of this guide.
 
@@ -47,6 +47,7 @@ This will build the CKEditor 5 to the `build` directory. You can open your brows
 Follow the guides available on https://ckeditor.com/docs/ckeditor5/latest/framework/index.html and enjoy the document editing.
 
 ## FAQ
+
 | Where is the place to report bugs and feature requests?
 
 You can create an issue on https://github.com/ckeditor/ckeditor5/issues including the build id - `yt1k3s5kie6c-kuy63vghjub2`. Make sure that the question / problem is unique, please look for a possibly asked questions in the search box. Duplicates will be closed.
diff --git a/src/vendor/ckeditor5/sample/script.js b/src/vendor/ckeditor5/sample/script.js
index 8dd73b61..e6317254 100644
--- a/src/vendor/ckeditor5/sample/script.js
+++ b/src/vendor/ckeditor5/sample/script.js
@@ -1,20 +1,19 @@
-ClassicEditor
-	.create( document.querySelector( '.editor' ), {
-		// Editor configuration.
-	} )
-	.then( editor => {
-		window.editor = editor;
-	} )
-	.catch( handleSampleError );
+ClassicEditor.create(document.querySelector(".editor"), {
+  // Editor configuration.
+})
+  .then((editor) => {
+    window.editor = editor;
+  })
+  .catch(handleSampleError);
 
-function handleSampleError( error ) {
-	const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';
+function handleSampleError(error) {
+  const issueUrl = "https://github.com/ckeditor/ckeditor5/issues";
 
-	const message = [
-		'Oops, something went wrong!',
-		`Please, report the following error on ${ issueUrl } with the build id "yt1k3s5kie6c-kuy63vghjub2" and the error stack trace:`
-	].join( '\n' );
+  const message = [
+    "Oops, something went wrong!",
+    `Please, report the following error on ${issueUrl} with the build id "yt1k3s5kie6c-kuy63vghjub2" and the error stack trace:`,
+  ].join("\n");
 
-	console.error( message );
-	console.error( error );
+  console.error(message);
+  console.error(error);
 }
diff --git a/src/vendor/ckeditor5/src/ckeditor.ts b/src/vendor/ckeditor5/src/ckeditor.ts
index 36578d86..0ca1d7f0 100644
--- a/src/vendor/ckeditor5/src/ckeditor.ts
+++ b/src/vendor/ckeditor5/src/ckeditor.ts
@@ -3,118 +3,113 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
-
-import { Alignment } from '@ckeditor/ckeditor5-alignment';
-import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
-import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
-import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
-import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
-import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
-import type { EditorConfig } from '@ckeditor/ckeditor5-core';
-import { Essentials } from '@ckeditor/ckeditor5-essentials';
-import { FontSize } from '@ckeditor/ckeditor5-font';
-import { Heading } from '@ckeditor/ckeditor5-heading';
+import { Alignment } from "@ckeditor/ckeditor5-alignment";
+import { Autoformat } from "@ckeditor/ckeditor5-autoformat";
+import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
+import { BlockQuote } from "@ckeditor/ckeditor5-block-quote";
+import { CloudServices } from "@ckeditor/ckeditor5-cloud-services";
+import { CodeBlock } from "@ckeditor/ckeditor5-code-block";
+import type { EditorConfig } from "@ckeditor/ckeditor5-core";
+import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
+import { Essentials } from "@ckeditor/ckeditor5-essentials";
+import { FontSize } from "@ckeditor/ckeditor5-font";
+import { Heading } from "@ckeditor/ckeditor5-heading";
 import {
-	Image,
-	ImageCaption,
-	ImageInsert,
-	ImageStyle,
-	ImageToolbar,
-	ImageUpload
-} from '@ckeditor/ckeditor5-image';
-import { Indent } from '@ckeditor/ckeditor5-indent';
-import { Link } from '@ckeditor/ckeditor5-link';
-import { List } from '@ckeditor/ckeditor5-list';
-import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
-import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
-import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
-import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
-import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
-import { TextTransformation } from '@ckeditor/ckeditor5-typing';
-import { Undo } from '@ckeditor/ckeditor5-undo';
-import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
+  Image,
+  ImageCaption,
+  ImageInsert,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+} from "@ckeditor/ckeditor5-image";
+import { Indent } from "@ckeditor/ckeditor5-indent";
+import { Link } from "@ckeditor/ckeditor5-link";
+import { List } from "@ckeditor/ckeditor5-list";
+import { MediaEmbed } from "@ckeditor/ckeditor5-media-embed";
+import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
+import { PasteFromOffice } from "@ckeditor/ckeditor5-paste-from-office";
+import { SourceEditing } from "@ckeditor/ckeditor5-source-editing";
+import { Table, TableToolbar } from "@ckeditor/ckeditor5-table";
+import { TextTransformation } from "@ckeditor/ckeditor5-typing";
+import { Undo } from "@ckeditor/ckeditor5-undo";
+import { SimpleUploadAdapter } from "@ckeditor/ckeditor5-upload";
 
 // You can read more about extending the build with additional plugins in the "Installing plugins" guide.
 // See https://ckeditor.com/docs/ckeditor5/latest/installation/plugins/installing-plugins.html for details.
 
 class Editor extends ClassicEditor {
-	public static override builtinPlugins = [
-		Alignment,
-		Autoformat,
-		BlockQuote,
-		Bold,
-		CloudServices,
-		CodeBlock,
-		Essentials,
-		FontSize,
-		Heading,
-		Image,
-		ImageCaption,
-		ImageInsert,
-		ImageStyle,
-		ImageToolbar,
-		ImageUpload,
-		Indent,
-		Italic,
-		Link,
-		List,
-		MediaEmbed,
-		Paragraph,
-		PasteFromOffice,
-		SimpleUploadAdapter,
-		SourceEditing,
-		Table,
-		TableToolbar,
-		TextTransformation,
-		Undo
-	];
+  public static override builtinPlugins = [
+    Alignment,
+    Autoformat,
+    BlockQuote,
+    Bold,
+    CloudServices,
+    CodeBlock,
+    Essentials,
+    FontSize,
+    Heading,
+    Image,
+    ImageCaption,
+    ImageInsert,
+    ImageStyle,
+    ImageToolbar,
+    ImageUpload,
+    Indent,
+    Italic,
+    Link,
+    List,
+    MediaEmbed,
+    Paragraph,
+    PasteFromOffice,
+    SimpleUploadAdapter,
+    SourceEditing,
+    Table,
+    TableToolbar,
+    TextTransformation,
+    Undo,
+  ];
 
-	public static override defaultConfig: EditorConfig = {
-		toolbar: {
-			items: [
-				'heading',
-				'fontSize',
-				'|',
-				'bold',
-				'italic',
-				'link',
-				'bulletedList',
-				'numberedList',
-				'|',
-				'alignment',
-				'outdent',
-				'indent',
-				'|',
-				'imageUpload',
-				'blockQuote',
-				'insertTable',
-				'mediaEmbed',
-				'undo',
-				'redo',
-				'codeBlock',
-				'sourceEditing',
-				'imageInsert'
-			]
-		},
-		language: 'en',
-		image: {
-			toolbar: [
-				'imageTextAlternative',
-				'toggleImageCaption',
-				'imageStyle:inline',
-				'imageStyle:block',
-				'imageStyle:side'
-			]
-		},
-		table: {
-			contentToolbar: [
-				'tableColumn',
-				'tableRow',
-				'mergeTableCells'
-			]
-		}
-	};
+  public static override defaultConfig: EditorConfig = {
+    toolbar: {
+      items: [
+        "heading",
+        "fontSize",
+        "|",
+        "bold",
+        "italic",
+        "link",
+        "bulletedList",
+        "numberedList",
+        "|",
+        "alignment",
+        "outdent",
+        "indent",
+        "|",
+        "imageUpload",
+        "blockQuote",
+        "insertTable",
+        "mediaEmbed",
+        "undo",
+        "redo",
+        "codeBlock",
+        "sourceEditing",
+        "imageInsert",
+      ],
+    },
+    language: "en",
+    image: {
+      toolbar: [
+        "imageTextAlternative",
+        "toggleImageCaption",
+        "imageStyle:inline",
+        "imageStyle:block",
+        "imageStyle:side",
+      ],
+    },
+    table: {
+      contentToolbar: ["tableColumn", "tableRow", "mergeTableCells"],
+    },
+  };
 }
 
 export default Editor;
diff --git a/src/vendor/ckeditor5/tsconfig.json b/src/vendor/ckeditor5/tsconfig.json
index 4cbebfd2..db5a5754 100644
--- a/src/vendor/ckeditor5/tsconfig.json
+++ b/src/vendor/ckeditor5/tsconfig.json
@@ -1,12 +1,7 @@
 {
   "compilerOptions": {
     "types": [],
-    "lib": [
-      "ES2019",
-      "ES2020.String",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2019", "ES2020.String", "DOM", "DOM.Iterable"],
     "noImplicitAny": true,
     "noImplicitOverride": true,
     "strict": true,
@@ -17,7 +12,5 @@
     "moduleResolution": "node",
     "skipLibCheck": true
   },
-  "include": [
-    "./src"
-  ]
+  "include": ["./src"]
 }
diff --git a/src/vendor/ckeditor5/webpack.config.js b/src/vendor/ckeditor5/webpack.config.js
index ecc8abf6..b9e132c4 100644
--- a/src/vendor/ckeditor5/webpack.config.js
+++ b/src/vendor/ckeditor5/webpack.config.js
@@ -3,94 +3,102 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-'use strict';
+"use strict";
 
 /* eslint-env node */
 
-const path = require( 'path' );
-const webpack = require( 'webpack' );
-const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
-const { CKEditorTranslationsPlugin } = require( '@ckeditor/ckeditor5-dev-translations' );
-const TerserWebpackPlugin = require( 'terser-webpack-plugin' );
+const path = require("path");
+const webpack = require("webpack");
+const { bundler, styles } = require("@ckeditor/ckeditor5-dev-utils");
+const { CKEditorTranslationsPlugin } = require("@ckeditor/ckeditor5-dev-translations");
+const TerserWebpackPlugin = require("terser-webpack-plugin");
 
 module.exports = {
-	devtool: 'source-map',
-	performance: { hints: false },
+  devtool: "source-map",
+  performance: { hints: false },
 
-	entry: path.resolve( __dirname, 'src', 'ckeditor.ts' ),
+  entry: path.resolve(__dirname, "src", "ckeditor.ts"),
 
-	output: {
-		// The name under which the editor will be exported.
-		library: 'ClassicEditor',
+  output: {
+    // The name under which the editor will be exported.
+    library: "ClassicEditor",
 
-		path: path.resolve( __dirname, 'build' ),
-		filename: 'ckeditor.js',
-		libraryTarget: 'umd',
-		libraryExport: 'default'
-	},
+    path: path.resolve(__dirname, "build"),
+    filename: "ckeditor.js",
+    libraryTarget: "umd",
+    libraryExport: "default",
+  },
 
-	optimization: {
-		minimizer: [
-			new TerserWebpackPlugin( {
-				sourceMap: true,
-				terserOptions: {
-					output: {
-						// Preserve CKEditor 5 license comments.
-						comments: /^!/
-					}
-				},
-				extractComments: false
-			} )
-		]
-	},
+  optimization: {
+    minimizer: [
+      new TerserWebpackPlugin({
+        sourceMap: true,
+        terserOptions: {
+          output: {
+            // Preserve CKEditor 5 license comments.
+            comments: /^!/,
+          },
+        },
+        extractComments: false,
+      }),
+    ],
+  },
 
-	plugins: [
-		new CKEditorTranslationsPlugin( {
-			// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
-			// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.ts).
-			language: 'en',
-			additionalLanguages: 'all'
-		} ),
-		new webpack.BannerPlugin( {
-			banner: bundler.getLicenseBanner(),
-			raw: true
-		} )
-	],
+  plugins: [
+    new CKEditorTranslationsPlugin({
+      // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
+      // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.ts).
+      language: "en",
+      additionalLanguages: "all",
+    }),
+    new webpack.BannerPlugin({
+      banner: bundler.getLicenseBanner(),
+      raw: true,
+    }),
+  ],
 
-	resolve: {
-		extensions: [ '.ts', '.js', '.json' ]
-	},
+  resolve: {
+    extensions: [".ts", ".js", ".json"],
+  },
 
-	module: {
-		rules: [ {
-			test: /\.svg$/,
-			use: [ 'raw-loader' ]
-		}, {
-			test: /\.ts$/,
-			use: 'ts-loader'
-		}, {
-			test: /\.css$/,
-			use: [ {
-				loader: 'style-loader',
-				options: {
-					injectType: 'singletonStyleTag',
-					attributes: {
-						'data-cke': true
-					}
-				}
-			}, {
-				loader: 'css-loader'
-			}, {
-				loader: 'postcss-loader',
-				options: {
-					postcssOptions: styles.getPostCssConfig( {
-						themeImporter: {
-							themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
-						},
-						minify: true
-					} )
-				}
-			} ]
-		} ]
-	}
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: ["raw-loader"],
+      },
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: "style-loader",
+            options: {
+              injectType: "singletonStyleTag",
+              attributes: {
+                "data-cke": true,
+              },
+            },
+          },
+          {
+            loader: "css-loader",
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: styles.getPostCssConfig({
+                themeImporter: {
+                  themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
+                },
+                minify: true,
+              }),
+            },
+          },
+        ],
+      },
+    ],
+  },
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3f468487..1a879c76 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
 const config = {
   darkMode: ["class"],
   content: [
-    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,jsx,ts,tsx}",
   ],
   prefix: "",
   theme: {
@@ -20,7 +20,7 @@ const config = {
         "custom-lg-button": "1030px",
       },
       fontFamily: {
-        sans: ["DM Sans", "sans-serif"],
+        sans: ["var(--font-dm-sans)"],
       },
       colors: {
         border: "hsl(var(--border))",
diff --git a/theme.config.tsx b/theme.config.tsx
index 61ffdcc7..743491c8 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { DocsThemeConfig } from "nextra-theme-docs";
+
 import DashCodeLogo from "@/components/ui/structures/dascode-logo";
+
 const config: DocsThemeConfig = {
   logo: (
     <span className=" inline-flex gap-2.5 items-center">
diff --git a/tsconfig.json b/tsconfig.json
index 11025abd..ac25e8ea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,13 @@
     },
     "baseUrl": "."
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/components/features/landing-page/NewsBottom.tsx", "src/components/features/landing-page/NavBottom.js"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/components/features/landing-page/NewsBottom.tsx",
+    "src/components/features/landing-page/NavBottom.js"
+  ],
   "exclude": ["node_modules"]
 }