Merge branch 'dev-sabda-v2' of http://38.47.180.165:3000/mediahub/mediahub-fe

fix:href link in card filter

See merge request hanifsalafi/mediahub_redesign!1

.drone.yml

@@ -0,0 +1,45 @@
+kind: pipeline
+type: ssh
+name: mediahub-fe-build-deploy
+
+server:
+  host:
+    from_secret: ssh_host
+  user:
+    from_secret: ssh_user
+  ssh_key:
+    from_secret: ssh_key
+
+steps:
+  - name: prepare repo
+    when:
+      branch:
+        - dev-sabda-v2
+        - main
+        - prod
+    commands:
+      - rm -rf /opt/build/mediahub-fe
+      - mkdir -p /opt/build
+      - cd /opt/build
+      - git clone http://38.47.180.165:3000/mediahub/mediahub-fe.git
+
+  - name: build image
+    when:
+      branch:
+        - dev-sabda-v2
+        - prod
+    commands:
+      - docker login 38.47.180.165:3000 -u administrator -p HarborDockerImageRep0
+      - cd /opt/build/mediahub-fe
+      - docker build -t 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH .
+      - docker push 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH
+
+  - name: deploy
+    when:
+      branch:
+        - prod
+    commands:
+      - docker pull 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH
+      - docker stop new-mediahub-fe || true
+      - docker rm new-mediahub-fe || true
+      - docker run -dt -p 4200:3000 --restart always --name new-mediahub-fe 38.47.180.165:3000/mediahub/mediahub-fe:$DRONE_BRANCH

.env

@@ -1,2 +1,3 @@
-NEXT_PUBLIC_API=https://netidhub.com/api
-NEXT_PUBLIC=https://netidhub.com
+NEXT_PUBLIC_API=https://new.netidhub.com/api
+NEXT_PUBLIC=https://new.netidhub.com
+NEXT_PUBLIC_TINYMCE_API_KEY=bhteuja26yz5p0aubxry9b95hs33amgn65kjv5km0fd5iuev

.gitlab-ci.yml

@@ -1,29 +1,30 @@
 stages:
   - build
   - deploy
-
+ 
 build-dev:
   stage: build
   when: on_success
   only:
     - main
-  image: docker:stable
+    - dev-landing-v2
+  image:
+    name: docker:25.0.3-cli
   services:
-    - name: docker:dind
-      command: ["--insecure-registry=103.82.242.92:8900"]
+    - name: docker:25.0.3-dind
+      command: ["--insecure-registry=38.47.185.86:8900"]
   script:
     - docker logout
-    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900
-    - docker build -t 103.82.242.92:8900/mediahub/new-mediahub-fe:dev .
-    - docker push 103.82.242.92:8900/mediahub/new-mediahub-fe:dev
+    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 38.47.185.86:8900
+    - docker build -t 38.47.185.86:8900/mediahub/new-mediahub-fe:dev .
+    - docker push 38.47.185.86:8900/mediahub/new-mediahub-fe:dev
 
 auto-deploy:
   stage: deploy
   when: on_success
   only:
     - main
+    - dev-landing-v2
   image: curlimages/curl:latest
-  services:
-    - docker:dind
   script:
-    - curl --user admin:$JENKINS_PWD http://38.47.180.165:8080/job/auto-deploy-new-mediahub-fe/build?token=autodeploynewmediahub
+    - curl --user admin:$JENKINS_PWD http://38.47.185.86:8080/job/auto-deploy-new-mediahub-fe/build?token=autodeploynewmediahub

.lighthouserc.json

@@ -1,13 +1,14 @@
 {
-  "ci": {
-    "collect": {
-      "staticDistDir": "./public"
-    },
-    "assert": {
-      "assertions": {}
-    },
-    "upload": {
-      "target": "temporary-public-storage"
+    "ci": {
+      "collect": {
+        "staticDistDir": "./public"
+      },
+      "assert": {
+        "assertions": {}
+      },
+      "upload": {
+        "target": "temporary-public-storage"
+      }
     }
-  }
 }
+  

.prettierignore

@@ -1,44 +0,0 @@
-# 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

@@ -1,28 +0,0 @@
-{
-  "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"]
-} 

Dockerfile

@@ -10,8 +10,9 @@ RUN npm install -g pnpm
 # Membuat direktori aplikasi dan mengatur sebagai working directory
 WORKDIR /usr/src/app
 
+
 # Menyalin file penting terlebih dahulu untuk caching
-COPY package.json pnpm-lock.yaml ./
+COPY package.json ./
 
 # Menyalin direktori ckeditor5 jika diperlukan
 COPY vendor/ckeditor5 ./vendor/ckeditor5
@@ -24,10 +25,49 @@ RUN pnpm install
 COPY . .
 
 # Build aplikasi
-RUN NODE_OPTIONS="--max-old-space-size=4096" pnpm next build
+RUN NODE_OPTIONS="--max-old-space-size=4096" pnpm run build
 
 # Expose port untuk server
 EXPOSE 3000
 
 # Perintah untuk menjalankan aplikasi
 CMD ["pnpm", "run", "start"]
+
+
+# # Gunakan base image Node.js Alpine yang ringan
+# FROM node:23.5.0-alpine
+
+# # Atur environment
+# ENV PORT=3000
+# ENV NODE_ENV=production
+# ENV NODE_OPTIONS="--max-old-space-size=4096"
+
+# # Install dependencies global
+# RUN npm install -g pnpm pm2
+
+# # Set working directory
+# WORKDIR /usr/src/app
+
+# # Salin file penting untuk caching dependencies
+# COPY package.json pnpm-lock.yaml* ./
+
+# # Salin vendor jika diperlukan (ckeditor misalnya)
+# COPY vendor/ckeditor5 ./vendor/ckeditor5
+
+# # Install dependencies
+# RUN pnpm install --frozen-lockfile
+
+# # Salin semua source code
+# COPY . .
+
+# # Salin ecosystem config
+# COPY ecosystem.config.js ./
+
+# # Build Next.js
+# RUN pnpm run build
+
+# # Expose port
+# EXPOSE 3000
+
+# # Jalankan Next.js dalam mode cluster
+# CMD ["pm2-runtime", "start", "ecosystem.config.js"]

__tests__/auth-flow.test.ts

@@ -0,0 +1,167 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { AuthPage } from '../app/[locale]/auth/page';
+import { useEmailValidation } from '../hooks/use-auth';
+
+// Mock the hooks
+jest.mock('../hooks/use-auth', () => ({
+  useAuth: () => ({
+    login: jest.fn(),
+    logout: jest.fn(),
+    refreshToken: jest.fn(),
+    isAuthenticated: false,
+    user: null,
+    loading: false,
+    error: null,
+  }),
+  useEmailValidation: jest.fn(),
+  useEmailSetup: () => ({
+    setupEmail: jest.fn(),
+    loading: false,
+    error: null,
+  }),
+  useOTPVerification: () => ({
+    verifyOTP: jest.fn(),
+    loading: false,
+    error: null,
+  }),
+}));
+
+// Mock the components
+jest.mock('../components/auth/auth-layout', () => ({
+  AuthLayout: ({ children }: { children: React.ReactNode }) => <div data-testid="auth-layout">{children}</div>,
+}));
+
+jest.mock('../components/auth/login-form', () => ({
+  LoginForm: ({ onSuccess, onError }: any) => (
+    <div data-testid="login-form">
+      <button onClick={() => onSuccess({ username: 'testuser', password: 'testpass' })}>
+        Login Success
+      </button>
+      <button onClick={() => onError('Login failed')}>
+        Login Error
+      </button>
+    </div>
+  ),
+}));
+
+jest.mock('../components/auth/email-setup-form', () => ({
+  EmailSetupForm: ({ onSuccess, onError, onBack }: any) => (
+    <div data-testid="email-setup-form">
+      <button onClick={() => onSuccess()}>Email Setup Success</button>
+      <button onClick={() => onError('Email setup failed')}>Email Setup Error</button>
+      <button onClick={() => onBack()}>Back</button>
+    </div>
+  ),
+}));
+
+jest.mock('../components/auth/otp-form', () => ({
+  OTPForm: ({ onSuccess, onError, onResend }: any) => (
+    <div data-testid="otp-form">
+      <button onClick={() => onSuccess()}>OTP Success</button>
+      <button onClick={() => onError('OTP failed')}>OTP Error</button>
+      <button onClick={() => onResend()}>Resend OTP</button>
+    </div>
+  ),
+}));
+
+// Mock toast
+jest.mock('sonner', () => ({
+  toast: {
+    error: jest.fn(),
+    success: jest.fn(),
+    info: jest.fn(),
+  },
+}));
+
+describe('Auth Flow', () => {
+  const mockValidateEmail = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useEmailValidation as jest.Mock).mockReturnValue({
+      validateEmail: mockValidateEmail,
+      loading: false,
+      error: null,
+    });
+  });
+
+  it('should start with login form', () => {
+    render(<AuthPage params={{ locale: 'en' }} />);
+    expect(screen.getByTestId('login-form')).toBeInTheDocument();
+  });
+
+  it('should transition to email setup when validation returns "setup"', async () => {
+    mockValidateEmail.mockResolvedValue('setup');
+    
+    render(<AuthPage params={{ locale: 'en' }} />);
+    
+    // Click login success to trigger email validation
+    fireEvent.click(screen.getByText('Login Success'));
+    
+    await waitFor(() => {
+      expect(screen.getByTestId('email-setup-form')).toBeInTheDocument();
+    });
+  });
+
+  it('should transition to OTP when validation returns "otp"', async () => {
+    mockValidateEmail.mockResolvedValue('otp');
+    
+    render(<AuthPage params={{ locale: 'en' }} />);
+    
+    // Click login success to trigger email validation
+    fireEvent.click(screen.getByText('Login Success'));
+    
+    await waitFor(() => {
+      expect(screen.getByTestId('otp-form')).toBeInTheDocument();
+    });
+  });
+
+  it('should stay on login when validation returns "success"', async () => {
+    mockValidateEmail.mockResolvedValue('success');
+    
+    render(<AuthPage params={{ locale: 'en' }} />);
+    
+    // Click login success to trigger email validation
+    fireEvent.click(screen.getByText('Login Success'));
+    
+    await waitFor(() => {
+      expect(screen.getByTestId('login-form')).toBeInTheDocument();
+    });
+  });
+
+  it('should transition from email setup to OTP', async () => {
+    mockValidateEmail.mockResolvedValue('setup');
+    
+    render(<AuthPage params={{ locale: 'en' }} />);
+    
+    // First, go to email setup
+    fireEvent.click(screen.getByText('Login Success'));
+    await waitFor(() => {
+      expect(screen.getByTestId('email-setup-form')).toBeInTheDocument();
+    });
+    
+    // Then go to OTP
+    fireEvent.click(screen.getByText('Email Setup Success'));
+    await waitFor(() => {
+      expect(screen.getByTestId('otp-form')).toBeInTheDocument();
+    });
+  });
+
+  it('should go back from email setup to login', async () => {
+    mockValidateEmail.mockResolvedValue('setup');
+    
+    render(<AuthPage params={{ locale: 'en' }} />);
+    
+    // First, go to email setup
+    fireEvent.click(screen.getByText('Login Success'));
+    await waitFor(() => {
+      expect(screen.getByTestId('email-setup-form')).toBeInTheDocument();
+    });
+    
+    // Then go back to login
+    fireEvent.click(screen.getByText('Back'));
+    await waitFor(() => {
+      expect(screen.getByTestId('login-form')).toBeInTheDocument();
+    });
+  });
+}); 

__tests__/auth/login-form.test.tsx

@@ -0,0 +1,264 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { LoginForm } from "@/components/auth/login-form";
+import { useAuth, useEmailValidation } from "@/hooks/use-auth";
+
+// Mock the hooks
+jest.mock("@/hooks/use-auth");
+jest.mock("@/service/landing/landing", () => ({
+  listRole: jest.fn().mockResolvedValue({
+    data: {
+      data: [
+        { id: 1, name: "Admin" },
+        { id: 2, name: "User" },
+      ],
+    },
+  }),
+}));
+
+// Mock next-intl
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string, options?: any) => {
+    const defaults = {
+      logInPlease: "Log In Please",
+      acc: "Acc",
+      register: "Register",
+      password: "Password",
+      rememberMe: "Remember Me",
+      forgotPass: "Forgot Pass",
+      next: "Next",
+      categoryReg: "Category Reg",
+      selectOne: "Select One",
+      signIn: "Sign In",
+    };
+    return options?.defaultValue || defaults[key] || key;
+  },
+}));
+
+const mockUseAuth = useAuth as jest.MockedFunction<typeof useAuth>;
+const mockUseEmailValidation = useEmailValidation as jest.MockedFunction<typeof useEmailValidation>;
+
+describe("LoginForm", () => {
+  const mockLogin = jest.fn();
+  const mockValidateEmail = jest.fn();
+  const mockOnSuccess = jest.fn();
+  const mockOnError = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    mockUseAuth.mockReturnValue({
+      login: mockLogin,
+      logout: jest.fn(),
+      refreshToken: jest.fn(),
+      isAuthenticated: false,
+      user: null,
+      loading: false,
+      error: null,
+    });
+
+    mockUseEmailValidation.mockReturnValue({
+      validateEmail: mockValidateEmail,
+      loading: false,
+      error: null,
+    });
+  });
+
+  it("renders login form with all required fields", () => {
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    expect(screen.getByText("Log In Please")).toBeInTheDocument();
+    expect(screen.getByLabelText(/username/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /selanjutnya/i })).toBeInTheDocument();
+  });
+
+  it("shows validation errors for invalid input", async () => {
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const submitButton = screen.getByRole("button", { name: /selanjutnya/i });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText("Username is required")).toBeInTheDocument();
+      expect(screen.getByText("Password is required")).toBeInTheDocument();
+    });
+  });
+
+  it("handles successful form submission", async () => {
+    mockValidateEmail.mockResolvedValue("success");
+
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const usernameInput = screen.getByLabelText(/username/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole("button", { name: /selanjutnya/i });
+
+    fireEvent.change(usernameInput, { target: { value: "testuser" } });
+    fireEvent.change(passwordInput, { target: { value: "password123" } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockValidateEmail).toHaveBeenCalledWith({
+        username: "testuser",
+        password: "password123",
+      });
+    });
+  });
+
+  it("handles email validation step", async () => {
+    mockValidateEmail.mockResolvedValue("setup");
+
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const usernameInput = screen.getByLabelText(/username/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole("button", { name: /selanjutnya/i });
+
+    fireEvent.change(usernameInput, { target: { value: "testuser" } });
+    fireEvent.change(passwordInput, { target: { value: "password123" } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockOnError).toHaveBeenCalledWith("Email setup required");
+    });
+  });
+
+  it("handles OTP step", async () => {
+    mockValidateEmail.mockResolvedValue("otp");
+
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const usernameInput = screen.getByLabelText(/username/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole("button", { name: /selanjutnya/i });
+
+    fireEvent.change(usernameInput, { target: { value: "testuser" } });
+    fireEvent.change(passwordInput, { target: { value: "password123" } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockOnError).toHaveBeenCalledWith("OTP verification required");
+    });
+  });
+
+  it("toggles password visibility", () => {
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const passwordInput = screen.getByLabelText(/password/i);
+    const toggleButton = screen.getByLabelText(/show password/i);
+
+    expect(passwordInput).toHaveAttribute("type", "password");
+    
+    fireEvent.click(toggleButton);
+    expect(passwordInput).toHaveAttribute("type", "text");
+    expect(screen.getByLabelText(/hide password/i)).toBeInTheDocument();
+    
+    fireEvent.click(toggleButton);
+    expect(passwordInput).toHaveAttribute("type", "password");
+  });
+
+  it("handles remember me checkbox", () => {
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const rememberMeCheckbox = screen.getByRole("checkbox", { name: /remember me/i });
+    
+    expect(rememberMeCheckbox).toBeChecked();
+    
+    fireEvent.click(rememberMeCheckbox);
+    expect(rememberMeCheckbox).not.toBeChecked();
+  });
+
+  it("opens registration dialog", () => {
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const registerLink = screen.getByText("Register");
+    fireEvent.click(registerLink);
+
+    expect(screen.getByText("Category Reg")).toBeInTheDocument();
+    expect(screen.getByText("Select One")).toBeInTheDocument();
+    expect(screen.getByLabelText("Admin")).toBeInTheDocument();
+    expect(screen.getByLabelText("User")).toBeInTheDocument();
+  });
+
+  it("handles loading state", async () => {
+    mockUseEmailValidation.mockReturnValue({
+      validateEmail: mockValidateEmail,
+      loading: true,
+      error: null,
+    });
+
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const submitButton = screen.getByRole("button", { name: /processing/i });
+    expect(submitButton).toBeDisabled();
+  });
+
+  it("handles error state", async () => {
+    mockValidateEmail.mockRejectedValue(new Error("Validation failed"));
+
+    render(
+      <LoginForm
+        onSuccess={mockOnSuccess}
+        onError={mockOnError}
+      />
+    );
+
+    const usernameInput = screen.getByLabelText(/username/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    const submitButton = screen.getByRole("button", { name: /selanjutnya/i });
+
+    fireEvent.change(usernameInput, { target: { value: "testuser" } });
+    fireEvent.change(passwordInput, { target: { value: "password123" } });
+    fireEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(mockOnError).toHaveBeenCalledWith("Validation failed");
+    });
+  });
+}); 

__tests__/setup.test.ts

@@ -0,0 +1,11 @@
+describe('Testing Setup', () => {
+  it('should work correctly', () => {
+    expect(true).toBe(true);
+  });
+
+  it('should have testing library matchers', () => {
+    const element = document.createElement('div');
+    element.textContent = 'Hello World';
+    expect(element).toBeInTheDocument();
+  });
+}); 

action/app-actions.ts

@@ -0,0 +1,11 @@
+'use server'
+import { redirect } from "next/navigation";
+import { revalidatePath } from "next/cache";
+
+
+export const  postMessageAction = async (id: string, message: string,) => {
+    const response = await postMessage(id, message)
+    revalidatePath("/");
+     return response;
+   
+}

action/auth-action.ts

@@ -1,8 +1,6 @@
-"use server";
-
-import { revalidatePath } from "next/cache";
+'use server'
 import { redirect } from "next/navigation";
-
+import { revalidatePath } from "next/cache";
 export const loginUser = async (data: any) => {
   try {
     const response = undefined;
@@ -15,4 +13,4 @@ export const loginUser = async (data: any) => {
   } catch (error) {
     throw new Error(error as string);
   }
-};
+};

app/[locale]/(protected)/admin/add-experts/component/column.tsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Link } from "@/components/navigation";
+import { useToast } from "@/components/ui/use-toast";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { useRouter } from "next/navigation";
+import { deleteUser } from "@/service/management-user/management-user";
+import { stringify } from "querystring";
+
+const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[] => [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "fullname",
+    header: "Nama",
+    cell: ({ row }) => <span>{row.getValue("fullname")}</span>,
+  },
+
+  {
+    accessorKey: "address",
+    header: "Wilayah",
+    cell: () => <span>MABES</span>,
+  },
+
+  {
+    accessorKey: "userRolePlacements",
+    header: "Posisi",
+    cell: ({ row }) => {
+      const placements = row.original.userRolePlacements || [];
+      const placement = placements.find(
+        (p: any) => p.roleId === 11 || p.roleId === 12
+      );
+
+      let posisi = "-";
+      if (placement) {
+        posisi = placement.roleId === 11 ? "Koorkurator" : "Kurator";
+      }
+
+      return <span>{posisi}</span>;
+    },
+  },
+
+  {
+    accessorKey: "role.name",
+    header: "Bidang Keahlian",
+    cell: ({ row }) => (
+      <span>
+        {row.original.userProfilesAdditional?.userCompetency?.name ?? "-"}
+      </span>
+    ),
+  },
+
+  {
+    accessorKey: "userExperienceId",
+    header: "Pengalaman",
+    cell: ({ row }) => {
+      const experienceId =
+        row.original.userProfilesAdditional?.userExperienceId;
+
+      const experienceMap: Record<number, string> = {
+        1: "Akademisi",
+        2: "Praktisi",
+        3: "Akademisi + Praktisi",
+      };
+
+      return <span>{experienceMap[experienceId] ?? "-"}</span>;
+    },
+  },
+
+  {
+    id: "actions",
+    header: "Actions",
+    cell: ({ row }) => {
+      const { toast } = useToast();
+      const MySwal = withReactContent(Swal);
+
+      const doDelete = async (id: number) => {
+        Swal.fire({
+          title: "Menghapus user...",
+          text: "Mohon tunggu",
+          allowOutsideClick: false,
+          didOpen: () => Swal.showLoading(),
+        });
+
+        const response = await deleteUser(id);
+
+        Swal.close();
+
+        if (response?.error) {
+          toast({
+            title: stringify(response?.message),
+            variant: "destructive",
+          });
+          return;
+        }
+
+        toast({ title: "Berhasil menghapus user" });
+
+        // ⬅️ INI YANG PENTING → REFRESH TABLE TANPA RELOAD
+        onRefresh();
+      };
+
+      const handleDelete = (id: number) => {
+        MySwal.fire({
+          title: "Hapus user ini?",
+          showCancelButton: true,
+          confirmButtonColor: "#dc3545",
+          confirmButtonText: "Iya",
+          cancelButtonText: "Tidak",
+        }).then((res) => {
+          if (res.isConfirmed) doDelete(id);
+        });
+      };
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button size="icon" variant="ghost">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            
+            <Link href={`/admin/add-experts/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                <Eye className="w-4 h-4 me-1.5" /> View
+              </DropdownMenuItem>
+            </Link>
+
+            <Link href={`/admin/add-experts/update/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                <SquarePen className="w-4 h-4 me-1.5" /> Edit
+              </DropdownMenuItem>
+            </Link>
+
+            <DropdownMenuItem
+              onClick={() => handleDelete(row.original.userKeycloakId)}
+              className="text-red-600 cursor-pointer hover:bg-red-300"
+            >
+              <Trash2 className="w-4 h-4 me-1.5" /> Delete
+            </DropdownMenuItem>
+
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default getColumns;

app/[locale]/(protected)/admin/add-experts/component/table.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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 {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+// import columns from "./column";
+import getColumns from "./column";
+import { listEnableCategory } from "@/service/content/content";
+import { Link } from "@/i18n/routing";
+import { listDataExperts } from "@/service/experts/experts";
+
+const AddExpertTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const table = useReactTable({
+    data: dataTable,
+    // columns,
+    columns: getColumns({ onRefresh: fetchData }),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    fetchData();
+  }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData]);
+
+  // async function fetchData() {
+  //   try {
+  //     loading();
+
+  //     const contentData = dummyData;
+  //     contentData.forEach((item: any, index: number) => {
+  //       item.no = (page - 1) * Number(showData) + index + 1;
+  //     });
+
+  //     setDataTable(contentData);
+  //     setTotalData(contentData?.length);
+  //     setTotalPage(1);
+  //     close();
+  //   } catch (error) {
+  //     console.error("Error fetching tasks:", error);
+  //   }
+  // }
+
+  async function fetchData() {
+    // const formattedStartDate = startDate
+    //   ? format(new Date(startDate), "yyyy-MM-dd")
+    //   : "";
+    // const formattedEndDate = endDate
+    //   ? format(new Date(endDate), "yyyy-MM-dd")
+    //   : "";
+    try {
+      // const isForSelf = Number(roleId) === 4;
+      const res = await listDataExperts(limit, page - 1);
+
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * limit + index + 1;
+      });
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  return (
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">Tenaga Ahli</p>
+        <Link href="/admin/add-experts/create">
+          <Button color="primary" size="md" className="text-sm">
+            <UserIcon />
+            Tambah Tenaga Ahli
+          </Button>
+        </Link>
+      </div>
+
+      <div className="flex justify-between ">
+        <Input
+          type="text"
+          placeholder="Search"
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          className="max-w-[300px]"
+        />
+        <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell
+                // colSpan={columns.length}
+                colSpan={table.getAllLeafColumns().length}
+                className="h-24 text-center"
+              >
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default AddExpertTable;

app/[locale]/(protected)/admin/add-experts/create/page.tsx

@@ -0,0 +1,675 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  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/routing";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useEffect, useState } from "react";
+import {
+  AdministrationLevelList,
+  checkRolePlacementsAvailability,
+  getListCompetencies,
+  getListExperiences,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/service/management-user/management-user";
+import { error, loading } from "@/config/swal";
+import { Eye, EyeOff } from "lucide-react";
+
+// const FormSchema = z.object({
+//   name: z.string({
+//     required_error: "Required",
+//   }),
+//   username: z.string({
+//     required_error: "Required",
+//   }),
+//   password: z.string({
+//     required_error: "Required",
+//   }),
+//   phoneNumber: z.string({
+//     required_error: "Required",
+//   }),
+//   email: z.string({
+//     required_error: "Required",
+//   }),
+//   skills: z.string({
+//     required_error: "Required",
+//   }),
+//   experiences: z.string({
+//     required_error: "Required",
+//   }),
+//   company: z.string({
+//     required_error: "Required",
+//   }),
+// });
+
+const FormSchema = z.object({
+  name: z.string({ required_error: "Required" }),
+  username: z
+    .string({ required_error: "Required" })
+    .refine((val) => !/\s/.test(val), {
+      message: "Username tidak boleh mengandung spasi",
+    }),
+    // .transform((val) => val.toLowerCase()),
+
+  password: z
+    .string({ required_error: "Required" })
+    .min(8, "Minimal 8 karakter")
+    .regex(/[A-Z]/, "Harus mengandung huruf besar (A-Z)")
+    .regex(/[0-9]/, "Harus mengandung angka (0-9)")
+    .regex(/[^A-Za-z0-9]/, "Harus mengandung karakter spesial (!@#$%^&*)"),
+
+  // confirmPassword: z.string({ required_error: "Required" }),
+
+  phoneNumber: z.string({ required_error: "Required" }),
+  email: z.string({ required_error: "Required" }),
+  skills: z.string({ required_error: "Required" }),
+  experiences: z.string({ required_error: "Required" }),
+  company: z.string({ required_error: "Required" }),
+});
+// .refine((data) => data.password === data.confirmPassword, {
+//   path: ["confirmPassword"],
+//   message: "Konfirmasi password tidak sama",
+// });
+
+export type Placements = {
+  index: number;
+  roleId?: string;
+  userLevelId?: number;
+};
+
+export default function AddExpertForm() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+  const [passwordStrength, setPasswordStrength] = useState("");
+  const [incrementId, setIncrementId] = useState(1);
+  const [placementRows, setPlacementRows] = useState<Placements[]>([
+    { index: 0, roleId: "", userLevelId: 0 },
+  ]);
+  const [userCompetencies, setUserCompetencies] = useState<any>();
+  const [userExperiences, setUserExperiences] = useState<any>();
+  const [userLevels, setUserLevels] = useState<any>();
+  const [passwordType, setPasswordType] = useState("password");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordType = () => {
+    setPasswordType((prevType) =>
+      prevType === "password" ? "text" : "password"
+    );
+  };
+
+  const roleSelection = [
+    {
+      id: "11",
+      name: "Koor Kurator",
+    },
+    {
+      id: "12",
+      name: "Kurator",
+    },
+  ];
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+
+    const dataReq = {
+      firstName: data.name,
+      username: data.username,
+      email: data.email,
+      password: data.password,
+      address: "",
+      roleId: "EXP-ID",
+      phoneNumber: data.phoneNumber,
+      userCompetencyId: data.skills,
+      userExperienceId: data.experiences,
+      companyName: data.company,
+      isAdmin: true,
+    };
+
+    loading();
+
+    // check availability first
+    var placementArr: any[] = [];
+    placementRows.forEach((row: any) => {
+      placementArr.push({
+        roleId: Number(row.roleId),
+        userLevelId: Number(row.userLevelId),
+      });
+    });
+
+    const dataReqAvail = {
+      placements: placementArr,
+    };
+    const resAvail = await checkRolePlacementsAvailability(dataReqAvail);
+    if (resAvail?.error) {
+      close();
+      error(resAvail.message);
+      return false;
+    }
+
+    const res = await saveUserInternal(dataReq);
+    const resData = res?.data?.data;
+    const userProfileId = resData?.id;
+
+    var placementArr: any[] = [];
+    placementRows.forEach((row: any) => {
+      placementArr.push({
+        roleId: Number(row.roleId),
+        userLevelId: Number(row.userLevelId),
+        userProfileId: userProfileId,
+      });
+    });
+
+    const dataReq2 = {
+      userId: userProfileId,
+      placements: placementArr,
+    };
+    const res2 = await saveUserRolePlacements(dataReq2);
+    const resData2 = res2?.data?.data;
+
+    success("/admin/add-experts");
+  };
+
+  function success(redirect: string): void {
+    MySwal.fire({
+      title: '<p class="text-green-600 font-bold">Sukses</p>',
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: '<span class="text-white">OK</span>',
+      allowOutsideClick: false,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push(redirect);
+      }
+    });
+  }
+
+  useEffect(() => {
+    getDataAdditional();
+  }, []);
+
+  async function getDataAdditional() {
+    const resCompetencies = await getListCompetencies();
+    setUserCompetencies(resCompetencies?.data?.data);
+
+    const resExperiences = await getListExperiences();
+    setUserExperiences(resExperiences?.data?.data);
+
+    const resUserLevels = await AdministrationLevelList();
+    const data = resUserLevels?.data?.data;
+    var levelsArr: any[] = [];
+    data.forEach((levels: any) => {
+      levelsArr.push({
+        id: levels.id,
+        label: levels.name,
+        name: levels.name,
+        value: String(levels.id),
+        levelNumber: levels.levelNumber,
+      });
+    });
+    setUserLevels(levelsArr);
+  }
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/add-experts");
+      }
+    });
+  }
+
+  const handleSelectionChange = (
+    index: number,
+    type: "roleId" | "userLevelId",
+    value: string
+  ) => {
+    setPlacementRows((prevRows) =>
+      prevRows.map((row) =>
+        row.index === index ? { ...row, [type]: value } : row
+      )
+    );
+  };
+
+  const handleRemoveRow = (index: number) => {
+    console.log(index);
+    console.log(placementRows);
+    const newPlacements = placementRows.filter((row) => row.index != index);
+    console.log(newPlacements);
+    setPlacementRows(newPlacements);
+  };
+
+  const handleAddRow = () => {
+    if (placementRows.length < 2) {
+      setPlacementRows((prevRows) => [
+        ...prevRows,
+        { index: incrementId, roleId: "", userLevelId: 0 },
+      ]);
+      setIncrementId((prevId) => prevId + 1);
+    }
+  };
+
+  const computeStrength = (password: string) => {
+    let score = 0;
+    if (password.length >= 8) score++;
+    if (/[A-Z]/.test(password)) score++;
+    if (/[0-9]/.test(password)) score++;
+    if (/[^A-Za-z0-9]/.test(password)) score++;
+
+    if (score <= 1) return "weak";
+    if (score === 2 || score === 3) return "medium";
+    if (score === 4) return "strong";
+    return "";
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Campaign</p>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Nama Lengkap"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username (huruf kecil, tanpa spasi)</FormLabel>
+
+                <Input
+                  type="text"
+                  value={field.value}
+                  placeholder="masukkan username"
+                  onChange={(e) => {
+                    let value = e.target.value;
+
+                    // Hapus spasi otomatis
+                    value = value.replace(/\s+/g, "");
+
+                    // Jadikan lowercase otomatis
+                    value = value.toLowerCase();
+
+                    field.onChange(value);
+                  }}
+                />
+
+                {/* Info tambahan */}
+                <p className="text-xs text-gray-500 mt-1">
+                  Username otomatis menjadi huruf kecil tanpa spasi.
+                </p>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <Input
+                  type="text"
+                  value={field.value}
+                  placeholder="Masukkan"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. HP</FormLabel>
+                <Input
+                  type="number"
+                  value={field.value}
+                  placeholder="Masukkan No.Hp"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <input
+            type="text"
+            name="usernamefake"
+            autoComplete="username"
+            hidden
+          />
+          <input
+            type="password"
+            name="passwordfake"
+            autoComplete="new-password"
+            hidden
+          />
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <Input
+                  type="email"
+                  value={field.value}
+                  placeholder="Masukkan email"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <div className="relative">
+                  <Input
+                    type={showPassword ? "text" : "password"}
+                    value={field.value}
+                    placeholder="Masukkan Password"
+                    onChange={(e) => {
+                      field.onChange(e.target.value);
+                      setPasswordStrength(computeStrength(e.target.value));
+                    }}
+                  />
+
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500"
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                <FormLabel className="text-gray-400 text-[12px]">
+                  Password harus memiliki minimal 8 karakter, special karakter,
+                  angka dan huruf kapital
+                </FormLabel>
+
+                {/* Strength meter */}
+                {field.value && (
+                  <div className="mt-2">
+                    <div
+                      className={`h-2 rounded transition-all ${
+                        passwordStrength === "weak"
+                          ? "bg-red-500 w-1/4"
+                          : passwordStrength === "medium"
+                          ? "bg-yellow-500 w-2/4"
+                          : "bg-green-500 w-full"
+                      }`}
+                    />
+
+                    <p
+                      className={`text-xs mt-1 ${
+                        passwordStrength === "weak"
+                          ? "text-red-500"
+                          : passwordStrength === "medium"
+                          ? "text-yellow-600"
+                          : "text-green-600"
+                      }`}
+                    >
+                      {passwordStrength === "weak" && "Weak Password"}
+                      {passwordStrength === "medium" && "Medium Password"}
+                      {passwordStrength === "strong" && "Strong Password"}
+                    </p>
+                  </div>
+                )}
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <div className="relative">
+                  <Input
+                    value={field.value}
+                    type={showPassword ? "text" : "password"}
+                    placeholder="Masukkan Password"
+                    onChange={field.onChange}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
+                    tabIndex={-1}
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+          <FormField
+            control={form.control}
+            name="skills"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Bidang Keahlian</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih Bidang Keahlian" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {userCompetencies?.map((item: any) => (
+                      <SelectItem key={item.id} value={String(item.id)}>
+                        {item.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="experiences"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Pengalaman</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih Pengalaman" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {userExperiences?.map((item: any) => (
+                      <SelectItem key={item.id} value={String(item.id)}>
+                        {item.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="company"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Institusi/Perusahaan</FormLabel>
+                <Input
+                  type="text"
+                  value={field.value}
+                  placeholder="Nama Institusi/Perusahaan"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <div className="mt-4">
+            <FormLabel>Posisi</FormLabel>
+            {placementRows?.map((row: any) => (
+              <div key={row.index} className="flex items-center gap-2 my-2">
+                <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "roleId", e)
+                  }
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih Role" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {roleSelection?.map((item: any) => (
+                      <SelectItem key={item.id} value={String(item.id)}>
+                        {item.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {/* <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "userLevelId", e)
+                  }
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih User Level" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {userLevels?.map((item: any) => (
+                      <SelectItem key={item.id} value={String(item.id)}>
+                        {item.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select> */}
+                <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "userLevelId", e)
+                  }
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih User Level" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="216">MABES POLRI</SelectItem>
+                  </SelectContent>
+                </Select>
+                {placementRows.length > 1 && (
+                  <Button
+                    type="button"
+                    size="md"
+                    color="destructive"
+                    onClick={() => handleRemoveRow(row.index)}
+                  >
+                    Hapus
+                  </Button>
+                )}
+              </div>
+            ))}
+            {/* <Button
+              type="button"
+              size="md"
+              onClick={handleAddRow}
+              disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
+            >
+              Tambah
+            </Button> */}
+          </div>
+
+          <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/add-experts/detail/[id]/page.tsx

