feat: major fixing with prettier

.lighthouserc.json

@@ -11,4 +11,3 @@
     }
   }
 }
-  

.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 

.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"]
+} 

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"
-      }
     }
   }
 }

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"
   }

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

src/action/app-actions.ts

@@ -1,12 +1,12 @@
-'use server'
+"use server";
-import { redirect } from "next/navigation";
+
 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) => {
-export const  postMessageAction = async (id: string, message: string,) => {
+  const response = await postMessage(id, message);
-    const response = await postMessage(id, message)
   revalidatePath("/");
   return response;
-   
+};
-}

src/action/auth-action.ts

@@ -1,6 +1,8 @@
-'use server'
+"use server";
-import { redirect } from "next/navigation";
+
 import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
 export const loginUser = async (data: any) => {
   try {
     const response = undefined;

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>[] = [
   {

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-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,
+  Table,
-  PopoverContent,
+  TableBody,
-  PopoverTrigger,
+  TableCell,
-} from "@/components/ui/popover";
+  TableHead,
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+  TableHeader,
-import { listEnableCategory } from "@/lib/services/content/content";
+  TableRow,
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@/components/ui/table";
-import { close, loading } from "@/config/swal";
+import TablePagination from "@/components/features/table/table-pagination";
-import { Link } from "@/i18n/navigation";
+
-import { listDataExperts } from "@/lib/services/experts/experts";
+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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -228,22 +222,11 @@ const AddExpertTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
-                value={showData}
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
-                onValueChange={setShowData}
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
-              >
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="10">
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
-                  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(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -290,11 +270,7 @@ const AddExpertTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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 SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import {
-  AdministrationLevelList,
-  getListCompetencies,
-  getListExperiences,
-  saveUserInternal,
-  saveUserRolePlacements,
-} from "@/lib/services/management-user/management-user";
-import { loading } from "@/config/swal";
-import { Eye, EyeOff } from "lucide-react";
 
 const FormSchema = z.object({
   name: z.string({
@@ -84,9 +86,7 @@ export default function AddExpertForm() {
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordType = () => {
-    setPasswordType((prevType) =>
+    setPasswordType((prevType) => (prevType === "password" ? "text" : "password"));
-      prevType === "password" ? "text" : "password"
-    );
   };
 
   const roleSelection = [
@@ -209,15 +209,9 @@ export default function AddExpertForm() {
     });
   }
 
-  const handleSelectionChange = (
+  const handleSelectionChange = (index: number, type: "roleId" | "userLevelId", value: string) => {
-    index: number,
-    type: "roleId" | "userLevelId",
-    value: string
-  ) => {
     setPlacementRows((prevRows) =>
-      prevRows.map((row) =>
+      prevRows.map((row) => (row.index === index ? { ...row, [type]: value } : row))
-        row.index === index ? { ...row, [type]: value } : row
-      )
     );
   };
 
@@ -242,10 +236,7 @@ export default function AddExpertForm() {
       <SiteBreadcrumb />
 
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
-          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
+                <Select onValueChange={(e) => handleSelectionChange(row.index, "roleId", e)}>
-                  onValueChange={(e) =>
-                    handleSelectionChange(row.index, "roleId", e)
-                  }
-                >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih Role" />
@@ -424,11 +411,7 @@ export default function AddExpertForm() {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select
+                <Select onValueChange={(e) => handleSelectionChange(row.index, "userLevelId", e)}>
-                  onValueChange={(e) =>
-                    handleSelectionChange(row.index, "userLevelId", e)
-                  }
-                >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder="Pilih User Level" />

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() {

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 {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-  Popover,
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
 
 const users = [
   { id: 1, name: "POLRI" },

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 {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-  Popover,
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
 
 const users = [
   { id: 1, name: "POLRI" },
@@ -82,12 +80,7 @@ export default function EmergencyIssue() {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-3">
-        <Accordion
+        <Accordion id="feedback-center" type="single" collapsible className="w-full">
-          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{" "}

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 {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-  Popover,
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
 
 const users = [
   { id: 1, name: "POLRI" },
@@ -83,16 +81,9 @@ export default function FeedbackCenter() {
     <div>
       <SiteBreadcrumb />
       <div className="flex flex-col gap-3">
-        <Accordion
+        <Accordion id="feedback-center" type="single" collapsible className="w-full">
-          id="feedback-center"
-          type="single"
-          collapsible
-          className="w-full"
-        >
           <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+            <AccordionTrigger className="bg-white">TICKET PADA FEEDBACK CENTER </AccordionTrigger>
-              TICKET PADA FEEDBACK CENTER{" "}
-            </AccordionTrigger>
             <AccordionContent>
               <div className="flex flex-col">
                 <div className="my-5">

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 {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-  Popover,
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { generateTicket } from "@/lib/services/tableau/tableau-service";
 
 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
+        <Accordion id="schedule-press-conference" type="single" collapsible className="w-full">
-          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
+        <Accordion id="content-press-conference" type="single" collapsible className="w-full">
-          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
+        <Accordion id="interaction-press-conference" type="single" collapsible className="w-full">
-          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
+        <Accordion id="press-release" type="single" collapsible className="w-full">
-          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

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 }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("accountName")}</span>,
-      <span className="normal-case">{row.getValue("accountName")}</span>
-    ),
   },
   {
     accessorKey: "accountType",
     header: "Tipe Akun",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("accountType")}</span>,
-      <span className="normal-case">{row.getValue("accountType")}</span>
-    ),
   },
   {
     accessorKey: "accountCategory",
     header: "Kategory",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="uppercase">{row.getValue("accountCategory")}</span>,
-      <span className="uppercase">{row.getValue("accountCategory")}</span>
-    ),
   },
   {
     accessorKey: "emailAddress",
     header: "Email",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("emailAddress")}</span>,
-      <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
+              <Link href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.id}`}>
-                href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.id}`}
-              >
                 Edit
               </Link>
             </DropdownMenuItem>

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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -95,10 +88,7 @@ const AccountListTable = () => {
   async function fetchData() {
     try {
       loading();
-      const res = await getMediaBlastAccountPage(
+      const res = await getMediaBlastAccountPage(page - 1, filtered ? filtered.join(",") : "");
-        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
+                <a onClick={() => fetchData()} className="cursor-pointer text-primary">
-                  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) =>
+                    onCheckedChange={(e) => handleFilter("jurnalis", Boolean(e))}
-                      handleFilter("jurnalis", Boolean(e))
-                    }
                   />
                   <label
                     htmlFor="accepted"
@@ -230,10 +215,7 @@ const AccountListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -263,11 +245,7 @@ const AccountListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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 { useRouter } from "@/i18n/navigation";
-import { useForm } from "react-hook-form";
 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,36 +25,16 @@ 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-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 { 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
+  accountType: z.array(z.string()).refine((value) => value.some((item) => item), {
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
     message: "Required",
   }),
   accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
@@ -114,10 +107,7 @@ export default function CreateAccountForBroadcast() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
-          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
+                <Input value={field.value} placeholder="Masukkan nama" onChange={field.onChange} />
-                  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.onChange(field.value?.filter((value) => value !== "wa"));
-                                      field.value?.filter(
-                                        (value) => value !== "wa"
-                                      )
-                                    );
                               }}
                             />
                           </FormControl>
-                          <FormLabel className="font-normal">
+                          <FormLabel className="font-normal">Whatsapp</FormLabel>
-                            Whatsapp
-                          </FormLabel>
                         </FormItem>
                       );
                     }}
@@ -191,9 +171,7 @@ export default function CreateAccountForBroadcast() {
                                 return checked
                                   ? field.onChange([...field.value, "email"])
                                   : field.onChange(
-                                      field.value?.filter(
+                                      field.value?.filter((value) => value !== "email")
-                                        (value) => value !== "email"
-                                      )
                                     );
                               }}
                             />

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 { useEffect } from "react";
-import { useForm } from "react-hook-form";
+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,39 +31,16 @@ 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { useParams } from "next/navigation";
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { useEffect } from "react";
 
 const FormSchema = z.object({
   name: z.string({
     required_error: "Required",
   }),
-  accountType: z
+  accountType: z.array(z.string()).refine((value) => value.some((item) => item), {
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
     message: "Required",
   }),
   accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
@@ -134,10 +130,7 @@ export default function EditAccountForBroadcast() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
-          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
+                <Input value={field.value} placeholder="Masukkan nama" onChange={field.onChange} />
-                  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.onChange(field.value?.filter((value) => value !== "wa"));
-                                      field.value?.filter(
-                                        (value) => value !== "wa"
-                                      )
-                                    );
                               }}
                             />
                           </FormControl>
-                          <FormLabel className="font-normal">
+                          <FormLabel className="font-normal">Whatsapp</FormLabel>
-                            Whatsapp
-                          </FormLabel>
                         </FormItem>
                       );
                     }}
@@ -210,9 +193,7 @@ export default function EditAccountForBroadcast() {
                                 return checked
                                   ? field.onChange([...field.value, "email"])
                                   : field.onChange(
-                                      field.value?.filter(
+                                      field.value?.filter((value) => value !== "email")
-                                        (value) => value !== "email"
-                                      )
                                     );
                               }}
                             />

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() {

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 }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("title")}</span>,
-      <span className="normal-case">{row.getValue("title")}</span>
-    ),
   },
   {
     accessorKey: "sendTime",
@@ -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
+              <Link href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}>Detail</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
+              <Link href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}>Edit</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>

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import {
-import { Badge } from "@/components/ui/badge";
+  Table,
-import { useRouter, useSearchParams } from "next/navigation";
+  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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -170,10 +161,7 @@ const CampaignListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -203,11 +191,7 @@ const CampaignListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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 { useRouter } from "@/i18n/navigation";
-import { useForm } from "react-hook-form";
 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-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";
 
 const FormSchema = z.object({
   date: z.date({
@@ -99,10 +97,7 @@ export default function CreateCampaign() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
-          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
+                <Input value={field.value} placeholder="Masukkan Judul" onChange={field.onChange} />
-                  value={field.value}
-                  placeholder="Masukkan Judul"
-                  onChange={field.onChange}
-                />
 
                 <FormMessage />
               </FormItem>

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 { useEffect } from "react";
-import { useForm } from "react-hook-form";
+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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
+import SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-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";
 
 const FormSchema = z.object({
   date: z.date({
@@ -128,10 +126,7 @@ export default function EditCampaign() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
-          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
+                <Input value={field.value} placeholder="Masukkan Judul" onChange={field.onChange} />
-                  value={field.value}
-                  placeholder="Masukkan Judul"
-                  onChange={field.onChange}
-                />
 
                 <FormMessage />
               </FormItem>

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() {

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 (

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 }) => (
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
-      <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
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</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}`}>
+              <Link href={`/admin/broadcast/email/${row.original.id}`}>Email Blast</Link>
-                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}`}>
+              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>Whatsapp Blast</Link>
-                Whatsapp Blast
-              </Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import {
-import { Badge } from "@/components/ui/badge";
+  Table,
-import { useRouter, useSearchParams } from "next/navigation";
+  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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -228,22 +219,11 @@ const BroadcastEmailTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
-                value={showData}
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
-                onValueChange={setShowData}
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
-              >
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="10">
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
-                  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
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
-                    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) =>
+                        onCheckedChange={(e) => handleChange("category", category.id, Boolean(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) =>
+                      onCheckedChange={(e) => handleChange("status", 1, Boolean(e))}
-                        handleChange("status", 1, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -303,9 +276,7 @@ const BroadcastEmailTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(2)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 2, Boolean(e))}
-                        handleChange("status", 2, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -318,9 +289,7 @@ const BroadcastEmailTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
-                        handleChange("status", 3, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -333,9 +302,7 @@ const BroadcastEmailTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
-                        handleChange("status", 4, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -358,10 +325,7 @@ const BroadcastEmailTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -391,11 +355,7 @@ const BroadcastEmailTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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 BroadcastTable from "./email/component/table";
-import { Link } from "@/i18n/navigation";
-import { Button } from "@/components/ui/button";
 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>

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 (

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 }) => (
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
-      <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
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</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}`}>
+              <Link href={`/admin/broadcast/email/${row.original.id}`}>Email Blast</Link>
-                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}`}>
+              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>Whatsapp Blast</Link>
-                Whatsapp Blast
-              </Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { ticketingPagination } from "@/lib/services/ticketing/ticketing";
+import {
-import { Badge } from "@/components/ui/badge";
+  Table,
-import { useRouter, useSearchParams } from "next/navigation";
+  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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -228,22 +219,11 @@ const BroadcastWhatsAppTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
-                value={showData}
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
-                onValueChange={setShowData}
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
-              >
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="10">
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
-                  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
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
-                    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) =>
+                        onCheckedChange={(e) => handleChange("category", category.id, Boolean(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) =>
+                      onCheckedChange={(e) => handleChange("status", 1, Boolean(e))}
-                        handleChange("status", 1, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -303,9 +276,7 @@ const BroadcastWhatsAppTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(2)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 2, Boolean(e))}
-                        handleChange("status", 2, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -318,9 +289,7 @@ const BroadcastWhatsAppTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
-                        handleChange("status", 3, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -333,9 +302,7 @@ const BroadcastWhatsAppTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
-                        handleChange("status", 4, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -358,10 +325,7 @@ const BroadcastWhatsAppTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -391,11 +355,7 @@ const BroadcastWhatsAppTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
-          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
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" readOnly />
-                    placeholder="Masukkan username"
-                    {...field}
-                    className="w-1/2"
-                    readOnly
-                  />
                 </FormControl>
 
                 <FormMessage />

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
 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 SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import withReactContent from "sweetalert2-react-content";
+import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
-import { identity } from "@fullcalendar/core/internal";
 
 const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
   ssr: false,
@@ -189,10 +185,7 @@ export default function EditUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
-          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
+                  <Input placeholder="Masukkan nama lengkap" {...field} className="w-1/2" />
-                    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
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" />
-                    placeholder="Masukkan username"
-                    {...field}
-                    className="w-1/2"
-                  />
                 </FormControl>
 
                 <FormMessage />
@@ -278,12 +263,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Email</FormLabel>
                 <FormControl>
-                  <Input
+                  <Input type="email" placeholder="Masukkan email" {...field} className="w-1/2" />
-                    type="email"
-                    placeholder="Masukkan email"
-                    {...field}
-                    className="w-1/2"
-                  />
                 </FormControl>
 
                 <FormMessage />

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
 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 SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import withReactContent from "sweetalert2-react-content";
+import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
 
 const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
   ssr: false,
@@ -339,10 +335,7 @@ export default function CreateUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
-          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)
+                          ? roleList.find((role) => role.value === field.value)?.label
-                              ?.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
+                                  role.value === field.value ? "opacity-100" : "opacity-0"
-                                    ? "opacity-100"
-                                    : "opacity-0"
                                 )}
                               />
                             </CommandItem>
@@ -410,11 +400,7 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Nama Lengkap</FormLabel>
                 <FormControl>
-                  <Input
+                  <Input placeholder="Masukkan nama lengkap" {...field} className="w-1/2" />
-                    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
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" />
-                    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
+                      <FormItem key={role.id} className="flex items-center space-x-3 space-y-0">
-                        key={role.id}
-                        className="flex items-center space-x-3 space-y-0"
-                      >
                         <FormControl>
                           <RadioGroupItem value={role.id} />
                         </FormControl>
-                        <FormLabel className="font-normal">
+                        <FormLabel className="font-normal">{role.name}</FormLabel>
-                          {role.name}
-                        </FormLabel>
                       </FormItem>
                     ))}
                   </RadioGroup>
@@ -494,9 +471,7 @@ export default function CreateUserForm() {
                             >
                               <FormControl>
                                 <Checkbox
-                                  checked={field.value?.includes(
+                                  checked={field.value?.includes(String(item.typeId))}
-                                    String(item.typeId)
-                                  )}
                                   onCheckedChange={(checked) => {
                                     return checked
                                       ? field.onChange([
@@ -505,16 +480,13 @@ export default function CreateUserForm() {
                                         ])
                                       : field.onChange(
                                           (field.value || []).filter(
-                                            (value) =>
+                                            (value) => value !== String(item.typeId)
-                                              value !== String(item.typeId)
                                           )
                                         );
                                   }}
                                 />
                               </FormControl>
-                              <FormLabel className="font-normal">
+                              <FormLabel className="font-normal">{item.name}</FormLabel>
-                                {item.name}
-                              </FormLabel>
                             </FormItem>
                           );
                         }}
@@ -614,12 +586,7 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
                 <FormControl>
-                  <Input
+                  <Input type="number" placeholder="Masukkan NRP" {...field} className="w-1/2" />
-                    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
+                  <Input type="email" placeholder="Masukkan email" {...field} className="w-1/2" />
-                    type="email"
-                    placeholder="Masukkan email"
-                    {...field}
-                    className="w-1/2"
-                  />
                 </FormControl>
 
                 <FormMessage />

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
 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 SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import withReactContent from "sweetalert2-react-content";
+import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
 
 const sns = [
   {
@@ -364,10 +360,7 @@ export default function DetailUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
-          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)
+                          ? roleList.find((role) => role.value === field.value)?.label
-                              ?.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
+                                  role.value === field.value ? "opacity-100" : "opacity-0"
-                                    ? "opacity-100"
-                                    : "opacity-0"
                                 )}
                               />
                             </CommandItem>
@@ -454,12 +444,7 @@ export default function DetailUserForm() {
               <FormItem>
                 <FormLabel>Username</FormLabel>
                 <FormControl>
-                  <Input
+                  <Input placeholder="Masukkan username" {...field} readOnly className="w-1/2" />
-                    placeholder="Masukkan username"
-                    {...field}
-                    readOnly
-                    className="w-1/2"
-                  />
                 </FormControl>
 
                 <FormMessage />
@@ -481,16 +466,11 @@ export default function DetailUserForm() {
                     disabled
                   >
                     {roles.map((role) => (
-                      <FormItem
+                      <FormItem key={role.id} className="flex items-center space-x-3 space-y-0">
-                        key={role.id}
-                        className="flex items-center space-x-3 space-y-0"
-                      >
                         <FormControl>
                           <RadioGroupItem value={role.id} />
                         </FormControl>
-                        <FormLabel className="font-normal">
+                        <FormLabel className="font-normal">{role.name}</FormLabel>
-                          {role.name}
-                        </FormLabel>
                       </FormItem>
                     ))}
                   </RadioGroup>
@@ -523,9 +503,7 @@ export default function DetailUserForm() {
                               <FormControl>
                                 <Checkbox
                                   disabled
-                                  checked={field.value?.includes(
+                                  checked={field.value?.includes(String(item.typeId))}
-                                    String(item.typeId)
-                                  )}
                                   onCheckedChange={(checked) => {
                                     return checked
                                       ? field.onChange([
@@ -534,16 +512,13 @@ export default function DetailUserForm() {
                                         ])
                                       : field.onChange(
                                           (field.value || []).filter(
-                                            (value) =>
+                                            (value) => value !== String(item.typeId)
-                                              value !== String(item.typeId)
                                           )
                                         );
                                   }}
                                 />
                               </FormControl>
-                              <FormLabel className="font-normal">
+                              <FormLabel className="font-normal">{item.name}</FormLabel>
-                                {item.name}
-                              </FormLabel>
                             </FormItem>
                           );
                         }}
@@ -565,11 +540,7 @@ export default function DetailUserForm() {
                 render={({ field }) => (
                   <FormItem>
                     <FormLabel>Pendidikan Terakhir</FormLabel>
-                    <Select
+                    <Select onValueChange={field.onChange} value={field.value} disabled>
-                      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
+                    <Select onValueChange={field.onChange} value={field.value} disabled>
-                      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
+                    <Select onValueChange={field.onChange} value={field.value} disabled>
-                      onValueChange={field.onChange}
-                      value={field.value}
-                      disabled
-                    >
                       <FormControl>
                         <SelectTrigger>
                           <SelectValue />

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Link, useRouter } from "@/i18n/navigation";
 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 SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import withReactContent from "sweetalert2-react-content";
+import { Textarea } from "@/components/ui/textarea";
-import { close, error, loading } from "@/config/swal";
-import { useParams } from "next/navigation";
 
 const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
   ssr: false,
@@ -367,10 +363,7 @@ export default function EditUserForm() {
     <div>
       <SiteBreadcrumb />
       <Form {...form}>
-        <form
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 bg-white p-10 w-full">
-          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)
+                          ? roleList.find((role) => role.value === field.value)?.label
-                              ?.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
+                                  role.value === field.value ? "opacity-100" : "opacity-0"
-                                    ? "opacity-100"
-                                    : "opacity-0"
                                 )}
                               />
                             </CommandItem>
@@ -438,11 +428,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Nama Lengkap</FormLabel>
                 <FormControl>
-                  <Input
+                  <Input placeholder="Masukkan nama lengkap" {...field} className="w-1/2" />
-                    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
+                  <Input placeholder="Masukkan username" {...field} className="w-1/2" />
-                    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
+                      <FormItem key={role.id} className="flex items-center space-x-3 space-y-0">
-                        key={role.id}
-                        className="flex items-center space-x-3 space-y-0"
-                      >
                         <FormControl>
                           <RadioGroupItem value={role.id} />
                         </FormControl>
-                        <FormLabel className="font-normal">
+                        <FormLabel className="font-normal">{role.name}</FormLabel>
-                          {role.name}
-                        </FormLabel>
                       </FormItem>
                     ))}
                   </RadioGroup>
@@ -522,9 +499,7 @@ export default function EditUserForm() {
                             >
                               <FormControl>
                                 <Checkbox
-                                  checked={field.value?.includes(
+                                  checked={field.value?.includes(String(item.typeId))}
-                                    String(item.typeId)
-                                  )}
                                   onCheckedChange={(checked) => {
                                     return checked
                                       ? field.onChange([
@@ -533,16 +508,13 @@ export default function EditUserForm() {
                                         ])
                                       : field.onChange(
                                           (field.value || []).filter(
-                                            (value) =>
+                                            (value) => value !== String(item.typeId)
-                                              value !== String(item.typeId)
                                           )
                                         );
                                   }}
                                 />
                               </FormControl>
-                              <FormLabel className="font-normal">
+                              <FormLabel className="font-normal">{item.name}</FormLabel>
-                                {item.name}
-                              </FormLabel>
                             </FormItem>
                           );
                         }}
@@ -642,12 +614,7 @@ export default function EditUserForm() {
               <FormItem>
                 <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
                 <FormControl>
-                  <Input
+                  <Input type="number" placeholder="Masukkan NRP" {...field} className="w-1/2" />
-                    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
+                  <Input type="email" placeholder="Masukkan email" {...field} className="w-1/2" />
-                    type="email"
-                    placeholder="Masukkan email"
-                    {...field}
-                    className="w-1/2"
-                  />
                 </FormControl>
 
                 <FormMessage />

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">
+          <p className="text-lg">Data User {isInternal ? "Internal" : "Eksternal"}</p>
-            Data User {isInternal ? "Internal" : "Eksternal"}
-          </p>
           {isInternal && (
             <Link href="/admin/management-user/internal/create">
               <Button color="primary" size="md">

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.startDate.split(" ")[0]} - {row.original.endDate.split(" ")[0]}
-        {row.original.endDate.split(" ")[0]}
       </span>
     ),
   },

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: {
+export default function TrackingMediaModal(props: { triggerFetch: () => void }) {
-  triggerFetch: () => void;
-}) {
   const [content, setContent] = useState<any>([]);
   const [inputValue, setInputValue] = useState("");
   const [selectedId, setSelectedId] = useState(0);

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 { Input } from "@/components/ui/input";
-import TablePagination from "@/components/features/table/table-pagination";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
-import columns from "./column";
-import { listEnableCategory } from "@/lib/services/content/content";
-import { close, loading } from "@/config/swal";
 import { Label } from "@/components/ui/label";
 import {
-  Dialog,
+  Table,
-  DialogContent,
+  TableBody,
-  DialogFooter,
+  TableCell,
-  DialogHeader,
+  TableHead,
-  DialogTitle,
+  TableHeader,
-  DialogTrigger,
+  TableRow,
-} from "@/components/ui/dialog";
+} from "@/components/ui/table";
-import { link } from "fs";
+import SearchAudioComponent from "@/components/features/form/media-tracking/search-audio-card";
-import { listDataAll } from "@/lib/services/landing/landing";
+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 TablePagination from "@/components/features/table/table-pagination";
-import SearchAudioComponent from "@/components/features/form/media-tracking/search-audio-card";
+
+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] =
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-    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(
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-        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">
+        <p className="text-xl font-medium text-default-900">Tracking Berita hari ini!</p>
-          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
+                  <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
-                    value={showData}
+                    <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
-                    onValueChange={setShowData}
+                    <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
-                  >
+                    <DropdownMenuRadioItem value="100">1 - 100 Data</DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="10">
+                    <DropdownMenuRadioItem value="250">1 - 250 Data</DropdownMenuRadioItem>
-                      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) =>
+                        onCheckedChange={(value) => column.toggleVisibility(!!value)}
-                          column.toggleVisibility(!!value)
-                        }
                       >
                         {column.id}
                       </DropdownMenuCheckboxItem>
@@ -337,10 +318,7 @@ const NewsTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -366,11 +344,7 @@ const NewsTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
       {/* <div className="flex justify-end mt-4">
         <Button
           color="primary"

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";
 

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 }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("source")}</span>,
-      <span className="normal-case">{row.getValue("source")}</span>
-    ),
   },
   {
     accessorKey: "title",
     header: "Judul Berita",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("title")}</span>,
-      <span className="normal-case">{row.getValue("title")}</span>
-    ),
   },
   {
     accessorKey: "link",
     header: "Link Berita",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("link")}</span>,
-      <span className="normal-case">{row.getValue("link")}</span>
-    ),
   },
 ];
 

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,
+  Table,
-  DialogContent,
+  TableBody,
-  DialogFooter,
+  TableCell,
-  DialogHeader,
+  TableHead,
-  DialogTitle,
+  TableHeader,
-  DialogTrigger,
+  TableRow,
-} from "@/components/ui/dialog";
+} from "@/components/ui/table";
-import { link } from "fs";
+import TablePagination from "@/components/features/table/table-pagination";
-import { getMediaTrackingResult } from "@/lib/services/media-tracking/media-tracking";
+
+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] =
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-    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(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -248,11 +239,7 @@ const NewsDetailTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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>[] = [
   {

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-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,
+  Table,
-  PopoverContent,
+  TableBody,
-  PopoverTrigger,
+  TableCell,
-} from "@/components/ui/popover";
+  TableHead,
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+  TableHeader,
-import { listEnableCategory } from "@/lib/services/content/content";
+  TableRow,
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@/components/ui/table";
-import { close, loading } from "@/config/swal";
+import TablePagination from "@/components/features/table/table-pagination";
-import { Link } from "@/i18n/navigation";
+
+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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -228,22 +222,11 @@ const MediaOnlineTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              <DropdownMenuRadioGroup
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
-                value={showData}
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
-                onValueChange={setShowData}
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
-              >
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="10">
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
-                  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(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -290,11 +270,7 @@ const MediaOnlineTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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 (

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() {

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() {

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
+            <Link href={`/admin/media-tracking/tb-news/detail/${row.original.id}`}>
-              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

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 {
-import { listDataAll } from "@/lib/services/landing/landing";
+  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 TablePagination from "@/components/features/table/table-pagination";
-import SearchAudioComponent from "@/components/features/form/media-tracking/search-audio-card";
+
+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] =
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-    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(
+      setCategoryFilter(categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]);
-        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?.length > 0 ? categoryFilter?.sort().join(",") : categorie || "";
-            ? 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">
+        <p className="text-xl font-medium text-default-900">Tracking Berita hari ini!</p>
-          Tracking Berita hari ini!
-        </p>
       </div>
       <Dialog>
         <DialogTrigger asChild>
@@ -280,10 +272,7 @@ const NewsTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -309,11 +298,7 @@ const NewsTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
       <div className="flex justify-end mt-4">
         <Button
           color="primary"

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";
 

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>[] = [
   {

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,
+  Table,
-  DialogContent,
+  TableBody,
-  DialogFooter,
+  TableCell,
-  DialogHeader,
+  TableHead,
-  DialogTitle,
+  TableHeader,
-  DialogTrigger,
+  TableRow,
-} from "@/components/ui/dialog";
+} from "@/components/ui/table";
-import { link } from "fs";
+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] =
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
-    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(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -251,11 +242,7 @@ const NewsDetailTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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() {

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 {
-import StatusToogle from "./status-toogle";
+  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 }) => (
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
-      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
-    ),
   },
   {
     accessorKey: "isStaticBanner",
     header: "Static Banner",
     cell: ({ row }) => (
-      <StaticToogle
+      <StaticToogle id={row.original.id} initChecked={row.original.isStaticBanner} />
-        id={row.original.id}
-        initChecked={row.original.isStaticBanner}
-      />
     ),
   },
   {
     accessorKey: "statusName",
     header: "Status Banner",
-    cell: ({ row }) => (
+    cell: ({ row }) => <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />,
-      <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
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</Link>
-                href={`/contributor/content/image/detail/${row.original.id}`}
-              >
-                Detail
-              </Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -113,10 +110,7 @@ const BannerListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>

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 {
-import { setBanner } from "@/lib/services/settings/settings";
+  DropdownMenu,
-import { error } from "@/config/swal";
+  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 }) => (
+    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
-      <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
+              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</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)}>
+              <a onClick={() => handleBanner(row.original.id)}>Jadikan Banner</a>
-                Jadikan Banner
-              </a>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

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: {
+export default function StaticToogle(props: { id: number; initChecked: boolean }) {
-  id: number;
-  initChecked: boolean;
-}) {
   const { id, initChecked } = props;
   const { toast } = useToast();
   const router = useRouter();

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: {
+export default function StatusToogle(props: { id: number; initChecked: boolean }) {
-  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
+    <Switch id="status-toogle" checked={initChecked} onCheckedChange={() => disableBanner()} />
-      id="status-toogle"
-      checked={initChecked}
-      onCheckedChange={() => disableBanner()}
-    />
   );
 }

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-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,
+  Table,
-  PopoverContent,
+  TableBody,
-  PopoverTrigger,
+  TableCell,
-} from "@/components/ui/popover";
+  TableHead,
-import { listDataMedia } from "@/lib/services/broadcast/broadcast";
+  TableHeader,
-import { listEnableCategory } from "@/lib/services/content/content";
+  TableRow,
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@/components/ui/table";
-import { close, loading } from "@/config/swal";
+import TablePagination from "@/components/features/table/table-pagination";
-import { Link } from "@/i18n/navigation";
+
+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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -218,22 +212,11 @@ const ContentListTable = () => {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56 text-sm">
-              <DropdownMenuRadioGroup
+              <DropdownMenuRadioGroup value={showData} onValueChange={setShowData}>
-                value={showData}
+                <DropdownMenuRadioItem value="10">1 - 10 Data</DropdownMenuRadioItem>
-                onValueChange={setShowData}
+                <DropdownMenuRadioItem value="20">1 - 20 Data</DropdownMenuRadioItem>
-              >
+                <DropdownMenuRadioItem value="25">1 - 25 Data</DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="10">
+                <DropdownMenuRadioItem value="50">1 - 50 Data</DropdownMenuRadioItem>
-                  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
+                  <a onClick={() => fetchData()} className="cursor-pointer text-primary">
-                    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) =>
+                        onCheckedChange={(e) => handleChange("category", category.id, Boolean(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) =>
+                      onCheckedChange={(e) => handleChange("status", 1, Boolean(e))}
-                        handleChange("status", 1, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -293,9 +269,7 @@ const ContentListTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(2)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 2, Boolean(e))}
-                        handleChange("status", 2, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -308,9 +282,7 @@ const ContentListTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(3)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 3, Boolean(e))}
-                        handleChange("status", 3, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -323,9 +295,7 @@ const ContentListTable = () => {
                     <Checkbox
                       id="accepted"
                       checked={statusFilter.includes(4)}
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("status", 4, Boolean(e))}
-                        handleChange("status", 4, Boolean(e))
-                      }
                     />
                     <label
                       htmlFor="accepted"
@@ -348,10 +318,7 @@ const ContentListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -381,11 +348,7 @@ const ContentListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </>
   );
 };

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>

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 { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
-import { Badge } from "@/components/ui/badge";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-
-import { Link, useRouter } from "@/i18n/navigation";
-import StatusToogle from "./status";
-import { error } from "@/config/swal";
-import { deleteCategory } from "@/lib/services/settings/settings";
 import { useToast } from "@/components/ui/use-toast";
+
 import EditCategoryModal from "./edit";
-import {
+import StatusToogle from "./status";
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
 
 const columns: ColumnDef<any>[] = [
   {
@@ -40,23 +31,17 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "name",
     header: "Nama Kategori",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("name")}</span>,
-      <span className="normal-case">{row.getValue("name")}</span>
-    ),
   },
   {
     accessorKey: "mediaTypesString",
     header: "Tipe Konten",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("mediaTypesString")}</span>,
-      <span className="normal-case">{row.getValue("mediaTypesString")}</span>
-    ),
   },
   {
     accessorKey: "publishedLocation",
     header: "Wilayah",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("publishedLocation")}</span>,
-      <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
+              <EditCategoryModal id={row.original.id} thumbnailLink={row.original.thumbnailLink} />
-                id={row.original.id}
-                thumbnailLink={row.original.thumbnailLink}
-              />
               <a
                 onClick={() => categoryDelete(row.original.id)}
                 className="hover:underline cursor-pointer hover:text-destructive"

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 { UnitMapping } from "./unit-mapping";
-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";
 
 const FormSchema = z.object({
   title: z.string({
@@ -48,14 +50,10 @@ const FormSchema = z.object({
   description: z.string({
     required_error: "Required",
   }),
-  contentType: z
+  contentType: z.array(z.string()).refine((value) => value.some((item) => item), {
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
     message: "Required",
   }),
-  selectedUser: z
+  selectedUser: z.array(z.string()).refine((value) => value.some((item) => item), {
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
     message: "Required",
   }),
   publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
@@ -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<
+  const [userList, setUserList] = useState<{ id: string; name: string; isInternal: boolean }[]>([]);
-    { 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) =>
+  const isAllContentChecked = listContent.every((item) => contentType?.includes(item.id));
-    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) =>
+  const isAllTargetChecked = publishToList.every((item) => target?.includes(item.id));
-    target?.includes(item.id)
-  );
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop: (acceptedFiles) => {
@@ -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(
+    formMedia.append("isInt", data.publishTo.includes("internasional") ? "true" : "false");
-      "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
+      <DialogContent size="md" className="sm:h-[300px] md:h-[300px] lg:h-[500px] overflow-y-auto">
-        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
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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
+                            <FormItem key={item.id} className="flex flex-row items-start">
-                              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.onChange([...field.value, item.id])
-                                            ...field.value,
-                                            item.id,
-                                          ])
                                         : field.onChange(
-                                            field.value?.filter(
+                                            field.value?.filter((value) => value !== item.id)
-                                              (value) => value !== item.id
-                                            )
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
-                                  {item.name}
-                                </FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -360,31 +333,21 @@ export default function CreateCategoryModal() {
                         name="selectedUser"
                         render={({ field }) => {
                           return (
-                            <FormItem
+                            <FormItem key={item.id} className="flex flex-row items-start ">
-                              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.onChange([...field.value, item.id])
-                                            ...field.value,
-                                            item.id,
-                                          ])
                                         : field.onChange(
-                                            field.value?.filter(
+                                            field.value?.filter((value) => value !== item.id)
-                                              (value) => value !== item.id
-                                            )
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
-                                  {item.name}
-                                </FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -432,31 +395,21 @@ export default function CreateCategoryModal() {
                             name="publishTo"
                             render={({ field }) => {
                               return (
-                                <FormItem
+                                <FormItem key={item.id} className="flex flex-row items-start ">
-                                  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.onChange([...field.value, item.id])
-                                                ...field.value,
-                                                item.id,
-                                              ])
                                             : field.onChange(
-                                                field.value?.filter(
+                                                field.value?.filter((value) => value !== item.id)
-                                                  (value) => value !== item.id
-                                                )
                                               );
                                         }}
                                       />
                                     </FormControl>
-                                    <FormLabel className="font-normal">
+                                    <FormLabel className="font-normal">{item.name} </FormLabel>
-                                      {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.
+                            ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal
-                            Ukuran maksimal 100mb.)
+                            100mb.)
                           </div>
                         </div>
                       </div>
@@ -555,10 +508,7 @@ export default function CreateCategoryModal() {
                         className="w-[30%]"
                         alt="thumbnail"
                       />
-                      <a
+                      <a onClick={() => handleRemoveFile(files[0])} className="cursor-pointer">
-                        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
+              <Button type="submit" color="primary" size="md" className="text-xs">
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
                 Tambah Kategori
               </Button>
             </DialogFooter>

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,14 +46,10 @@ const FormSchema = z.object({
   description: z.string({
     required_error: "Required",
   }),
-  contentType: z
+  contentType: z.array(z.string()).refine((value) => value.some((item) => item), {
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
     message: "Required",
   }),
-  selectedUser: z
+  selectedUser: z.array(z.string()).refine((value) => value.some((item) => item), {
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
     message: "Required",
   }),
   publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
@@ -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<
+  const [userList, setUserList] = useState<{ id: string; name: string; isInternal: boolean }[]>([]);
-    { 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(
+      form.setValue("selectedUser", removeAndReturn(data?.publishedFor, [2, 3, 4]));
-        "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) =>
+  const isAllContentChecked = listContent.every((item) => contentType?.includes(item.id));
-    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) =>
+  const isAllTargetChecked = publishToList.every((item) => target?.includes(item.id));
-    target?.includes(item.id)
-  );
 
   useEffect(() => {
     getRoles();
@@ -262,10 +247,7 @@ export default function EditCategoryModal(props: {
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger>
-        <a
+        <a onClick={() => setIsOpen(true)} className="hover:underline cursor-pointer">
-          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
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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
+                            <FormItem key={item.id} className="flex flex-row items-start">
-                              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.onChange([...field.value, item.id])
-                                            ...field.value,
-                                            item.id,
-                                          ])
                                         : field.onChange(
-                                            field.value?.filter(
+                                            field.value?.filter((value) => value !== item.id)
-                                              (value) => value !== item.id
-                                            )
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
-                                  {item.name}
-                                </FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -385,10 +354,7 @@ export default function EditCategoryModal(props: {
                         name="selectedUser"
                         render={({ field }) => {
                           return (
-                            <FormItem
+                            <FormItem key={item.id} className="flex flex-row items-start ">
-                              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.onChange([...field.value, item.id])
-                                            ...field.value,
-                                            item.id,
-                                          ])
                                         : field.onChange(
-                                            field.value?.filter(
+                                            field.value?.filter((value) => value !== item.id)
-                                              (value) => value !== item.id
-                                            )
                                           );
                                     }}
                                   />
                                 </FormControl>
-                                <FormLabel className="font-normal">
+                                <FormLabel className="font-normal">{item.name}</FormLabel>
-                                  {item.name}
-                                </FormLabel>
                               </div>
                             </FormItem>
                           );
@@ -460,10 +419,7 @@ export default function EditCategoryModal(props: {
                             name="publishTo"
                             render={({ field }) => {
                               return (
-                                <FormItem
+                                <FormItem key={item.id} className="flex flex-row items-start ">
-                                  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.onChange([...field.value, item.id])
-                                                ...field.value,
-                                                item.id,
-                                              ])
                                             : field.onChange(
-                                                field.value?.filter(
+                                                field.value?.filter((value) => value !== item.id)
-                                                  (value) => value !== item.id
-                                                )
                                               );
                                         }}
                                       />
                                     </FormControl>
-                                    <FormLabel className="font-normal">
+                                    <FormLabel className="font-normal">{item.name} </FormLabel>
-                                      {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
+                              ( Upload file dengan format .jpg, .jpeg, atau .png. Ukuran maksimal
-                              .png. Ukuran maksimal 100mb.)
+                              100mb.)
                             </div>
                           </div>
                         </div>
@@ -585,15 +534,8 @@ export default function EditCategoryModal(props: {
                     )}
                     {field.value !== "" && (
                       <div className="flex flex-row gap-2">
-                        <img
+                        <img src={field.value} className="w-[30%]" alt="thumbnail" />
-                          src={field.value}
+                        <a onClick={() => form.setValue("file", "")} className="cursor-pointer">
-                          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
+                        <a onClick={() => handleRemoveFile(files[0])} className="cursor-pointer">
-                          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
+                <Button type="submit" color="primary" size="md" className="text-xs">
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
                   Edit Kategori
                 </Button>
               </DialogFooter>

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: {
+import { useRouter } from "@/i18n/navigation";
-  id: number;
+
-  initValue: boolean;
+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) => {

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 { listEnableCategory } from "@/lib/services/content/content";
-import { NewCampaignIcon } from "@/components/icon";
 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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { useTranslations } from "next-intl";
 import {
-  Popover,
+  Table,
-  PopoverContent,
+  TableBody,
-  PopoverTrigger,
+  TableCell,
-} from "@/components/ui/popover";
+  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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -127,18 +119,11 @@ const AdminCategoryTable = () => {
     try {
       loading();
 
-      const regionQuery = regionFilter.length
+      const regionQuery = regionFilter.length ? `&publishedLocation=${regionFilter.join(",")}` : "";
-        ? `&publishedLocation=${regionFilter.join(",")}`
-        : "";
 
-      const statusQuery = statusFilter.length
+      const statusQuery = statusFilter.length ? `&isPublish=${statusFilter.join(",")}` : "";
-        ? `&isPublish=${statusFilter.join(",")}`
-        : "";
 
-      const response = await getCategories(
+      const response = await getCategories(page - 1, `${regionQuery}${statusQuery}`);
-        page - 1,
-        `${regionQuery}${statusQuery}`
-      );
 
       const data = response?.data?.data;
       const contentData = data?.content;
@@ -166,9 +151,7 @@ const AdminCategoryTable = () => {
           setRegionFilter([]);
         }
       } else {
-        let updated = checked
+        let updated = checked ? [...regionFilter, id] : regionFilter.filter((val) => val !== id);
-          ? [...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
+                <a onClick={() => fetchData()} className="cursor-pointer text-primary">
-                  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(
+                          ? ["mabes", "polda", "satker", "internasional"].every((val) =>
-                              (val) => regionFilter.includes(val)
+                              regionFilter.includes(val)
                             )
                           : regionFilter.includes(region.id)
                       }
-                      onCheckedChange={(e) =>
+                      onCheckedChange={(e) => handleChange("region", region.id, Boolean(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) =>
+                    onCheckedChange={(e) => handleChange("status", "true", Boolean(e))}
-                      handleChange("status", "true", Boolean(e))
-                    }
                   />
-                  <label
+                  <label htmlFor="aktif" className="text-xs font-medium leading-none">
-                    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) =>
+                    onCheckedChange={(e) => handleChange("status", "false", Boolean(e))}
-                      handleChange("status", "false", Boolean(e))
-                    }
                   />
-                  <label
+                  <label htmlFor="nonaktif" className="text-xs font-medium leading-none">
-                    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(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -311,11 +276,7 @@ const AdminCategoryTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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) =>
+  const isAllUnitChecked = unitList.every((item) => unitType?.includes(String(item.id)));
-    unitType?.includes(String(item.id))
+  const isAllSatkerChecked = satkerList.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
+        <a onClick={() => setIsOpen(true)} className="text-primary cursor-pointer text-xs mr-3">
-          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
+                  <FormItem className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}>
-                    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(
+                                  checked={field.value?.includes(String(item.id))}
-                                    String(item.id)
-                                  )}
                                   onCheckedChange={(checked) => {
                                     return checked
-                                      ? field.onChange([
+                                      ? field.onChange([...field.value, String(item.id)])
-                                          ...field.value,
-                                          String(item.id),
-                                        ])
                                       : field.onChange(
-                                          field.value?.filter(
+                                          field.value?.filter((value) => value !== String(item.id))
-                                            (value) => value !== String(item.id)
-                                          )
                                         );
                                   }}
                                 />
@@ -200,9 +184,7 @@ export function UnitMapping(props: {
                 control={form.control}
                 name="items"
                 render={() => (
-                  <FormItem
+                  <FormItem className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}>
-                    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(
+                                  checked={field.value?.includes(String(item.id))}
-                                    String(item.id)
-                                  )}
                                   onCheckedChange={(checked) => {
                                     return checked
-                                      ? field.onChange([
+                                      ? field.onChange([...field.value, String(item.id)])
-                                          ...field.value,
-                                          String(item.id),
-                                        ])
                                       : field.onChange(
-                                          field.value?.filter(
+                                          field.value?.filter((value) => value !== String(item.id))
-                                            (value) => value !== String(item.id)
-                                          )
                                         );
                                   }}
                                 />

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() {

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 { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
-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 EditCategoryModal from "./edit";
-import {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-  Popover,
+import { useToast } from "@/components/ui/use-toast";
-  PopoverContent,
+
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-import { htmlToString } from "@/lib/utils/globals";
 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">
+      <span className="normal-case">{htmlToString(row.getValue("question"))}</span>
-        {htmlToString(row.getValue("question"))}
-      </span>
     ),
   },
   {
     accessorKey: "answer",
     header: "Answer",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{htmlToString(row.getValue("answer"))}</span>,
-      <span className="normal-case">
-        {htmlToString(row.getValue("answer"))}
-      </span>
-    ),
   },
 
   {

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) =>
+  const isAllTargetChecked = publishToList.every((item) => target?.includes(item.id));
-    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
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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">
+                        <FormLabel className="font-normal">Internasional</FormLabel>
-                          Internasional
-                        </FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -283,12 +273,7 @@ export default function CreateFAQModal() {
               )}
             />
             <DialogFooter>
-              <Button
+              <Button type="submit" color="primary" size="md" className="text-xs">
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
                 Tambah FAQ
               </Button>
             </DialogFooter>

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(
+    form.setValue("publishTo", data.isInternational ? "international" : "wilayah");
-      "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">
+        <a className="hover:underline cursor-pointer">{isDetail ? "Detail" : "Edit"}</a>
-          {isDetail ? "Detail" : "Edit"}
-        </a>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
           <DialogTitle>{isDetail ? "Detail" : "Edit"} FAQ</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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">
+                        <FormLabel className="font-normal">Internasional</FormLabel>
-                          Internasional
-                        </FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -307,12 +298,7 @@ export default function EditFAQModal(props: { id: string; isDetail: boolean }) {
             />
             {!isDetail && (
               <DialogFooter>
-                <Button
+                <Button type="submit" color="primary" size="md" className="text-xs">
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
                   Edit FAQ
                 </Button>
               </DialogFooter>

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 { listEnableCategory } from "@/lib/services/content/content";
-import { NewCampaignIcon } from "@/components/icon";
 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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -139,10 +135,7 @@ const AdminFAQTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>

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() {

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 { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
-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 EditCategoryModal from "./edit";
-import {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-  Popover,
+import { useToast } from "@/components/ui/use-toast";
-  PopoverContent,
+
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-import { htmlToString } from "@/lib/utils/globals";
 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">
+      <span className="normal-case">{htmlToString(row.getValue("question"))}</span>
-        {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
+              <EditFeedbackModal id={row.original.id} isDetail={true} data={row.original} />
-                id={row.original.id}
-                isDetail={true}
-                data={row.original}
-              />
 
-              <EditFeedbackModal
+              <EditFeedbackModal id={row.original.id} isDetail={false} data={row.original} />
-                id={row.original.id}
-                isDetail={false}
-                data={row.original}
-              />
 
               <a
                 onClick={() => faqDelete(row.original.id)}

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
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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">
+                        <FormLabel className="font-normal">Internasional</FormLabel>
-                          Internasional
-                        </FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -259,12 +255,7 @@ export default function CreateFAQModal() {
               )}
             />
             <DialogFooter>
-              <Button
+              <Button type="submit" color="primary" size="md" className="text-xs">
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
                 Tambah Feeback
               </Button>
             </DialogFooter>

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(
+    form.setValue("publishTo", data.isInternational ? "international" : "wilayah");
-      "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">
+        <a className="hover:underline cursor-pointer">{isDetail ? "Detail" : "Edit"}</a>
-          {isDetail ? "Detail" : "Edit"}
-        </a>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
           <DialogTitle>{isDetail ? "Detail" : "Edit"} Feedback</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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">
+                        <FormLabel className="font-normal">Internasional</FormLabel>
-                          Internasional
-                        </FormLabel>
                       </FormItem>
                     </RadioGroup>
                   </FormControl>
@@ -293,12 +284,7 @@ export default function EditFeedbackModal(props: {
 
             {!isDetail && (
               <DialogFooter>
-                <Button
+                <Button type="submit" color="primary" size="md" className="text-xs">
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
                   Edit Feedback
                 </Button>
               </DialogFooter>

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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -138,10 +129,7 @@ const AdminFeedbackTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>

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() {

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 { useEffect, useRef } from "react";
-import { useForm } from "react-hook-form";
+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 SiteBreadcrumb from "@/components/ui/structures/site-breadcrumb";
-import { useEffect, useRef } from "react";
-import { getPrivacy, savePrivacy } from "@/lib/services/settings/settings";
 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
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm p-4">
-          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
+                <Input value={field.value} placeholder="Masukkan Judul" onChange={field.onChange} />
-                  value={field.value}
-                  placeholder="Masukkan Judul"
-                  onChange={field.onChange}
-                />
 
                 <FormMessage />
               </FormItem>
@@ -114,10 +109,7 @@ export default function AdminPrivacyPolicy() {
                     onChange={field.onChange}
                     
                   /> */}
-                  <CustomEditor
+                  <CustomEditor onChange={field.onChange} initialData={field.value} />
-                    onChange={field.onChange}
-                    initialData={field.value}
-                  />
                 </FormControl>
 
                 <FormMessage />

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 { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
-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 EditCategoryModal from "./edit";
-import {
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-  Popover,
+import { useToast } from "@/components/ui/use-toast";
-  PopoverContent,
+
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Menubar,
-  MenubarContent,
-  MenubarMenu,
-  MenubarTrigger,
-} from "@/components/ui/menubar";
-import { htmlToString } from "@/lib/utils/globals";
 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 }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("tagName")}</span>,