@@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormDetailExperts from "@/components/form/experts/experts-detail";
+
+const ExpertsDetailPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormDetailExperts />
+      </div>
+    </div>
+  );
+};
+
+export default ExpertsDetailPage;

app/[locale]/(protected)/admin/add-experts/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import AddExpertTable from "./component/table";
+
+export default function AddExpert() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <AddExpertTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/add-experts/update/[id]/page.tsx

@@ -0,0 +1,719 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  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/routing";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useEffect, useState } from "react";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListExperiences,
+  getUserById,
+  saveUserInternal,
+  saveUserRolePlacements,
+} from "@/service/management-user/management-user";
+import { loading } from "@/config/swal";
+import { Eye, EyeOff } from "lucide-react";
+import { useParams } from "next/navigation";
+
+const FormSchema = z.object({
+  name: z.string().optional(),
+  username: z.string().optional(),
+  password: z.string().optional(),
+  phoneNumber: z.string().optional(),
+  email: z.string().optional(),
+  skills: z.string().optional(),
+  experiences: z.string().optional(),
+  company: z.string().optional(),
+});
+
+// const FormSchema = z.object({
+//   name: z.string({
+//     required_error: "Required",
+//   }),
+//   username: z.string({
+//     required_error: "Required",
+//   }),
+//   password: z.string({
+//     required_error: "Required",
+//   }),
+//   phoneNumber: z.string({
+//     required_error: "Required",
+//   }),
+//   email: z.string({
+//     required_error: "Required",
+//   }),
+//   skills: z.string({
+//     required_error: "Required",
+//   }),
+//   experiences: z.string({
+//     required_error: "Required",
+//   }),
+//   company: z.string({
+//     required_error: "Required",
+//   }),
+// });
+
+export type Placements = {
+  index: number;
+  roleId?: string;
+  userLevelId?: number;
+};
+
+interface Detail {
+  id: string;
+  fullname: string;
+  username: string;
+  phoneNumber: string;
+  email: string;
+  birthPlace: string;
+  birthDate: string;
+  education: string;
+  career: string;
+  expertise: string;
+  experience: string;
+  position: string;
+  region: string;
+  cvUrl: string;
+  photoUrl: string;
+  isActive: boolean;
+  userProfilesAdditional?: {
+    companyName: string;
+    userExperienceId: any;
+    userCompetency?: {
+      id: number;
+      name: string;
+      isActive: boolean;
+      createdAt: string;
+    };
+  };
+  userRolePlacements?: {
+    roleId: number;
+    userLevelId: number;
+  }[];
+}
+
+export default function UpdateExpertForm() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id;
+  const [detail, setDetail] = useState<Detail | null>(null);
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+  const [incrementId, setIncrementId] = useState(1);
+  const [placementRows, setPlacementRows] = useState<Placements[]>([
+    { index: 0, roleId: "", userLevelId: 0 },
+  ]);
+  const [userCompetencies, setUserCompetencies] = useState<any>();
+  const [userExperiences, setUserExperiences] = useState<any>();
+  const [userLevels, setUserLevels] = useState<any>();
+  const [passwordType, setPasswordType] = useState("password");
+  const [showPassword, setShowPassword] = useState(false);
+
+  useEffect(() => {
+    getDataAdditional();
+  }, []);
+
+  useEffect(() => {
+    async function initState() {
+      if (id) {
+        const response = await getUserById(String(id));
+        const details = response?.data?.data;
+        setDetail(details);
+      }
+      if (detail?.userProfilesAdditional?.companyName) {
+        form.setValue("company", detail.userProfilesAdditional.companyName);
+      }
+
+      if (detail?.userProfilesAdditional?.userCompetency?.id) {
+        form.setValue(
+          "skills",
+          String(detail.userProfilesAdditional.userCompetency.id)
+        );
+      }
+
+      if (detail?.userProfilesAdditional?.userExperienceId) {
+        form.setValue(
+          "experiences",
+          String(detail.userProfilesAdditional.userExperienceId)
+        );
+      }
+    }
+    initState();
+  }, [id]);
+
+  useEffect(() => {
+    if (!detail) return;
+
+    // Isi semua form field
+    form.reset({
+      name: detail.fullname || "",
+      username: detail.username || "",
+      phoneNumber: detail.phoneNumber || "",
+      email: detail.email || "",
+      password: "",
+      skills: detail?.userProfilesAdditional?.userCompetency?.id
+        ? String(detail.userProfilesAdditional.userCompetency.id)
+        : "",
+      experiences: detail?.userProfilesAdditional?.userExperienceId
+        ? String(detail.userProfilesAdditional.userExperienceId)
+        : "",
+      company: detail?.userProfilesAdditional?.companyName || "",
+    });
+
+    // 🔥 Masukkan posisi existing
+    if (detail.userRolePlacements && detail.userRolePlacements.length > 0) {
+      const mapped = detail.userRolePlacements.map(
+        (item: any, idx: number) => ({
+          index: idx,
+          roleId: String(item.roleId),
+          userLevelId: Number(item.userLevelId),
+        })
+      );
+
+      setPlacementRows(mapped);
+    }
+  }, [detail]);
+
+  if (!detail) return <div>Loading...</div>;
+
+  const togglePasswordType = () => {
+    setPasswordType((prevType) =>
+      prevType === "password" ? "text" : "password"
+    );
+  };
+
+  const roleSelection = [
+    {
+      id: "11",
+      name: "Koor Kurator",
+    },
+    {
+      id: "12",
+      name: "Kurator",
+    },
+  ];
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+
+    const dataReq = {
+      id: detail?.id,
+      firstName: data.name || detail.fullname,
+      username: data.username || detail.username,
+      email: data.email || detail.email,
+      password: data.password || undefined,
+      address: "",
+      roleId: "EXP-ID",
+      phoneNumber: data.phoneNumber || detail.phoneNumber,
+      userCompetencyId:
+        data.skills || detail.userProfilesAdditional?.userCompetency?.id,
+      userExperienceId:
+        data.experiences || detail.userProfilesAdditional?.userExperienceId,
+      companyName: data.company || detail.userProfilesAdditional?.companyName,
+      isAdmin: true,
+    };
+
+    // const dataReq = {
+    //   id: detail?.id,
+    //   firstName: data.name,
+    //   username: data.username,
+    //   email: data.email,
+    //   password: data.password,
+    //   address: "",
+    //   roleId: "EXP-ID",
+    //   phoneNumber: data.phoneNumber,
+    //   userCompetencyId: data.skills,
+    //   userExperienceId: data.experiences,
+    //   companyName: data.company,
+    // };
+
+    loading();
+    const res = await saveUserInternal(dataReq);
+    const resData = res?.data?.data;
+    const userProfileId = resData?.id;
+
+    var placementArr: any[] = [];
+    placementRows.forEach((row: any) => {
+      placementArr.push({
+        roleId: Number(row.roleId),
+        userLevelId: Number(row.userLevelId),
+        userProfileId: userProfileId,
+      });
+    });
+
+    const dataReq2 = {
+      userId: userProfileId,
+      placements: placementArr,
+    };
+    const res2 = await saveUserRolePlacements(dataReq2);
+    const resData2 = res2?.data?.data;
+
+    success("/admin/add-experts");
+  };
+
+  function success(redirect: string): void {
+    MySwal.fire({
+      title: '<p class="text-green-600 font-bold">Sukses</p>',
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: '<span class="text-white">OK</span>',
+      allowOutsideClick: false,
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push(redirect);
+      }
+    });
+  }
+
+  async function getDataAdditional() {
+    const resCompetencies = await getListCompetencies();
+    setUserCompetencies(resCompetencies?.data?.data);
+
+    const resExperiences = await getListExperiences();
+    setUserExperiences(resExperiences?.data?.data);
+    console.log("experience", resExperiences?.data?.data);
+
+    const resUserLevels = await AdministrationLevelList();
+    const data = resUserLevels?.data?.data;
+    var levelsArr: any[] = [];
+    data.forEach((levels: any) => {
+      levelsArr.push({
+        id: levels.id,
+        label: levels.name,
+        name: levels.name,
+        value: String(levels.id),
+        levelNumber: levels.levelNumber,
+      });
+    });
+    setUserLevels(levelsArr);
+  }
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/add-experts");
+      }
+    });
+  }
+
+  const handleSelectionChange = (
+    index: number,
+    type: "roleId" | "userLevelId",
+    value: string
+  ) => {
+    setPlacementRows((prevRows) =>
+      prevRows.map((row) =>
+        row.index === index ? { ...row, [type]: value } : row
+      )
+    );
+  };
+
+  const handleRemoveRow = (index: number) => {
+    console.log(index);
+    console.log(placementRows);
+    const newPlacements = placementRows.filter((row) => row.index != index);
+    console.log(newPlacements);
+    setPlacementRows(newPlacements);
+  };
+
+  const handleAddRow = () => {
+    if (placementRows.length < 2) {
+      setPlacementRows((prevRows) => [
+        ...prevRows,
+        { index: incrementId, roleId: "", userLevelId: 0 },
+      ]);
+      setIncrementId((prevId) => prevId + 1);
+    }
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+
+      <Form {...form}>
+        {detail !== undefined ? (
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm p-4"
+          >
+            <p className="fonnt-semibold">Campaign</p>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Lengkap</FormLabel>
+                  {/* <Input
+                    defaultValue={detail?.fullname}
+                    placeholder="Masukkan Nama Lengkap"
+                    onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    defaultValue={detail?.fullname}
+                    placeholder="Masukkan Nama Lengkap"
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              disabled
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Username</FormLabel>
+                  {/* <Input
+                    type="text"
+                    defaultValue={detail?.username}
+                    placeholder="Masukkan"
+                    onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="text"
+                    defaultValue={detail?.username}
+                    placeholder="Masukkan"
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="phoneNumber"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>No. HP</FormLabel>
+                  {/* <Input
+                    type="number"
+                    defaultValue={detail?.phoneNumber}
+                    placeholder="Masukkan No.Hp"
+                    onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="number"
+                    defaultValue={detail?.phoneNumber}
+                    placeholder="Masukkan"
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  {/* <Input
+                    type="email"
+                    defaultValue={detail?.email}
+                    placeholder="Masukkan email"
+                    onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="email"
+                    defaultValue={detail?.email}
+                    placeholder="Masukkan email"
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {/* <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password (Opsional)</FormLabel>
+                  <div className="relative">
+                    <Input
+                      {...field}
+                      type={showPassword ? "text" : "password"}
+                      placeholder="Kosongkan jika tidak ingin mengubah password"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2"
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
+                </FormItem>
+              )}
+            /> */}
+            {/* <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <div className="relative">
+                    <Input
+                      value={field.value}
+                      type={showPassword ? "text" : "password"}
+                      placeholder="Masukkan Password"
+                      onChange={field.onChange}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+            <FormField
+              control={form.control}
+              name="skills"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Bidang Keahlian</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={
+                            detail?.userProfilesAdditional?.userCompetency?.name
+                              ? detail.userProfilesAdditional.userCompetency
+                                  .name
+                              : "Pilih Bidang Keahlian"
+                          }
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {userCompetencies?.map((item: any) => (
+                        <SelectItem key={item.id} value={String(item.id)}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="experiences"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Pengalaman</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue
+                          placeholder={
+                            detail &&
+                            detail.userProfilesAdditional &&
+                            detail.userProfilesAdditional.userExperienceId
+                              ? userExperiences?.find(
+                                  (item: any) =>
+                                    item.id ===
+                                    detail.userProfilesAdditional!
+                                      .userExperienceId
+                                )?.name
+                              : "Pilih Pengalaman"
+                          }
+                        />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {userExperiences?.map((item: any) => (
+                        <SelectItem key={item.id} value={String(item.id)}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="company"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Institusi/Perusahaan</FormLabel>
+                  {/* <Input
+                    type="text"
+                    value={detail?.userProfilesAdditional?.companyName || ""}
+                    placeholder="Nama Institusi/Perusahaan"
+                    onChange={field.onChange}
+                  /> */}
+                  <Input
+                    {...field}
+                    type="text"
+                    defaultValue={
+                      detail?.userProfilesAdditional?.companyName || ""
+                    }
+                    placeholder="Nama Institusi/Perusahaan"
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="mt-4">
+              <FormLabel>Posisi</FormLabel>
+              {placementRows?.map((row: any) => (
+                <div key={row.index} className="flex items-center gap-2 my-2">
+                  <Select
+                    value={row.roleId}
+                    onValueChange={(e) =>
+                      handleSelectionChange(row.index, "roleId", e)
+                    }
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Pilih Role" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {roleSelection?.map((item: any) => (
+                        <SelectItem key={item.id} value={String(item.id)}>
+                          {item.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  {/* <Select
+                  onValueChange={(e) =>
+                    handleSelectionChange(row.index, "userLevelId", e)
+                  }
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Pilih User Level" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {userLevels?.map((item: any) => (
+                      <SelectItem key={item.id} value={String(item.id)}>
+                        {item.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select> */}
+                  <Select
+                    value={row.userLevelId}
+                    onValueChange={(e) =>
+                      handleSelectionChange(row.index, "userLevelId", e)
+                    }
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Pilih User Level" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="216">MABES POLRI</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {placementRows.length > 1 && (
+                    <Button
+                      type="button"
+                      size="md"
+                      color="destructive"
+                      onClick={() => handleRemoveRow(row.index)}
+                    >
+                      Hapus
+                    </Button>
+                  )}
+                </div>
+              ))}
+              <Button
+                type="button"
+                size="md"
+                onClick={handleAddRow}
+                disabled={placementRows.length >= 2}
+              >
+                Tambah
+              </Button>
+            </div>
+
+            <div className="flex flex-row justify-end gap-2 mt-4 pt-4">
+              <Button
+                size="md"
+                type="button"
+                variant="outline"
+                color="destructive"
+                className="text-xs"
+              >
+                Cancel
+              </Button>
+              <Button
+                size="md"
+                type="submit"
+                color="primary"
+                className="text-xs"
+              >
+                Submit
+              </Button>
+            </div>
+          </form>
+        ) : (
+          ""
+        )}
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/analysis/content-management/page.tsx

@@ -0,0 +1,306 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
+
+const users = [
+  { id: 1, name: "POLRI" },
+  { id: 2, name: "JURNALIS" },
+];
+
+export default function ContentManagement() {
+  const [startDate, setStartDate] = useState<any>(new Date());
+  const [endDate, setEndDate] = useState<any>(new Date());
+  const [hasMounted, setHasMounted] = useState(false);
+  // const t = useTranslations("AnalyticsDashboard");
+  const levelName = getCookiesDecrypt("ulnae");
+  const poldaState = Cookies.get("state");
+  const provState = Cookies.get("state-prov");
+
+  const [ticket1, setTicket1] = useState("");
+  const [ticket2, setTicket2] = useState("");
+  const [ticket3, setTicket3] = useState("");
+  const [ticket4, setTicket4] = useState("");
+  const [ticket5, setTicket5] = useState("");
+  const [ticket6, setTicket6] = useState("");
+  const [isInternational, setIsInternational] = useState([false, false, false]);
+
+  const baseUrl = "https://analytic.sitani.info/";
+  const url = "https://analytic.sitani.info/trusted/";
+
+  const view1 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?provinsi-polda=${provState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?provinsi-polda=${poldaState}&`;
+
+  const view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[3]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?provinsi-polda=${poldaState}&`;
+
+  const view5 =
+    levelName == "MABES POLRI"
+      ? isInternational[4]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?provinsi-polda=${poldaState}&`;
+
+  const view6 =
+    levelName == "MABES POLRI"
+      ? isInternational[5]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?provinsi-polda=${poldaState}&`;
+  const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1?.data?.data);
+
+      const response2 = await generateTicket();
+      setTicket2(response2?.data?.data);
+
+      const response3 = await generateTicket();
+      setTicket3(response3?.data?.data);
+
+      const response4 = await generateTicket();
+      setTicket4(response4?.data?.data);
+
+      const response5 = await generateTicket();
+      setTicket5(response5?.data?.data);
+
+      const response6 = await generateTicket();
+      setTicket6(response6?.data?.data);
+    }
+
+    initState();
+  }, [isInternational]);
+
+  // Hooks
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+
+  const handleInternational = (index: number, val: boolean) => {
+    const updatedIsInternational = [...isInternational];
+
+    updatedIsInternational[index] = val;
+    setIsInternational(updatedIsInternational);
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-3">
+        <Accordion id="polri" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              KONTEN YANG DISIMPAN OLEH PENGGUNA POLRI INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket1 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view1 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket1}/${view1}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="2" type="single" collapsible className="w-full">
+          <AccordionItem value="item-2" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket2 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view2 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket2}/${view2}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="3" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              KONTEN YANG DISIMPAN OLEH PENGGUNA JURNALIS INTERNASIONAL
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket3 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view3 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket3}/${view3}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="4" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              PENAMBAHAN JUMLAH PENGGUNA POLRI INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket4 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view4 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket4}/${view4}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="5" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket5 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view5 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket5}/${view5}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="6" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INTERNASIONAL
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket6 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view6 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket6}/${view6}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
+
+const users = [
+  { id: 1, name: "POLRI" },
+  { id: 2, name: "JURNALIS" },
+];
+
+export default function EmergencyIssue() {
+  const [startDate, setStartDate] = useState<any>(new Date());
+  const [endDate, setEndDate] = useState<any>(new Date());
+  const [hasMounted, setHasMounted] = useState(false);
+  // const t = useTranslations("AnalyticsDashboard");
+  const levelName = getCookiesDecrypt("ulnae");
+  const poldaState = Cookies.get("state");
+  const provState = Cookies.get("state-prov");
+
+  const [ticket1, setTicket1] = useState("");
+  const [ticket2, setTicket2] = useState("");
+  const [ticket3, setTicket3] = useState("");
+  const [ticket4, setTicket4] = useState("");
+  const [ticket5, setTicket5] = useState("");
+  const [ticket6, setTicket6] = useState("");
+  const [isInternational, setIsInternational] = useState([false, false, false]);
+
+  const baseUrl = "https://analytic.sitani.info/";
+  const url = "https://analytic.sitani.info/trusted/";
+
+  const view1 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${provState}&`;
+
+  const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1?.data?.data);
+    }
+
+    initState();
+  }, [isInternational]);
+
+  // Hooks
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+
+  const handleInternational = (index: number, val: boolean) => {
+    const updatedIsInternational = [...isInternational];
+
+    updatedIsInternational[index] = val;
+    setIsInternational(updatedIsInternational);
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-3">
+        <Accordion
+          id="feedback-center"
+          type="single"
+          collapsible
+          className="w-full"
+        >
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              ANALISA BERKAITAN DENGAN AKUN PELAPOR{" "}
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket1 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view1 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket1}/${view1}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
+
+const users = [
+  { id: 1, name: "POLRI" },
+  { id: 2, name: "JURNALIS" },
+];
+
+export default function FeedbackCenter() {
+  const [startDate, setStartDate] = useState<any>(new Date());
+  const [endDate, setEndDate] = useState<any>(new Date());
+  const [hasMounted, setHasMounted] = useState(false);
+  // const t = useTranslations("AnalyticsDashboard");
+  const levelName = getCookiesDecrypt("ulnae");
+  const poldaState = Cookies.get("state");
+  const provState = Cookies.get("state-prov");
+
+  const [ticket1, setTicket1] = useState("");
+  const [ticket2, setTicket2] = useState("");
+  const [ticket3, setTicket3] = useState("");
+  const [ticket4, setTicket4] = useState("");
+  const [ticket5, setTicket5] = useState("");
+  const [ticket6, setTicket6] = useState("");
+  const [isInternational, setIsInternational] = useState([false, false, false]);
+
+  const baseUrl = "https://analytic.sitani.info/";
+  const url = "https://analytic.sitani.info/trusted/";
+
+  const view1 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-tickets?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-tickets?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-tickets?provinsi-polda=${provState}&`;
+
+  const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1?.data?.data);
+    }
+
+    initState();
+  }, [isInternational]);
+
+  // Hooks
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+
+  const handleInternational = (index: number, val: boolean) => {
+    const updatedIsInternational = [...isInternational];
+
+    updatedIsInternational[index] = val;
+    setIsInternational(updatedIsInternational);
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-3">
+        <Accordion
+          id="feedback-center"
+          type="single"
+          collapsible
+          className="w-full"
+        >
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              TICKET PADA FEEDBACK CENTER{" "}
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket1 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view1 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket1}/${view1}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/analysis/schedule/page.tsx