-      <span className="normal-case">{row.getValue("tagName")}</span>
-    ),
   },
   {
     accessorKey: "categoryName",
     header: "Kategori",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("categoryName")}</span>,
-      <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
+              <EditTagModal id={row.original.id} isDetail={true} data={row.original} />
-                id={row.original.id}
-                isDetail={true}
-                data={row.original}
-              />
 
-              <EditTagModal
+              <EditTagModal id={row.original.id} isDetail={false} data={row.original} />
-                id={row.original.id}
-                isDetail={false}
-                data={row.original}
-              />
 
               <a
                 onClick={() => tagDelete(row.original.id)}

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 { useRouter } from "@/i18n/navigation";
-import { useToast } from "@/components/ui/use-toast";
+import { zodResolver } from "@hookform/resolvers/zod";
-import { getCategories, getCategoriesAll } from "@/lib/services/settings/settings";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
 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 {
-import { useTranslations } from "next-intl";
+  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<
+  const [categoryList, setCategoryList] = useState<{ id: number; label: string; value: string }[]>(
-    { 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
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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(
+                            ? categoryList.find((categ) => categ.value === field.value)?.label
-                                (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
+                                    role.value === field.value ? "opacity-100" : "opacity-0"
-                                      ? "opacity-100"
-                                      : "opacity-0"
                                   )}
                                 />
                               </CommandItem>
@@ -196,12 +184,7 @@ export default function CreateTagModal() {
               )}
             />
             <DialogFooter>
-              <Button
+              <Button type="submit" color="primary" size="md" className="text-xs">
-                type="submit"
-                color="primary"
-                size="md"
-                className="text-xs"
-              >
                 Tambah Tag
               </Button>
             </DialogFooter>

src/app/[locale]/(protected)/admin/settings/tag/component/edit.tsx

@@ -1,29 +1,14 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import { stringify } from "querystring";
-import {
+import { Fragment, useEffect, useState } from "react";
-  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 { useRouter } from "@/i18n/navigation";
-import { Input } from "@/components/ui/input";
+import { zodResolver } from "@hookform/resolvers/zod";
-import { Checkbox } from "@/components/ui/checkbox";
+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 { cn } from "@/lib/utils/utils";
-
+import { Button } from "@/components/ui/button";
-import { close, error, loading } from "@/config/swal";
+import { Checkbox } from "@/components/ui/checkbox";
-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 {
   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<
+  const [categoryList, setCategoryList] = useState<{ id: number; label: string; value: string }[]>(
-    { 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">
+        <a className="hover:underline cursor-pointer">{isDetail ? "Detail" : "Edit"}</a>
-          {isDetail ? "Detail" : "Edit"}
-        </a>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
           <DialogTitle>{isDetail ? "Detail" : "Edit"} Tag</DialogTitle>
         </DialogHeader>
         <Form {...form}>
-          <form
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3 bg-white rounded-sm">
-            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(
+                            ? categoryList.find((categ) => categ.value === field.value)?.label
-                                (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
+                                    role.value === field.value ? "opacity-100" : "opacity-0"
-                                      ? "opacity-100"
-                                      : "opacity-0"
                                   )}
                                 />
                               </CommandItem>
@@ -255,12 +242,7 @@ export default function EditTagModal(props: {
 
             {!isDetail && (
               <DialogFooter>
-                <Button
+                <Button type="submit" color="primary" size="md" className="text-xs">
-                  type="submit"
-                  color="primary"
-                  size="md"
-                  className="text-xs"
-                >
                   Edit Tag
                 </Button>
               </DialogFooter>

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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -138,10 +133,7 @@ const AdminTagTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>

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() {

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
+      const createdAt = row.getValue("createdAt") as string | number | undefined;
-        | 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 }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("createdByCategory")}</span>,
-      <span className="normal-case">{row.getValue("createdByCategory")}</span>
-    ),
   },
   {
     accessorKey: "createdByUsername",
     header: "UserName",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("createdByUsername")}</span>,
-      <span className="normal-case">{row.getValue("createdByUsername")}</span>
-    ),
   },
   {
     accessorKey: "accessFrequency",
     header: "Akses Mediahub",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("accessFrequency")}</span>,
-      <span className="normal-case">{row.getValue("accessFrequency")}</span>
-    ),
   },
   {
     accessorKey: "uiExperienceDesign",
     header: "Tampilan Desain Web",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("uiExperienceDesign")}</span>,
-      <span className="normal-case">{row.getValue("uiExperienceDesign")}</span>
-    ),
   },
   {
     accessorKey: "uiExperienceNavigation",
     header: "Kemudahan Navigasi",
     cell: ({ row }) => (
-      <span className="normal-case">
+      <span className="normal-case">{row.getValue("uiExperienceNavigation")}</span>
-        {row.getValue("uiExperienceNavigation")}
-      </span>
     ),
   },
   {
     accessorKey: "uiExperienceSpeed",
     header: "Kecepatan Akses",
-    cell: ({ row }) => (
+    cell: ({ row }) => <span className="normal-case">{row.getValue("uiExperienceSpeed")}</span>,
-      <span className="normal-case">{row.getValue("uiExperienceSpeed")}</span>
-    ),
   },
   {
     id: "actions",

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:
+    question: "Seberapa Akurat dan Terpercaya\nInformasi pada Website MediaHub Polri",
-      "Seberapa Akurat dan Terpercaya\nInformasi pada Website MediaHub Polri",
     total: 60,
   },
   {
-    question:
+    question: "Seberapa Lengkap Informasi dan Berita\npada Website MediaHub Polri",
-      "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 [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-    []
+  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,
@@ -251,9 +240,7 @@ const SurveyListTable = () => {
         </div>
       </div>
       <div className="p-3">
-        <h2 className="text-center font-semibold mb-4">
+        <h2 className="text-center font-semibold mb-4">Survei Kepuasan Pengguna MediaHub Polri</h2>
-          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(
+                    : flexRender(header.column.columnDef.header, header.getContext())}
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
                 </TableHead>
               ))}
             </TableRow>