@@ -0,0 +1,246 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
+
+export default function ContentManagement() {
+  const [startDate, setStartDate] = useState<any>(new Date());
+  const [endDate, setEndDate] = useState<any>(new Date());
+  const [hasMounted, setHasMounted] = useState(false);
+  // const t = useTranslations("AnalyticsDashboard");
+  const levelName = getCookiesDecrypt("ulnae");
+  const poldaState = Cookies.get("state");
+  const provState = Cookies.get("state-prov");
+
+  const [ticket1, setTicket1] = useState("");
+  const [ticket2, setTicket2] = useState("");
+  const [ticket3, setTicket3] = useState("");
+  const [ticket4, setTicket4] = useState("");
+  const [ticket5, setTicket5] = useState("");
+  const [ticket6, setTicket6] = useState("");
+  const [isInternational, setIsInternational] = useState([false, false, false]);
+
+  const baseUrl = "https://analytic.sitani.info/";
+  const url = "https://analytic.sitani.info/trusted/";
+
+  const view1 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank?provinsi-polda=${provState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank-kat?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank-kat?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank-kat?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act?provinsi-polda=${poldaState}&`;
+
+  const view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[3]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?provinsi-polda=${poldaState}&`;
+
+  const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1?.data?.data);
+
+      const response2 = await generateTicket();
+      setTicket2(response2?.data?.data);
+
+      const response3 = await generateTicket();
+      setTicket3(response3?.data?.data);
+
+      const response4 = await generateTicket();
+      setTicket4(response4?.data?.data);
+    }
+
+    initState();
+  }, [isInternational]);
+
+  // Hooks
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  // Render
+  if (!hasMounted) return null;
+
+  const handleInternational = (index: number, val: boolean) => {
+    const updatedIsInternational = [...isInternational];
+
+    updatedIsInternational[index] = val;
+    setIsInternational(updatedIsInternational);
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-3">
+        <Accordion
+          id="schedule-press-conference"
+          type="single"
+          collapsible
+          className="w-full"
+        >
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              PUBLISH JADWAL PRESS CONFERENCE TERBANYAK
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket1 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view1 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket1}/${view1}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion
+          id="content-press-conference"
+          type="single"
+          collapsible
+          className="w-full"
+        >
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              JUMLAH PRODUKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket2 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view2 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket2}/${view2}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion
+          id="interaction-press-conference"
+          type="single"
+          collapsible
+          className="w-full"
+        >
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              TINGKAT INTERAKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket3 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view3 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket3}/${view3}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion
+          id="press-release"
+          type="single"
+          collapsible
+          className="w-full"
+        >
+          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
+            <AccordionTrigger className="bg-white dark:bg-black">
+              AKTIFITAS MEDIA BERKAITAN DENGAN PERS RILIS
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket4 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view4 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket4}/${view4}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/column.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} 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/routing";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { deleteMediaBlastAccount } from "@/service/broadcast/broadcast";
+import { useToast } from "@/components/ui/use-toast";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "accountName",
+    header: "Nama",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.original.mediaBlastAccountName}</span>
+    ),
+  },
+  {
+    accessorKey: "accountType",
+    header: "Tipe Akun",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.original.mediaBlastAccountType}</span>
+    ),
+  },
+  {
+    accessorKey: "emailAddress",
+    header: "Email",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.original.mediaBlastAccountEmail}</span>
+    ),
+  },
+  {
+    accessorKey: "whatsappNumber",
+    header: "Whatsapp",
+    cell: ({ row }) => <span>{row.original.mediaBlastAccountPhone}</span>,
+  },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const MySwal = withReactContent(Swal);
+      const { toast } = useToast();
+      const router = useRouter();
+      const handleDelete = (id: string) => {
+        MySwal.fire({
+          title: "Apakah anda ingin menghapus data?",
+          showCancelButton: true,
+          confirmButtonColor: "#dc3545",
+          confirmButtonText: "Iya",
+          cancelButtonText: "Tidak",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            doDeleteAccount(id);
+          }
+        });
+      };
+
+      async function succes() {
+        toast({
+          title: "Sukses",
+          description: "Berhasil Delete",
+        });
+        window.location.reload();
+      }
+
+      async function doDeleteAccount(id: string) {
+        loading();
+        const response = await deleteMediaBlastAccount(id);
+        close();
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+        succes();
+      }
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.mediaBlastAccountId}`}
+              >
+                Edit
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <a onClick={() => handleDelete(row.original.id)}>Delete</a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/component/table.tsx

@@ -0,0 +1,592 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import {
+  Select as UISelect,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Icon } from "@iconify/react";
+import { useParams, useSearchParams } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { X } from "lucide-react";
+import ReactSelect from "react-select";
+
+import columns from "./column";
+import TablePagination from "@/components/table/table-pagination";
+import {
+  getMediaBlastCampaignAccountList,
+  deleteMediaBlastCampaignAccount,
+  saveMediaBlastCampaignAccountBulk,
+} from "@/service/broadcast/broadcast";
+import {
+  AdministrationUserList,
+  getUserListAll,
+} from "@/service/management-user/management-user";
+import { close, loading, error, success, successCallback } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+
+// Mock data for available accounts - replace with actual API call
+const availableAccounts = [
+  { id: "1", accountName: "Account 1", category: "polri" },
+  { id: "2", accountName: "Account 2", category: "jurnalis" },
+  { id: "3", accountName: "Account 3", category: "umum" },
+  { id: "4", accountName: "Account 4", category: "ksp" },
+  { id: "5", accountName: "Account 5", category: "polri" },
+];
+
+const AccountListTable = () => {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const campaignId = params?.id as string;
+
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [filtered, setFiltered] = React.useState<string[]>([]);
+
+  // --- state utk Dialog Pilih Akun ---
+  const [isDialogOpen, setIsDialogOpen] = React.useState(false);
+  const [accountCategory, setAccountCategory] = React.useState<string>("");
+  const [selectedAccount, setSelectedAccount] = React.useState<any[]>([]);
+  const [selectedCategory, setSelectedCategory] = React.useState<string>("");
+  const [availableAccountsList, setAvailableAccountsList] =
+    React.useState<any[]>(availableAccounts);
+  const [usersList, setUsersList] = React.useState<any[]>([]);
+
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) setPage(Number(pageFromUrl));
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page, filtered]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await getMediaBlastCampaignAccountList(
+        page - 1,
+        filtered ? filtered.join(",") : "",
+        campaignId
+      );
+
+      const data = res?.data?.data;
+      const contentData = data?.content || [];
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * 10 + index + 1;
+      });
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (err) {
+      console.error("Error fetching tasks:", err);
+      close();
+    }
+  }
+
+  // --- API helpers ---
+  async function doDeleteAccount(id: string) {
+    loading();
+    const response = await deleteMediaBlastCampaignAccount(id);
+    close();
+    if (response?.error) {
+      error(response.message);
+      return;
+    }
+    fetchData();
+  }
+
+  async function saveCampaignAccount() {
+    try {
+      loading();
+
+      if (accountCategory === "all-account") {
+        // Handle all accounts - send only campaignId and category "all"
+        const request = {
+          mediaBlastCampaignId: campaignId,
+          mediaBlastAccountCategory: "all",
+        };
+        const response = await saveMediaBlastCampaignAccountBulk(request);
+        if (response?.error) {
+          error(response.message);
+          return;
+        }
+      } else if (accountCategory === "kategori" && selectedCategory) {
+        // Handle category selection - send campaignId and role-based category
+        let roleId = "";
+        switch (selectedCategory) {
+          case "umum":
+            roleId = "5";
+            break;
+          case "jurnalis":
+            roleId = "6";
+            break;
+          case "polri":
+            roleId = "7";
+            break;
+          case "ksp":
+            roleId = "8";
+            break;
+          default:
+            roleId = "5";
+        }
+
+        const request = {
+          mediaBlastCampaignId: campaignId,
+          mediaBlastAccountCategory: `role-${roleId}`,
+        };
+        const response = await saveMediaBlastCampaignAccountBulk(request);
+        if (response?.error) {
+          error(response.message);
+          return;
+        }
+      } else if (accountCategory === "custom") {
+        // Handle custom selection - send campaignId and selected user IDs
+        const request = {
+          mediaBlastCampaignId: campaignId,
+          mediaBlastAccountIds: selectedAccount.map((acc) => acc.id),
+        };
+        const response = await saveMediaBlastCampaignAccountBulk(request);
+        if (response?.error) {
+          error(response.message);
+          return;
+        }
+      }
+
+      close();
+      successCallback("Akun berhasil ditambahkan ke campaign!");
+      resetDialogState();
+      fetchData();
+    } catch (err) {
+      close();
+      error("Terjadi kesalahan saat menyimpan akun");
+    }
+  }
+
+  const resetDialogState = () => {
+    setAccountCategory("");
+    setSelectedAccount([]);
+    setSelectedCategory("");
+    setUsersList([]);
+    setIsDialogOpen(false);
+  };
+
+  const fetchUsersList = async () => {
+    try {
+      loading();
+      const response = await getUserListAll();
+
+      if (response?.data?.data?.content) {
+        setUsersList(response.data.data.content);
+      }
+      close();
+    } catch (err) {
+      close();
+      error("Terjadi kesalahan saat mengambil daftar user");
+    }
+  };
+
+  const handleFilter = (id: string, checked: boolean) => {
+    let temp = [...filtered];
+    if (checked) temp = [...temp, id];
+    else temp = temp.filter((a) => a !== id);
+    setFiltered(temp);
+  };
+
+  const removeSelectedAccount = (accountId: string) => {
+    setSelectedAccount(selectedAccount.filter((acc) => acc.id !== accountId));
+  };
+
+  const getFilteredAccounts = () => {
+    if (accountCategory === "kategori" && selectedCategory) {
+      return availableAccountsList.filter(
+        (acc) => acc.category === selectedCategory
+      );
+    }
+    return availableAccountsList;
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
+      <div className="flex justify-between mb-3 items-center">
+        <p className="text-xl font-medium text-default-900">Daftar Akun</p>
+        <div className="flex flex-row gap-3">
+          {/* === Dialog Pilih Akun === */}
+          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DialogTrigger asChild>
+              <Button size="sm" className="text-sm">
+                <Icon icon="tdesign:user-add-filled" className="mr-2" />
+                Pilih Akun
+              </Button>
+            </DialogTrigger>
+            <DialogContent
+              size="md"
+              className="max-w-xl max-h-[80vh] overflow-y-auto"
+            >
+              <DialogHeader>
+                <DialogTitle>Pilih Akun Untuk Campaign Ini</DialogTitle>
+              </DialogHeader>
+
+              <div className="space-y-4 my-3">
+                <RadioGroup
+                  value={accountCategory}
+                  onValueChange={(val) => {
+                    setAccountCategory(val);
+                    setSelectedAccount([]);
+                    setSelectedCategory("");
+                    if (val === "custom") {
+                      fetchUsersList();
+                    }
+                  }}
+                  className="flex space-x-6"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="all-account" id="all-account" />
+                    <Label htmlFor="all-account">Semua Akun</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="kategori" id="kategori" />
+                    <Label htmlFor="kategori">Kategori</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="custom" id="custom" />
+                    <Label htmlFor="custom">Kustom</Label>
+                  </div>
+                </RadioGroup>
+
+                {/* Category Selection */}
+                {accountCategory === "kategori" && (
+                  <div className="space-y-2">
+                    <Label>Pilih Kategori:</Label>
+                    <UISelect onValueChange={(val) => setSelectedCategory(val)}>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Pilih kategori" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="umum">Umum</SelectItem>
+                        <SelectItem value="polri">Polri</SelectItem>
+                        <SelectItem value="ksp">KSP</SelectItem>
+                        <SelectItem value="jurnalis">Jurnalis</SelectItem>
+                      </SelectContent>
+                    </UISelect>
+                  </div>
+                )}
+
+                {/* Custom Account Selection */}
+                {accountCategory === "custom" && (
+                  <div className="space-y-3">
+                    <Label>Pilih User:</Label>
+                    <ReactSelect
+                      isMulti
+                      options={usersList.map((user: any) => ({
+                        value: user.id,
+                        label: `${user.fullname} (${user.role?.name})`,
+                        user: user,
+                      }))}
+                      value={selectedAccount.map((acc: any) => ({
+                        value: acc.id,
+                        label: `${acc.fullname} (${acc.role?.name})`,
+                        user: acc,
+                      }))}
+                      onChange={(selectedOptions: any) => {
+                        const selectedUsers = selectedOptions
+                          ? selectedOptions.map((option: any) => option.user)
+                          : [];
+                        setSelectedAccount(selectedUsers);
+                      }}
+                      placeholder="Cari dan pilih user..."
+                      noOptionsMessage={() => "Tidak ada user ditemukan"}
+                      loadingMessage={() => "Memuat..."}
+                      isSearchable={true}
+                      isClearable={true}
+                      className="react-select"
+                      classNamePrefix="select"
+                    />
+
+                    {/* Selected Accounts Display */}
+                    {selectedAccount.length > 0 && (
+                      <div className="space-y-2">
+                        <Label>User Terpilih ({selectedAccount.length}):</Label>
+                        <div className="flex flex-wrap gap-2">
+                          {selectedAccount.map((acc) => (
+                            <Badge
+                              key={acc.id}
+                              className="flex items-center gap-1"
+                            >
+                              {acc.fullname}
+                              <X
+                                className="h-3 w-3 cursor-pointer"
+                                onClick={() => removeSelectedAccount(acc.id)}
+                              />
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* All Accounts Info */}
+                {accountCategory === "all-account" && (
+                  <div className="p-3 bg-blue-50 rounded-md">
+                    <p className="text-sm text-blue-700">
+                      Semua akun akan ditambahkan ke campaign ini.
+                    </p>
+                  </div>
+                )}
+
+                {/* Category Accounts Info */}
+                {accountCategory === "kategori" && selectedCategory && (
+                  <div className="p-3 bg-green-50 rounded-md">
+                    <p className="text-sm text-green-700">
+                      Semua akun dengan role "{selectedCategory.toUpperCase()}"
+                      akan ditambahkan.
+                    </p>
+                  </div>
+                )}
+
+                {/* Custom Selection Info */}
+                {accountCategory === "custom" && (
+                  <div className="p-3 bg-purple-50 rounded-md">
+                    <p className="text-sm text-purple-700">
+                      {selectedAccount.length} user terpilih akan ditambahkan ke
+                      campaign ini.
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <DialogFooter>
+                <Button
+                  onClick={saveCampaignAccount}
+                  disabled={
+                    !accountCategory ||
+                    (accountCategory === "custom" &&
+                      selectedAccount.length < 1) ||
+                    (accountCategory === "kategori" && !selectedCategory)
+                  }
+                >
+                  Simpan
+                </Button>
+                <DialogClose asChild>
+                  <Button variant="outline" onClick={resetDialogState}>
+                    Batal
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+
+      {/* === Filter Akun === */}
+      <div className="flex flex-row justify-end">
+        {/* <div className="flex flex-row gap-4">
+          <Link href="/admin/broadcast/campaign-list/account-list/create">
+            <Button variant="default" className="bg-[#3f37c9] gap-2">
+              <span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="22"
+                  height="22"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M17 13h-4v4h-2v-4H7v-2h4V7h2v4h4m2-8H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2"
+                  />
+                </svg>
+              </span>
+              Tambahkan Akun
+            </Button>
+          </Link>
+          <Button variant="default" className="bg-[#3f37c9] gap-2">
+            <span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+              >
+                <g fill="none">
+                  <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+                  <path
+                    fill="currentColor"
+                    d="M12 2v6.5a1.5 1.5 0 0 0 1.5 1.5H20v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1h3.414l-1.121 1.121a1 1 0 1 0 1.414 1.415l2.829-2.829a1 1 0 0 0 0-1.414l-2.829-2.828a1 1 0 1 0-1.414 1.414L7.414 17H4V4a2 2 0 0 1 2-2zM4 17v2H3a1 1 0 1 1 0-2zM14 2.043a2 2 0 0 1 1 .543L19.414 7a2 2 0 0 1 .543 1H14z"
+                  />
+                </g>
+              </svg>
+            </span>
+            Import Akun
+          </Button>
+        </div> */}
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button size="md" variant="outline">
+              Filter
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 ">
+            <div className="flex flex-col gap-2 px-2">
+              <div className="flex justify-between text-sm">
+                <p>Filter</p>
+                <a
+                  onClick={() => fetchData()}
+                  className="cursor-pointer text-primary"
+                >
+                  Simpan
+                </a>
+              </div>
+              <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                {["polri", "jurnalis", "umum", "ksp"].map((cat) => (
+                  <div key={cat} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={cat}
+                      checked={filtered.includes(cat)}
+                      onCheckedChange={(e) => handleFilter(cat, Boolean(e))}
+                    />
+                    <label
+                      htmlFor={cat}
+                      className="text-xs font-medium leading-none"
+                    >
+                      {cat.toUpperCase()}
+                    </label>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* === Table Data === */}
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default AccountListTable;

app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/create/page.tsx

@@ -0,0 +1,661 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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 withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  getMediaBlastCampaignPage,
+  saveMediaBlastAccount,
+} from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useEffect, useState } from "react";
+
+// ----------------------------
+// ZOD SCHEMA (dinamis)
+// ----------------------------
+
+const FormSchema = z.object({
+  name: z.string({ required_error: "Required" }),
+
+  accountType: z
+    .array(z.string())
+    .min(1, "Pilih minimal satu tipe akun"),
+
+  email: z.string().optional(),
+  whatsapp: z.string().optional(),
+
+  campaignId: z.string({ required_error: "Required" }),
+}).refine(
+  (data) => {
+    if (data.accountType.includes("email") && !data.email) return false;
+    return true;
+  },
+  { message: "Email wajib diisi", path: ["email"] }
+).refine(
+  (data) => {
+    if (data.accountType.includes("wa") && !data.whatsapp) return false;
+    return true;
+  },
+  { message: "Whatsapp wajib diisi", path: ["whatsapp"] }
+);
+
+
+// ----------------------------
+// COMPONENT
+// ----------------------------
+
+export default function CreateAccountForBroadcast() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      accountType: [],
+      email: "",
+      whatsapp: "",
+    },
+  });
+
+  const selectedTypes = form.watch("accountType");
+  const [campaigns, setCampaigns] = useState<any[]>([]);
+
+  useEffect(() => {
+    fetchCampaignList();
+  }, []);
+
+  async function fetchCampaignList() {
+    try {
+      const res = await getMediaBlastCampaignPage(0);
+      setCampaigns(res?.data?.data?.content ?? []);
+    } catch (e) {
+      console.log("Error fetch campaign:", e);
+    }
+  }
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then(() => {
+      router.push("/admin/broadcast/campaign-list/account-list");
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      accountName: data.name,
+      accountType: data.accountType.join(","),
+      emailAddress: data.email ?? "",
+      whatsappNumber: data.whatsapp ?? "",
+      campaignId: data.campaignId,
+    };
+
+    console.log("REQ:", reqData);
+
+    const response = await saveMediaBlastAccount(reqData);
+    if (response?.error) {
+      error(response.message);
+      return;
+    }
+    successSubmit();
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <p className="font-semibold">Account</p>
+
+          {/* NAMA */}
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan nama"
+                  onChange={field.onChange}
+                />
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* CHECKBOX TIPE AKUN */}
+          <FormField
+            control={form.control}
+            name="accountType"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Tipe Akun</FormLabel>
+                <div className="flex flex-row gap-4">
+                  {/* WA */}
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      checked={field.value.includes("wa")}
+                      onCheckedChange={(checked) =>
+                        checked
+                          ? field.onChange([...field.value, "wa"])
+                          : field.onChange(field.value.filter((v) => v !== "wa"))
+                      }
+                    />
+                    <label>Whatsapp</label>
+                  </div>
+
+                  {/* EMAIL */}
+                  <div className="flex items-center gap-2">
+                    <Checkbox
+                      checked={field.value.includes("email")}
+                      onCheckedChange={(checked) =>
+                        checked
+                          ? field.onChange([...field.value, "email"])
+                          : field.onChange(
+                              field.value.filter((v) => v !== "email")
+                            )
+                      }
+                    />
+                    <label>Email</label>
+                  </div>
+                </div>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* FORM WHATSAPP */}
+          {selectedTypes.includes("wa") && (
+            <FormField
+              control={form.control}
+              name="whatsapp"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Whatsapp</FormLabel>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor Whatsapp"
+                    {...field}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {/* FORM EMAIL */}
+          {selectedTypes.includes("email") && (
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <Input
+                    type="email"
+                    placeholder="Masukkan email"
+                    {...field}
+                  />
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {/* CAMPAIGN */}
+          <FormField
+            control={form.control}
+            name="campaignId"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Campaign</FormLabel>
+                <FormControl>
+                  <select
+                    className="w-full border rounded-md p-2 text-sm"
+                    value={field.value}
+                    onChange={field.onChange}
+                  >
+                    <option value="" className="text-slate-400">
+                      Pilih campaign
+                    </option>
+
+                    {campaigns.map((c: any) => (
+                      <option key={c.id} value={c.id}>
+                        {c.title || `Campaign ${c.id}`}
+                      </option>
+                    ))}
+                  </select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          {/* BUTTON */}
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button type="button" variant="outline" color="destructive">
+              Cancel
+            </Button>
+            <Button type="submit" color="primary">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+
+// "use client";
+// import SiteBreadcrumb from "@/components/site-breadcrumb";
+// 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 withReactContent from "sweetalert2-react-content";
+// import Swal from "sweetalert2";
+// import { Input } from "@/components/ui/input";
+// import { Button } from "@/components/ui/button";
+// import {
+//   getMediaBlastCampaignPage,
+//   saveMediaBlastAccount,
+// } from "@/service/broadcast/broadcast";
+// import { error } from "@/config/swal";
+// import { useRouter } from "@/i18n/routing";
+// import { Checkbox } from "@/components/ui/checkbox";
+// import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+// import { useEffect, useState } from "react";
+
+// // const FormSchema = z.object({
+// //   name: z.string({
+// //     required_error: "Required",
+// //   }),
+// //   accountType: z
+// //     .array(z.string())
+// //     .refine((value) => value.some((item) => item), {
+// //       message: "Required",
+// //     }),
+// //   accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
+// //     required_error: "Required",
+// //   }),
+// //   email: z.string({
+// //     required_error: "Required",
+// //   }),
+// //   whatsapp: z.string({
+// //     required_error: "Required",
+// //   }),
+// //   campaignId: z.string({ required_error: "Required" }),
+// // });
+// const FormSchema = z
+//   .object({
+//     name: z.string().min(1, "Required"),
+
+//     accountType: z.array(z.string()).refine((value) => value.length > 0, {
+//       message: "Pilih minimal satu tipe akun",
+//     }),
+
+//     accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
+//       required_error: "Required",
+//     }),
+
+//     email: z.string().optional(),
+//     whatsapp: z.string().optional(),
+
+//     campaignId: z.string().min(1, "Required"),
+//   })
+//   .refine(
+//     (data) => {
+//       if (data.accountType.includes("email")) {
+//         return !!data.email && data.email.trim() !== "";
+//       }
+//       return true;
+//     },
+//     { path: ["email"], message: "Email wajib diisi" }
+//   )
+//   .refine(
+//     (data) => {
+//       if (data.accountType.includes("wa")) {
+//         return !!data.whatsapp && data.whatsapp.trim() !== "";
+//       }
+//       return true;
+//     },
+//     { path: ["whatsapp"], message: "Whatsapp wajib diisi" }
+//   );
+
+// export default function CreateAccountForBroadcast() {
+//   const MySwal = withReactContent(Swal);
+//   const router = useRouter();
+//   const form = useForm<z.infer<typeof FormSchema>>({
+//     resolver: zodResolver(FormSchema),
+//     defaultValues: { accountType: [] },
+//   });
+//   const selectedTypes = form.watch("accountType");
+//   const [campaigns, setCampaigns] = useState<any[]>([]);
+
+//   useEffect(() => {
+//     fetchCampaignList();
+//   }, []);
+
+//   async function fetchCampaignList() {
+//     try {
+//       const res = await getMediaBlastCampaignPage(0);
+//       setCampaigns(res?.data?.data?.content ?? []);
+//     } catch (e) {
+//       console.log("Error fetch campaign:", e);
+//     }
+//   }
+
+//   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+//     MySwal.fire({
+//       title: "Simpan Data",
+//       text: "Apakah Anda yakin ingin menyimpan data ini?",
+//       icon: "warning",
+//       showCancelButton: true,
+//       cancelButtonColor: "#d33",
+//       confirmButtonColor: "#3085d6",
+//       confirmButtonText: "Simpan",
+//     }).then((result) => {
+//       if (result.isConfirmed) {
+//         save(data);
+//       }
+//     });
+//   };
+
+//   function successSubmit() {
+//     MySwal.fire({
+//       title: "Sukses",
+//       icon: "success",
+//       confirmButtonColor: "#3085d6",
+//       confirmButtonText: "OK",
+//     }).then((result) => {
+//       if (result.isConfirmed) {
+//         router.push("/admin/broadcast/campaign-list/account-list");
+//       }
+//     });
+//   }
+
+//   const save = async (data: z.infer<typeof FormSchema>) => {
+//     const reqData = {
+//       accountName: data.name,
+//       accountType: data.accountType.join(","),
+//       accountCategory: data.accountCategory,
+//       emailAddress: data.email ?? "",
+//       whatsappNumber: data.whatsapp ?? "",
+//       campaignId: data.campaignId,
+//     };
+//     console.log("data", data);
+
+//     const response = await saveMediaBlastAccount(reqData);
+//     if (response?.error) {
+//       error(response.message);
+//       return false;
+//     }
+
+//     successSubmit();
+//   };
+//   return (
+//     <div>
+//       <SiteBreadcrumb />
+//       <Form {...form}>
+//         <form
+//           onSubmit={form.handleSubmit(onSubmit)}
+//           className="space-y-3 bg-white rounded-sm p-4"
+//         >
+//           <p className="fonnt-semibold">Account</p>
+//           <FormField
+//             control={form.control}
+//             name="name"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Nama</FormLabel>
+//                 <Input
+//                   value={field.value}
+//                   placeholder="Masukkan nama"
+//                   onChange={field.onChange}
+//                 />
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <FormField
+//             control={form.control}
+//             name="accountType"
+//             render={() => (
+//               <FormItem>
+//                 <FormLabel>Tipe Akun</FormLabel>
+//                 <div className="flex flex-row gap-2">
+//                   {" "}
+//                   <FormField
+//                     key="wa"
+//                     control={form.control}
+//                     name="accountType"
+//                     render={({ field }) => {
+//                       return (
+//                         <FormItem
+//                           key="wa"
+//                           className="flex flex-row items-start space-x-3 space-y-0"
+//                         >
+//                           <FormControl>
+//                             <Checkbox
+//                               checked={field.value?.includes("wa")}
+//                               onCheckedChange={(checked) => {
+//                                 return checked
+//                                   ? field.onChange([...field.value, "wa"])
+//                                   : field.onChange(
+//                                       field.value?.filter(
+//                                         (value) => value !== "wa"
+//                                       )
+//                                     );
+//                               }}
+//                             />
+//                           </FormControl>
+//                           <FormLabel className="font-normal">
+//                             Whatsapp
+//                           </FormLabel>
+//                         </FormItem>
+//                       );
+//                     }}
+//                   />
+//                   <FormField
+//                     key="email"
+//                     control={form.control}
+//                     name="accountType"
+//                     render={({ field }) => {
+//                       return (
+//                         <FormItem
+//                           key="email"
+//                           className="flex flex-row items-start space-x-3 space-y-0"
+//                         >
+//                           <FormControl>
+//                             <Checkbox
+//                               checked={field.value?.includes("email")}
+//                               onCheckedChange={(checked) => {
+//                                 return checked
+//                                   ? field.onChange([...field.value, "email"])
+//                                   : field.onChange(
+//                                       field.value?.filter(
+//                                         (value) => value !== "email"
+//                                       )
+//                                     );
+//                               }}
+//                             />
+//                           </FormControl>
+//                           <FormLabel className="font-normal">Email</FormLabel>
+//                         </FormItem>
+//                       );
+//                     }}
+//                   />
+//                 </div>
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           {/* <FormField
+//             control={form.control}
+//             name="accountCategory"
+//             render={({ field }) => (
+//               <FormItem className="space-y-3">
+//                 <FormLabel>Kategori</FormLabel>
+//                 <FormControl>
+//                   <RadioGroup
+//                     onValueChange={field.onChange}
+//                     defaultValue={field.value}
+//                     className="flex flex-row gap-2"
+//                   >
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="polri" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">POLRI</FormLabel>
+//                     </FormItem>
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="jurnalis" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">JURNALIS</FormLabel>
+//                     </FormItem>
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="umum" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">UMUM</FormLabel>
+//                     </FormItem>
+//                     <FormItem className="flex items-center space-x-3 space-y-0">
+//                       <FormControl>
+//                         <RadioGroupItem value="ksp" />
+//                       </FormControl>
+//                       <FormLabel className="font-normal">KSP</FormLabel>
+//                     </FormItem>
+//                   </RadioGroup>
+//                 </FormControl>
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           /> */}
+//           <FormField
+//             control={form.control}
+//             name="email"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Email</FormLabel>
+//                 <Input
+//                   type="email"
+//                   value={field.value}
+//                   placeholder="Masukkan email"
+//                   onChange={field.onChange}
+//                 />
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <FormField
+//             control={form.control}
+//             name="whatsapp"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Nama</FormLabel>
+//                 <Input
+//                   type="number"
+//                   value={field.value}
+//                   placeholder="Masukkan whatsapp"
+//                   onChange={field.onChange}
+//                 />
+
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <FormField
+//             control={form.control}
+//             name="campaignId"
+//             render={({ field }) => (
+//               <FormItem>
+//                 <FormLabel>Campaign</FormLabel>
+//                 <FormControl>
+//                   <select
+//                     className="w-full border rounded-md p-2"
+//                     value={field.value}
+//                     onChange={field.onChange}
+//                   >
+//                     <option value="" className="text-slate-400">
+//                       Pilih campaign
+//                     </option>
+
+//                     {campaigns.map((c: any) => (
+//                       <option key={c.id} value={c.id}>
+//                         {c.title || `Campaign ${c.id}`}
+//                       </option>
+//                     ))}
+//                   </select>
+//                 </FormControl>
+//                 <FormMessage />
+//               </FormItem>
+//             )}
+//           />
+//           <div className="flex flex-row gap-2 mt-4 pt-4">
+//             <Button
+//               size="md"
+//               type="button"
+//               variant="outline"
+//               color="destructive"
+//               className="text-xs"
+//             >
+//               Cancel
+//             </Button>
+//             <Button size="md" type="submit" color="primary" className="text-xs">
+//               Submit
+//             </Button>
+//           </div>
+//         </form>
+//       </Form>
+//     </div>
+//   );
+// }

app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/edit/[id]/page.tsx

@@ -0,0 +1,362 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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 withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMediaBlastAccount,
+  saveMediaBlastAccount,
+  saveMediaBlastCampaign,
+} from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
+import {
+  getUserById,
+  saveUserInternal,
+} from "@/service/management-user/management-user";
+
+// const FormSchema = z.object({
+//    fullname: z.string({
+//     required_error: "Required",
+//   }),
+//   // accountType: z
+//   //   .array(z.string())
+//   //   .refine((value) => value.some((item) => item), {
+//   //     message: "Required",
+//   //   }),
+//   // accountCategory: z.enum(["polri", "jurnalis", "umum", "ksp"], {
+//   //   required_error: "Required",
+//   // }),
+//   email: z.string({
+//     required_error: "Required",
+//   }),
+//   phoneNumber: z.string({
+//     required_error: "Required",
+//   }),
+// });
+
+const FormSchema = z.object({
+  fullname: z.string({ required_error: "Required" }),
+  email: z.string({ required_error: "Required" }),
+  phoneNumber: z.string({ required_error: "Required" }),
+  username: z.string().optional(),
+  role: z.string().optional(),
+  level: z.string().optional(),
+  nrp: z.string().optional(),
+  address: z.string().optional(),
+  password: z.string().optional(),
+  confirmPassword: z.string().optional(),
+});
+
+export default function EditAccountForBroadcast() {
+  const id = useParams()?.id;
+
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    // defaultValues: { accountType: [] },
+  });
+
+  useEffect(() => {
+    async function getDetailData() {
+      const response = await getUserById(String(id));
+      const details = response?.data?.data;
+      console.log("Response full:", response);
+      form.setValue("fullname", details?.fullname);
+      form.setValue("username", details?.username);
+      form.setValue("phoneNumber", details?.phoneNumber);
+      // form.setValue("nrp", details?.memberIdentity);
+      // form.setValue("address", details?.address);
+      form.setValue("email", details?.email);
+      form.setValue("role", details?.role?.code);
+      // form.setValue("level", String(details?.userLevelId));
+      // form.setValue("name", details?.accountName);
+      // form.setValue("fullname", details?.fullname);
+      // form.setValue("email", details?.email);
+      // form.setValue("phoneNumber", details?.phoneNumber);
+      // form.setValue("whatsapp", details?.whatsappNumber);
+      // form.setValue("accountCategory", details?.accountCategory);
+      // form.setValue("accountType", details?.accountType.split(","));
+    }
+
+    getDetailData();
+  }, [id]);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/broadcast/campaign-list");
+      }
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      id: Number(id),
+      // accountName: data.fullname,
+      // accountType: data.accountType.join(","),
+      // accountCategory: data.accountCategory,
+      // emailAddress: data.email,
+      phoneNumber: data.phoneNumber,
+      firstName: data.fullname,
+      username: data.username,
+      roleId: data.role,
+      // userLevelId: Number(data.level),
+      // memberIdentity: data.nrp,
+      // address: data.address,
+      email: data.email,
+      isDefault: false,
+      isAdmin: true,
+    };
+    console.log("data", data);
+
+    const response = await saveUserInternal(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit();
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Account</p>
+          <FormField
+            control={form.control}
+            name="fullname"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan nama"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {/* <FormField
+            control={form.control}
+            name="accountType"
+            render={() => (
+              <FormItem>
+                <FormLabel>Tipe Akun</FormLabel>
+                <div className="flex flex-row gap-2">
+                  <FormField
+                    key="wa"
+                    control={form.control}
+                    name="accountType"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key="wa"
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes("wa")}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, "wa"])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== "wa"
+                                      )
+                                    );
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            Whatsapp
+                          </FormLabel>
+                        </FormItem>
+                      );
+                    }}
+                  />
+                  <FormField
+                    key="email"
+                    control={form.control}
+                    name="accountType"
+                    render={({ field }) => {
+                      return (
+                        <FormItem
+                          key="email"
+                          className="flex flex-row items-start space-x-3 space-y-0"
+                        >
+                          <FormControl>
+                            <Checkbox
+                              checked={field.value?.includes("email")}
+                              onCheckedChange={(checked) => {
+                                return checked
+                                  ? field.onChange([...field.value, "email"])
+                                  : field.onChange(
+                                      field.value?.filter(
+                                        (value) => value !== "email"
+                                      )
+                                    );
+                              }}
+                            />
+                          </FormControl>
+                          <FormLabel className="font-normal">Email</FormLabel>
+                        </FormItem>
+                      );
+                    }}
+                  />
+                </div>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+          {/* <FormField
+            control={form.control}
+            name="accountCategory"
+            render={({ field }) => (
+              <FormItem className="space-y-3">
+                <FormLabel>Kategori</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="flex flex-row gap-2"
+                  >
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="polri" />
+                      </FormControl>
+                      <FormLabel className="font-normal">POLRI</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="jurnalis" />
+                      </FormControl>
+                      <FormLabel className="font-normal">JURNALIS</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="umum" />
+                      </FormControl>
+                      <FormLabel className="font-normal">UMUM</FormLabel>
+                    </FormItem>
+                    <FormItem className="flex items-center space-x-3 space-y-0">
+                      <FormControl>
+                        <RadioGroupItem value="ksp" />
+                      </FormControl>
+                      <FormLabel className="font-normal">KSP</FormLabel>
+                    </FormItem>
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          /> */}
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <Input
+                  type="email"
+                  value={field.value}
+                  placeholder="Masukkan email"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nomor Whatsapp</FormLabel>
+                <Input
+                  type="number"
+                  value={field.value}
+                  placeholder="Masukkan nomor whatsapp"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/campaign-list/account-list/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import AccountListTable from "./component/table";
+
+export default function AdminCampaignList() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <AccountListTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/campaign-list/component/column.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Link, useRouter } from "@/i18n/routing";
+import { close, error, loading, success } from "@/config/swal";
+import { deleteMediaBlastCampaign } from "@/service/broadcast/broadcast";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("title")}</span>
+    ),
+  },
+  {
+    accessorKey: "sendTime",
+    header: "Tanggal & Waktu",
+    cell: ({ row }) => <span>{row.getValue("sendTime")}</span>,
+  },
+
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <Badge
+        className={`text-center items-center text-white ${
+          row.getValue("status") == "done"
+            ? "bg-blue-500"
+            : row.getValue("status") == "waiting"
+            ? "bg-yellow-400"
+            : "bg-red-600"
+        }`}
+      >
+        {row.getValue("status") == "done"
+          ? "Selesai"
+          : row.getValue("status") == "waiting"
+          ? "Proses"
+          : "Gagal"}
+      </Badge>
+    ),
+  },
+
+  {
+    id: "actions",
+    header: "Actions",
+    cell: ({ row, onDeleteSuccess }: any) => {
+      const MySwal = withReactContent(Swal);
+
+      const handleDelete = (id: number) => {
+        MySwal.fire({
+          title: "Apakah anda ingin menghapus data?",
+          showCancelButton: true,
+          confirmButtonColor: "#dc3545",
+          confirmButtonText: "Iya",
+          cancelButtonText: "Tidak",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            doDeleteAccount(id);
+          }
+        });
+      };
+
+      async function doDeleteAccount(id: number) {
+        loading();
+        const response = await deleteMediaBlastCampaign(id);
+        close();
+
+        if (response.error) {
+          error(response.message);
+          return false;
+        }
+        console.log("Delete response:", response);
+
+        MySwal.fire({
+          icon: "success",
+          title: "Berhasil!",
+          text: "Data berhasil dihapus.",
+          confirmButtonColor: "#3085d6",
+          timer: 2000,
+          timerProgressBar: true,
+        });
+        // ✅ panggil callback dari parent
+        onDeleteSuccess?.(id);
+      }
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link
+              href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Detail
+              </DropdownMenuItem>
+            </Link>
+            <Link
+              href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Edit
+              </DropdownMenuItem>
+            </Link>
+            <DropdownMenuItem
+              onClick={() => handleDelete(row.original.id)}
+              className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer"
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+
+  // {
+  //   id: "actions",
+  //   accessorKey: "action",
+  //   header: "Actions",
+  //   enableHiding: false,
+  //   cell: ({ row, onDeleteSuccess }: any) => {
+  //     const MySwal = withReactContent(Swal);
+
+  //     const handleDelete = (id: any) => {
+  //       MySwal.fire({
+  //         title: "Apakah anda ingin menghapus data?",
+  //         showCancelButton: true,
+  //         confirmButtonColor: "#dc3545",
+  //         confirmButtonText: "Iya",
+  //         cancelButtonText: "Tidak",
+  //       }).then((result: any) => {
+  //         if (result.isConfirmed) {
+  //           doDeleteAccount(id);
+  //         }
+  //       });
+  //     };
+
+  //     async function doDeleteAccount(id: any) {
+  //       loading();
+  //       const response = await deleteMediaBlastCampaign(id);
+  //       close();
+
+  //       if (response.error) {
+  //         error(response.message);
+  //         return false;
+  //       }
+  //       console.log("Delete response:", response);
+
+  //       MySwal.fire({
+  //         icon: "success",
+  //         title: "Berhasil!",
+  //         text: "Data berhasil dihapus.",
+  //         confirmButtonColor: "#3085d6",
+  //         timer: 2000,
+  //         timerProgressBar: true,
+  //       });
+  //       // ✅ langsung hapus dari state
+  //       onDeleteSuccess?.(id);
+  //     }
+
+  //     return (
+  //       <DropdownMenu>
+  //         <DropdownMenuTrigger asChild>
+  //           <Button
+  //             size="icon"
+  //             className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+  //           >
+  //             <MoreVertical className="h-4 w-4 text-default-800" />
+  //           </Button>
+  //         </DropdownMenuTrigger>
+  //         <DropdownMenuContent className="p-0" align="end">
+  //           <Link
+  //             href={`/admin/broadcast/campaign-list/detail/${row.original.id}`}
+  //           >
+  //             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+  //               Detail
+  //             </DropdownMenuItem>
+  //           </Link>
+  //           <Link
+  //             href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
+  //           >
+  //             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+  //               Edit
+  //             </DropdownMenuItem>
+  //           </Link>
+  //           <DropdownMenuItem
+  //             onClick={() => handleDelete(row.original.id)}
+  //             className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer"
+  //           >
+  //             Delete
+  //           </DropdownMenuItem>
+  //         </DropdownMenuContent>
+  //       </DropdownMenu>
+  //     );
+  //   },
+  // },
+];
+
+export default columns;

app/[locale]/(protected)/admin/broadcast/campaign-list/component/table.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  getMediaBlastCampaignPage,
+  listDataMedia,
+} from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+import { NewCampaignIcon } from "@/components/icon";
+
+const CampaignListTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+
+  function handleDeleteSuccess(id: number) {
+    setDataTable((prev) => prev.filter((item) => item.id !== id));
+  }
+
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await getMediaBlastCampaignPage(page - 1);
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * 10 + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">Daftar Campaign</p>
+        <div className="flex flex-row gap-2">
+          {/* <Link href="/admin/broadcast/campaign-list/account-list">
+            <Button color="primary" size="md" className="text-sm">
+              <UserIcon />
+              Daftar Akun
+            </Button>
+          </Link> */}
+          <Link href="/admin/broadcast/campaign-list/create">
+            <Button color="primary" size="md" className="text-sm">
+              <NewCampaignIcon size={23} />
+              Buat Campaign Baru
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
+                    {flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      onDeleteSuccess: (id: number) => {
+                        // setDataTable((prev) => prev.filter((item) => item.id !== id)
+                        fetchData()
+                      },
+                    })}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default CampaignListTable;

app/[locale]/(protected)/admin/broadcast/campaign-list/create/page.tsx

@@ -0,0 +1,198 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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 withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { getOnlyDate } from "@/utils/globals";
+import { saveMediaBlastCampaign } from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+
+const FormSchema = z.object({
+  date: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  time: z.string({
+    required_error: "Required",
+  }),
+});
+
+export default function CreateCampaign() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/broadcast/campaign-list");
+      }
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const newDate = getOnlyDate(data.date).split("-");
+    const dates = `${newDate[2]}-${newDate[1]}-${newDate[0]}`;
+    const reqData = {
+      title: data.title,
+      sendTime: `${dates} ${data.time}:00`,
+      status: "waiting",
+    };
+
+    const response = await saveMediaBlastCampaign(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit();
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Campaign</p>
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Judul</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Judul"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <p className="text-sm">Jadwal Kirim</p>
+          <div className="flex flex-row gap-2">
+            <FormField
+              control={form.control}
+              name="date"
+              render={({ field }) => (
+                <FormItem>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant={"outline"}
+                        size="md"
+                        className={cn(
+                          "w-[200px] justify-start text-left font-normal border-gray-200",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        {field.value ? (
+                          format(field.value, "dd-MM-yyyy")
+                        ) : (
+                          <span>Masukkan Bulan</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="time"
+              render={({ field }) => (
+                <FormItem>
+                  <Input
+                    type="time"
+                    className="max-w-[100px]"
+                    value={field.value}
+                    placeholder="Masukkan Judul Perencanaan"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/campaign-list/detail/[id]/page.tsx

@@ -0,0 +1,406 @@
+"use client";
+
+import "react-datepicker/dist/react-datepicker.css";
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+import { useRouter, usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useMediaQuery } from "react-responsive";
+import { close, loading } from "@/config/swal";
+import ReactDatePicker from "react-datepicker";
+import { getOnlyDate } from "@/utils/globals";
+import AccountListTable from "../../account-list/component/table";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import TablePagination from "@/components/table/table-pagination";
+import {
+  getMediaBlastCampaignById,
+  getMediaBlastBroadcastList,
+} from "@/service/broadcast/broadcast";
+
+// Types
+interface CampaignData {
+  id: string;
+  no: number;
+  mediaBlastCampaignId: string;
+  mediaBlastCampaign: {
+    title: string;
+  };
+  subject: string;
+  type: string;
+  status: string;
+  sendDate: string;
+}
+
+interface PaginatedResponse {
+  content: CampaignData[];
+  totalPages: number;
+  totalElements: number;
+}
+
+interface PageProps {
+  params: {
+    id: string;
+    locale: string;
+  };
+  searchParams: {
+    page?: string;
+    size?: string;
+  };
+}
+
+export default function BroadcastCampaignDetail({
+  params,
+  searchParams,
+}: PageProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { id, locale } = params;
+  const [getData, setGetData] = useState<CampaignData[]>([]);
+  const [totalPage, setTotalPage] = useState<number>(0);
+  const [totalData, setTotalData] = useState<number>(0);
+  const [activeTab, setActiveTab] = useState<
+    "sent" | "schedule" | "account-list"
+  >("sent");
+  const { page, size } = searchParams;
+  const [calenderState, setCalenderState] = useState<boolean>(false);
+  const [typeFilter, setTypeFilter] = useState<string>("email");
+  const [dateRange, setDateRange] = useState<[Date, Date]>([
+    new Date(),
+    new Date(),
+  ]);
+  const [startDate, endDate] = dateRange;
+  const [startDateString, setStartDateString] = useState<string | undefined>();
+  const [endDateString, setEndDateString] = useState<string | undefined>();
+  // Table state
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: parseInt(size || "10"),
+  });
+  const pages = page ? parseInt(page) - 1 : 0;
+  const currentPage = page ? parseInt(page) : 1;
+  const pageSize = parseInt(size || "10");
+
+  const isFHD = useMediaQuery({
+    minWidth: 1920,
+  });
+
+  const setCurrentPage = (pageNumber: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("page", pageNumber.toString());
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  async function getListPaginationData() {
+    loading();
+    console.log("Type : ", typeFilter);
+    console.log("Date : ", startDateString, endDateString);
+
+    try {
+      const res = await getMediaBlastBroadcastList(
+        pages,
+        activeTab === "schedule",
+        startDateString || "",
+        endDateString || "",
+        typeFilter,
+        id
+      );
+
+      close();
+      if (res?.data?.data) {
+        setupData(res.data.data);
+      }
+    } catch (error) {
+      console.error("Error fetching data:", error);
+      close();
+    }
+  }
+
+  useEffect(() => {
+    getListPaginationData();
+  }, [
+    currentPage,
+    pageSize,
+    activeTab,
+    endDateString,
+    startDateString,
+    typeFilter,
+  ]);
+
+  function setupData(rawData: PaginatedResponse) {
+    console.log("raw", rawData);
+    if (rawData !== undefined) {
+      const dataContent = rawData?.content;
+      const data: CampaignData[] = [];
+
+      dataContent.forEach((element, i) => {
+        element.no = (currentPage - 1) * pageSize + i + 1;
+        data.push(element);
+      });
+
+      setGetData(data);
+      setTotalPage(rawData?.totalPages);
+      setTotalData(rawData?.totalElements);
+    }
+  }
+
+  const columns: ColumnDef<CampaignData>[] = [
+    {
+      accessorKey: "no",
+      header: "No",
+      cell: ({ row }) => <span>{row.getValue("no")}</span>,
+    },
+    {
+      accessorKey: "mediaBlastCampaign.title",
+      header: "Campaign",
+      cell: ({ row }) => (
+        <Link
+          href={`/${locale}/admin/broadcast/campaign-list/detail/${row.original.mediaBlastCampaignId}`}
+          className="text-dark"
+        >
+          <span className="font-weight-bold">
+            {row.original.mediaBlastCampaign?.title}
+          </span>
+        </Link>
+      ),
+    },
+    {
+      accessorKey: "subject",
+      header: "Judul",
+      cell: ({ row }) => (
+        <Link
+          href={`/${locale}/admin/broadcast/content/detail/${row.original.id}`}
+          className="text-dark"
+        >
+          <span className="font-weight-bold">{row.getValue("subject")}</span>
+        </Link>
+      ),
+    },
+    {
+      accessorKey: "type",
+      header: "Tipe",
+      cell: ({ row }) => (
+        <div className="text-right text-black">{row.getValue("type")}</div>
+      ),
+    },
+    {
+      accessorKey: "status",
+      header: "Status",
+      cell: ({ row }) => (
+        <div className="text-right text-black">{row.getValue("status")}</div>
+      ),
+    },
+    {
+      accessorKey: "sendDate",
+      header: "Tanggal & Waktu",
+      cell: ({ row }) => (
+        <div className="text-black">{row.getValue("sendDate")}</div>
+      ),
+    },
+  ];
+
+  const table = useReactTable({
+    data: getData,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  useEffect(() => {
+    function initState() {
+      if (startDate != null && endDate != null) {
+        setStartDateString(getOnlyDate(startDate));
+        setEndDateString(getOnlyDate(endDate));
+      }
+    }
+    console.log("date range", dateRange);
+    initState();
+  }, [calenderState, startDate, endDate]);
+
+  const handleTypeFilter = (type: string) => {
+    setTypeFilter(type);
+  };
+
+  return (
+    <div className="bg-white dark:bg-black container-fluid rounded ">
+      <div className="mt-1 p-4">
+        <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-4">
+          <Button
+            onClick={() => setActiveTab("sent")}
+            size="md"
+            className={`hover:text-white ${
+              activeTab === "sent"
+                ? "bg-indigo-600 text-white "
+                : "bg-white text-black "
+            }`}
+          >
+            Sent
+          </Button>
+          <Button
+            onClick={() => setActiveTab("schedule")}
+            size="md"
+            className={`hover:text-white ${
+              activeTab === "schedule"
+                ? "bg-indigo-600 text-white "
+                : "bg-white text-black "
+            }`}
+          >
+            Schedule
+          </Button>
+          <Button
+            onClick={() => setActiveTab("account-list")}
+            size="md"
+            className={`hover:text-white ${
+              activeTab === "account-list"
+                ? "bg-indigo-600 text-white "
+                : "bg-white text-black "
+            }`}
+          >
+            List Akun
+          </Button>
+        </div>
+
+        {activeTab === "account-list" ? (
+          <AccountListTable />
+        ) : (
+          <>
+            <div className="broadcast-filter flex flex-column gap-3 mb-4">
+              <div className="flex flex-row gap-1 border-2 rounded-md w-fit h-fit">
+                <Button
+                  onClick={() => handleTypeFilter("email")}
+                  className={`hover:text-white ${
+                    typeFilter === "email"
+                      ? "bg-black text-white "
+                      : "bg-white text-black "
+                  }`}
+                  size="sm"
+                >
+                  Email Blast
+                </Button>
+                <Button
+                  onClick={() => handleTypeFilter("wa")}
+                  className={`hover:text-white ${
+                    typeFilter === "wa"
+                      ? "bg-black text-white "
+                      : "bg-white text-black "
+                  }`}
+                  size="sm"
+                >
+                  WhatsApp Blast
+                </Button>
+              </div>
+              <div className="dashboard-date-picker">
+                <div className="mx-6 my-1">
+                  <ReactDatePicker
+                    selectsRange
+                    startDate={startDate}
+                    endDate={endDate}
+                    onChange={(update) => {
+                      setDateRange(update as [Date, Date]);
+                    }}
+                    placeholderText="Pilih Tanggal"
+                    onCalendarClose={() => setCalenderState(!calenderState)}
+                    className="form-control rounded-pill"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="w-full overflow-x-auto">
+              <Table className="overflow-hidden mt-3">
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id} className="bg-default-200">
+                      {headerGroup.headers.map((header) => (
+                        <TableHead key={header.id}>
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows?.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow
+                        key={row.id}
+                        data-state={row.getIsSelected() && "selected"}
+                        className="h-[75px]"
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 text-center"
+                      >
+                        No results.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+              <TablePagination
+                table={table}
+                totalData={totalData}
+                totalPage={totalPage}
+              />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/campaign-list/edit/[id]/page.tsx

@@ -0,0 +1,227 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+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 withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { getOnlyDate } from "@/utils/globals";
+import {
+  getMediaBlastCampaignById,
+  saveMediaBlastCampaign,
+} from "@/service/broadcast/broadcast";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { useParams } from "next/navigation";
+import { useEffect } from "react";
+
+const FormSchema = z.object({
+  date: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  time: z.string({
+    required_error: "Required",
+  }),
+  status: z.string({
+    required_error: "Required",
+  }),
+});
+
+export default function EditCampaign() {
+  const id = useParams()?.id;
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  useEffect(() => {
+    async function getInitData() {
+      const response = await getMediaBlastCampaignById(String(id));
+      const date = response?.data?.data?.sendTime.split(" ");
+      const dateInput: Date = new Date(date[0]);
+
+      const time = date[1].split(":");
+
+      form.setValue("title", response?.data?.data?.title);
+      form.setValue("status", response?.data?.data?.status);
+      form.setValue("date", new Date(format(dateInput, "dd-MM-yyyy")));
+      form.setValue("time", `${time[0]}:${time[1]}`);
+    }
+
+    if (id != undefined) {
+      getInitData();
+    }
+  }, [id]);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    MySwal.fire({
+      title: "Simpan Data",
+      text: "Apakah Anda yakin ingin menyimpan data ini?",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  };
+
+  function successSubmit() {
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/broadcast/campaign-list");
+      }
+    });
+  }
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const newDate = getOnlyDate(data.date).split("-");
+    const dates = `${newDate[2]}-${newDate[1]}-${newDate[0]}`;
+    const reqData = {
+      id: String(id),
+      title: data.title,
+      sendTime: `${dates} ${data.time}:00`,
+      status: data.status,
+    };
+
+    const response = await saveMediaBlastCampaign(reqData);
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    successSubmit();
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
+        >
+          <p className="fonnt-semibold">Campaign</p>
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Judul</FormLabel>
+                <Input
+                  value={field.value}
+                  placeholder="Masukkan Judul"
+                  onChange={field.onChange}
+                />
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <p className="text-sm">Jadwal Kirim</p>
+          <div className="flex flex-row gap-2">
+            <FormField
+              control={form.control}
+              name="date"
+              render={({ field }) => (
+                <FormItem>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant={"outline"}
+                        size="md"
+                        className={cn(
+                          "w-[200px] justify-start text-left font-normal border-gray-200",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        {field.value ? (
+                          format(field.value, "dd-MM-yyyy")
+                        ) : (
+                          <span>Masukkan Bulan</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="time"
+              render={({ field }) => (
+                <FormItem>
+                  <Input
+                    type="time"
+                    className="max-w-[100px]"
+                    value={field.value}
+                    placeholder="Masukkan Judul Perencanaan"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="flex flex-row gap-2 mt-4 pt-4">
+            <Button
+              size="md"
+              type="button"
+              variant="outline"
+              color="destructive"
+              className="text-xs"
+            >
+              Cancel
+            </Button>
+            <Button size="md" type="submit" color="primary" className="text-xs">
+              Submit
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/campaign-list/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import CampaignListTable from "./component/table";
+
+export default function AdminCampaignList() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <CampaignListTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/content/detail/[id]/page.tsx

@@ -0,0 +1,11 @@
+import DetailContentBlast from "@/components/form/broadcast/content-blast--detail-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function DetailEmailBlast() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <DetailContentBlast />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/create/[id]/page.tsx

@@ -0,0 +1,11 @@
+import ContentBlast from "@/components/form/broadcast/content-blast-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function CreateEmailBlast() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <ContentBlast />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/create/component/column.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "fileTypeName",
+    header: "Konten",
+    cell: ({ row }) => <span>{row.getValue("fileTypeName")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+
+  {
+    accessorKey: "statusName",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("statusName")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/contributor/content/image/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Detail
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/broadcast/create/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Email & Whatsapp Blast
+              </DropdownMenuItem>
+            </Link>
+            {/* <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Whatsapp Blast
+              </DropdownMenuItem>
+            </Link> */}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/broadcast/create/component/table.tsx

@@ -0,0 +1,403 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  listDataMedia,
+  listDataMediaBroadCast,
+} from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+
+const BroadcastEmailTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    fetchData();
+  }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await listDataMediaBroadCast(
+        page - 1,
+        showData,
+        search,
+        categoryFilter?.sort().join(","),
+        statusFilter?.sort().join(",")
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
+      <div className="flex justify-between ">
+        <Link href="/admin/broadcast/campaign-list" className="mr-3">
+          <Button color="primary" size="md" className="text-sm">
+            <UserIcon />
+            Daftar Campaign
+          </Button>
+        </Link>
+        <Input
+          type="text"
+          placeholder="Search"
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-[300px]"
+        />
+        <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button size="md" variant="outline">
+                Filter
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 ">
+              <div className="flex flex-col gap-2 px-2">
+                <div className="flex justify-between text-sm">
+                  <p>Filter</p>
+                  <a
+                    onClick={() => fetchData()}
+                    className="cursor-pointer text-primary"
+                  >
+                    Simpan
+                  </a>
+                </div>
+                <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                  <p>Kategory</p>
+                  {categories?.map((category: any) => (
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id={category.id}
+                        checked={categoryFilter.includes(category.id)}
+                        onCheckedChange={(e) =>
+                          handleChange("category", category.id, Boolean(e))
+                        }
+                      />
+                      <label
+                        htmlFor={category.id}
+                        className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {category.name}
+                      </label>
+                    </div>
+                  ))}
+                  <p className="mt-3">Status</p>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(1)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 1, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(2)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 2, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Diterima
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(3)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 3, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Minta Update{" "}
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(4)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 4, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Ditolak
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default BroadcastEmailTable;

app/[locale]/(protected)/admin/broadcast/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import BroadcastTable from "./create/component/table";
+import { PlusIcon } from "lucide-react";
+
+import EscalationTable from "../../shared/communication/escalation/components/escalation-table";
+import InternalTable from "../../shared/communication/internal/components/internal-table";
+import { useState } from "react";
+import { Link } from "@/i18n/routing";
+import { Button } from "@/components/ui/button";
+import BroadcastEmailTable from "./create/component/table";
+import BroadcastWhatsAppTable from "./whatsapp/component/table";
+
+export default function AdminBroadcast() {
+  const [tab, setTab] = useState("Email Blast");
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
+        {tab === "Email Blast" && <BroadcastEmailTable />}
+        {tab === "WhatsApp Blast" && <BroadcastWhatsAppTable />}
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/whatsapp/[id]/page.tsx

@@ -0,0 +1,11 @@
+import ContentBlast from "@/components/form/broadcast/content-blast-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function CreateWABlast() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      {/* <ContentBlast /> */}
+    </div>
+  );
+}

app/[locale]/(protected)/admin/broadcast/whatsapp/component/column.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+
+  {
+    accessorKey: "statusName",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("statusName")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/contributor/content/image/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Detail
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/broadcast/email/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Email Blast
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none cursor-pointer">
+                Whatsapp Blast
+              </DropdownMenuItem>
+            </Link>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/broadcast/whatsapp/component/table.tsx

@@ -0,0 +1,403 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  listDataMedia,
+  listDataMediaBroadCast,
+} from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+
+const BroadcastWhatsAppTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    fetchData();
+  }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await listDataMediaBroadCast(
+        page - 1,
+        showData,
+        search,
+        categoryFilter?.sort().join(","),
+        statusFilter?.sort().join(",")
+      );
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="flex justify-between ">
+        <Link href="/admin/broadcast/campaign-list" className="mr-3">
+          <Button color="primary" size="md" className="text-sm">
+            <UserIcon />
+            Daftar Campaign
+          </Button>
+        </Link>
+        <Input
+          type="text"
+          placeholder="Search"
+          onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-[300px]"
+        />
+        <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button size="md" variant="outline">
+                Filter
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 ">
+              <div className="flex flex-col gap-2 px-2">
+                <div className="flex justify-between text-sm">
+                  <p>Filter</p>
+                  <a
+                    onClick={() => fetchData()}
+                    className="cursor-pointer text-primary"
+                  >
+                    Simpan
+                  </a>
+                </div>
+                <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                  <p>Kategory</p>
+                  {categories?.map((category: any) => (
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id={category.id}
+                        checked={categoryFilter.includes(category.id)}
+                        onCheckedChange={(e) =>
+                          handleChange("category", category.id, Boolean(e))
+                        }
+                      />
+                      <label
+                        htmlFor={category.id}
+                        className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {category.name}
+                      </label>
+                    </div>
+                  ))}
+                  <p className="mt-3">Status</p>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(1)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 1, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(2)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 2, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Diterima
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(3)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 3, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Minta Update{" "}
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(4)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 4, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Ditolak
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default BroadcastWhatsAppTable;

app/[locale]/(protected)/admin/management-user/external/detail/[id]/page.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+import {
+  getUserById,
+  saveUserInternal,
+} from "@/service/management-user/management-user";
+import { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Link, useRouter } from "@/i18n/routing";
+
+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({
+    required_error: "Required",
+  }),
+  username: z.string({
+    required_error: "Required",
+  }),
+
+  identity: z.string({
+    required_error: "Required",
+  }),
+  address: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  password: z.string({
+    required_error: "Required",
+  }),
+  confirmPassword: z.string({
+    required_error: "Required",
+  }),
+  isValidPassword: z.boolean().refine((val) => val === true, {
+    message: "Check Password",
+  }),
+});
+
+export default function EditUserForm() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id;
+  const MySwal = withReactContent(Swal);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  useEffect(() => {
+    initData();
+  }, []);
+
+  const initData = async () => {
+    loading();
+    const response = await getUserById(String(id));
+    const res = response?.data?.data;
+    close();
+    console.log("res", res);
+    form.setValue("fullname", res?.fullname);
+    form.setValue("username", res?.username);
+    form.setValue("phoneNumber", res?.phoneNumber);
+    form.setValue("address", res?.address);
+    form.setValue("email", res?.email);
+  };
+
+  async function save(data: z.infer<typeof FormSchema>) {
+    let req: any = {
+      id: Number(id),
+      firstName: data.fullname,
+      username: data.username,
+      address: data.address,
+      email: data.email,
+      identityNumber: data.identity,
+      password: data.password,
+      passwordConf: data.confirmPassword,
+      isDefault: false,
+    };
+
+    loading();
+    const response = await saveUserInternal(req);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    close();
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Oke",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/management-user");
+      }
+    });
+    return false;
+  }
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    MySwal.fire({
+      title: "Simpan Data?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  }
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6 bg-white p-10 w-full"
+        >
+          <p className="text-xl">Data Pengelola Media Hub</p>
+
+          <FormField
+            control={form.control}
+            name="fullname"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan nama lengkap"
+                    {...field}
+                    className="w-1/2"
+                    readOnly
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan username"
+                    {...field}
+                    className="w-1/2"
+                    readOnly
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="identity"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nomor Identitas</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor identitas"
+                    {...field}
+                    className="w-1/2"
+                    readOnly
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Alamat</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Masukkan alamat"
+                    className="resize-none w-1/2"
+                    {...field}
+                    readOnly
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="Masukkan email"
+                    {...field}
+                    className="w-1/2"
+                    readOnly
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. Handphone</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor handphone"
+                    {...field}
+                    className="w-1/2 mb-5"
+                    readOnly
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Link href="/admin/management-user">
+            <Button type="button" color="primary" variant="outline">
+              Back
+            </Button>
+          </Link>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/management-user/external/edit/[id]/page.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn, getCookiesDecrypt } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  getUserById,
+  saveUserInternal,
+} from "@/service/management-user/management-user";
+import { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Link, useRouter } from "@/i18n/routing";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import dynamic from "next/dynamic";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { useParams } from "next/navigation";
+import { identity } from "@fullcalendar/core/internal";
+
+const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
+  ssr: false,
+});
+
+interface RoleData {
+  id: number;
+  label: string;
+  name: string;
+  value: string;
+  levelNumber: number;
+}
+
+const FormSchema = z.object({
+  fullname: z.string({
+    required_error: "Required",
+  }),
+  username: z.string({
+    required_error: "Required",
+  }),
+
+  identity: z.string({
+    required_error: "Required",
+  }),
+  address: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  password: z.string({
+    required_error: "Required",
+  }),
+  confirmPassword: z.string({
+    required_error: "Required",
+  }),
+  isValidPassword: z.boolean().refine((val) => val === true, {
+    message: "Check Password",
+  }),
+});
+
+export default function EditUserForm() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id;
+  const MySwal = withReactContent(Swal);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const passwordVal = form.watch("password");
+  const confPasswordVal = form.watch("confirmPassword");
+
+  useEffect(() => {
+    initData();
+  }, []);
+
+  const initData = async () => {
+    loading();
+    const response = await getUserById(String(id));
+    const res = response?.data?.data;
+    close();
+    console.log("res", res);
+    form.setValue("fullname", res?.fullname);
+    form.setValue("username", res?.username);
+    form.setValue("phoneNumber", res?.phoneNumber);
+    form.setValue("address", res?.address);
+    form.setValue("email", res?.email);
+  };
+
+  async function save(data: z.infer<typeof FormSchema>) {
+    let req: any = {
+      id: Number(id),
+      firstName: data.fullname,
+      username: data.username,
+      address: data.address,
+      email: data.email,
+      identityNumber: data.identity,
+      password: data.password,
+      passwordConf: data.confirmPassword,
+      isDefault: false,
+      isAdmin: true,
+    };
+
+    loading();
+    const response = await saveUserInternal(req);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    close();
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Oke",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/management-user");
+      }
+    });
+    return false;
+  }
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    MySwal.fire({
+      title: "Simpan Data?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  }
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6 bg-white p-10 w-full"
+        >
+          <p className="text-xl">Data Pengelola Media Hub</p>
+
+          <FormField
+            control={form.control}
+            name="fullname"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan nama lengkap"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan username"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="identity"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nomor Identitas</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor identitas"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Alamat</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Masukkan alamat"
+                    className="resize-none w-1/2"
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="Masukkan email"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. Handphone</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor handphone"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Masukkan kata sandi"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="confirmPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Konfirmasi Kata Sandi</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Masukkan kata sandi"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <PasswordChecklist
+            rules={["minLength", "specialChar", "number", "capital", "match"]}
+            minLength={8}
+            value={passwordVal || ""}
+            valueAgain={confPasswordVal || ""}
+            onChange={(isValid) => {
+              form.setValue("isValidPassword", isValid);
+            }}
+            className="text-sm"
+            messages={{
+              minLength: "Password harus lebih dari 8 karakter",
+              specialChar: "Password harus memiliki spesial karakter",
+              number: "Password harus memiliki angka",
+              capital: "Password harus memiliki huruf kapital",
+              match: "Password sama",
+            }}
+          />
+          <Link href="/admin/management-user">
+            <Button type="button" color="primary" variant="outline">
+              Back
+            </Button>
+          </Link>
+          <Button type="submit" color="primary" className="mx-3">
+            Submit
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/management-user/internal/create/page.tsx

@@ -0,0 +1,789 @@
+"use client";
+
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown, Eye, EyeOff } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  saveUserInternal,
+} from "@/service/management-user/management-user";
+import { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Link, useRouter } from "@/i18n/routing";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import dynamic from "next/dynamic";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+
+const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
+  ssr: false,
+});
+
+const sns = [
+  {
+    key: 1,
+    id: "comment",
+    typeId: 1,
+    name: "Komentar Konten",
+  },
+  {
+    key: 2,
+    id: "fb",
+    typeId: 2,
+    name: "Facebook",
+  },
+  {
+    key: 3,
+    id: "ig",
+    typeId: 3,
+    name: "Instagram",
+  },
+  {
+    key: 4,
+    id: "twt",
+    typeId: 4,
+    name: "Twitter",
+  },
+  {
+    key: 5,
+    id: "yt",
+    typeId: 5,
+    name: "Youtube",
+  },
+  {
+    key: 6,
+    id: "emergency",
+    typeId: 6,
+    name: "Emergency Issue",
+  },
+  {
+    key: 7,
+    id: "email",
+    typeId: 7,
+    name: "Email",
+  },
+  {
+    key: 8,
+    id: "inbox",
+    typeId: 8,
+    name: "Pesan Masuk",
+  },
+  {
+    key: 9,
+    id: "whatsapp",
+    typeId: 9,
+    name: "Whatssapp",
+  },
+  {
+    key: 10,
+    id: "tiktok",
+    typeId: 10,
+    name: "Tiktok",
+  },
+];
+
+interface RoleData {
+  id: number;
+  label: string;
+  name: string;
+  value: string;
+  levelNumber: number;
+}
+
+const FormSchema = z.object({
+  level: z.string({
+    required_error: "Required",
+  }),
+  fullname: z.string({
+    required_error: "Required",
+  }),
+  username: z.string({
+    required_error: "Required",
+  }),
+  role: z.string({
+    required_error: "Required",
+  }),
+  nrp: z.string({
+    required_error: "Required",
+  }),
+  address: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  password: z.string({
+    required_error: "Required",
+  }),
+  confirmPassword: z.string({
+    required_error: "Required",
+  }),
+  isValidPassword: z.boolean().refine((val) => val === true, {
+    message: "Check Password",
+  }),
+  sns: z.array(z.string()).optional(),
+  education: z.string().optional(),
+  school: z.string().optional(),
+  competency: z.string().optional(),
+});
+
+export default function CreateUserForm() {
+  const router = useRouter();
+  const MySwal = withReactContent(Swal);
+  const levelName = getCookiesDecrypt("ulnae");
+  const [roleList, setRoleList] = useState<RoleData[]>([]);
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [userEducations, setUserEducations] = useState<any>();
+  const [userSchools, setUserSchools] = useState<any>();
+  const [userCompetencies, setUserCompetencies] = useState<any>();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+      sns: [],
+      education: "1",
+      school: "4",
+      competency: "2",
+    },
+  });
+
+  const passwordVal = form.watch("password");
+  const confPasswordVal = form.watch("confirmPassword");
+  const selectedRole = form.watch("role");
+
+  useEffect(() => {
+    initFetch();
+    getDataAdditional();
+  }, []);
+
+  const initFetch = async () => {
+    const response = await AdministrationLevelList();
+    const res = response?.data?.data;
+    var levelsArr: RoleData[] = [];
+    res.forEach((levels: RoleData) => {
+      levelsArr.push({
+        id: levels.id,
+        label: levels.name,
+        name: levels.name,
+        value: String(levels.id),
+        levelNumber: levels.levelNumber,
+      });
+    });
+    setRoleList(levelsArr);
+  };
+
+  async function getDataAdditional() {
+    const resEducations = await getListEducation();
+    setUserEducations(resEducations?.data?.data);
+    const resSchools = await getListSchools();
+    setUserSchools(resSchools?.data?.data);
+    const resCompetencies = await getListCompetencies();
+    setUserCompetencies(resCompetencies?.data?.data);
+  }
+
+  const roles =
+    levelName == "MABES POLRI"
+      ? [
+          {
+            id: "ADM-ID",
+            name: "Admin",
+          },
+          {
+            id: "EXE-ID",
+            name: "Eksekutif",
+          },
+          {
+            id: "APP-ID",
+            name: "Approver",
+          },
+          {
+            id: "CON-ID",
+            name: "Kontributor",
+          },
+          {
+            id: "SPV-ID",
+            name: "Supervisor Feedback Center",
+          },
+          {
+            id: "OPT-ID",
+            name: "Operator Feedback Center",
+          },
+          {
+            id: "KKUR-ID",
+            name: "Koor Kurator",
+          },
+          {
+            id: "KUR-ID",
+            name: "Kurator",
+          },
+        ]
+      : [
+          {
+            id: "APP-ID",
+            name: "Approver",
+          },
+          {
+            id: "CON-ID",
+            name: "Kontributor",
+          },
+        ];
+
+  async function save(data: z.infer<typeof FormSchema>) {
+    let req: any = {
+      firstName: data.fullname,
+      username: data.username,
+      roleId: data.role,
+      userLevelId: Number(data.level),
+      memberIdentity: data.nrp,
+      address: data.address,
+      email: data.email,
+      phoneNumber: data.phoneNumber,
+      password: data.password,
+      passwordConf: data.confirmPassword,
+      isDefault: false,
+      isAdmin: true,
+    };
+
+    if (data.role == "OPT-ID") {
+      // req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
+      if (data.role == "OPT-ID") {
+        let snsValue = data?.sns ? data.sns.join(",") : "";
+
+        // ✅ Jika hanya 1 value → tambahkan koma agar backend tidak error
+        if (data?.sns && data.sns.length === 1) {
+          snsValue = snsValue + ",";
+        }
+
+        req.handledSocialMedia = snsValue;
+      }
+    }
+
+    if (data.role == "KUR-ID") {
+      req.userEducationId = Number(data.education);
+      req.userSchoolsId = Number(data.school);
+      req.userCompetencyId = Number(data.competency);
+    }
+
+    loading();
+    const response = await saveUserInternal(req);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    close();
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Oke",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/management-user");
+      }
+    });
+    return false;
+  }
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    MySwal.fire({
+      title: "Simpan Data?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  }
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6 bg-white dark:bg-black p-10 w-full"
+        >
+          <p className="text-xl">Data Pengelola Media Hub</p>
+          <FormField
+            control={form.control}
+            name="level"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Pilih Level</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[400px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? roleList.find((role) => role.value === field.value)
+                              ?.label
+                          : "Pilih level"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[400px] p-0">
+                    <Command>
+                      <CommandInput />
+                      <CommandList>
+                        <CommandEmpty>No role found.</CommandEmpty>
+                        <CommandGroup>
+                          {roleList.map((role) => (
+                            <CommandItem
+                              value={role.label}
+                              key={role.value}
+                              onSelect={() => {
+                                form.setValue("level", role.value);
+                              }}
+                            >
+                              {role.label}
+                              <Check
+                                className={cn(
+                                  "ml-auto",
+                                  role.value === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="fullname"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan nama lengkap"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan username"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="role"
+            render={({ field }) => (
+              <FormItem className="space-y-3">
+                <FormLabel>Role</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                    className="flex flex-wrap gap-3 w-1/2"
+                  >
+                    {roles.map((role) => (
+                      <FormItem
+                        key={role.id}
+                        className="flex items-center space-x-3 space-y-0"
+                      >
+                        <FormControl>
+                          <RadioGroupItem value={role.id} />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          {role.name}
+                        </FormLabel>
+                      </FormItem>
+                    ))}
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {selectedRole === "OPT-ID" && (
+            <FormField
+              control={form.control}
+              name="sns"
+              render={() => (
+                <FormItem>
+                  <div className="mb-4">
+                    <FormLabel>Social Media Yang Ditangani</FormLabel>
+                  </div>
+                  <div className="grid grid-cols-5 gap-2 w-1/2">
+                    {sns.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="sns"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.typeId}
+                              className="flex flex-row items-start space-x-3 space-y-0"
+                            >
+                              <FormControl>
+                                <Checkbox
+                                  checked={field.value?.includes(
+                                    String(item.typeId)
+                                  )}
+                                  onCheckedChange={(checked) => {
+                                    return checked
+                                      ? field.onChange([
+                                          ...(field.value || []),
+                                          String(item.typeId),
+                                        ])
+                                      : field.onChange(
+                                          (field.value || []).filter(
+                                            (value) =>
+                                              value !== String(item.typeId)
+                                          )
+                                        );
+                                  }}
+                                />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                {item.name}
+                              </FormLabel>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {selectedRole === "KUR-ID" && (
+            <>
+              <FormField
+                control={form.control}
+                name="education"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Pendidikan Terakhir</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userEducations?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="school"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Universitas / Perguruan Tinggi</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userSchools?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="competency"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Kompetensi</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userCompetencies?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+          <FormField
+            control={form.control}
+            name="nrp"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan NRP"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Alamat</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Masukkan alamat"
+                    className="resize-none w-1/2"
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="Masukkan email"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. Handphone</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor handphone"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <div className="relative w-1/2">
+                    <Input
+                      type={showPassword ? "text" : "password"}
+                      placeholder="Masukkan kata sandi"
+                      {...field}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500"
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="confirmPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Konfirmasi Kata Sandi</FormLabel>
+                <FormControl>
+                  <div className="relative w-1/2">
+                    <Input
+                      type={showConfirmPassword ? "text" : "password"}
+                      placeholder="Masukkan kata sandi"
+                      {...field}
+                    />
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setShowConfirmPassword(!showConfirmPassword)
+                      }
+                      className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500"
+                    >
+                      {showConfirmPassword ? (
+                        <EyeOff size={18} />
+                      ) : (
+                        <Eye size={18} />
+                      )}
+                    </button>
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <PasswordChecklist
+            rules={["minLength", "specialChar", "number", "capital", "match"]}
+            minLength={8}
+            value={passwordVal || ""}
+            valueAgain={confPasswordVal || ""}
+            onChange={(isValid) => {
+              form.setValue("isValidPassword", isValid);
+            }}
+            className="text-sm"
+            messages={{
+              minLength: "Password harus lebih dari 8 karakter",
+              specialChar: "Password harus memiliki spesial karakter",
+              number: "Password harus memiliki angka",
+              capital: "Password harus memiliki huruf kapital",
+              match: "Password sama",
+            }}
+          />
+          <Link href="/admin/management-user">
+            <Button type="button" color="primary" variant="outline">
+              Back
+            </Button>
+          </Link>
+          <Button type="submit" color="primary" className="mx-3">
+            Submit
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/management-user/internal/detail/[id]/page.tsx

@@ -0,0 +1,741 @@
+"use client";
+
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn, getCookiesDecrypt } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  getUserById,
+  saveUserInternal,
+} from "@/service/management-user/management-user";
+import { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Link, useRouter } from "@/i18n/routing";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import dynamic from "next/dynamic";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { useParams } from "next/navigation";
+
+const sns = [
+  {
+    key: 1,
+    id: "comment",
+    typeId: 1,
+    name: "Komentar Konten",
+  },
+  {
+    key: 2,
+    id: "fb",
+    typeId: 2,
+    name: "Facebook",
+  },
+  {
+    key: 3,
+    id: "ig",
+    typeId: 3,
+    name: "Instagram",
+  },
+  {
+    key: 4,
+    id: "twt",
+    typeId: 4,
+    name: "Twitter",
+  },
+  {
+    key: 5,
+    id: "yt",
+    typeId: 5,
+    name: "Youtube",
+  },
+  {
+    key: 6,
+    id: "emergency",
+    typeId: 6,
+    name: "Emergency Issue",
+  },
+  {
+    key: 7,
+    id: "email",
+    typeId: 7,
+    name: "Email",
+  },
+  {
+    key: 8,
+    id: "inbox",
+    typeId: 8,
+    name: "Pesan Masuk",
+  },
+  {
+    key: 9,
+    id: "whatsapp",
+    typeId: 9,
+    name: "Whatssapp",
+  },
+  {
+    key: 10,
+    id: "tiktok",
+    typeId: 10,
+    name: "Tiktok",
+  },
+];
+
+interface RoleData {
+  id: number;
+  label: string;
+  name: string;
+  value: string;
+  levelNumber: number;
+}
+
+const FormSchema = z.object({
+  level: z.string({
+    required_error: "Required",
+  }),
+  fullname: z.string({
+    required_error: "Required",
+  }),
+  username: z.string({
+    required_error: "Required",
+  }),
+  role: z.string({
+    required_error: "Required",
+  }),
+  nrp: z.string({
+    required_error: "Required",
+  }),
+  address: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  password: z.string({
+    required_error: "Required",
+  }),
+  confirmPassword: z.string({
+    required_error: "Required",
+  }),
+  isValidPassword: z.boolean().refine((val) => val === true, {
+    message: "Check Password",
+  }),
+  sns: z.array(z.string()).optional(),
+  education: z.string().optional(),
+  school: z.string().optional(),
+  competency: z.string().optional(),
+});
+
+export default function DetailUserForm() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id;
+  const MySwal = withReactContent(Swal);
+  const levelName = getCookiesDecrypt("ulnae");
+  const [roleList, setRoleList] = useState<RoleData[]>([]);
+
+  const [userEducations, setUserEducations] = useState<any>();
+  const [userSchools, setUserSchools] = useState<any>();
+  const [userCompetencies, setUserCompetencies] = useState<any>();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+      sns: [],
+      education: "1",
+      school: "4",
+      competency: "2",
+    },
+  });
+
+  const selectedRole = form.watch("role");
+
+  useEffect(() => {
+    getDataAdditional();
+    initData();
+  }, []);
+
+  const initData = async () => {
+    loading();
+    const response = await getUserById(String(id));
+    const res = response?.data?.data;
+    close();
+    console.log("res", res);
+    if (Number(res.roleId) > 4) {
+      form.setValue("fullname", res?.fullname);
+      form.setValue("username", res?.username);
+      form.setValue("phoneNumber", res?.phoneNumber);
+      form.setValue("nrp", res?.memberIdentity);
+      form.setValue("address", res?.address);
+      form.setValue("email", res?.email);
+      form.setValue("role", res?.role?.code);
+      form.setValue("level", String(res?.userLevelId));
+    } else {
+      initFetch();
+      console.log("sadad", res?.role?.code);
+      form.setValue("fullname", res?.fullname);
+      form.setValue("username", res?.username);
+      form.setValue("phoneNumber", res?.phoneNumber);
+      form.setValue("nrp", res?.memberIdentity);
+      form.setValue("address", res?.address);
+      form.setValue("email", res?.email);
+      form.setValue("role", res?.role?.code);
+      form.setValue("level", String(res?.userLevelId));
+    }
+  };
+  const initFetch = async () => {
+    const response = await AdministrationLevelList();
+    const res = response?.data?.data;
+    var levelsArr: RoleData[] = [];
+    res.forEach((levels: RoleData) => {
+      levelsArr.push({
+        id: levels.id,
+        label: levels.name,
+        name: levels.name,
+        value: String(levels.id),
+        levelNumber: levels.levelNumber,
+      });
+    });
+    setRoleList(levelsArr);
+  };
+
+  async function getDataAdditional() {
+    const resEducations = await getListEducation();
+    setUserEducations(resEducations?.data?.data);
+    const resSchools = await getListSchools();
+    setUserSchools(resSchools?.data?.data);
+    const resCompetencies = await getListCompetencies();
+    setUserCompetencies(resCompetencies?.data?.data);
+  }
+
+  const roles =
+    levelName == "MABES POLRI"
+      ? [
+          {
+            id: "ADM-ID",
+            name: "Admin",
+          },
+          {
+            id: "APP-ID",
+            name: "Approver",
+          },
+          {
+            id: "CON-ID",
+            name: "Kontributor",
+          },
+          {
+            id: "SPV-ID",
+            name: "Supervisor Feedback Center",
+          },
+          {
+            id: "OPT-ID",
+            name: "Operator Feedback Center",
+          },
+          {
+            id: "KKUR-ID",
+            name: "Koor Kurator",
+          },
+          {
+            id: "KUR-ID",
+            name: "Kurator",
+          },
+        ]
+      : [
+          {
+            id: "APP-ID",
+            name: "Approver",
+          },
+          {
+            id: "CON-ID",
+            name: "Kontributor",
+          },
+        ];
+
+  async function save(data: z.infer<typeof FormSchema>) {
+    let req: any = {
+      id: id,
+      firstName: data.fullname,
+      username: data.username,
+      roleId: data.role,
+      userLevelId: Number(data.level),
+      memberIdentity: data.nrp,
+      address: data.address,
+      email: data.email,
+      password: data.password,
+      passwordConf: data.confirmPassword,
+      isDefault: false,
+    };
+
+    if (data.role == "OPT-ID") {
+      req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
+    }
+
+    if (data.role == "KUR-ID") {
+      req.userEducationId = Number(data.education);
+      req.userSchoolsId = Number(data.school);
+      req.userCompetencyId = Number(data.competency);
+    }
+
+    loading();
+    const response = await saveUserInternal(req);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    close();
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      showCancelButton: true,
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/management-user");
+      }
+    });
+    return false;
+  }
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    MySwal.fire({
+      title: "Simpan Data?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  }
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6 bg-white p-10 w-full"
+        >
+          <p className="text-xl">Data Pengelola Media Hub</p>
+          <FormField
+            control={form.control}
+            name="level"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Pilih Level</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild disabled>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[400px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? roleList.find((role) => role.value === field.value)
+                              ?.label
+                          : "Pilih level"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[400px] p-0">
+                    <Command>
+                      <CommandInput />
+                      <CommandList>
+                        <CommandEmpty>No role found.</CommandEmpty>
+                        <CommandGroup>
+                          {roleList.map((role) => (
+                            <CommandItem
+                              value={role.label}
+                              key={role.value}
+                              onSelect={() => {
+                                form.setValue("level", role.value);
+                              }}
+                            >
+                              {role.label}
+                              <Check
+                                className={cn(
+                                  "ml-auto",
+                                  role.value === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="fullname"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan nama lengkap"
+                    {...field}
+                    readOnly
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan username"
+                    {...field}
+                    readOnly
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="role"
+            render={({ field }) => (
+              <FormItem className="space-y-3">
+                <FormLabel>Role</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="flex flex-wrap gap-3 w-1/2"
+                    disabled
+                  >
+                    {roles.map((role) => (
+                      <FormItem
+                        key={role.id}
+                        className="flex items-center space-x-3 space-y-0"
+                      >
+                        <FormControl>
+                          <RadioGroupItem value={role.id} />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          {role.name}
+                        </FormLabel>
+                      </FormItem>
+                    ))}
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {selectedRole === "OPT-ID" && (
+            <FormField
+              control={form.control}
+              name="sns"
+              render={() => (
+                <FormItem>
+                  <div className="mb-4">
+                    <FormLabel>Social Media Yang Ditangani</FormLabel>
+                  </div>
+                  <div className="grid grid-cols-5 gap-2 w-1/2">
+                    {sns.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="sns"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.typeId}
+                              className="flex flex-row items-start space-x-3 space-y-0"
+                            >
+                              <FormControl>
+                                <Checkbox
+                                  disabled
+                                  checked={field.value?.includes(
+                                    String(item.typeId)
+                                  )}
+                                  onCheckedChange={(checked) => {
+                                    return checked
+                                      ? field.onChange([
+                                          ...(field.value || []),
+                                          String(item.typeId),
+                                        ])
+                                      : field.onChange(
+                                          (field.value || []).filter(
+                                            (value) =>
+                                              value !== String(item.typeId)
+                                          )
+                                        );
+                                  }}
+                                />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                {item.name}
+                              </FormLabel>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {selectedRole === "KUR-ID" && (
+            <>
+              <FormField
+                control={form.control}
+                name="education"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Pendidikan Terakhir</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      disabled
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userEducations?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="school"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Universitas / Perguruan Tinggi</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      disabled
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userSchools?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="competency"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Kompetensi</FormLabel>
+                    <Select
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      disabled
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userCompetencies?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+          <FormField
+            control={form.control}
+            name="nrp"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan NRP"
+                    readOnly
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Alamat</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Masukkan alamat"
+                    readOnly
+                    className="resize-none w-1/2"
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    readOnly
+                    placeholder="Masukkan email"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. Handphone</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor handphone"
+                    {...field}
+                    readOnly
+                    className="w-1/2 mb-2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Link href="/admin/management-user">
+            <Button type="button" color="primary" variant="outline">
+              Back
+            </Button>
+          </Link>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/management-user/internal/edit/[id]/page.tsx

@@ -0,0 +1,784 @@
+"use client";
+
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn, getCookiesDecrypt } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  AdministrationLevelList,
+  getListCompetencies,
+  getListEducation,
+  getListSchools,
+  getUserById,
+  saveUserInternal,
+} from "@/service/management-user/management-user";
+import { useEffect, useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Link, useRouter } from "@/i18n/routing";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import dynamic from "next/dynamic";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { close, error, loading } from "@/config/swal";
+import { useParams } from "next/navigation";
+
+const PasswordChecklist = dynamic(() => import("react-password-checklist"), {
+  ssr: false,
+});
+
+const sns = [
+  {
+    key: 1,
+    id: "comment",
+    typeId: 1,
+    name: "Komentar Konten",
+  },
+  {
+    key: 2,
+    id: "fb",
+    typeId: 2,
+    name: "Facebook",
+  },
+  {
+    key: 3,
+    id: "ig",
+    typeId: 3,
+    name: "Instagram",
+  },
+  {
+    key: 4,
+    id: "twt",
+    typeId: 4,
+    name: "Twitter",
+  },
+  {
+    key: 5,
+    id: "yt",
+    typeId: 5,
+    name: "Youtube",
+  },
+  {
+    key: 6,
+    id: "emergency",
+    typeId: 6,
+    name: "Emergency Issue",
+  },
+  {
+    key: 7,
+    id: "email",
+    typeId: 7,
+    name: "Email",
+  },
+  {
+    key: 8,
+    id: "inbox",
+    typeId: 8,
+    name: "Pesan Masuk",
+  },
+  {
+    key: 9,
+    id: "whatsapp",
+    typeId: 9,
+    name: "Whatssapp",
+  },
+  {
+    key: 10,
+    id: "tiktok",
+    typeId: 10,
+    name: "Tiktok",
+  },
+];
+
+interface RoleData {
+  id: number;
+  label: string;
+  name: string;
+  value: string;
+  levelNumber: number;
+}
+
+const FormSchema = z.object({
+  level: z.string({
+    required_error: "Required",
+  }),
+  fullname: z.string({
+    required_error: "Required",
+  }),
+  username: z.string({
+    required_error: "Required",
+  }),
+  role: z.string({
+    required_error: "Required",
+  }),
+  nrp: z.string({
+    required_error: "Required",
+  }),
+  address: z.string({
+    required_error: "Required",
+  }),
+  email: z.string({
+    required_error: "Required",
+  }),
+  phoneNumber: z.string({
+    required_error: "Required",
+  }),
+  password: z.string({
+    required_error: "Required",
+  }),
+  confirmPassword: z.string({
+    required_error: "Required",
+  }),
+  isValidPassword: z.boolean().refine((val) => val === true, {
+    message: "Check Password",
+  }),
+  sns: z.array(z.string()).optional(),
+  education: z.string().optional(),
+  school: z.string().optional(),
+  competency: z.string().optional(),
+});
+
+export default function EditUserForm() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id;
+  const MySwal = withReactContent(Swal);
+  const levelName = getCookiesDecrypt("ulnae");
+  const [roleList, setRoleList] = useState<RoleData[]>([]);
+
+  const [userEducations, setUserEducations] = useState<any>();
+  const [userSchools, setUserSchools] = useState<any>();
+  const [userCompetencies, setUserCompetencies] = useState<any>();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+      sns: [],
+      education: "1",
+      school: "4",
+      competency: "2",
+    },
+  });
+
+  const passwordVal = form.watch("password");
+  const confPasswordVal = form.watch("confirmPassword");
+  const selectedRole = form.watch("role");
+
+  useEffect(() => {
+    getDataAdditional();
+    initData();
+  }, []);
+
+  const initData = async () => {
+    loading();
+    const response = await getUserById(String(id));
+    const res = response?.data?.data;
+    close();
+    console.log("res", res);
+    if (Number(res.roleId) > 4) {
+      form.setValue("fullname", res?.fullname);
+      form.setValue("username", res?.username);
+      form.setValue("phoneNumber", res?.phoneNumber);
+      form.setValue("nrp", res?.memberIdentity);
+      form.setValue("address", res?.address);
+      form.setValue("email", res?.email);
+      form.setValue("role", res?.role?.code);
+      form.setValue("level", String(res?.userLevelId));
+    } else {
+      initFetch();
+      form.setValue("fullname", res?.fullname);
+      form.setValue("username", res?.username);
+      form.setValue("phoneNumber", res?.phoneNumber);
+      form.setValue("nrp", res?.memberIdentity);
+      form.setValue("address", res?.address);
+      form.setValue("email", res?.email);
+      form.setValue("role", res?.role?.code);
+      form.setValue("level", String(res?.userLevelId));
+    }
+  };
+  const initFetch = async () => {
+    const response = await AdministrationLevelList();
+    const res = response?.data?.data;
+    var levelsArr: RoleData[] = [];
+    res.forEach((levels: RoleData) => {
+      levelsArr.push({
+        id: levels.id,
+        label: levels.name,
+        name: levels.name,
+        value: String(levels.id),
+        levelNumber: levels.levelNumber,
+      });
+    });
+    setRoleList(levelsArr);
+  };
+
+  async function getDataAdditional() {
+    const resEducations = await getListEducation();
+    setUserEducations(resEducations?.data?.data);
+    const resSchools = await getListSchools();
+    setUserSchools(resSchools?.data?.data);
+    const resCompetencies = await getListCompetencies();
+    setUserCompetencies(resCompetencies?.data?.data);
+  }
+
+  const roles =
+    levelName == "MABES POLRI"
+      ? [
+          {
+            id: "ADM-ID",
+            name: "Admin",
+          },
+          {
+            id: "APP-ID",
+            name: "Approver",
+          },
+          {
+            id: "CON-ID",
+            name: "Kontributor",
+          },
+          {
+            id: "SPV-ID",
+            name: "Supervisor Feedback Center",
+          },
+          {
+            id: "OPT-ID",
+            name: "Operator Feedback Center",
+          },
+          {
+            id: "KKUR-ID",
+            name: "Koor Kurator",
+          },
+          {
+            id: "KUR-ID",
+            name: "Kurator",
+          },
+        ]
+      : [
+          {
+            id: "APP-ID",
+            name: "Approver",
+          },
+          {
+            id: "CON-ID",
+            name: "Kontributor",
+          },
+        ];
+
+  async function save(data: z.infer<typeof FormSchema>) {
+    let req: any = {
+      id: Number(id),
+      firstName: data.fullname,
+      username: data.username,
+      roleId: data.role,
+      userLevelId: Number(data.level),
+      memberIdentity: data.nrp,
+      address: data.address,
+      email: data.email,
+      password: data.password,
+      passwordConf: data.confirmPassword,
+      isDefault: false,
+      isAdmin: true,
+    };
+
+    if (data.role == "OPT-ID") {
+      req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
+    }
+
+    if (data.role == "KUR-ID") {
+      req.userEducationId = Number(data.education);
+      req.userSchoolsId = Number(data.school);
+      req.userCompetencyId = Number(data.competency);
+    }
+
+    loading();
+    const response = await saveUserInternal(req);
+
+    if (response?.error) {
+      error(response.message);
+      return false;
+    }
+
+    close();
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Oke",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/admin/management-user");
+      }
+    });
+    return false;
+  }
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    MySwal.fire({
+      title: "Simpan Data?",
+      text: "",
+      icon: "warning",
+      showCancelButton: true,
+      cancelButtonColor: "#d33",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "Simpan",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        save(data);
+      }
+    });
+  }
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-6 bg-white p-10 w-full"
+        >
+          <p className="text-xl">Data Pengelola Media Hub</p>
+          <FormField
+            control={form.control}
+            name="level"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Pilih Level</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant="outline"
+                        role="combobox"
+                        className={cn(
+                          "w-[400px] justify-between",
+                          !field.value && "text-muted-foreground"
+                        )}
+                      >
+                        {field.value
+                          ? roleList.find((role) => role.value === field.value)
+                              ?.label
+                          : "Pilih level"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[400px] p-0">
+                    <Command>
+                      <CommandInput />
+                      <CommandList>
+                        <CommandEmpty>No role found.</CommandEmpty>
+                        <CommandGroup>
+                          {roleList.map((role) => (
+                            <CommandItem
+                              value={role.label}
+                              key={role.value}
+                              onSelect={() => {
+                                form.setValue("level", role.value);
+                              }}
+                            >
+                              {role.label}
+                              <Check
+                                className={cn(
+                                  "ml-auto",
+                                  role.value === field.value
+                                    ? "opacity-100"
+                                    : "opacity-0"
+                                )}
+                              />
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="fullname"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nama Lengkap</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan nama lengkap"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input
+                    placeholder="Masukkan username"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="role"
+            render={({ field }) => (
+              <FormItem className="space-y-3">
+                <FormLabel>Role</FormLabel>
+                <FormControl>
+                  <RadioGroup
+                    onValueChange={field.onChange}
+                    value={field.value}
+                    className="flex flex-wrap gap-3 w-1/2"
+                  >
+                    {roles.map((role) => (
+                      <FormItem
+                        key={role.id}
+                        className="flex items-center space-x-3 space-y-0"
+                      >
+                        <FormControl>
+                          <RadioGroupItem value={role.id} />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          {role.name}
+                        </FormLabel>
+                      </FormItem>
+                    ))}
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          {selectedRole === "OPT-ID" && (
+            <FormField
+              control={form.control}
+              name="sns"
+              render={() => (
+                <FormItem>
+                  <div className="mb-4">
+                    <FormLabel>Social Media Yang Ditangani</FormLabel>
+                  </div>
+                  <div className="grid grid-cols-5 gap-2 w-1/2">
+                    {sns.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="sns"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.typeId}
+                              className="flex flex-row items-start space-x-3 space-y-0"
+                            >
+                              <FormControl>
+                                <Checkbox
+                                  checked={field.value?.includes(
+                                    String(item.typeId)
+                                  )}
+                                  onCheckedChange={(checked) => {
+                                    return checked
+                                      ? field.onChange([
+                                          ...(field.value || []),
+                                          String(item.typeId),
+                                        ])
+                                      : field.onChange(
+                                          (field.value || []).filter(
+                                            (value) =>
+                                              value !== String(item.typeId)
+                                          )
+                                        );
+                                  }}
+                                />
+                              </FormControl>
+                              <FormLabel className="font-normal">
+                                {item.name}
+                              </FormLabel>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          )}
+
+          {selectedRole === "KUR-ID" && (
+            <>
+              <FormField
+                control={form.control}
+                name="education"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Pendidikan Terakhir</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userEducations?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="school"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Universitas / Perguruan Tinggi</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userSchools?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="competency"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Kompetensi</FormLabel>
+                    <Select onValueChange={field.onChange} value={field.value}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {userCompetencies?.map((edu: any) => (
+                          <SelectItem key={edu.id} value={String(edu.id)}>
+                            {edu.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </>
+          )}
+          <FormField
+            control={form.control}
+            name="nrp"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Nomor Regitrasi Polri {`(NRP)`}</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan NRP"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="address"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Alamat</FormLabel>
+                <FormControl>
+                  <Textarea
+                    placeholder="Masukkan alamat"
+                    className="resize-none w-1/2"
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    type="email"
+                    placeholder="Masukkan email"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="phoneNumber"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>No. Handphone</FormLabel>
+                <FormControl>
+                  <Input
+                    type="number"
+                    placeholder="Masukkan nomor handphone"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="password"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Masukkan kata sandi"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="confirmPassword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Konfirmasi Kata Sandi</FormLabel>
+                <FormControl>
+                  <Input
+                    type="password"
+                    placeholder="Masukkan kata sandi"
+                    {...field}
+                    className="w-1/2"
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <PasswordChecklist
+            rules={["minLength", "specialChar", "number", "capital", "match"]}
+            minLength={8}
+            value={passwordVal || ""}
+            valueAgain={confPasswordVal || ""}
+            onChange={(isValid) => {
+              form.setValue("isValidPassword", isValid);
+            }}
+            className="text-sm"
+            messages={{
+              minLength: "Password harus lebih dari 8 karakter",
+              specialChar: "Password harus memiliki spesial karakter",
+              number: "Password harus memiliki angka",
+              capital: "Password harus memiliki huruf kapital",
+              match: "Password sama",
+            }}
+          />
+          <Link href="/admin/management-user">
+            <Button type="button" color="primary" variant="outline">
+              Back
+            </Button>
+          </Link>
+          <Button type="submit" color="primary" className="mx-3">
+            Submit
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/management-user/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import UserExternalTable from "@/components/table/management-user/management-user-external-table";
+import UserInternalTable from "@/components/table/management-user/management-user-internal-table";
+import { Button } from "@/components/ui/button";
+import ManagementUserVisualization from "@/components/visualization/management-user-viz";
+import { Link, useRouter } from "@/i18n/routing";
+import { PlusIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { getCookiesDecrypt } from "@/lib/utils";
+
+export default function ManagementUser() {
+  const [isInternal, setIsInternal] = useState(true);
+  const [levelNumber, setLevelNumber] = useState<number | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const encryptedLevel = Cookies.get("ulne");
+    if (encryptedLevel) {
+      const decryptedLevel = getCookiesDecrypt("ulne");
+      setLevelNumber(Number(decryptedLevel));
+    }
+  }, []);
+
+  useEffect(() => {
+    router.push("?page=1");
+  }, [isInternal]);
+
+  const showExternalButton = levelNumber !== 2 && levelNumber !== 3;
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <section id="viz">
+        <ManagementUserVisualization />
+      </section>
+
+      <section className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3 mt-5">
+        <div className="flex justify-between py-3">
+          <p className="text-lg">
+            Data User {isInternal ? "Internal" : "Eksternal"}
+          </p>
+          {isInternal && (
+            <Link href="/admin/management-user/internal/create">
+              <Button color="primary" size="md">
+                <PlusIcon />
+                Add User
+              </Button>
+            </Link>
+          )}
+        </div>
+
+        <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
+          <Button
+            rounded="md"
+            onClick={() => setIsInternal(true)}
+            className={`hover:text-white ${
+              !isInternal ? "bg-white text-black" : "bg-black text-white"
+            }`}
+          >
+            User Internal
+          </Button>
+
+          {showExternalButton && (
+            <Button
+              rounded="md"
+              onClick={() => setIsInternal(false)}
+              className={`hover:text-white ${
+                !isInternal ? "bg-black text-white" : "bg-white text-black"
+              }`}
+            >
+              User Eksternal
+            </Button>
+          )}
+        </div>
+
+        {isInternal ? <UserInternalTable /> : <UserExternalTable />}
+      </section>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/component/column.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "date",
+    header: "Tanggal",
+    cell: ({ row }) => (
+      <span>
+        {row.original.startDate.split(" ")[0]} -{" "}
+        {row.original.endDate.split(" ")[0]}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: "Judul Berita",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "pageUrl",
+    header: "Link Berita",
+    cell: ({ row }) => (
+      <a
+        className="cursor-pointer normal-case"
+        href={row.original.mediaUpload.pageUrl}
+        target="_blank"
+      >
+        {row.original.mediaUpload.pageUrl}
+      </a>
+    ),
+  },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Aksi",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <span className="sr-only">Open menu</span>
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/admin/media-tracking/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/media-tracking/component/modal.tsx

@@ -1,37 +1,27 @@
 "use client";
-
-import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 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,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { close, error, loading, successCallback } from "@/config/swal";
+import { getMediaTracking, listDataAllNonPagination, listDataTracking, mediaTrackingSave } from "@/service/media-tracking/media-tracking";
+import { useEffect, useState } from "react";
 
 export default function TrackingMediaModal(props: { triggerFetch: () => void }) {
   const [content, setContent] = useState<any>([]);
   const [inputValue, setInputValue] = useState("");
   const [selectedId, setSelectedId] = useState(0);
+  const [search, setSearch] = useState<string>("");
+  const [page, setPage] = useState(1);
+  const [showData, setShowData] = useState("10");
+
   useEffect(() => {
     initFecth();
-  }, []);
+  }, [page, showData, search]);
 
   const initFecth = async () => {
-    const response = await listData5Data();
+    const response = await getMediaTracking(page - 1, search, showData);
     setContent(response?.data?.data.content);
   };
 
@@ -97,22 +87,13 @@ export default function TrackingMediaModal(props: { triggerFetch: () => void })
         </DialogHeader>
         <div className="flex flex-col gap-2">
           {" "}
-          <Input
-            type="text"
-            placeholder="Content"
-            value={inputValue}
-            onChange={handleInputChange}
-          />{" "}
+          <Input type="text" placeholder="Content" value={inputValue} onChange={handleInputChange} />{" "}
           <div className="w-full border rounded-sm text-xs p-2 flex flex-col max-h-[300px] overflow-auto">
             {content.length > 0 &&
               content.map((item: any) => (
                 <a
                   key={item.id}
-                  className={`cursor-pointer  px-2 py-4 ${
-                    selectedId === item.id
-                      ? "font-bold bg-gray-200 rounded-sm"
-                      : "hover:bg-gray-100 hover:font-semibold"
-                  }`}
+                  className={`cursor-pointer  px-2 py-4 ${selectedId === item.id ? "font-bold bg-gray-200 rounded-sm" : "hover:bg-gray-100 hover:font-semibold"}`}
                   onClick={() => {
                     setSelectedId(item.id);
                     setInputValue(item.title);

app/[locale]/(protected)/admin/media-tracking/component/table.tsx

@@ -0,0 +1,371 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { listEnableCategory } from "@/service/content/content";
+import { close, loading } from "@/config/swal";
+import { Label } from "@/components/ui/label";
+import TrackingMediaModal from "./modal";
+import { getMediaTracking } from "@/service/media-tracking/media-tracking";
+
+const NewsTable = () => {
+  const router = useRouter();
+  const asPath = usePathname();
+  const searchParams = useSearchParams();
+  const [showData, setShowData] = React.useState("10");
+  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 [showTable, setShowTable] = React.useState(false);
+  const [onSearch, setOnSearch] = React.useState("");
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<any>([]);
+  const [searchTitle, setSearchTitle] = React.useState<string>("");
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [imageData, setImageData] = React.useState<any>();
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [contentAll, setContentAll] = React.useState([]);
+  const [formatFilter, setFormatFilter] = React.useState<any>([]);
+  const [totalContent, setTotalContent] = React.useState();
+  const [search, setSearch] = React.useState<string>("");
+  const group = searchParams?.get("group");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  React.useEffect(() => {
+    getDataTable();
+  }, [page, showData, search]);
+
+  const getDataTable = async () => {
+    const res = await getMediaTracking(page - 1, search, showData);
+
+    const data = res?.data?.data;
+    const newData = data?.content;
+
+    newData.forEach((item: any, index: number) => {
+      item.no = (page - 1) * Number(showData) + index + 1;
+    });
+
+    setDataTable(newData);
+    setTotalData(data?.totalElements);
+    setTotalPage(data?.totalPages);
+    setTotalContent(data.totalElements);
+  };
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  React.useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+    }
+  }, [categorie]);
+
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+  };
+
+  // async function getData() {
+  //   if (asPath?.includes("/polda/") == true) {
+  //     if (asPath?.split("/")[2] !== "[polda_name]") {
+  //       const filter =
+  //         categoryFilter?.length > 0
+  //           ? categoryFilter?.sort().join(",")
+  //           : categorie || "";
+
+  //       const name = title == undefined ? "" : title;
+  //       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+  //       const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+  //       loading();
+  //       const response = await listDataAll("", name, filter, "");
+  //       close();
+  //       // setGetTotalPage(response?.data?.data?.totalPages);
+  //       // setContentImage(response?.data?.data?.content);
+  //       // setTotalContent(response?.data?.data?.totalElements);
+  //       const data = response?.data?.data;
+  //       const contentData = data?.content;
+  //       setImageData(contentData);
+  //       setTotalData(data?.totalElements);
+  //       setContentAll(response?.data?.data?.content);
+  //       setTotalPage(data?.totalPages);
+  //       setTotalContent(response?.data?.data?.totalElements);
+  //     }
+  //   }
+  // }
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+    table.getColumn("judul")?.setFilterValue(e.target.value);
+  };
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
+    } else {
+      router.push(`?title=${searchTitle}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border ">
+      <div className="flex justify-between  items-center">
+        <p className="text-xl font-medium text-default-900">
+          Tracking Berita hari ini!
+        </p>
+      </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">
+        {/* <TrackingMediaModal triggerFetch={() => getDataTable()} /> */}
+        <div className=" flex flex-row items-center gap-3">
+          <div className="flex items-center py-2">
+            <div className="mx-3">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button size="md" variant="outline">
+                    1 - {showData} Data
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56 text-sm">
+                  <DropdownMenuRadioGroup
+                    value={showData}
+                    onValueChange={setShowData}
+                  >
+                    <DropdownMenuRadioItem value="10">
+                      1 - 10 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">
+                      1 - 50 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">
+                      1 - 100 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">
+                      1 - 250 Data
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+
+          <div className="flex items-center py-4">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} className="h-[75px]">
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+      {/* <div className="flex justify-end mt-4">
+        <Button
+          color="primary"
+          size="md"
+          className="text-sm mr-3"
+          onClick={() => setShowTable(false)}
+        >
+          Tracking Berita Baru
+        </Button>
+      </div> */}
+      {/* </>
+      )} */}
+    </div>
+  );
+};
+
+export default NewsTable;