@@ -335,11 +319,7 @@ const SurveyListTable = () => {
           )}
         </TableBody>
       </Table>
-      <TablePagination
+      <TablePagination table={table} totalData={totalData} totalPage={totalPage} />
-        table={table}
-        totalData={totalData}
-        totalPage={totalPage}
-      />
     </div>
   );
 };

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 (

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() {

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 { Label } from "@/components/ui/label";
-import {
+
-  EventContentArg,
+import { CalendarCategory, CalendarEvent } from "./data";
-} from '@fullcalendar/core'
+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
+              <Button onClick={handleDateClick} className="dark:bg-background dark:text-foreground">
-                onClick={handleDateClick}
-                className="dark:bg-background dark:text-foreground"
-              >
                 <Plus className="w-4 h-4   me-1" />
                 {t("addEvent")}
               </Button>
@@ -159,9 +153,7 @@ 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">
+              <p className="text-sm font-medium text-default-700 mb-3">{t("shortDesc")}</p>
-               {t("shortDesc")}
-              </p>
               {dragEvents.map((event) => (
                 <ExternalDraggingevent key={event.id} event={event} />
               ))}
@@ -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={[
+              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
-                dayGridPlugin,
-                timeGridPlugin,
-                interactionPlugin,
-                listPlugin,
-              ]}
               headerToolbar={{
                 left: "prev,next today",
                 center: "title",

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,
@@ -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 CalendarEvent = (typeof calendarEvents)[number];
-export type CalendarCategory = (typeof  calendarCategories)[number]
+export type CalendarCategory = (typeof calendarCategories)[number];
-export type Category = (typeof  categories)[number]
+export type Category = (typeof categories)[number];

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",

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 { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { cn } from "@/lib/utils/utils"
-import { format } from "date-fns";
-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>(
+  const [calendarProps, setCalendarProps] = React.useState<any>(categories[0].value);
-    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 ? (
+                        {startDate ? format(startDate, "PP") : <span>Pick a date</span>}
-                          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 ? (
+                        {endDate ? format(endDate, "PP") : <span>Pick a date</span>}
-                          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
+                            <SelectItem value={category.value} key={category.value}>
-                              value={category.value}
-                              key={category.value}
-                            >
                               {category.label}
                             </SelectItem>
                           ))}

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();

src/app/[locale]/(protected)/app/calendar/utils.ts

@@ -8,4 +8,4 @@ export const getEvents = async () => {
 // get categories
 export const getCategories = async () => {
   return categories;
-}
+};

src/app/[locale]/(protected)/app/chat/[id]/components/chat-header.tsx

@@ -1,33 +1,36 @@
 "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 {
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useMediaQuery } from "@/lib/hooks/use-media-query";
 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)");
 
-    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({
+          <Button
+            size="icon"
+            variant="ghost"
+            color="secondary"
+            onClick={() =>
+              setChatConfig({
                 ...chatConfig,
-                        isOpen: true
+                isOpen: true,
-                    })}>
+              })
+            }
+          >
             <Icon icon="heroicons-outline:menu-alt-1" className="w-5 h-5" />
           </Button>
         )}