app/[locale]/(protected)/admin/media-tracking/detail/[id]/page.tsx

@@ -0,0 +1,12 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import NewsTable from "../../component/table";
+import NewsDetailTable from "../component/table";
+
+export default function DetailNews() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <NewsDetailTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/detail/component/column.tsx

@@ -0,0 +1,186 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { validateMediaLink } from "@/service/media-tracking/media-tracking";
+import toast from "react-hot-toast";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "source",
+    header: "Media Online",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("source")}</span>
+    ),
+  },
+  {
+    accessorKey: "title",
+    header: "Judul Berita",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("title")}</span>
+    ),
+  },
+  // {
+  //   accessorKey: "link",
+  //   header: "Link Berita",
+  //   cell: ({ row }) => (
+  //     <span className="normal-case">{row.getValue("link")}</span>
+  //   ),
+  // },
+  {
+    accessorKey: "link",
+    header: "Link Berita",
+    cell: ({ row }) => {
+      const link = row.getValue<string>("link");
+
+      if (!link) {
+        return <span className="text-muted-foreground">-</span>;
+      }
+
+      return (
+        <Link
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-blue-600 underline hover:text-blue-800 break-all"
+        >
+          {link}
+        </Link>
+      );
+    },
+  },
+  {
+    id: "validation",
+    header: "Validasi",
+    cell: ({ row, table }) => {
+      const original = row.original;
+
+      // const isValid = original.isValid;
+      const isRelevant = original.isRelevant;
+      const link = original.link;
+
+      const updateRow = (data: Partial<any>) => {
+        table.options.meta?.updateData(row.index, data);
+      };
+
+      const handleValid = async () => {
+        try {
+          await validateMediaLink(original.id, true);
+          updateRow({
+            isRelevant: true,
+          });
+          table.options.meta?.refetchData?.();
+        } catch (err: any) {
+          toast.error(err.message);
+        }
+      };
+
+      const handleInvalid = async () => {
+        try {
+          await validateMediaLink(original.id, false);
+
+          updateRow({
+            isRelevant: false,
+          });
+          table.options.meta?.refetchData?.();
+        } catch (err: any) {
+          toast.error(err.message);
+        }
+      };
+
+      if (!link) {
+        return <span className="text-muted-foreground">-</span>;
+      }
+
+      if (isRelevant === true) {
+        return (
+          <Button
+            size="sm"
+            className="bg-green-600 hover:bg-green-700"
+            disabled
+          >
+            Relevan
+          </Button>
+        );
+      }
+
+      return (
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={handleValid}
+            className="flex items-center"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M18.7 7.2c-.4-.4-1-.4-1.4 0l-7.5 7.5l-3.1-3.1c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.8 3.8c.2.2.4.3.7.3s.5-.1.7-.3l8.2-8.2c.4-.4.4-1 0-1.4"
+              />
+            </svg>
+            Relevan
+          </Button>
+          <Button size="sm" variant="outline" onClick={handleInvalid} className="flex text-center items-center justify-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="1.5"
+                d="M6.758 17.243L12.001 12m5.243-5.243L12 12m0 0L6.758 6.757M12.001 12l5.243 5.243"
+              />
+            </svg>
+            Tidak Relevan
+          </Button>
+        </div>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/media-tracking/detail/component/table.tsx

@@ -0,0 +1,272 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { listDataMedia } from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { link } from "fs";
+import { getMediaTrackingResult } from "@/service/media-tracking/media-tracking";
+
+const NewsDetailTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const param = useParams();
+  const id = param?.id;
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  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 [showTable, setShowTable] = React.useState(false);
+  const [link, setLink] = React.useState("");
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    meta: {
+      updateData: (rowIndex: number, value: Partial<any>) => {
+        setDataTable((old) =>
+          old.map((row, index) =>
+            index === rowIndex ? { ...row, ...value } : row
+          )
+        );
+      },
+      refetchData: () => {
+        fetchData();
+      },
+    },
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  // const handleKeyUp = () => {
+  //   clearTimeout(typingTimer);
+  //   typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  // };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    setPagination({
+      pageIndex: 0,
+      pageSize: Number(showData),
+    });
+  }, [page, showData, id]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await getMediaTrackingResult({ id: id, page: page - 1 });
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border">
+      <Table className="overflow-hidden mt-4">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} className="h-[75px]">
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default NewsDetailTable;

app/[locale]/(protected)/admin/media-tracking/media-online/component/column.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Nama Media Online",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "link",
+    header: "Link",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/media-tracking/media-online/component/table.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { listDataMedia } from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+
+const MediaOnlineTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  // const handleKeyUp = () => {
+  //   clearTimeout(typingTimer);
+  //   typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  // };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  // React.useEffect(() => {
+  //   fetchData();
+  //   setPagination({
+  //     pageIndex: 0,
+  //     pageSize: Number(showData),
+  //   });
+  // }, [page, showData]);
+
+  // async function fetchData() {
+  //   try {
+  //     loading();
+  //     const res = await listDataMedia(
+  //       page - 1,
+  //       showData,
+  //       search,
+  //       categoryFilter?.sort().join(","),
+  //       statusFilter?.sort().join(",")
+  //     );
+  //     const data = res?.data?.data;
+  //     const contentData = data?.content;
+  //     contentData.forEach((item: any, index: number) => {
+  //       item.no = (page - 1) * Number(showData) + index + 1;
+  //     });
+
+  //     console.log("contentData : ", data);
+
+  //     setDataTable(contentData);
+  //     setTotalData(data?.totalElements);
+  //     setTotalPage(data?.totalPages);
+  //     close();
+  //   } catch (error) {
+  //     console.error("Error fetching tasks:", error);
+  //   }
+  // }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">Media Online</p>
+      </div>
+
+      <div className="flex justify-between ">
+        <Link href="/admin/media-tracking/media-online/create">
+          <Button color="primary" size="md" className="text-sm mr-3">
+            Tambah Media Online
+          </Button>
+        </Link>
+        <Input
+          type="text"
+          placeholder="Search"
+          // onKeyUp={handleKeyUp}
+          onKeyDown={handleKeyDown}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-[300px]"
+        />
+        <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default MediaOnlineTable;