@@ -97,12 +100,10 @@ const ChatHeader = ({ contact }: { contact: any }) => {
                       "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" />
                     )}

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
+  if (!chatConfig.showInfo) return null;
   return (
-        <Card className='w-[285px]'>
+    <Card className="w-[285px]">
-            <ScrollArea className='h-full'>
+      <ScrollArea className="h-full">
-                <CardContent className='p-0'> {children}</CardContent>
+        <CardContent className="p-0"> {children}</CardContent>
       </ScrollArea>
     </Card>
-    )
+  );
-}
+};
 
-export default InfoWrapper
+export default InfoWrapper;

src/app/[locale]/(protected)/app/chat/[id]/components/message-footer.tsx

@@ -1,12 +1,16 @@
 "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 { 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,
@@ -14,15 +18,8 @@ import {
   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 { useTheme } from "next-themes";
 
 const MessageFooter = () => {
   const { theme: mode } = useTheme();
@@ -46,23 +43,18 @@ const MessageFooter = () => {
 
     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="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">
+                  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>
@@ -76,11 +68,16 @@ const MessageFooter = () => {
             <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">
+                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]">
+            <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}
@@ -88,7 +85,6 @@ const MessageFooter = () => {
               />
             </PopoverContent>
           </Popover>
-
         </div>
         <div className="flex-1">
           <form onSubmit={handleSubmit}>
@@ -131,7 +127,6 @@ const MessageFooter = () => {
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
-
             </div>
           </form>
         </div>

src/app/[locale]/(protected)/app/chat/[id]/page.tsx

@@ -1,20 +1,21 @@
+import Image from "next/image";
+import { redirect } from "@/i18n/navigation";
+import { MoreHorizontal } from "lucide-react";
 
-import { getChatsByContactId, getProfileUser } from '../utils'
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Icon } from "@/components/ui/icon";
+import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Card, CardContent, CardHeader, CardFooter } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
-import Image from 'next/image';
+
-import { redirect } from '@/i18n/navigation';
+import { getChatsByContactId, getProfileUser } from "../utils";
-import MessageFooter from './components/message-footer';
+import ChatHeader from "./components/chat-header";
-import ChatHeader from './components/chat-header';
+import InfoWrapper from "./components/info-wrapper";
-import InfoWrapper from './components/info-wrapper';
+import MessageFooter from "./components/message-footer";
-import { MoreHorizontal } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 
 const socials = [
   {
@@ -34,13 +35,12 @@ const socials = [
   },
 ];
 
-const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) => {
+const ChatPageSingle = async ({ params: { id } }: { params: { id: string } }) => {
- 
+  const { chat, contact } = await getChatsByContactId(id);
-    const { chat, contact } = await getChatsByContactId(id)
+  const profile = await getProfileUser();
-    const profile = await getProfileUser()
 
   if (!contact) {
-        redirect('/app/chat')
+    redirect("/app/chat");
   }
 
   return (
@@ -51,7 +51,7 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
         </CardHeader>
         <CardContent className="  relative flex-1 overflow-y-auto no-scrollbar">
           {chat && chat?.chat?.length > 0 ? (
-                        chat?.chat?.map(({ senderId, message, }, index) => (
+            chat?.chat?.map(({ senderId, message }, index) => (
               <div className="block  " key={index}>
                 {senderId === "e2c1a571-5f7e-4f56-9020-13f98b0eaba2" ? (
                   <>
@@ -65,11 +65,7 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
                                   <MoreHorizontal />
                                 </span>
                               </DropdownMenuTrigger>
-                                                            <DropdownMenuContent
+                              <DropdownMenuContent className="w-fit" align="end" side="top">
-                                                                className="w-fit"
-                                                                align="end"
-                                                                side="top"
-                                                            >
                                 <DropdownMenuItem>Remove</DropdownMenuItem>
                                 <DropdownMenuItem>Forward</DropdownMenuItem>
                               </DropdownMenuContent>
@@ -81,7 +77,10 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
                             </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 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 ">
@@ -104,7 +103,6 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
                           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">
@@ -121,18 +119,17 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
                                   <MoreHorizontal />
                                 </span>
                               </DropdownMenuTrigger>
-                                                            <DropdownMenuContent
+                              <DropdownMenuContent className="w-fit" align="end" side="top">
-                                                                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 className="font-normal text-xs text-default-400 dark:text-default-600 text-start mt-1">
+                          {" "}
+                          2:40 pm{" "}
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -146,7 +143,6 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
               <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 />
@@ -154,32 +150,23 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
       </Card>
 
       <InfoWrapper>
-                <h4 className="text-xl text-default-900 font-medium mb-8 px-6 mt-6">
+        <h4 className="text-xl text-default-900 font-medium mb-8 px-6 mt-6">About</h4>
-                   About
-                </h4>
 
-                <div className='flex flex-col items-center px-6'>
+        <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">
+            <h5 className="text-base text-default-600  font-medium mb-1">{contact?.fullName}</h5>
-                            {contact?.fullName}
+            <h6 className="text-xs text-default-600  font-normal">{contact?.role}</h6>
-                        </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 icon="heroicons-outline:location-marker" className="text-base" />
-                                icon="heroicons-outline:location-marker"
-                                className="text-base"
-                            />
               <span>Location</span>
             </div>
             <div className="font-medium">Bangladesh</div>
@@ -201,41 +188,37 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string }; }) =
         </ul>
         <ul className="mt-5 px-6 space-y-4 border-b border-default-200  pb-5 ">
           {socials?.map((slink, sindex) => (
-                        <li
+            <li key={sindex} className="text-sm text-default-600">
-                            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">
+                <span className="capitalize font-normal text-default-600">{slink.name}</span>
-                                    {slink.name}
-                                </span>
               </button>
             </li>
           ))}
         </ul>
-                <h4 className="py-4 text-sm px-6 text-default-500  font-medium">
+        <h4 className="py-4 text-sm px-6 text-default-500  font-medium">Shared documents</h4>
-                    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) => (
+            "/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'
+              className="w-full h-12 object-cover rounded-md"
             />
-
+          ))}
-                        ))
-                    }
         </div>
       </InfoWrapper>
     </>
-    )
+  );
+};
 
-}
+export default ChatPageSingle;
-
-export default ChatPageSingle