app/[locale]/(protected)/admin/media-tracking/media-online/create/page.tsx

@@ -0,0 +1,19 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTaskTa from "@/components/form/task-ta/task-ta-form";
+import FormAskExpert from "@/components/form/shared/ask-expert-form";
+import FormDoItYourself from "@/components/form/shared/do-it-yourself-form";
+import FormMediaOnline from "@/components/form/media-tracking/media-tracking-form";
+
+const MediaOnlineCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormMediaOnline />
+      </div>
+    </div>
+  );
+};
+
+export default MediaOnlineCreatePage;

app/[locale]/(protected)/admin/media-tracking/media-online/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import MediaOnlineTable from "./component/table";
+
+export default function AdminMediaOnline() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <MediaOnlineTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import NewsTable from "./component/table";
+
+export default function AdminNews() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <NewsTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx

@@ -0,0 +1,203 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+import { exportMediaTrackingToExcel } from "@/utils/export-media-tracking";
+import { loading, close } from "@/config/swal";
+import { error } from "@/lib/swal";
+import {
+  DownloadIcon,
+  Eye,
+  MoreVertical,
+  SquarePen,
+  Trash2,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "resultTotal",
+    header: () => <div className="text-center w-full">Total Artikel</div>,
+    cell: ({ row }) => {
+      const value = row.getValue("resultTotal") as number | string | null;
+
+      const finalValue =
+        value === null || value === undefined || value === ""
+          ? 0
+          : Number(value);
+
+      return <div className="text-center w-full">{finalValue}</div>;
+    },
+  },
+  {
+    accessorKey: "amplification",
+    header: () => <div className="text-center w-full">Jumlah Amplifikasi</div>,
+    cell: ({ row }) => {
+      const raw = row.getValue("amplification") as string | null;
+
+      let total = 0;
+      let invalidTotal = 0;
+
+      if (raw && typeof raw === "string") {
+        const parts = raw.split("/").map((v) => v.trim());
+        total = Number(parts[0]) || 0;
+        invalidTotal = Number(parts[1]) || 0;
+      }
+
+      return (
+        <div className="text-center w-full font-medium">
+          {total}
+          <span className="text-muted-foreground">/{invalidTotal}</span>
+        </div>
+      );
+    },
+  },
+
+  // {
+  //   accessorKey: "status",
+  //   header: "Status",
+  //   cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  // },
+  // {
+  //   accessorKey: "isProcessing",
+  //   header: () => <div className="text-center">Status</div>,
+  //   cell: ({ row }) => {
+  //     const raw = row.getValue("isProcessing");
+  //     var status = "Sedang Diproses"
+  //     if (Boolean(raw) == true) {
+  //       status = "Selesai Diproses";
+  //     }
+  //     return <div className="text-center">{status}</div>;
+  //   },
+  // },
+  {
+    accessorKey: "isProcessing",
+    header: () => <div className="text-center">Status</div>,
+    cell: ({ row }) => {
+      const raw = Boolean(row.getValue("isProcessing"));
+      const statusText = raw ? "Sedang Diproses" : "Sudah Selesai";
+      const colorClass = raw
+        ? "bg-yellow-100 text-yellow-700 border border-yellow-300"
+        : "bg-green-100 text-green-700 border border-green-300";
+
+      return (
+        <div className="text-center">
+          <span
+            className={`px-2 py-1 rounded text-xs font-medium inline-block ${colorClass}`}
+          >
+            {statusText}
+          </span>
+        </div>
+      );
+    },
+  },
+
+  {
+    accessorKey: "createdAt",
+    header: () => <div className="text-center">Tanggal Penarikan</div>,
+    cell: ({ row }) => {
+      const raw = row.getValue("createdAt");
+      if (!raw || typeof raw !== "string")
+        return <div className="text-center">-</div>;
+
+      const date = new Date(raw);
+      if (isNaN(date.getTime())) return <div className="text-center">-</div>;
+
+      const formatted = date.toLocaleDateString("id-ID", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+      });
+
+      return <div className="text-center">{formatted}</div>;
+    },
+  },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Action",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <span className="sr-only">Open menu</span>
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/admin/media-tracking/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b cursor-pointer text-default-700 group focus:bg-default focus:text-primary-foreground items-center rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View&nbsp;
+                {row.original.mediaUpload.fileType.secondaryName &&
+                  row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
+              </DropdownMenuItem>
+            </Link>
+            <DropdownMenuItem
+              className="p-2 border-b cursor-pointer text-default-700 group rounded-none focus:bg-default focus:text-primary-foreground "
+              onClick={async () => {
+                try {
+                  loading();
+                  await exportMediaTrackingToExcel({
+                    mediaTrackingId: row.original.id,
+                  });
+                  close();
+                } catch (e: any) {
+                  close();
+                  error(e.message || "Gagal export data");
+                }
+              }}
+            >
+              <DownloadIcon className="w-4 h-4 me-1.5" />
+              <p>Download</p>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/media-tracking/results/component/table.tsx

@@ -0,0 +1,382 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { listEnableCategory } from "@/service/content/content";
+import { close, loading } from "@/config/swal";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { link } from "fs";
+import { listDataAll } from "@/service/landing/landing";
+import SearchImageComponent from "@/components/form/media-tracking/search-image-card";
+import SearchVideoComponent from "@/components/form/media-tracking/search-video-card";
+import SearchDocumentComponent from "@/components/form/media-tracking/search-document-card";
+import SearchAudioComponent from "@/components/form/media-tracking/search-audio-card";
+import { getMediaTracking } from "@/service/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 ResultTable = () => {
+  const router = useRouter();
+  const asPath = usePathname();
+  const searchParams = useSearchParams();
+  const [showData, setShowData] = React.useState("10");
+  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 [showTable, setShowTable] = React.useState(false);
+  const [onSearch, setOnSearch] = React.useState("");
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<any>([]);
+  const [searchTitle, setSearchTitle] = React.useState<string>("");
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [imageData, setImageData] = React.useState<any>();
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [contentAll, setContentAll] = React.useState([]);
+  const [formatFilter, setFormatFilter] = React.useState<any>([]);
+  const [totalContent, setTotalContent] = React.useState();
+  const [search, setSearch] = React.useState<string>("");
+  const group = searchParams?.get("group");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  React.useEffect(() => {
+    getDataTable();
+  }, [page, showData, search]);
+
+  const getDataTable = async () => {
+    const res = await getMediaTracking(page - 1, search, showData);
+
+    const data = res?.data?.data;
+    const newData = data?.content;
+
+    newData.forEach((item: any, index: number) => {
+      item.no = (page - 1) * Number(showData) + index + 1;
+    });
+
+    setDataTable(newData);
+    setTotalData(data?.totalElements);
+    setTotalPage(data?.totalPages);
+    setTotalContent(data.totalElements);
+  };
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  React.useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+    }
+  }, [categorie]);
+
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+  };
+
+  // async function getData() {
+  //   if (asPath?.includes("/polda/") == true) {
+  //     if (asPath?.split("/")[2] !== "[polda_name]") {
+  //       const filter =
+  //         categoryFilter?.length > 0
+  //           ? categoryFilter?.sort().join(",")
+  //           : categorie || "";
+
+  //       const name = title == undefined ? "" : title;
+  //       const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+  //       const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+  //       loading();
+  //       const response = await listDataAll("", name, filter, "");
+  //       close();
+  //       // setGetTotalPage(response?.data?.data?.totalPages);
+  //       // setContentImage(response?.data?.data?.content);
+  //       // setTotalContent(response?.data?.data?.totalElements);
+  //       const data = response?.data?.data;
+  //       const contentData = data?.content;
+  //       setImageData(contentData);
+  //       setTotalData(data?.totalElements);
+  //       setContentAll(response?.data?.data?.content);
+  //       setTotalPage(data?.totalPages);
+  //       setTotalContent(response?.data?.data?.totalElements);
+  //     }
+  //   }
+  // }
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+    table.getColumn("judul")?.setFilterValue(e.target.value);
+  };
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
+    } else {
+      router.push(`?title=${searchTitle}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3 border ">
+      <div className="flex flex-col sm:flex-row lg:flex-row justify-end sm:items-center md:items-center lg:items-center">
+        <div className=" flex flex-row justify-end items-center gap-3">
+          <div className="flex items-center">
+            <div className="mx-3">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button size="md" variant="outline">
+                    1 - {showData} Data
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56 text-sm">
+                  <DropdownMenuRadioGroup
+                    value={showData}
+                    onValueChange={setShowData}
+                  >
+                    <DropdownMenuRadioItem value="10">
+                      1 - 10 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="50">
+                      1 - 50 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="100">
+                      1 - 100 Data
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="250">
+                      1 - 250 Data
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+
+          <div className="flex items-center py-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto" size="md">
+                  Columns <ChevronDown />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} className="h-[75px]">
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+      {/* <div className="flex justify-end mt-4">
+        <Button
+          color="primary"
+          size="md"
+          className="text-sm mr-3"
+          onClick={() => setShowTable(false)}
+        >
+          Tracking Berita Baru
+        </Button>
+      </div> */}
+      {/* </>
+      )} */}
+    </div>
+  );
+};
+
+export default ResultTable;

app/[locale]/(protected)/admin/media-tracking/results/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import ResultTable from "./component/table";
+
+export default function AdminResult() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <ResultTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/tb-news/component/column.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "date",
+    header: "Tanggal",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "link",
+    header: "Link Berita",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Aksi",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <span className="sr-only">Open menu</span>
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <Link
+              href={`/admin/media-tracking/tb-news/detail/${row.original.id}`}
+            >
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/media-tracking/tb-news/component/table.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { listEnableCategory } from "@/service/content/content";
+import { close, loading } from "@/config/swal";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { link } from "fs";
+import { listDataAll } from "@/service/landing/landing";
+import SearchImageComponent from "@/components/form/media-tracking/search-image-card";
+import SearchVideoComponent from "@/components/form/media-tracking/search-video-card";
+import SearchDocumentComponent from "@/components/form/media-tracking/search-document-card";
+import SearchAudioComponent from "@/components/form/media-tracking/search-audio-card";
+
+const NewsTable = () => {
+  const router = useRouter();
+  const asPath = usePathname();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  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 [showTable, setShowTable] = React.useState(false);
+  const [onSearch, setOnSearch] = React.useState("");
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<any>([]);
+  const [searchTitle, setSearchTitle] = React.useState<string>("");
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [imageData, setImageData] = React.useState<any>();
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [totalPage, setTotalPage] = React.useState<number>(1);
+  const [contentAll, setContentAll] = React.useState([]);
+  const [formatFilter, setFormatFilter] = React.useState<any>([]);
+  const [totalContent, setTotalContent] = React.useState();
+  const group = searchParams?.get("group");
+  const title = searchParams?.get("title");
+  const categorie = searchParams?.get("category");
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  React.useEffect(() => {
+    if (categorie) {
+      setCategoryFilter(
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+      console.log(
+        "Kategori",
+        categorie,
+        categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
+      );
+    }
+  }, [categorie]);
+
+  const handleCategoryFilter = (e: boolean, id: string) => {
+    let filter = [...categoryFilter];
+
+    if (e) {
+      filter = [...categoryFilter, String(id)];
+    } else {
+      filter.splice(categoryFilter.indexOf(id), 1);
+    }
+    console.log("checkbox filter", filter);
+    setCategoryFilter(filter);
+    router.push(`?category=${filter.join("&")}`);
+  };
+
+  const cleanCheckbox = () => {
+    setCategoryFilter([]);
+    setFormatFilter([]);
+    router.push(`?category=&title=`);
+  };
+
+  async function getData() {
+    if (asPath?.includes("/polda/") == true) {
+      if (asPath?.split("/")[2] !== "[polda_name]") {
+        const filter =
+          categoryFilter?.length > 0
+            ? categoryFilter?.sort().join(",")
+            : categorie || "";
+
+        const name = title == undefined ? "" : title;
+        const format = formatFilter == undefined ? "" : formatFilter?.join(",");
+        const filterGroup = group == undefined ? asPath.split("/")[2] : group;
+        loading();
+        const response = await listDataAll("", name, filter, "");
+        close();
+        // setGetTotalPage(response?.data?.data?.totalPages);
+        // setContentImage(response?.data?.data?.content);
+        // setTotalContent(response?.data?.data?.totalElements);
+        const data = response?.data?.data;
+        const contentData = data?.content;
+        setImageData(contentData);
+        setTotalData(data?.totalElements);
+        setContentAll(response?.data?.data?.content);
+        setTotalPage(data?.totalPages);
+        setTotalContent(response?.data?.data?.totalElements);
+      }
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  async function doneTyping() {
+    if (searchTitle == "" || searchTitle == undefined) {
+      router.push("?title=");
+    } else {
+      router.push(`?title=${searchTitle}`);
+    }
+  }
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border ">
+      <div className="flex justify-between  items-center">
+        <p className="text-xl font-medium text-default-900">
+          Tracking Berita hari ini!
+        </p>
+      </div>
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="bg-blue-600" size="md">
+            Tracking Berita
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="overflow-y-auto h-[500px] min-w-max mx-5">
+          <DialogHeader>
+            <DialogTitle>Form Tracking Berita</DialogTitle>
+          </DialogHeader>
+
+          <div className="grid gap-4 py-4 px-5">
+            <div className="space-y-2 flex flex-col">
+              <Label htmlFor="link" className="text-sm font-medium">
+                Masukkan Link <span className="text-red-500">*</span>
+              </Label>
+              <input
+                value={searchTitle}
+                onChange={(e) => setSearchTitle(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                type="text"
+                placeholder="Search..."
+                className="pl-4 pr-4 py-1 w-full h-10 text-[15px] border  focus:outline-none dark:text-white"
+              />
+            </div>
+            <div className="flex flex-col gap-2 w-full">
+              <SearchImageComponent categoryFilter={categoryFilter} />
+              <SearchVideoComponent categoryFilter={categoryFilter} />
+              <SearchDocumentComponent categoryFilter={categoryFilter} />
+              <SearchAudioComponent categoryFilter={categoryFilter} />
+            </div>
+          </div>
+
+          <DialogFooter className="flex justify-end gap-2">
+            <Button onClick={cleanCheckbox} variant="outline">
+              Riset Filter
+            </Button>
+            <Button className="bg-blue-600 text-white">Tracking Berita</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Table className="overflow-hidden mt-4">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} className="h-[75px]">
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+      <div className="flex justify-end mt-4">
+        <Button
+          color="primary"
+          size="md"
+          className="text-sm mr-3"
+          onClick={() => setShowTable(false)}
+        >
+          Tracking Berita Baru
+        </Button>
+      </div>
+      {/* </>
+      )} */}
+    </div>
+  );
+};
+
+export default NewsTable;

app/[locale]/(protected)/admin/media-tracking/tb-news/detail/[id]/page.tsx

@@ -0,0 +1,12 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import NewsTable from "../../component/table";
+import NewsDetailTable from "../component/table";
+
+export default function DetailNews() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <NewsDetailTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/column.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "mediaOnline",
+    header: "Media Online",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "link",
+    header: "Link Berita",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/media-tracking/tb-news/detail/component/table.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { listDataMedia } from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { link } from "fs";
+
+const NewsDetailTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [search, setSearch] = React.useState("");
+  const [showData, setShowData] = React.useState("10");
+  const [categories, setCategories] = React.useState<any>();
+  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 [showTable, setShowTable] = React.useState(false);
+  const [link, setLink] = React.useState("");
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  let typingTimer: any;
+  const doneTypingInterval = 1500;
+
+  // const handleKeyUp = () => {
+  //   clearTimeout(typingTimer);
+  //   typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  // };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  // async function doneTyping() {
+  //   fetchData();
+  // }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  // React.useEffect(() => {
+  //   fetchData();
+  //   setPagination({
+  //     pageIndex: 0,
+  //     pageSize: Number(showData),
+  //   });
+  // }, [page, showData]);
+
+  // async function fetchData() {
+  //   try {
+  //     loading();
+  //     const res = await listDataMedia(
+  //       page - 1,
+  //       showData,
+  //       search,
+  //       categoryFilter?.sort().join(","),
+  //       statusFilter?.sort().join(",")
+  //     );
+  //     const data = res?.data?.data;
+  //     const contentData = data?.content;
+  //     contentData.forEach((item: any, index: number) => {
+  //       item.no = (page - 1) * Number(showData) + index + 1;
+  //     });
+
+  //     console.log("contentData : ", data);
+
+  //     setDataTable(contentData);
+  //     setTotalData(data?.totalElements);
+  //     setTotalPage(data?.totalPages);
+  //     close();
+  //   } catch (error) {
+  //     console.error("Error fetching tasks:", error);
+  //   }
+  // }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border">
+      <Table className="overflow-hidden mt-4">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} className="h-[75px]">
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default NewsDetailTable;

app/[locale]/(protected)/admin/media-tracking/tb-news/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import NewsTable from "./component/table";
+
+export default function AdminNews() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <NewsTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/column.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Nama Media Online",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "link",
+    header: "Link",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx

@@ -0,0 +1,358 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card } from "@/components/ui/card";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  listDataAllNonPagination,
+  listDataTracking,
+  mediaTrackingSave,
+} from "@/service/media-tracking/media-tracking";
+import { error } from "@/lib/swal";
+import { toast } from "sonner";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { PaginationState } from "@tanstack/react-table";
+import page from "../page";
+import CustomPagination from "@/components/table/custom-pagination";
+import { close, loading } from "@/config/swal";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+
+export default function TrackingBeritaCard() {
+  const [search, setSearch] = useState("");
+  const [content, setContent] = useState<any[]>([]);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [page, setPage] = useState(1);
+  const [totalPage, setTotalPage] = useState(1);
+  const [showData, setShowData] = useState("6");
+  const MySwal = withReactContent(Swal);
+
+  useEffect(() => {
+    initFecth();
+  }, [showData, page]);
+
+  const initFecth = async () => {
+    loading();
+    const response = await listDataTracking(Number(showData), page - 1, search);
+    const data = response?.data?.data;
+    const newData = data?.content;
+    setTotalPage(data?.totalPages || 1);
+    newData.forEach((item: any, index: number) => {
+      item.no = (page - 1) * Number(showData) + index + 1;
+    });
+    setContent(response?.data?.data?.content || []);
+    close();
+  };
+
+  const fecthAll = async (keyword: string) => {
+    const response = await listDataAllNonPagination(keyword);
+    setContent(response?.data?.data?.content || []);
+  };
+
+  const handleInputChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setSearch(value);
+
+    const response = await listDataTracking(Number(showData), 0, value);
+    setContent(response?.data?.data?.content || []);
+  };
+
+  // const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  //   const value = e.target.value;
+  //   setSearch(value);
+
+  //   if (value.trim() === "") {
+  //     initFecth();
+  //   } else {
+  //     fecthAll(value);
+  //   }
+  // };
+
+  const handleSelect = (id: number) => {
+    setSelectedItems((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    );
+  };
+
+  const doSave = async () => {
+    if (selectedItems.length === 0) {
+      MySwal.fire(
+        "Peringatan",
+        "Pilih minimal 1 berita untuk disimpan.",
+        "warning"
+      );
+      return;
+    }
+
+    try {
+      loading();
+
+      const promises = selectedItems.map(async (id) => {
+        const res = await mediaTrackingSave({
+          mediaUploadId: id,
+          duration: 24,
+          scrapingPeriod: 3,
+        });
+
+        // cek pesan API
+        if (!res?.data?.success) {
+          throw new Error(
+            res?.data?.message ||
+              "Limit media tracking per hari sudah tercapai. Maksimal 5 tracking per hari."
+          );
+        }
+
+        return res;
+      });
+
+      await Promise.all(promises);
+      close();
+
+      await MySwal.fire({
+        icon: "success",
+        title: "Berhasil!",
+        text: "Tracking berita berhasil ditambahkan.",
+        confirmButtonColor: "#2563eb",
+      });
+
+      setSelectedItems([]);
+      initFecth();
+    } catch (err: any) {
+      close();
+      MySwal.fire({
+        icon: "error",
+        title: "Gagal!",
+        text: err?.message || "Terjadi kesalahan saat menyimpan data.",
+        confirmButtonColor: "#dc2626",
+      });
+    }
+  };
+
+  // const doSave = async () => {
+  //   if (selectedItems.length === 0) {
+  //     toast("Pilih minimal 1 berita untuk disimpan.");
+  //     return;
+  //   }
+
+  //   try {
+  //     const promises = selectedItems.map((id) =>
+  //       mediaTrackingSave({
+  //         mediaUploadId: id,
+  //         duration: 24,
+  //         scrapingPeriod: 3,
+  //       })
+  //     );
+  //     await Promise.all(promises);
+
+  //     toast("Berhasil Menambahkan", {
+  //       description: "",
+  //     });
+  //     setSelectedItems([]);
+  //     initFecth();
+  //   } catch (err: any) {
+  //     error(err?.message || "Gagal menyimpan data.");
+  //   }
+  // };
+
+  // const doSave = async () => {
+  //   if (selectedItems.length === 0) {
+  //     MySwal.fire(
+  //       "Peringatan",
+  //       "Pilih minimal 1 berita untuk disimpan.",
+  //       "warning"
+  //     );
+  //     return;
+  //   }
+
+  //   try {
+  //     loading();
+
+  //     const promises = selectedItems.map((id) =>
+  //       mediaTrackingSave({
+  //         mediaUploadId: id,
+  //         duration: 24,
+  //         scrapingPeriod: 3,
+  //       })
+  //     );
+  //     await Promise.all(promises);
+
+  //     close();
+
+  //     await MySwal.fire({
+  //       icon: "success",
+  //       title: "Berhasil!",
+  //       text: "Tracking berita berhasil ditambahkan.",
+  //       confirmButtonColor: "#2563eb",
+  //     });
+
+  //     setSelectedItems([]);
+  //     initFecth();
+  //   } catch (err: any) {
+  //     close();
+  //     MySwal.fire({
+  //       icon: "error",
+  //       title: "Gagal!",
+  //       text: err?.message || "Terjadi kesalahan saat menyimpan data.",
+  //       confirmButtonColor: "#dc2626",
+  //     });
+  //   }
+  // };
+
+  const slugify = (text: string) => {
+    return text
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/(^-|-$)+/g, "");
+  };
+
+  const goToDetail = (item: any) => {
+    const type = item.type || "image";
+    const slug = slugify(item.title || "");
+    const url = `/in/${type}/detail/${item.id}-${slug}`;
+
+    window.location.href = url;
+  };
+
+  return (
+    <Card>
+      <div className="p-4 space-y-4">
+        <div className="flex justify-between items-center">
+          <Input
+            placeholder="Pencarian"
+            value={search}
+            onChange={handleInputChange}
+            className="max-w-sm"
+          />
+          <div className="mx-3">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button size="md" variant="outline">
+                  1 - {showData} Data
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56 text-sm">
+                <DropdownMenuRadioGroup
+                  value={showData}
+                  onValueChange={setShowData}
+                >
+                  <DropdownMenuRadioItem value="12">
+                    1 - 6 Data
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="12">
+                    1 - 12 Data
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="60">
+                    1 - 60 Data
+                  </DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="120">
+                    1 - 120 Data
+                  </DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        {selectedItems.length > 0 && (
+          <div className="flex justify-between items-center">
+            <div className="text-sm text-blue-600 font-medium">
+              {selectedItems.length} Item Terpilih{" "}
+              <span className="text-black">
+                / Tracking Berita tersisa {5 - selectedItems.length}
+              </span>
+            </div>
+            <Button className="bg-blue-600 text-white" onClick={doSave}>
+              Submit
+            </Button>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {content?.length > 0 &&
+            content.map((item: any) => (
+              <Card
+                key={item.id}
+                className="relative overflow-hidden shadow-sm border rounded-lg"
+              >
+                {/* KLIK GAMBAR = CHECKLIST */}
+                <div
+                  className="cursor-pointer"
+                  onClick={() => handleSelect(item.id)}
+                >
+                  <img
+                    src={item.thumbnailLink}
+                    alt={item.title}
+                    className="w-full h-[300px] object-cover"
+                  />
+
+                  {/* CHECKBOX */}
+                  <div className="absolute top-2 left-2">
+                    <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
+                      {selectedItems.includes(item.id) && (
+                        <div className="w-3 h-3 bg-blue-600 rounded-sm" />
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                {/* KLIK JUDUL = DETAIL */}
+                <p
+                  className="p-2 text-sm font-medium hover:underline cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    goToDetail(item);
+                  }}
+                >
+                  {item.title}
+                </p>
+              </Card>
+            ))}
+        </div>
+
+        {/* <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {content?.length > 1 &&
+            content.map((item: any) => (
+              <Card
+                key={item.id}
+                className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
+                onClick={() => handleSelect(item.id)}
+              >
+                <img
+                  src={item.thumbnailLink}
+                  alt={item.title}
+                  className="w-full h-[300px] object-cover"
+                />
+                <div className="absolute top-2 left-2">
+                  <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
+                    {selectedItems.includes(item.id) && (
+                      <div className="w-3 h-3 bg-blue-600 rounded-sm" />
+                    )}
+                  </div>
+                </div>
+                <p className="p-2 text-sm font-medium text-gray-800 truncate">
+                  {item.title}
+                </p>
+              </Card>
+            ))}
+        </div> */}
+        <div className="mt-3">
+          {content && content?.length > 0 ? (
+            <CustomPagination
+              totalPage={totalPage}
+              onPageChange={(data) => setPage(data)}
+            />
+          ) : (
+            <p>No Data</p>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}

app/[locale]/(protected)/admin/media-tracking/tracking-berita/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import TrackingBeritaCard from "./component/table";
+
+export default function AdminTrackingBerita() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <TrackingBeritaCard />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/performance-polda/page.tsx

@@ -0,0 +1,12 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import PerformancePoldaViz from "@/components/visualization/performance-polda";
+
+export default function PerformancePolda() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <p className="font-semibold">PERFORMANCE KUMULATIF PER POLDA</p>
+      <PerformancePoldaViz />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/performance-polres/page.tsx

@@ -0,0 +1,12 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import PerformancePolresViz from "@/components/visualization/performance-polres";
+
+export default function PerformancePolda() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <p className="font-semibold">PERFORMANCE KUMULATIF PER POLRES</p>
+      <PerformancePolresViz />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/performance-satker/page.tsx

@@ -0,0 +1,13 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import PerformancePolresViz from "@/components/visualization/performance-polres";
+import PerformanceSatkerViz from "@/components/visualization/performance-satker";
+
+export default function PerformanceSatker() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <p className="font-semibold">PERFORMANCE KUMULATIF PER SATKER</p>
+      <PerformanceSatkerViz />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/settings/banner/component/banner-column.tsx

@@ -1,19 +1,28 @@
 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 { formatDateToIndonesian, getOnlyDate, htmlToString } from "@/lib/utils/globals";
-import { cn } from "@/lib/utils/utils";
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
 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,
@@ -21,15 +30,9 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-
-import StaticToogle from "./static-toogle";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
 import StatusToogle from "./status-toogle";
+import StaticToogle from "./static-toogle";
 
 const columns: ColumnDef<any>[] = [
   // {
@@ -51,21 +54,17 @@ const columns: ColumnDef<any>[] = [
   {
     accessorKey: "createdAt",
     header: "Tanggal Unggah",
-    cell: ({ row }) => <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>,
-  },
-  {
-    accessorKey: "isStaticBanner",
-    header: "Static Banner",
     cell: ({ row }) => (
-      <StaticToogle id={row.original.id} initChecked={row.original.isStaticBanner} />
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
     ),
   },
   {
     accessorKey: "statusName",
     header: "Status Banner",
-    cell: ({ row }) => <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />,
+    cell: ({ row }) => (
+      <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
+    ),
   },
-
   {
     id: "actions",
     accessorKey: "action",
@@ -84,7 +83,11 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/contributor/content/image/detail/${row.original.id}`}>Detail</Link>
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

app/[locale]/(protected)/admin/settings/banner/component/banner-table.tsx

@@ -1,24 +1,19 @@
 "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,
@@ -28,7 +23,12 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
+import { useSearchParams } from "next/navigation";
+
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
 import columns from "./banner-column";
+import { listBanner, listStaticBanner } from "@/service/settings/settings";
 
 const BannerListTable = () => {
   const router = useRouter();
@@ -36,8 +36,11 @@ const BannerListTable = () => {
   const [showData, setShowData] = React.useState("10");
 
   const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
@@ -110,7 +113,10 @@ const BannerListTable = () => {
                 <TableHead key={header.id}>
                   {header.isPlaceholder
                     ? null
-                    : flexRender(header.column.columnDef.header, header.getContext())}
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
                 </TableHead>
               ))}
             </TableRow>

app/[locale]/(protected)/admin/settings/banner/component/column.tsx

@@ -0,0 +1,113 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { setBanner } from "@/service/settings/settings";
+import { error } from "@/config/swal";
+import { useToast } from "@/components/ui/use-toast";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+
+  {
+    accessorKey: "statusName",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("statusName")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const { toast } = useToast();
+
+      const handleBanner = async (id: number) => {
+        const response = setBanner(id, true);
+        toast({
+          title: "Success",
+        });
+      };
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <a onClick={() => handleBanner(row.original.id)}>
+                Jadikan Banner
+              </a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/banner/component/static-toogle.tsx

@@ -0,0 +1,40 @@
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "@/i18n/routing";
+import { setStaticBanner } from "@/service/settings/settings";
+
+export default function StaticToogle(props: {
+  id: number;
+  initChecked: boolean;
+}) {
+  const { id, initChecked } = props;
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const changeStaticBanner = async (id: number) => {
+    const response = await setStaticBanner(id);
+
+    if (response?.error) {
+      toast({
+        variant: "destructive",
+        title: response?.message,
+      });
+      return false;
+    }
+
+    toast({
+      title: "Success ",
+    });
+    router.push("/admin/settings/banner?dataChange=true");
+  };
+
+  return (
+    <Switch
+      id="static-toogle"
+      checked={initChecked}
+      onCheckedChange={(e) => {
+        changeStaticBanner(id);
+      }}
+    />
+  );
+}

app/[locale]/(protected)/admin/settings/banner/component/status-toogle.tsx

@@ -0,0 +1,37 @@
+import { Switch } from "@/components/ui/switch";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter } from "@/i18n/routing";
+import { setBanner } from "@/service/settings/settings";
+
+export default function StatusToogle(props: {
+  id: number;
+  initChecked: boolean;
+}) {
+  const { id, initChecked } = props;
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const disableBanner = async () => {
+    const response = await setBanner(id, false);
+
+    if (response?.error) {
+      toast({
+        variant: "destructive",
+        title: response?.message,
+      });
+      return false;
+    }
+
+    toast({
+      title: "Success ",
+    });
+    router.push("/admin/settings/banner?dataChange=true");
+  };
+  return (
+    <Switch
+      id="status-toogle"
+      checked={initChecked}
+      onCheckedChange={() => disableBanner()}
+    />
+  );
+}

app/[locale]/(protected)/admin/settings/banner/component/table.tsx

@@ -0,0 +1,477 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UserIcon,
+} from "lucide-react";
+import { cn } from "@/lib/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 "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./column";
+import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { listDataMedia } from "@/service/broadcast/broadcast";
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link } from "@/i18n/routing";
+import { data } from "jquery";
+import { useToast } from "@/components/ui/use-toast";
+import { setBanner } from "@/service/settings/settings";
+import { id } from "date-fns/locale";
+import CustomPagination from "@/components/table/custom-pagination";
+
+const ContentListBanner = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [showData, setShowData] = React.useState("9");
+  const [categories, setCategories] = React.useState<any>();
+  const [data, setData] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [bannerCount, setBannerCount] = React.useState<number>(0);
+
+  React.useEffect(() => {
+    fetchBannerCount();
+  }, []);
+
+  async function fetchBannerCount() {
+    try {
+      const res = await listDataMedia(0, "100", "", "", "");
+      const banners = res?.data?.data?.content?.filter(
+        (item: any) => item.isBanner
+      );
+      setBannerCount(banners?.length || 0);
+
+      setBannerCount(data?.length || 0);
+    } catch (error) {
+      console.error("Error fetching banner count:", error);
+    }
+  }
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  let typingTimer: NodeJS.Timeout;
+  const doneTypingInterval = 1500;
+
+  const handleTyping = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(() => {
+      setPage(1);
+      fetchData();
+    }, doneTypingInterval);
+  };
+
+  React.useEffect(() => {
+    fetchData();
+  }, [categoryFilter, statusFilter]);
+
+  async function doneTyping() {
+    fetchData();
+  }
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+    // setPagination({
+    //   pageIndex: 0,
+    //   pageSize: Number(showData),
+    // });
+  }, [page, showData]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await listDataMedia(
+        page - 1,
+        showData,
+        searchQuery,
+        categoryFilter?.sort().join(","),
+        statusFilter?.sort().join(",")
+      );
+
+      const data = res?.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * Number(showData) + index + 1;
+      });
+
+      console.log("contentData : ", data);
+
+      setData(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  React.useEffect(() => {
+    getCategories();
+  }, []);
+
+  async function getCategories() {
+    const category = await listEnableCategory("");
+    const resCategory = category?.data?.data?.content;
+    setCategories(resCategory);
+  }
+
+  const handleChange = (type: string, id: number, checked: boolean) => {
+    if (type === "category") {
+      if (checked) {
+        const temp: number[] = [...categoryFilter];
+        temp.push(id);
+        setCategoryFilter(temp);
+      } else {
+        const temp = categoryFilter.filter((a) => a !== id);
+        setCategoryFilter(temp);
+      }
+    } else {
+      if (checked) {
+        const temp: number[] = [...statusFilter];
+        temp.push(id);
+        setStatusFilter(temp);
+      } else {
+        const temp = statusFilter.filter((a) => a !== id);
+        setStatusFilter(temp);
+      }
+    }
+  };
+
+  const handleSelect = (id: number) => {
+    setSelectedItems((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  const handleSelectAll = () => {
+    if (selectedItems.length === data.length) {
+      setSelectedItems([]);
+    } else {
+      setSelectedItems(data.map((item: any) => Number(item.id)));
+    }
+  };
+
+  const { toast } = useToast();
+
+  const handleBanner = async (ids: number[]) => {
+    try {
+      // const res = await Promise.all(ids.map((id) => setBanner(id, true)));
+
+      for (const element of ids) {
+        loading();
+        const res = await setBanner(element, true);
+        close();
+        if (res?.error) {
+          toast({
+            title: "Gagal",
+            description:
+              "Banner sudah melebihi batas maksimum (4 konten). Silahkan di disable banner Lainnya.",
+            variant: "destructive",
+          });
+        } else {
+          toast({
+            title: "Sukses",
+            description: `item berhasil dijadikan banner.`,
+          });
+        }
+      }
+    } catch (err) {
+      toast({
+        title: "Gagal",
+        description: "Terjadi kesalahan saat menjadikan banner.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className="flex justify-between ">
+        <Input
+          type="text"
+          placeholder="Search"
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            handleTyping();
+          }}
+          className="max-w-[300px]"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              fetchData();
+            }
+          }}
+        />
+
+        {/* <div className="flex flex-row gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button size="md" variant="outline">
+                1 - {showData} Data
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56 text-sm">
+              <DropdownMenuRadioGroup
+                value={showData}
+                onValueChange={setShowData}
+              >
+                <DropdownMenuRadioItem value="10">
+                  1 - 10 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="20">
+                  1 - 20 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="25">
+                  1 - 25 Data
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem value="50">
+                  1 - 50 Data
+                </DropdownMenuRadioItem>
+              </DropdownMenuRadioGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button size="md" variant="outline">
+                Filter
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80 ">
+              <div className="flex flex-col gap-2 px-2">
+                <div className="flex justify-between text-sm">
+                  <p>Filter</p>
+                  <a
+                    onClick={() => fetchData()}
+                    className="cursor-pointer text-primary"
+                  >
+                    Simpan
+                  </a>
+                </div>
+                <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                  <p>Kategory</p>
+                  {categories?.map((category: any) => (
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        id={category.id}
+                        checked={categoryFilter.includes(category.id)}
+                        onCheckedChange={(e) =>
+                          handleChange("category", category.id, Boolean(e))
+                        }
+                      />
+                      <label
+                        htmlFor={category.id}
+                        className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                      >
+                        {category.name}
+                      </label>
+                    </div>
+                  ))}
+                  <p className="mt-3">Status</p>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(1)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 1, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Menunggu Review
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(2)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 2, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Diterima
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(3)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 3, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Minta Update{" "}
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="accepted"
+                      checked={statusFilter.includes(4)}
+                      onCheckedChange={(e) =>
+                        handleChange("status", 4, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor="accepted"
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Ditolak
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        </div> */}
+      </div>
+      <div>
+        {/* Header select all + action */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Checkbox
+              checked={selectedItems.length === data.length}
+              onCheckedChange={handleSelectAll}
+            />
+            <span className="text-black dark:text-white">Pilih Semua</span>
+          </div>
+          {selectedItems.length > 0 && (
+            <Button color="primary" onClick={() => handleBanner(selectedItems)}>
+              Jadikan Banner
+            </Button>
+          )}
+        </div>
+
+        {/* Grid Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {data?.map((item: any) => (
+            <div
+              key={item.id}
+              className="relative rounded-lg shadow-md overflow-hidden border border-gray-200"
+            >
+              <div className="absolute top-2 left-2 z-10">
+                <Checkbox
+                  checked={selectedItems.includes(item.id)}
+                  onCheckedChange={() => handleSelect(item.id)}
+                />
+              </div>
+              <img
+                src={item.smallThumbnailLink || "/placeholder.jpg"}
+                alt={item.title}
+                className="w-full h-48 object-cover"
+              />
+              <Link
+                href={`/contributor/content/image/detail/${item?.id}`}
+                className="p-3"
+              >
+                <h4 className="font-semibold text-sm">{item.title}</h4>
+              </Link>
+            </div>
+          ))}
+        </div>
+        <div className="mt-3">
+          {data && data?.length > 0 ? (
+            <CustomPagination
+              totalPage={totalPage}
+              onPageChange={(data) => setPage(data)}
+            />
+          ) : (
+            <p>No Data</p>
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ContentListBanner;

app/[locale]/(protected)/admin/settings/banner/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import ContentListTable from "./component/table";
+import { useState } from "react";
+
+import BannerListTable from "./component/banner-table";
+import { Button } from "@/components/ui/button";
+import ContentListBanner from "./component/table";
+
+export default function AdminBanner() {
+  const [selectedTab, setSelectedTab] = useState("content");
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
+        <div className="flex justify-between">
+          {selectedTab === "content" ? "List Media" : " List Banner"}
+
+          <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
+            <Button
+              rounded="md"
+              onClick={() => setSelectedTab("content")}
+              className={` hover:text-white
+                ${
+                  selectedTab === "content"
+                    ? "bg-black text-white "
+                    : "bg-white text-black "
+                }`}
+            >
+              Konten
+            </Button>
+            <Button
+              rounded="md"
+              onClick={() => setSelectedTab("banner")}
+              className={` hover:text-white
+                ${
+                  selectedTab === "banner"
+                    ? "bg-black text-white "
+                    : "bg-white text-black "
+                }`}
+            >
+              Banner
+            </Button>
+          </div>
+        </div>
+
+        {selectedTab === "content" ? (
+          <ContentListBanner />
+        ) : (
+          <BannerListTable />
+        )}
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/settings/category/component/column.tsx

@@ -0,0 +1,137 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+import { Link, useRouter } from "@/i18n/routing";
+import StatusToogle from "./status";
+import { error } from "@/config/swal";
+import { deleteCategory } from "@/service/settings/settings";
+import { useToast } from "@/components/ui/use-toast";
+import EditCategoryModal from "./edit";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarMenu,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "name",
+    header: "Nama Kategori",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("name")}</span>
+    ),
+  },
+  {
+    accessorKey: "mediaTypesString",
+    header: "Tipe Konten",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("mediaTypesString")}</span>
+    ),
+  },
+  {
+    accessorKey: "publishedLocation",
+    header: "Wilayah",
+    cell: ({ row }) => (
+      <span className="normal-case">{row.getValue("publishedLocation")}</span>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => (
+      <span className="normal-case">
+        <StatusToogle id={row.original.id} initValue={row.original.isPublish} />
+      </span>
+    ),
+  },
+  {
+    id: "created",
+    accessorKey: "created",
+    header: "Dibuat Oleh",
+    cell: ({ row }) => (
+      <div className="flex flex-col items-center">
+        <span className="text-sm text-gray-500">{row.original.createdByName}</span><span className="text-xs font-bold">({row.original.createdByUserLevelName})</span>
+      </div>
+    ),
+  },
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const router = useRouter();
+      const { toast } = useToast();
+
+      const categoryDelete = async (id: number) => {
+        const response = await deleteCategory(id);
+        console.log(response);
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+        toast({
+          title: "Sukses",
+          description: "Berhasil Delete",
+        });
+        router.push("/admin/settings/category?dataChange=true");
+      };
+      return (
+        <Menubar className="border-none dark:bg-black">
+          <MenubarMenu>
+            <MenubarTrigger>
+              <Button
+                size="icon"
+                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+              >
+                <MoreVertical className="h-4 w-4 text-default-800" />
+              </Button>
+            </MenubarTrigger>
+            <MenubarContent className="flex flex-col gap-2 justify-center items-start p-4">
+              <EditCategoryModal
+                id={row.original.id}
+                isDetail={true}
+                thumbnailLink={row.original.thumbnailLink}
+              />
+              <EditCategoryModal
+                id={row.original.id}
+                thumbnailLink={row.original.thumbnailLink}
+              />
+              <a
+                onClick={() => categoryDelete(row.original.id)}
+                className="hover:underline cursor-pointer hover:text-destructive"
+              >
+                Delete 
+              </a>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/category/component/create.tsx

@@ -0,0 +1,600 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { getUserRoles, postCategory } from "@/service/settings/settings";
+import { Fragment, useEffect, useState } from "react";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Icon } from "@iconify/react/dist/iconify.js";
+import { Textarea } from "@/components/ui/textarea";
+import { close, error, loading } from "@/config/swal";
+import { UnitMapping } from "./unit-mapping";
+import { useToast } from "@/components/ui/use-toast";
+import { stringify } from "querystring";
+import { useDropzone } from "react-dropzone";
+import { CloudUpload } from "lucide-react";
+import Image from "next/image";
+import { Upload } from "tus-js-client";
+import { getCookiesDecrypt } from "@/lib/utils";
+import Cookies from "js-cookie";
+import { useTranslations } from "next-intl";
+
+const FormSchema = z.object({
+  title: z.string({
+    required_error: "Required",
+  }),
+  description: z.string({
+    required_error: "Required",
+  }),
+  contentType: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  selectedUser: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+
+  file: z.string().optional(),
+});
+
+const listContent = [
+  {
+    id: "1",
+    name: "Foto",
+  },
+  {
+    id: "2",
+    name: "Audio Visual",
+  },
+  {
+    id: "3",
+    name: "Teks",
+  },
+  {
+    id: "4",
+    name: "Audio",
+  },
+];
+
+const publishToList = [
+  {
+    id: "mabes",
+    name: "Nasional",
+  },
+  {
+    id: "polda",
+    name: "Polda",
+  },
+  {
+    id: "satker",
+    name: "Satker",
+  },
+  {
+    id: "internasional",
+    name: "Internasional",
+  },
+];
+
+export default function CreateCategoryModal() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const roleId = getCookiesDecrypt("urie");
+  const levelNumber = getCookiesDecrypt("ulne");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const poldaState = Cookies.get("state");
+  const t = useTranslations("Menu");
+  const [files, setFiles] = useState<File[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [satkerData, setSatkerData] = useState<string[]>([]);
+  const [unitData, setUnitData] = useState<string[]>([]);
+  const [userList, setUserList] = useState<
+    { id: string; name: string; isInternal: boolean }[]
+  >([]);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { contentType: [], selectedUser: [], publishTo: [] },
+  });
+
+  const contentType = form.watch("contentType");
+  const isAllContentChecked = contentType && listContent.every((item) =>
+    contentType.includes(item.id)
+  );
+
+  const users = form.watch("selectedUser");
+  const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
+
+  const target = form.watch("publishTo");
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    maxFiles: 1,
+  });
+
+  useEffect(() => {
+    getRoles();
+    if (Number(levelNumber) === 2) {
+      form.setValue("publishTo", ["polda"]);
+      setUnitData([String(userLevelId)]);
+    }
+    if (Number(levelNumber) === 3) {
+      form.setValue("publishTo", ["satker"]);
+      setSatkerData([String(userLevelId)]);
+    }
+  }, []);
+
+  async function getRoles() {
+    const response = await getUserRoles();
+    let dataRoles = response?.data?.data;
+    for (let i = 0; i < dataRoles.length; i++) {
+      dataRoles[i].id = String(dataRoles[i].id);
+    }
+    setUserList(dataRoles);
+  }
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (data.publishTo.includes("polda") || data.publishTo.includes("satker")) {
+      if (
+        (data.publishTo.includes("polda") && unitData?.length < 1) ||
+        (data.publishTo.includes("satker") && satkerData?.length < 1)
+      ) {
+        const poldaValidation = data.publishTo.includes("polda");
+        const satkerValidation = data.publishTo.includes("satker");
+        toast({
+          title:
+            poldaValidation && satkerValidation
+              ? "Pilih Polda dan Satker tujuan"
+              : `Pilih ${poldaValidation ? "Polda" : "Satker"} tujuan`,
+          variant: "destructive",
+        });
+      } else {
+        save(data);
+      }
+    } else {
+      save(data);
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const formMedia = new FormData();
+
+    loading();
+
+    const unit = unitData?.join(",");
+    const satker = satkerData?.join(",");
+    const join =
+      unitData?.length > 0 && satkerData?.length > 0
+        ? unit + "," + satker
+        : unitData?.length > 0
+        ? unit
+        : satkerData?.length > 0
+        ? satker
+        : "";
+
+    formMedia.append("name", data.title);
+    formMedia.append("description", data.description);
+    formMedia.append("mediaTypes", data.contentType.join(","));
+    formMedia.append("publishedFor", data.selectedUser.join(","));
+    formMedia.append("file", files[0]);
+    formMedia.append("publishedLocation", data.publishTo.sort().join(","));
+    formMedia.append("publishedLocationLevel", join);
+    formMedia.append(
+      "isInt",
+      data.publishTo.includes("internasional") ? "true" : "false"
+    );
+
+    const response = await postCategory(formMedia);
+    close();
+    if (response?.error) {
+      toast({ title: stringify(response.message), variant: "destructive" });
+      return false;
+    }
+    toast({
+      title: "Succes",
+      description: "Kategori berhasil dibuat",
+    });
+    router.push("/admin/settings/category?dataChange=true");
+    setIsOpen(false);
+  };
+
+  const handleRemoveFile = (file: File) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button color="primary" size="md">
+          {t("add-category", { defaultValue: "Add Category" })}
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        size="md"
+        className="sm:h-[300px] md:h-[300px] lg:h-[500px] overflow-y-auto"
+      >
+        <DialogHeader>
+          <DialogTitle> {t("add-category", { defaultValue: "Add Category" })}</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white dark:bg-[#1f2937] rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="contentType"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Tipe Konten</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex items-center gap-3">
+                      <Checkbox
+                        id="all"
+                        checked={isAllContentChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "contentType",
+                              listContent.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("contentType", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {listContent.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="contentType"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start"
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="selectedUser"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Target Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        checked={isAllUserChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "selectedUser",
+                              userList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("selectedUser", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {userList.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="selectedUser"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start "
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {Number(levelNumber) === 1 ? (
+              <FormField
+                control={form.control}
+                name="publishTo"
+                render={() => (
+                  <FormItem>
+                    <FormLabel>Wilayah Publish</FormLabel>
+
+                    <div className="flex flex-row items-center gap-2">
+                      <div className="flex gap-3 items-center">
+                        <Checkbox
+                          id="all"
+                          checked={isAllTargetChecked}
+                          onCheckedChange={(checked) => {
+                            if (checked) {
+                              form.setValue(
+                                "publishTo",
+                                publishToList.map((item) => item.id)
+                              );
+                            } else {
+                              form.setValue("publishTo", []);
+                            }
+                          }}
+                        />
+                        <label htmlFor="all" className="text-sm">
+                          Semua
+                        </label>
+                      </div>
+                      {publishToList.map((item) => (
+                        <>
+                          <FormField
+                            key={item.id}
+                            control={form.control}
+                            name="publishTo"
+                            render={({ field }) => {
+                              return (
+                                <FormItem
+                                  key={item.id}
+                                  className="flex flex-row items-start "
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <FormControl>
+                                      <Checkbox
+                                        checked={field.value?.includes(item.id)}
+                                        onCheckedChange={(checked) => {
+                                          return checked
+                                            ? field.onChange([
+                                                ...field.value,
+                                                item.id,
+                                              ])
+                                            : field.onChange(
+                                                field.value?.filter(
+                                                  (value) => value !== item.id
+                                                )
+                                              );
+                                        }}
+                                      />
+                                    </FormControl>
+                                    <FormLabel className="font-normal">
+                                      {item.name}{" "}
+                                    </FormLabel>
+                                  </div>
+                                </FormItem>
+                              );
+                            }}
+                          />
+                          {item.id === "polda" &&
+                            form.getValues("publishTo")?.includes(item.id) && (
+                              <UnitMapping
+                                unit="Polda"
+                                isDetail={false}
+                                sendDataToParent={(data) => setUnitData(data)}
+                              />
+                            )}
+                          {item.id === "satker" &&
+                            form.getValues("publishTo")?.includes(item.id) && (
+                              <UnitMapping
+                                isDetail={false}
+                                unit="Satker"
+                                sendDataToParent={(data) => setSatkerData(data)}
+                              />
+                            )}
+                        </>
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ) : (
+              <FormField
+                control={form.control}
+                name="publishTo"
+                render={() => (
+                  <FormItem>
+                    <FormLabel>Wilayah Publish</FormLabel>
+
+                    <div className="flex flex-row items-center gap-2">
+                      <div className="flex gap-3 items-center">
+                        <Checkbox disabled checked />
+                        <label htmlFor="all" className="text-sm">
+                          {poldaState}
+                        </label>
+                      </div>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Kategori</FormLabel>
+                  <Input
+                    value={field.value}
+                    placeholder="Masukkan Nama Kategori"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="file"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Thumbnail Category</FormLabel>
+                  {files.length < 1 && (
+                    <Fragment>
+                      <div {...getRootProps({ className: "dropzone" })}>
+                        <input {...getInputProps()} />
+                        <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                          <CloudUpload className="text-default-300 w-10 h-10" />
+                          <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                            Tarik file disini atau klik untuk upload.
+                          </h4>
+                          <div className=" text-xs text-muted-foreground">
+                            ( Upload file dengan format .jpg, .jpeg, atau .png.
+                            Ukuran maksimal 100mb.)
+                          </div>
+                        </div>
+                      </div>
+                    </Fragment>
+                  )}
+
+                  {files.length > 0 && (
+                    <div className="flex flex-row gap-2">
+                      <img
+                        src={URL.createObjectURL(files[0])}
+                        className="w-[30%]"
+                        alt="thumbnail"
+                      />
+                      <a
+                        onClick={() => handleRemoveFile(files[0])}
+                        className="cursor-pointer"
+                      >
+                        <Icon icon="fa-solid:times" color="red" />
+                      </a>
+                    </div>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Deskripsi</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Deskripsi" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button
+                type="submit"
+                color="primary"
+                size="md"
+                className="text-xs"
+              >
+                Tambah Kategori
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,661 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  getCategoryDetail,
+  getUserRoles,
+  postCategory,
+} from "@/service/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";
+
+const FormSchema = z.object({
+  title: z.string({
+    required_error: "Required",
+  }),
+  description: z.string({
+    required_error: "Required",
+  }),
+  contentType: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  selectedUser: z
+    .array(z.string())
+    .refine((value) => value.some((item) => item), {
+      message: "Required",
+    }),
+  publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+
+  id: z.string({
+    required_error: "Required",
+  }),
+  file: z.string().optional(),
+});
+
+const listContent = [
+  {
+    id: "1",
+    name: "Foto",
+  },
+  {
+    id: "2",
+    name: "Audio Visual",
+  },
+  {
+    id: "3",
+    name: "Teks",
+  },
+  {
+    id: "4",
+    name: "Audio",
+  },
+];
+
+const publishToList = [
+  {
+    id: "mabes",
+    name: "Nasional",
+  },
+  {
+    id: "polda",
+    name: "Polda",
+  },
+  {
+    id: "satker",
+    name: "Satker",
+  },
+  {
+    id: "internasional",
+    name: "Internasional",
+  },
+];
+
+export default function EditCategoryModal(props: {
+  id: string;
+  thumbnailLink: string;
+  isDetail?: boolean;
+}) {
+  const { id, isDetail, thumbnailLink } = props;
+  const [files, setFiles] = useState<File[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const { toast } = useToast();
+  const roleId = getCookiesDecrypt("urie");
+  const levelNumber = getCookiesDecrypt("ulne");
+  const userLevelId = getCookiesDecrypt("ulie");
+  const poldaState = Cookies.get("state");
+  const router = useRouter();
+  const [satkerData, setSatkerData] = useState<string[]>([]);
+  const [unitData, setUnitData] = useState<string[]>([]);
+  const [userList, setUserList] = useState<
+    { id: string; name: string; isInternal: boolean }[]
+  >([]);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { contentType: [], selectedUser: [], publishTo: [] },
+  });
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop: (acceptedFiles) => {
+      setFiles(acceptedFiles.map((file) => Object.assign(file)));
+    },
+    maxFiles: 1,
+  });
+
+  // useEffect(() => {
+  //   initFetch();
+  // }, [id]);
+
+  const initFetch = async () => {
+    const req = await getCategoryDetail(id);
+    const data = req?.data?.data;
+    form.setValue("id", String(data?.id));
+    form.setValue("title", String(data?.name));
+    form.setValue("description", String(data?.description));
+    form.setValue("contentType", data?.mediaTypes?.split(",") || []);
+    form.setValue(
+      "selectedUser",
+      removeAndReturn(data?.publishedFor, [2, 3, 4])
+    );
+    form.setValue("publishTo", data?.publishedLocation?.split(",") || []);
+    form.setValue("file", thumbnailLink);
+
+    setUnitData(filterString(data?.publishedLocationLevel, "under"));
+    setSatkerData(filterString(data?.publishedLocationLevel, "above"));
+  };
+
+  function removeAndReturn(inputString: string, toRemove: number[]) {
+    const numbers = inputString?.split(",").map(Number);
+
+    const filteredNumbers = numbers?.filter((num) => !toRemove?.includes(num));
+
+    return filteredNumbers?.map(String);
+  }
+
+  function filterString(inputString: string, type: string) {
+    const numbers = inputString?.split(",").map(Number);
+    if (type === "above") {
+      const above700 = numbers?.filter((num) => num > 700);
+
+      return above700?.map(String);
+    } else {
+      const under700 = numbers?.filter((num) => num < 700);
+
+      return under700?.map(String);
+    }
+  }
+
+  const contentType = form.watch("contentType");
+  const isAllContentChecked =
+    contentType && listContent.every((item) => contentType.includes(item.id));
+
+  const users = form.watch("selectedUser");
+  const isAllUserChecked =
+    users && userList.every((item) => users.includes(item.id));
+
+  const target = form.watch("publishTo");
+  const isAllTargetChecked =
+    target && publishToList.every((item) => target.includes(item.id));
+
+  useEffect(() => {
+    getRoles();
+  }, []);
+
+  async function getRoles() {
+    const response = await getUserRoles();
+    let dataRoles = response?.data?.data;
+    for (let i = 0; i < dataRoles.length; i++) {
+      dataRoles[i].id = String(dataRoles[i].id);
+    }
+    setUserList(dataRoles);
+  }
+
+  function removeDuplicates(inputString: string): string {
+    const numbers = inputString.split(",");
+    const uniqueNumbers = Array.from(new Set(numbers));
+    return uniqueNumbers.join(",");
+  }
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    const formMedia = new FormData();
+
+    loading();
+    const unit = unitData?.join(",");
+    const satker = satkerData?.join(",");
+    const join =
+      unitData?.length > 0 && satkerData?.length > 0
+        ? unit + "," + satker
+        : unitData?.length > 0
+        ? unit
+        : satkerData?.length > 0
+        ? satker
+        : "";
+
+    formMedia.append("id", data.id);
+    formMedia.append("name", data.title);
+    formMedia.append("description", data.description);
+    formMedia.append("mediaTypes", data.contentType.join(","));
+    formMedia.append("publishedFor", data.selectedUser.join(","));
+    formMedia.append("publishedLocation", data.publishTo.sort().join(","));
+    formMedia.append("publishedLocationLevel", removeDuplicates(join));
+    if (files?.length > 0) {
+      formMedia.append("file", files[0]);
+    }
+
+    const response = await postCategory(formMedia);
+    close();
+    if (response?.error == true) {
+      error(response.message);
+      return false;
+    }
+    toast({
+      title: "Succes",
+      description: "Kategori berhasil diubah",
+    });
+    router.push("/admin/settings/category?dataChange=true");
+    setIsOpen(false);
+  };
+
+  const handleRemoveFile = (file: File) => {
+    const uploadedFiles = files;
+    const filtered = uploadedFiles.filter((i) => i.name !== file.name);
+    setFiles([...filtered]);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger>
+        <a
+          onClick={() =>{
+            initFetch()
+            setIsOpen(true); } }
+          className="hover:underline cursor-pointer"
+        >
+          {isDetail ? "Detail" : "Edit"}
+        </a>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>Edit Kategori</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="contentType"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Tipe Konten</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex items-center gap-3">
+                      <Checkbox
+                        id="all"
+                        checked={isAllContentChecked}
+                        disabled={isDetail}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "contentType",
+                              listContent.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("contentType", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {listContent.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="contentType"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start"
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    disabled={isDetail}
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="selectedUser"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Target Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        disabled={isDetail}
+                        checked={isAllUserChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "selectedUser",
+                              userList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("selectedUser", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {userList.map((item) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="selectedUser"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={item.id}
+                              className="flex flex-row items-start "
+                            >
+                              <div className="flex items-center gap-3">
+                                <FormControl>
+                                  <Checkbox
+                                    disabled={isDetail}
+                                    checked={field.value?.includes(item.id)}
+                                    onCheckedChange={(checked) => {
+                                      return checked
+                                        ? field.onChange([
+                                            ...field.value,
+                                            item.id,
+                                          ])
+                                        : field.onChange(
+                                            field.value?.filter(
+                                              (value) => value !== item.id
+                                            )
+                                          );
+                                    }}
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.name}
+                                </FormLabel>
+                              </div>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {Number(levelNumber) === 1 ? (
+              <FormField
+                control={form.control}
+                name="publishTo"
+                render={() => (
+                  <FormItem>
+                    <FormLabel>Wilayah Publish</FormLabel>
+
+                    <div className="flex flex-row items-center gap-2">
+                      <div className="flex gap-3 items-center">
+                        <Checkbox
+                          id="all"
+                          checked={isAllTargetChecked}
+                          disabled={isDetail}
+                          onCheckedChange={(checked) => {
+                            if (checked) {
+                              form.setValue(
+                                "publishTo",
+                                publishToList.map((item) => item.id)
+                              );
+                            } else {
+                              form.setValue("publishTo", []);
+                            }
+                          }}
+                        />
+                        <label htmlFor="all" className="text-sm">
+                          Semua
+                        </label>
+                      </div>
+                      {publishToList.map((item) => (
+                        <>
+                          <FormField
+                            key={item.id}
+                            control={form.control}
+                            name="publishTo"
+                            render={({ field }) => {
+                              return (
+                                <FormItem
+                                  key={item.id}
+                                  className="flex flex-row items-start "
+                                >
+                                  <div className="flex items-center gap-3">
+                                    <FormControl>
+                                      <Checkbox
+                                        disabled={isDetail}
+                                        checked={field.value?.includes(item.id)}
+                                        onCheckedChange={(checked) => {
+                                          return checked
+                                            ? field.onChange([
+                                                ...field.value,
+                                                item.id,
+                                              ])
+                                            : field.onChange(
+                                                field.value?.filter(
+                                                  (value) => value !== item.id
+                                                )
+                                              );
+                                        }}
+                                      />
+                                    </FormControl>
+                                    <FormLabel className="font-normal">
+                                      {item.name}{" "}
+                                    </FormLabel>
+                                  </div>
+                                </FormItem>
+                              );
+                            }}
+                          />
+                          {item.id === "polda" &&
+                            form.getValues("publishTo")?.includes(item.id) && (
+                              <UnitMapping
+                                unit="Polda"
+                                sendDataToParent={(data) => setUnitData(data)}
+                                isDetail={isDetail ? true : false}
+                                initData={unitData}
+                              />
+                            )}
+                          {item.id === "satker" &&
+                            form.getValues("publishTo")?.includes(item.id) && (
+                              <UnitMapping
+                                unit="Satker"
+                                sendDataToParent={(data) => setSatkerData(data)}
+                                isDetail={isDetail ? true : false}
+                                initData={satkerData}
+                              />
+                            )}
+                        </>
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            ) : (
+              <FormField
+                control={form.control}
+                name="publishTo"
+                render={() => (
+                  <FormItem>
+                    <FormLabel>Wilayah Publish</FormLabel>
+
+                    <div className="flex flex-row items-center gap-2">
+                      <div className="flex gap-3 items-center">
+                        <Checkbox disabled checked />
+                        <label htmlFor="all" className="text-sm">
+                          {poldaState}
+                        </label>
+                      </div>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Nama Kategori</FormLabel>
+                  <Input
+                    value={field.value}
+                    readOnly={isDetail}
+                    placeholder="Masukkan Nama Kategori"
+                    onChange={field.onChange}
+                  />
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {isDetail ? (
+              <div className="flex flex-row gap-2">
+                <img src={thumbnailLink} className="w-[30%]" alt="thumbnail" />
+              </div>
+            ) : (
+              <FormField
+                control={form.control}
+                name="file"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Thumbnail Category</FormLabel>
+                    {files.length < 1 && field.value === "" && (
+                      <Fragment>
+                        <div {...getRootProps({ className: "dropzone" })}>
+                          <input {...getInputProps()} />
+                          <div className=" w-full text-center border-dashed border border-default-200 dark:border-default-300  rounded-md py-[52px] flex  items-center flex-col">
+                            <CloudUpload className="text-default-300 w-10 h-10" />
+                            <h4 className=" text-2xl font-medium mb-1 mt-3 text-card-foreground/80">
+                              Tarik file disini atau klik untuk upload.
+                            </h4>
+                            <div className=" text-xs text-muted-foreground">
+                              ( Upload file dengan format .jpg, .jpeg, atau
+                              .png. Ukuran maksimal 100mb.)
+                            </div>
+                          </div>
+                        </div>
+                      </Fragment>
+                    )}
+                    {field.value !== "" && (
+                      <div className="flex flex-row gap-2">
+                        <img
+                          src={field.value}
+                          className="w-[30%]"
+                          alt="thumbnail"
+                        />
+                        <a
+                          onClick={() => form.setValue("file", "")}
+                          className="cursor-pointer"
+                        >
+                          <Icon icon="fa-solid:times" color="red" />
+                        </a>
+                      </div>
+                    )}
+
+                    {files.length > 0 && (
+                      <div className="flex flex-row gap-2">
+                        <img
+                          src={URL.createObjectURL(files[0])}
+                          className="w-[30%]"
+                          alt="thumbnail"
+                        />
+                        <a
+                          onClick={() => handleRemoveFile(files[0])}
+                          className="cursor-pointer"
+                        >
+                          <Icon icon="fa-solid:times" color="red" />
+                        </a>
+                      </div>
+                    )}
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Deskripsi</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      readOnly={isDetail}
+                      placeholder="Deskripsi"
+                      //   className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {!isDetail && (
+              <DialogFooter>
+                <Button
+                  type="submit"
+                  color="primary"
+                  size="md"
+                  className="text-xs"
+                >
+                  Edit Kategori
+                </Button>
+              </DialogFooter>
+            )}
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/[locale]/(protected)/admin/settings/category/component/status.tsx

@@ -0,0 +1,48 @@
+"use client";
+import { Switch } from "@/components/ui/switch";
+import { error } from "@/config/swal";
+import { useRouter } from "@/i18n/routing";
+import { publishUnpublishCategory } from "@/service/settings/settings";
+
+export default function StatusToogle(props: {
+  id: number;
+  initValue: boolean;
+}) {
+  const { id, initValue } = props;
+  const router = useRouter();
+  // const publishCategory = async (id: number, status: string) => {
+  //   const response = await publishUnpublishCategory(id, status);
+  //   console.log(response);
+  //   if (response?.error) {
+  //     error(response.message);
+  //     return false;
+  //   }
+  //   router.push("/admin/settings/category?dataChange=true");
+  // };
+  const publishCategory = async (id: number, status: string) => {
+    const response = await publishUnpublishCategory(id, status);
+    console.log("API Response:", response);
+
+    // cek error interceptor
+    if (response?.error) {
+      error(response.message || "Terjadi kesalahan");
+      return false;
+    }
+
+    // cek flag success asli dari backend
+    if (response?.data?.success === false) {
+      error(response?.data?.message || "Terjadi kesalahan");
+      return false;
+    }
+
+    router.push("/admin/settings/category?dataChange=true");
+  };
+
+  return (
+    <Switch
+      id={String(id)}
+      checked={initValue}
+      onCheckedChange={(e) => publishCategory(id, String(e))}
+    />
+  );
+}

app/[locale]/(protected)/admin/settings/category/component/table.tsx

@@ -0,0 +1,312 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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/table/table-pagination";
+import columns from "./column";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import { getCategories } from "@/service/settings/settings";
+import CreateCategoryModal from "./create";
+import { useTranslations } from "next-intl";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+const AdminCategoryTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const t = useTranslations("Menu");
+  const dataChange = searchParams?.get("dataChange");
+  const [openModal, setOpenModal] = React.useState(false);
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [region, setRegion] = React.useState<any>();
+  const [regionFilter, setRegionFilter] = React.useState<string[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  const manualRegions = [
+    { id: "semua", label: "Semua" },
+    { id: "mabes", label: "Mabes" },
+    { id: "polda", label: "Polda" },
+    { id: "satker", label: "Satker" },
+    { id: "internasional", label: "Internasional" },
+  ];
+
+  React.useEffect(() => {
+    if (dataChange) {
+      router.push("/admin/settings/category");
+    }
+    fetchData();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page, regionFilter]);
+
+  async function fetchData() {
+    try {
+      loading();
+
+      const regionQuery = regionFilter.length
+        ? `&publishedLocation=${regionFilter.join(",")}`
+        : "";
+
+      const statusQuery = statusFilter.length
+        ? `&isPublish=${statusFilter.join(",")}`
+        : "";
+
+      const response = await getCategories(
+        page - 1,
+        `${regionQuery}${statusQuery}`
+      );
+
+      const data = response?.data?.data;
+      const contentData = data?.content;
+
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * 10 + index + 1;
+      });
+
+      setDataTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+      close();
+    } catch (error) {
+      console.error("Error fetching categories:", error);
+    }
+  }
+
+  const handleChange = (type: string, id: string, checked: boolean) => {
+    if (type === "region") {
+      if (id === "semua") {
+        if (checked) {
+          // Pilih semua (kecuali 'semua' itu sendiri)
+          setRegionFilter(["mabes", "polda", "satker", "internasional"]);
+        } else {
+          setRegionFilter([]);
+        }
+      } else {
+        let updated = checked
+          ? [...regionFilter, id]
+          : regionFilter.filter((val) => val !== id);
+
+        // Jika semua sudah tercentang, maka otomatis centang "semua"
+        const allIds = ["mabes", "polda", "satker", "internasional"];
+        const allSelected = allIds.every((val) => updated.includes(val));
+
+        setRegionFilter(allSelected ? allIds : updated);
+      }
+    } else {
+      if (checked) {
+        setStatusFilter([...statusFilter, id]);
+      } else {
+        setStatusFilter(statusFilter.filter((val: any) => val !== id));
+      }
+    }
+  };
+
+  return (
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">{t("category", { defaultValue: "Category" })}</p>
+        <CreateCategoryModal />
+      </div>
+      <div className="flex items-end justify-end">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button size="md" variant="outline">
+              Filter
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 ">
+            <div className="flex flex-col gap-2 px-2">
+              <div className="flex justify-between text-sm">
+                <p>Filter</p>
+                <a
+                  onClick={() => fetchData()}
+                  className="cursor-pointer text-primary"
+                >
+                  Simpan
+                </a>
+              </div>
+              <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
+                <p>Wilayah</p>
+                {manualRegions.map((region) => (
+                  <div key={region.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={region.id}
+                      checked={
+                        region.id === "semua"
+                          ? ["mabes", "polda", "satker", "internasional"].every(
+                              (val) => regionFilter.includes(val)
+                            )
+                          : regionFilter.includes(region.id)
+                      }
+                      onCheckedChange={(e) =>
+                        handleChange("region", region.id, Boolean(e))
+                      }
+                    />
+                    <label
+                      htmlFor={region.id}
+                      className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      {region.label}
+                    </label>
+                  </div>
+                ))}
+                <p className="mt-3">Status</p>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="aktif"
+                    checked={statusFilter.includes("true")}
+                    onCheckedChange={(e) =>
+                      handleChange("status", "true", Boolean(e))
+                    }
+                  />
+                  <label
+                    htmlFor="aktif"
+                    className="text-xs font-medium leading-none"
+                  >
+                    Aktif
+                  </label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="nonaktif"
+                    checked={statusFilter.includes("false")}
+                    onCheckedChange={(e) =>
+                      handleChange("status", "false", Boolean(e))
+                    }
+                  />
+                  <label
+                    htmlFor="nonaktif"
+                    className="text-xs font-medium leading-none"
+                  >
+                    Non Aktif
+                  </label>
+                </div>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default AdminCategoryTable;

app/[locale]/(protected)/admin/settings/category/component/unit-mapping.tsx

@@ -0,0 +1,253 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  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 "@/service/task";
+
+const FormSchema = z.object({
+  items: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+});
+
+interface UnitType {
+  id: number;
+  name: string;
+  subDestination: { id: number; name: string }[];
+}
+
+export function UnitMapping(props: {
+  unit: string;
+  sendDataToParent: (data: string[]) => void;
+  isDetail: boolean;
+  initData?: string[];
+}) {
+  const { unit, sendDataToParent, isDetail } = props;
+  const [unitList, setUnitList] = useState<UnitType[]>([]);
+  const [satkerList, setSatkerList] = useState<{ id: number; name: string }[]>(
+    []
+  );
+  const [isOpen, setIsOpen] = useState(false);
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      items: props.initData ? props.initData : [],
+    },
+  });
+
+  useEffect(() => {
+    async function initState() {
+      const response = await getUserLevelForAssignments();
+      setupUnit(response?.data?.data.list);
+    }
+
+    initState();
+  }, []);
+
+  const unitType = form.watch("items");
+
+  const isAllUnitChecked = unitType && unitList.every((item) =>
+    unitType.includes(String(item.id))
+  );
+  const isAllSatkerChecked = unitType && satkerList.every((item) =>
+    unitType.includes(String(item.id))
+  );
+
+  const setupUnit = (data: UnitType[]) => {
+    const temp = data.filter((a) => a.name.includes("POLDA"));
+    const temp2 = data.filter((a) => a.name.includes("SATKER"));
+    setUnitList(temp);
+    setSatkerList(temp2[0].subDestination);
+  };
+
+  useEffect(() => {
+    sendDataToParent(form.getValues("items"));
+  }, [unitType]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <a
+          onClick={() => setIsOpen(true)}
+          className="text-primary cursor-pointer text-xs mr-3"
+        >
+          Pilih {unit}
+        </a>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>{unit}</DialogTitle>
+        </DialogHeader>
+        {unit === "Polda" ? (
+          <Form {...form}>
+            <form className="flex flex-col gap-2">
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  id={`all-${unit}`}
+                  checked={isAllUnitChecked}
+                  disabled={isDetail}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      form.setValue(
+                        "items",
+                        unitList.map((item) => String(item.id))
+                      );
+                    } else {
+                      form.setValue("items", []);
+                    }
+                  }}
+                />
+                <label htmlFor="all" className="text-sm text-black uppercase">
+                  SEMUA {unit}
+                </label>
+              </div>
+              <FormField
+                control={form.control}
+                name="items"
+                render={() => (
+                  <FormItem
+                    className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}
+                  >
+                    {unitList?.map((item: any) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="items"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={String(item.id)}
+                              className="flex flex-row items-center space-x-3 space-y-0"
+                            >
+                              <FormControl>
+                                <Checkbox
+                                  disabled={isDetail}
+                                  checked={field.value?.includes(
+                                    String(item.id)
+                                  )}
+                                  onCheckedChange={(checked) => {
+                                    return checked
+                                      ? field.onChange([
+                                          ...field.value,
+                                          String(item.id),
+                                        ])
+                                      : field.onChange(
+                                          field.value?.filter(
+                                            (value) => value !== String(item.id)
+                                          )
+                                        );
+                                  }}
+                                />
+                              </FormControl>
+                              <p className="text-sm text-black">{item.name}</p>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        ) : (
+          <Form {...form}>
+            <form className="flex flex-col gap-2">
+              <div className="flex items-center gap-3">
+                <Checkbox
+                  id={`all-${unit}`}
+                  checked={isAllSatkerChecked}
+                  disabled={isDetail}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      form.setValue(
+                        "items",
+                        satkerList.map((item) => String(item.id))
+                      );
+                    } else {
+                      form.setValue("items", []);
+                    }
+                  }}
+                />
+                <label htmlFor="all" className="text-sm text-black uppercase">
+                  SEMUA {unit}
+                </label>
+              </div>
+              <FormField
+                control={form.control}
+                name="items"
+                render={() => (
+                  <FormItem
+                    className={`grid grid-cols-${unit === "Polda" ? "2" : "3"}`}
+                  >
+                    {satkerList?.map((item: any) => (
+                      <FormField
+                        key={item.id}
+                        control={form.control}
+                        name="items"
+                        render={({ field }) => {
+                          return (
+                            <FormItem
+                              key={String(item.id)}
+                              className="flex flex-row items-center space-x-3 space-y-0"
+                            >
+                              <FormControl>
+                                <Checkbox
+                                  disabled={isDetail}
+                                  checked={field.value?.includes(
+                                    String(item.id)
+                                  )}
+                                  onCheckedChange={(checked) => {
+                                    return checked
+                                      ? field.onChange([
+                                          ...field.value,
+                                          String(item.id),
+                                        ])
+                                      : field.onChange(
+                                          field.value?.filter(
+                                            (value) => value !== String(item.id)
+                                          )
+                                        );
+                                  }}
+                                />
+                              </FormControl>
+                              <p className="text-sm text-black">{item.name}</p>
+                            </FormItem>
+                          );
+                        }}
+                      />
+                    ))}
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

app/[locale]/(protected)/admin/settings/category/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import AdminCategoryTable from "./component/table";
+
+export default function AdminCategory() {
+  return (
+    <>
+      <SiteBreadcrumb />
+      <AdminCategoryTable />
+    </>
+  );
+}

app/[locale]/(protected)/admin/settings/faq/component/column.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+import { Link, useRouter } from "@/i18n/routing";
+import { error } from "@/config/swal";
+import { deleteCategory, deleteDataFAQ } from "@/service/settings/settings";
+import { useToast } from "@/components/ui/use-toast";
+// import EditCategoryModal from "./edit";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarMenu,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+import { htmlToString } from "@/utils/globals";
+import EditFAQModal from "./edit";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "question",
+    header: "Pertanyaan",
+    cell: ({ row }) => (
+      <span className="normal-case">
+        {htmlToString(row.getValue("question"))}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "answer",
+    header: "Answer",
+    cell: ({ row }) => (
+      <span className="normal-case">
+        {htmlToString(row.getValue("answer"))}
+      </span>
+    ),
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const router = useRouter();
+      const { toast } = useToast();
+
+      const faqDelete = async (id: string) => {
+        const response = await deleteDataFAQ(id);
+        console.log(response);
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+        toast({
+          title: "Sukses",
+          description: "Berhasil Delete",
+        });
+        router.push("/admin/settings/faq?dataChange=true");
+      };
+      return (
+        <Menubar className="border-none">
+          <MenubarMenu>
+            <MenubarTrigger>
+              <Button
+                size="icon"
+                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+              >
+                <MoreVertical className="h-4 w-4 text-default-800" />
+              </Button>
+            </MenubarTrigger>
+            <MenubarContent className="flex flex-col gap-2 justify-center items-start p-4">
+              <EditFAQModal id={row.original.id} isDetail={true} />
+
+              <EditFAQModal id={row.original.id} isDetail={false} />
+
+              <a
+                onClick={() => faqDelete(row.original.id)}
+                className="hover:underline cursor-pointer hover:text-destructive"
+              >
+                Delete
+              </a>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/faq/component/create.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+} from "@/service/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({
+    required_error: "Required",
+  }),
+  question: z.string({
+    required_error: "Required",
+  }),
+  publishTo: z.string({
+    required_error: "Required",
+  }),
+
+  // publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
+  //   message: "Required",
+  // }),
+});
+
+const publishToList = [
+  {
+    id: "mabes",
+    name: "Nasional",
+  },
+  {
+    id: "polda",
+    name: "Polda",
+  },
+  {
+    id: "satker",
+    name: "Satker",
+  },
+  {
+    id: "internasional",
+    name: "Internasional",
+  },
+];
+
+export default function CreateFAQModal() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const t = useTranslations("Menu");
+  const [isOpen, setIsOpen] = useState(false);
+  const [satkerData, setSatkerData] = useState<string[]>([]);
+  const [unitData, setUnitData] = useState<string[]>([]);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { publishTo: "wilayah" },
+  });
+
+  const target = form.watch("publishTo");
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
+  );
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    const request = {
+      question: data.question,
+      answer: data.answer,
+      isInternational: data.publishTo === "wilayah" ? false : true,
+      isActive: true,
+    };
+
+    const response = await postDataFAQ(request);
+    close();
+    if (response?.error) {
+      toast({ title: stringify(response.message), variant: "destructive" });
+      return false;
+    }
+    toast({
+      title: "Succes",
+      description: "FAQ berhasil dibuat",
+    });
+    router.push("/admin/settings/faq?dataChange=true");
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button color="primary" size="md">
+          {t("add", { defaultValue: "Add" })} FAQ
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>{t("add", { defaultValue: "Add" })} FAQ</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="publishTo"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>Wilayah Publish</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      className="flex flex-row space-x-1"
+                    >
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="wilayah" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Wilayah</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="international" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          Internasional
+                        </FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {/* <FormField
+              control={form.control}
+              name="publishTo"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Wilayah Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        checked={isAllTargetChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "publishTo",
+                              publishToList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("publishTo", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {publishToList.map((item) => (
+                      <>
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="publishTo"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start "
+                              >
+                                <div className="flex items-center gap-3">
+                                  <FormControl>
+                                    <Checkbox
+                                      checked={field.value?.includes(item.id)}
+                                      onCheckedChange={(checked) => {
+                                        return checked
+                                          ? field.onChange([
+                                              ...field.value,
+                                              item.id,
+                                            ])
+                                          : field.onChange(
+                                              field.value?.filter(
+                                                (value) => value !== item.id
+                                              )
+                                            );
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormLabel className="font-normal">
+                                    {item.name}{" "}
+                                  </FormLabel>
+                                </div>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                        {item.id === "polda" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              unit="Polda"
+                              isDetail={false}
+                              sendDataToParent={(data) => setUnitData(data)}
+                            />
+                          )}
+                        {item.id === "satker" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              isDetail={false}
+                              unit="Satker"
+                              sendDataToParent={(data) => setSatkerData(data)}
+                            />
+                          )}
+                      </>
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+
+            <FormField
+              control={form.control}
+              name="question"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Pertanyaan</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Masukkan pertanyaan" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="answer"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Jawaban</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Masukkan jawaban" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button
+                type="submit"
+                color="primary"
+                size="md"
+                className="text-xs"
+              >
+                Tambah FAQ
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,325 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  detailDataFAQ,
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+} from "@/service/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 "@/utils/globals";
+
+const FormSchema = z.object({
+  answer: z.string({
+    required_error: "Required",
+  }),
+  question: z.string({
+    required_error: "Required",
+  }),
+  publishTo: z.string({
+    required_error: "Required",
+  }),
+
+  // publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
+  //   message: "Required",
+  // }),
+});
+
+const publishToList = [
+  {
+    id: "mabes",
+    name: "Nasional",
+  },
+  {
+    id: "polda",
+    name: "Polda",
+  },
+  {
+    id: "satker",
+    name: "Satker",
+  },
+  {
+    id: "internasional",
+    name: "Internasional",
+  },
+];
+
+export default function EditFAQModal(props: { id: string; isDetail: boolean }) {
+  const { id, isDetail } = props;
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  useEffect(() => {
+    initState();
+  }, [id]);
+
+  const initState = async () => {
+    const res = await detailDataFAQ(id);
+    const data = res?.data?.data;
+    form.setValue("question", htmlToString(data.question));
+    form.setValue("answer", htmlToString(data.answer));
+    form.setValue(
+      "publishTo",
+      data.isInternational ? "international" : "wilayah"
+    );
+  };
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    const request = {
+      id: Number(id),
+      question: data.question,
+      answer: data.answer,
+      isInternational: data.publishTo === "wilayah" ? false : true,
+      isActive: true,
+    };
+
+    const response = await postDataFAQ(request);
+    close();
+    if (response?.error) {
+      toast({ title: stringify(response.message), variant: "destructive" });
+      return false;
+    }
+    toast({
+      title: "Succes",
+      description: "FAQ berhasil diubah",
+    });
+    router.push("/admin/settings/faq?dataChange=true");
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <a className="hover:underline cursor-pointer">
+          {isDetail ? "Detail" : "Edit"}
+        </a>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>{isDetail ? "Detail" : "Edit"} FAQ</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="publishTo"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>Wilayah Publish</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      className="flex flex-row space-x-1"
+                    >
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="wilayah" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Wilayah</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="international" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          Internasional
+                        </FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {/* <FormField
+              control={form.control}
+              name="publishTo"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Wilayah Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        disabled={isDetail}
+                        checked={isAllTargetChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "publishTo",
+                              publishToList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("publishTo", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {publishToList.map((item) => (
+                      <>
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="publishTo"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start "
+                              >
+                                <div className="flex items-center gap-3">
+                                  <FormControl>
+                                    <Checkbox
+                                      disabled={isDetail}
+                                      checked={field.value?.includes(item.id)}
+                                      onCheckedChange={(checked) => {
+                                        return checked
+                                          ? field.onChange([
+                                              ...field.value,
+                                              item.id,
+                                            ])
+                                          : field.onChange(
+                                              field.value?.filter(
+                                                (value) => value !== item.id
+                                              )
+                                            );
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormLabel className="font-normal">
+                                    {item.name}{" "}
+                                  </FormLabel>
+                                </div>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                        {item.id === "polda" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              unit="Polda"
+                              isDetail={isDetail}
+                              sendDataToParent={(data) => setUnitData(data)}
+                            />
+                          )}
+                        {item.id === "satker" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              isDetail={isDetail}
+                              unit="Satker"
+                              sendDataToParent={(data) => setSatkerData(data)}
+                            />
+                          )}
+                      </>
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+
+            <FormField
+              control={form.control}
+              name="question"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Pertanyaan</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      readOnly={isDetail}
+                      placeholder="Masukkan pertanyaan"
+                      value={field.value}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="answer"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Jawaban</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      readOnly={isDetail}
+                      placeholder="Masukkan jawaban"
+                      value={field.value}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {!isDetail && (
+              <DialogFooter>
+                <Button
+                  type="submit"
+                  color="primary"
+                  size="md"
+                  className="text-xs"
+                >
+                  Edit FAQ
+                </Button>
+              </DialogFooter>
+            )}
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/[locale]/(protected)/admin/settings/faq/component/table.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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/table/table-pagination";
+import columns from "./column";
+
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import { NewCampaignIcon } from "@/components/icon";
+import { getCategories, getListFAQ } from "@/service/settings/settings";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import CreateFAQModal from "./create";
+
+const AdminFAQTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const dataChange = searchParams?.get("dataChange");
+  const [openModal, setOpenModal] = React.useState(false);
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  React.useEffect(() => {
+    if (dataChange) {
+      router.push("/admin/settings/faq");
+    }
+    fetchData();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const response = await getListFAQ();
+      const data = response?.data?.data;
+      console.log("respone", response);
+      data.forEach((item: any, index: number) => {
+        item.no = (page - 1) * 10 + index + 1;
+      });
+
+      setDataTable(data);
+      setTotalData(data?.length);
+      setTotalPage(1);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">FAQ</p>
+        <CreateFAQModal />
+      </div>
+
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      {/* <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      /> */}
+    </div>
+  );
+};
+
+export default AdminFAQTable;

app/[locale]/(protected)/admin/settings/faq/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import AdminFAQTable from "./component/table";
+
+export default function FAQSetting() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <AdminFAQTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/settings/feedback/component/column.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+import { Link, useRouter } from "@/i18n/routing";
+import { error } from "@/config/swal";
+import { deleteCategory, deleteDataFAQ } from "@/service/settings/settings";
+import { useToast } from "@/components/ui/use-toast";
+// import EditCategoryModal from "./edit";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarMenu,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+import { htmlToString } from "@/utils/globals";
+import EditFAQModal from "./edit";
+import EditFeedbackModal from "./edit";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "question",
+    header: "Poin Penilaian",
+    cell: ({ row }) => (
+      <span className="normal-case">
+        {htmlToString(row.getValue("question"))}
+      </span>
+    ),
+  },
+  {
+    accessorKey: "isInternational",
+    header: "Wilayah Publish",
+    cell: ({ row }) => (
+      <span className="normal-case">
+        {row.getValue("isInternational") ? "Internasional" : "Wilayah"}
+      </span>
+    ),
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const router = useRouter();
+      const { toast } = useToast();
+
+      const faqDelete = async (id: string) => {
+        const response = await deleteDataFAQ(id);
+        console.log(response);
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+        toast({
+          title: "Sukses",
+          description: "Berhasil Delete",
+        });
+        router.push("/admin/settings/feedback?dataChange=true");
+      };
+      return (
+        <Menubar className="border-none">
+          <MenubarMenu>
+            <MenubarTrigger>
+              <Button
+                size="icon"
+                className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+              >
+                <MoreVertical className="h-4 w-4 text-default-800" />
+              </Button>
+            </MenubarTrigger>
+            <MenubarContent className="flex flex-col gap-2 justify-center items-start p-4">
+              <EditFeedbackModal
+                id={row.original.id}
+                isDetail={true}
+                data={row.original}
+              />
+
+              <EditFeedbackModal
+                id={row.original.id}
+                isDetail={false}
+                data={row.original}
+              />
+
+              <a
+                onClick={() => faqDelete(row.original.id)}
+                className="hover:underline cursor-pointer hover:text-destructive"
+              >
+                Delete
+              </a>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/feedback/component/create.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+  postDataFeedback,
+} from "@/service/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({
+    required_error: "Required",
+  }),
+  publishTo: z.string({
+    required_error: "Required",
+  }),
+
+  // publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
+  //   message: "Required",
+  // }),
+});
+
+const publishToList = [
+  {
+    id: "mabes",
+    name: "Nasional",
+  },
+  {
+    id: "polda",
+    name: "Polda",
+  },
+  {
+    id: "satker",
+    name: "Satker",
+  },
+  {
+    id: "internasional",
+    name: "Internasional",
+  },
+];
+
+export default function CreateFAQModal() {
+  const router = useRouter();
+  const { toast } = useToast();
+  const t = useTranslations("Menu");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: { publishTo: "wilayah" },
+  });
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    const request = {
+      question: data.question,
+      isInternational: data.publishTo === "wilayah" ? false : true,
+      isActive: true,
+    };
+
+    const response = await postDataFeedback(request);
+    close();
+    if (response?.error) {
+      toast({ title: stringify(response.message), variant: "destructive" });
+      return false;
+    }
+    toast({
+      title: "Succes",
+      description: "Feedback berhasil dibuat",
+    });
+    router.push("/admin/settings/feedback?dataChange=true");
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button color="primary" size="md">
+          {t("add", { defaultValue: "Add" })} Feedback
+        </Button>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>{t("add", { defaultValue: "Add" })} Feedback</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="publishTo"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>Wilayah Publish</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      className="flex flex-row space-x-1"
+                    >
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="wilayah" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Wilayah</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="international" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          Internasional
+                        </FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {/* <FormField
+              control={form.control}
+              name="publishTo"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Wilayah Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        checked={isAllTargetChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "publishTo",
+                              publishToList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("publishTo", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {publishToList.map((item) => (
+                      <>
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="publishTo"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start "
+                              >
+                                <div className="flex items-center gap-3">
+                                  <FormControl>
+                                    <Checkbox
+                                      checked={field.value?.includes(item.id)}
+                                      onCheckedChange={(checked) => {
+                                        return checked
+                                          ? field.onChange([
+                                              ...field.value,
+                                              item.id,
+                                            ])
+                                          : field.onChange(
+                                              field.value?.filter(
+                                                (value) => value !== item.id
+                                              )
+                                            );
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormLabel className="font-normal">
+                                    {item.name}{" "}
+                                  </FormLabel>
+                                </div>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                        {item.id === "polda" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              unit="Polda"
+                              isDetail={false}
+                              sendDataToParent={(data) => setUnitData(data)}
+                            />
+                          )}
+                        {item.id === "satker" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              isDetail={false}
+                              unit="Satker"
+                              sendDataToParent={(data) => setSatkerData(data)}
+                            />
+                          )}
+                      </>
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+
+            <FormField
+              control={form.control}
+              name="question"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Pertanyaan</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Masukkan pertanyaan" {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button
+                type="submit"
+                color="primary"
+                size="md"
+                className="text-xs"
+              >
+                Tambah Feeback
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,311 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useRouter } from "@/i18n/routing";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  detailDataFAQ,
+  detailDataFeedback,
+  getUserRoles,
+  postCategory,
+  postDataFAQ,
+  postDataFeedback,
+} from "@/service/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 "@/utils/globals";
+
+const FormSchema = z.object({
+  question: z.string({
+    required_error: "Required",
+  }),
+  publishTo: z.string({
+    required_error: "Required",
+  }),
+
+  // publishTo: z.array(z.string()).refine((value) => value.some((item) => item), {
+  //   message: "Required",
+  // }),
+});
+
+const publishToList = [
+  {
+    id: "mabes",
+    name: "Nasional",
+  },
+  {
+    id: "polda",
+    name: "Polda",
+  },
+  {
+    id: "satker",
+    name: "Satker",
+  },
+  {
+    id: "internasional",
+    name: "Internasional",
+  },
+];
+
+export default function EditFeedbackModal(props: {
+  id: string;
+  isDetail: boolean;
+  data: {
+    id: number;
+    question: string;
+    isInternational: boolean;
+    isActive: boolean;
+  };
+}) {
+  const { id, isDetail, data } = props;
+  const router = useRouter();
+  const { toast } = useToast();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  useEffect(() => {
+    initState();
+  }, [id]);
+
+  const initState = async () => {
+    form.setValue("question", htmlToString(data.question));
+    form.setValue(
+      "publishTo",
+      data.isInternational ? "international" : "wilayah"
+    );
+  };
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    const request = {
+      id: Number(id),
+      question: data.question,
+      isInternational: data.publishTo === "wilayah" ? false : true,
+      isActive: true,
+    };
+
+    const response = await postDataFeedback(request);
+    close();
+    if (response?.error) {
+      toast({ title: stringify(response.message), variant: "destructive" });
+      return false;
+    }
+    toast({
+      title: "Succes",
+      description: "Feedback berhasil diubah",
+    });
+    router.push("/admin/settings/feedback?dataChange=true");
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <a className="hover:underline cursor-pointer">
+          {isDetail ? "Detail" : "Edit"}
+        </a>
+      </DialogTrigger>
+      <DialogContent size="md">
+        <DialogHeader>
+          <DialogTitle>{isDetail ? "Detail" : "Edit"} Feedback</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-3 bg-white rounded-sm"
+          >
+            <FormField
+              control={form.control}
+              name="publishTo"
+              render={({ field }) => (
+                <FormItem className="space-y-3">
+                  <FormLabel>Wilayah Publish</FormLabel>
+                  <FormControl>
+                    <RadioGroup
+                      onValueChange={field.onChange}
+                      value={field.value}
+                      className="flex flex-row space-x-1"
+                    >
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="wilayah" />
+                        </FormControl>
+                        <FormLabel className="font-normal">Wilayah</FormLabel>
+                      </FormItem>
+                      <FormItem className="flex items-center space-x-3 space-y-0">
+                        <FormControl>
+                          <RadioGroupItem value="international" />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          Internasional
+                        </FormLabel>
+                      </FormItem>
+                    </RadioGroup>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {/* <FormField
+              control={form.control}
+              name="publishTo"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Wilayah Publish</FormLabel>
+
+                  <div className="flex flex-row items-center gap-2">
+                    <div className="flex gap-3 items-center">
+                      <Checkbox
+                        id="all"
+                        disabled={isDetail}
+                        checked={isAllTargetChecked}
+                        onCheckedChange={(checked) => {
+                          if (checked) {
+                            form.setValue(
+                              "publishTo",
+                              publishToList.map((item) => item.id)
+                            );
+                          } else {
+                            form.setValue("publishTo", []);
+                          }
+                        }}
+                      />
+                      <label htmlFor="all" className="text-sm">
+                        Semua
+                      </label>
+                    </div>
+                    {publishToList.map((item) => (
+                      <>
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="publishTo"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start "
+                              >
+                                <div className="flex items-center gap-3">
+                                  <FormControl>
+                                    <Checkbox
+                                      disabled={isDetail}
+                                      checked={field.value?.includes(item.id)}
+                                      onCheckedChange={(checked) => {
+                                        return checked
+                                          ? field.onChange([
+                                              ...field.value,
+                                              item.id,
+                                            ])
+                                          : field.onChange(
+                                              field.value?.filter(
+                                                (value) => value !== item.id
+                                              )
+                                            );
+                                      }}
+                                    />
+                                  </FormControl>
+                                  <FormLabel className="font-normal">
+                                    {item.name}{" "}
+                                  </FormLabel>
+                                </div>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                        {item.id === "polda" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              unit="Polda"
+                              isDetail={isDetail}
+                              sendDataToParent={(data) => setUnitData(data)}
+                            />
+                          )}
+                        {item.id === "satker" &&
+                          form.getValues("publishTo")?.includes(item.id) && (
+                            <UnitMapping
+                              isDetail={isDetail}
+                              unit="Satker"
+                              sendDataToParent={(data) => setSatkerData(data)}
+                            />
+                          )}
+                      </>
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            /> */}
+
+            <FormField
+              control={form.control}
+              name="question"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Pertanyaan</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      readOnly={isDetail}
+                      placeholder="Masukkan pertanyaan"
+                      value={field.value}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {!isDetail && (
+              <DialogFooter>
+                <Button
+                  type="submit"
+                  color="primary"
+                  size="md"
+                  className="text-xs"
+                >
+                  Edit Feedback
+                </Button>
+              </DialogFooter>
+            )}
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/[locale]/(protected)/admin/settings/feedback/component/table.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} 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/table/table-pagination";
+import columns from "./column";
+
+import { listEnableCategory } from "@/service/content/content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import { NewCampaignIcon } from "@/components/icon";
+import {
+  getCategories,
+  getListFAQ,
+  getListFeedback,
+} from "@/service/settings/settings";
+
+import CreateFAQModal from "./create";
+import { useTranslations } from "next-intl";
+
+const AdminFeedbackTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const dataChange = searchParams?.get("dataChange");
+
+  const [openModal, setOpenModal] = React.useState(false);
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  React.useEffect(() => {
+    if (dataChange) {
+      router.push("/admin/settings/feedback");
+    }
+    fetchData();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page]);
+
+  async function fetchData() {
+    try {
+      loading();
+      const response = await getListFeedback();
+      const data = response?.data?.data;
+      console.log("respone", response);
+      data.forEach((item: any, index: number) => {
+        item.no = (page - 1) * 10 + index + 1;
+      });
+
+      setDataTable(data);
+      setTotalData(data?.length);
+      setTotalPage(1);
+      close();
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="flex justify-between mb-10 items-center">
+        <p className="text-xl font-medium text-default-900">Feedback</p>
+        <CreateFAQModal />
+      </div>
+
+      <Table className="overflow-hidden">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      {/* <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      /> */}
+    </div>
+  );
+};
+
+export default AdminFeedbackTable;

app/[locale]/(protected)/admin/settings/feedback/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import AdminFeedbackTable from "./component/table";
+
+export default function FAQSetting() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <AdminFeedbackTable />
+    </div>
+  );
+}

app/[locale]/(protected)/admin/settings/iklan/component/column.tsx

@@ -0,0 +1,189 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn, getCookiesDecrypt } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import { deleteAdvertisements, setBanner } from "@/service/settings/settings";
+import { error } from "@/config/swal";
+import { useToast } from "@/components/ui/use-toast";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";
+import { deleteMedia } from "@/service/content/content";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <div className="w-[150px]">{row.getValue("title")}</div>,
+  },
+  {
+    accessorKey: "contentFileName",
+    header: "Judul Gambar",
+    cell: ({ row }) => (
+      <div className="w-[450px]">{row.getValue("contentFileName")}</div>
+    ),
+  },
+  {
+    accessorKey: "placements",
+    header: "Posisi",
+    cell: ({ row }) => (
+      <div className="w-[150px]">{row.getValue("placements")}</div>
+    ),
+  },
+
+  {
+    accessorKey: "statusName",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("statusName")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const MySwal = withReactContent(Swal);
+      const levelNumber = getCookiesDecrypt("ulne");
+      async function doDelete(id: any) {
+        // loading();
+        const data = {
+          id,
+        };
+
+        const response = await deleteAdvertisements(id);
+
+        if (response?.error) {
+          error(response.message);
+          return false;
+        }
+        success();
+      }
+
+      function success() {
+        MySwal.fire({
+          title: "Sukses",
+          icon: "success",
+          confirmButtonColor: "#3085d6",
+          confirmButtonText: "OK",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            window.location.reload();
+          }
+        });
+      }
+
+      const handleDeleteAdvertisements = (id: any) => {
+        MySwal.fire({
+          title: "Hapus Data",
+          text: "",
+          icon: "warning",
+          showCancelButton: true,
+          cancelButtonColor: "#3085d6",
+          confirmButtonColor: "#d33",
+          confirmButtonText: "Hapus",
+        }).then((result) => {
+          if (result.isConfirmed) {
+            doDelete(id);
+          }
+        });
+      };
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          {/* <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/admin/settings/iklan/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+            <Link href={`/admin/settings/iklan/update/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <SquarePen className="w-4 h-4 me-1.5" />
+                Edit
+              </DropdownMenuItem>
+            </Link>
+            <DropdownMenuItem
+              onClick={() => handleDeleteAdvertisements(row.original.id)}
+              className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+            >
+              <Trash2 className="w-4 h-4 me-1.5" />
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent> */}
+          <DropdownMenuContent className="p-0" align="end">
+            <Link href={`/admin/settings/iklan/detail/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <Eye className="w-4 h-4 me-1.5" />
+                View
+              </DropdownMenuItem>
+            </Link>
+
+            {levelNumber === "1" && (
+              <>
+                <Link href={`/admin/settings/iklan/update/${row.original.id}`}>
+                  <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                    <SquarePen className="w-4 h-4 me-1.5" />
+                    Edit
+                  </DropdownMenuItem>
+                </Link>
+
+                <DropdownMenuItem
+                  onClick={() => handleDeleteAdvertisements(row.original.id)}
+                  className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none"
+                >
+                  <Trash2 className="w-4 h-4 me-1.5" />
+                  Delete
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/iklan/component/popup-column.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/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 "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
+import StatusToogle from "./status-toogle";
+import StaticToogle from "./static-toogle";
+
+const columns: ColumnDef<any>[] = [
+  // {
+  //   accessorKey: "no",
+  //   header: "No",
+  //   cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  // },
+
+  {
+    accessorKey: "title",
+    header: "Judul",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "categoryName",
+    header: "Kategori",
+    cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
+  },
+  {
+    accessorKey: "createdAt",
+    header: "Tanggal Unggah",
+    cell: ({ row }) => (
+      <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
+    ),
+  },
+  {
+    accessorKey: "isStaticBanner",
+    header: "Static Banner",
+    cell: ({ row }) => (
+      <StaticToogle
+        id={row.original.id}
+        initChecked={row.original.isStaticBanner}
+      />
+    ),
+  },
+  {
+    accessorKey: "statusName",
+    header: "Status Banner",
+    cell: ({ row }) => (
+      <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
+    ),
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="p-0" align="end">
+            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/admin/settings/iklan/component/popup-table.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { useSearchParams } from "next/navigation";
+
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import columns from "./popup-column";
+import { listBanner, listStaticBanner } from "@/service/settings/settings";
+
+const IklanListTable = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [showData, setShowData] = React.useState("10");
+
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: Number(showData),
+  });
+  const [getData, setGetData] = React.useState<any>([]);
+  const dataChange = searchParams?.get("dataChange");
+
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const table = useReactTable({
+    data: getData,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    if (dataChange) {
+      router.push("/admin/settings/banner");
+    }
+    getListBanner();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    getListBanner();
+    // getListStaticBanner();
+  }, [page, showData]);
+
+  async function getListBanner() {
+    loading();
+    let temp: any;
+
+    const response = await listBanner();
+    const data = response?.data?.data?.content;
+    console.log("banner", data);
+    setGetData(data);
+
+    close();
+  }
+
+  return (
+    <>
+      <Table className="overflow-hidden mt-10">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default IklanListTable;