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

@@ -7,23 +7,24 @@ build-dev:
   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

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

@@ -1,7 +1,6 @@
 'use server'
 import { redirect } from "next/navigation";
 import { revalidatePath } from "next/cache";
-import { postMessage } from "@/app/[locale]/(protected)/app/chat/utils";
 
 
 export const  postMessageAction = async (id: string, message: string,) => {

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

@@ -10,29 +10,15 @@ import {
   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 { 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 columns: ColumnDef<any>[] = [
+const getColumns = ({ onRefresh }: { onRefresh: () => void }): ColumnDef<any>[] => [
   {
     accessorKey: "no",
     header: "No",
@@ -44,49 +30,131 @@ const columns: ColumnDef<any>[] = [
     header: "Nama",
     cell: ({ row }) => <span>{row.getValue("fullname")}</span>,
   },
+
   {
     accessorKey: "address",
     header: "Wilayah",
-    cell: ({ row }) => <span>{row.getValue("address")}</span>,
+    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.role?.name ?? "-"}</span>,
+    cell: ({ row }) => (
+      <span>
+        {row.original.userProfilesAdditional?.userCompetency?.name ?? "-"}
+      </span>
+    ),
   },
 
   {
-    accessorKey: "experience",
+    accessorKey: "userExperienceId",
     header: "Pengalaman",
-    cell: ({ row }) => <span>{row.getValue("experience")}</span>,
-  },
+    cell: ({ row }) => {
+      const experienceId =
+        row.original.userProfilesAdditional?.userExperienceId;
 
-  {
-    accessorKey: "experience",
-    header: "Posisi",
-    cell: ({ row }) => <span>{row.getValue("experience")}</span>,
+      const experienceMap: Record<number, string> = {
+        1: "Akademisi",
+        2: "Praktisi",
+        3: "Akademisi + Praktisi",
+      };
+
+      return <span>{experienceMap[experienceId] ?? "-"}</span>;
+    },
   },
 
   {
     id: "actions",
-    accessorKey: "action",
     header: "Actions",
-    enableHiding: false,
     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"
-              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 size="icon" variant="ghost">
+              <MoreVertical className="h-4 w-4" />
             </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="#">Detail</Link>
+          <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>
       );
@@ -94,4 +162,4 @@ const columns: ColumnDef<any>[] = [
   },
 ];
 
-export default columns;
+export default getColumns;

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

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {
-  ColumnDef,
   ColumnFiltersState,
   PaginationState,
   SortingState,
@@ -15,7 +14,6 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-
 import {
   Table,
   TableBody,
@@ -25,7 +23,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { UserIcon } from "lucide-react";
-import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -35,43 +32,14 @@ import {
   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 columns from "./column";
+import getColumns from "./column";
 import { listEnableCategory } from "@/service/content/content";
-import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
 import { Link } from "@/i18n/routing";
 import { listDataExperts } from "@/service/experts/experts";
 
-const dummyData = [
-  {
-    id: 1,
-    name: "Prof. Dr. Ravi",
-    region: "Nasional",
-    skills: "Komunikasi",
-    experience: "Akademisi",
-  },
-  {
-    id: 2,
-    name: "Prof. Dr. Novan",
-    region: "DKI Jakarta",
-    skills: "Hukum",
-    experience: "Akademisi + Praktisi",
-  },
-];
-
 const AddExpertTable = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -97,7 +65,8 @@ const AddExpertTable = () => {
   const [limit, setLimit] = React.useState(10);
   const table = useReactTable({
     data: dataTable,
-    columns,
+    // columns,
+    columns: getColumns({ onRefresh: fetchData }),
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -201,7 +170,7 @@ const AddExpertTable = () => {
   }
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <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">
@@ -283,7 +252,11 @@ const AddExpertTable = () => {
             ))
           ) : (
             <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
+              <TableCell
+                // colSpan={columns.length}
+                colSpan={table.getAllLeafColumns().length}
+                className="h-24 text-center"
+              >
                 No results.
               </TableCell>
             </TableRow>

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

@@ -26,40 +26,70 @@ import {
 import { useEffect, useState } from "react";
 import {
   AdministrationLevelList,
+  checkRolePlacementsAvailability,
   getListCompetencies,
   getListExperiences,
   saveUserInternal,
   saveUserRolePlacements,
 } from "@/service/management-user/management-user";
-import { loading } from "@/config/swal";
+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",
-  }),
-  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",
-  }),
+  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;
@@ -73,6 +103,7 @@ export default function AddExpertForm() {
   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 },
@@ -130,9 +161,30 @@ export default function AddExpertForm() {
       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;
@@ -230,11 +282,26 @@ export default function AddExpertForm() {
   };
 
   const handleAddRow = () => {
-    setPlacementRows((prevRows: any) => [
-      ...prevRows,
-      { index: incrementId, roleId: "", userLevelId: 0 },
-    ]);
-    setIncrementId((prevId) => prevId + 1);
+    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 (
@@ -244,7 +311,7 @@ export default function AddExpertForm() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
         >
           <p className="fonnt-semibold">Campaign</p>
           <FormField
@@ -264,21 +331,55 @@ export default function AddExpertForm() {
             )}
           />
           <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 Username"
+                  placeholder="Masukkan"
                   onChange={field.onChange}
                 />
 
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
           <FormField
             control={form.control}
             name="phoneNumber"
@@ -288,13 +389,25 @@ export default function AddExpertForm() {
                 <Input
                   type="number"
                   value={field.value}
-                  placeholder="Masukkan Nama Lengkap"
+                  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"
@@ -304,7 +417,7 @@ export default function AddExpertForm() {
                 <Input
                   type="email"
                   value={field.value}
-                  placeholder="Masukkan Nama Lengkap"
+                  placeholder="Masukkan email"
                   onChange={field.onChange}
                 />
                 <FormMessage />
@@ -312,6 +425,69 @@ export default function AddExpertForm() {
             )}
           />
           <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 }) => (
@@ -336,7 +512,7 @@ export default function AddExpertForm() {
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
           <FormField
             control={form.control}
             name="skills"
@@ -424,7 +600,7 @@ export default function AddExpertForm() {
                     ))}
                   </SelectContent>
                 </Select>
-                <Select
+                {/* <Select
                   onValueChange={(e) =>
                     handleSelectionChange(row.index, "userLevelId", e)
                   }
@@ -441,6 +617,20 @@ export default function AddExpertForm() {
                       </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
@@ -454,9 +644,14 @@ export default function AddExpertForm() {
                 )}
               </div>
             ))}
-            <Button type="button" size="md" onClick={() => handleAddRow()}>
+            {/* <Button
+              type="button"
+              size="md"
+              onClick={handleAddRow}
+              disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
+            >
               Tambah
-            </Button>
+            </Button> */}
           </div>
 
           <div className="flex flex-row justify-end gap-2 mt-4 pt-4">

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/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

@@ -133,8 +133,8 @@ export default function ContentManagement() {
       <SiteBreadcrumb />
       <div className="flex flex-col gap-3">
         <Accordion id="polri" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -161,8 +161,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="2" type="single" collapsible className="w-full">
-          <AccordionItem value="item-2" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -189,8 +189,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="3" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -217,8 +217,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="4" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -245,8 +245,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="5" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -273,8 +273,8 @@ export default function ContentManagement() {
           </AccordionItem>
         </Accordion>
         <Accordion id="6" type="single" collapsible className="w-full">
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>

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

@@ -88,8 +88,8 @@ export default function EmergencyIssue() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>

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

@@ -89,8 +89,8 @@ export default function FeedbackCenter() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>

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

@@ -114,8 +114,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -147,8 +147,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -180,8 +180,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>
@@ -213,8 +213,8 @@ export default function ContentManagement() {
           collapsible
           className="w-full"
         >
-          <AccordionItem value="item-1" className="bg-white w-full">
-            <AccordionTrigger className="bg-white">
+          <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>

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

@@ -30,34 +30,27 @@ const columns: ColumnDef<any>[] = [
     accessorKey: "accountName",
     header: "Nama",
     cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("accountName")}</span>
+      <span className="normal-case">{row.original.mediaBlastAccountName}</span>
     ),
   },
   {
     accessorKey: "accountType",
     header: "Tipe Akun",
     cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("accountType")}</span>
-    ),
-  },
-  {
-    accessorKey: "accountCategory",
-    header: "Kategory",
-    cell: ({ row }) => (
-      <span className="uppercase">{row.getValue("accountCategory")}</span>
+      <span className="normal-case">{row.original.mediaBlastAccountType}</span>
     ),
   },
   {
     accessorKey: "emailAddress",
     header: "Email",
     cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("emailAddress")}</span>
+      <span className="normal-case">{row.original.mediaBlastAccountEmail}</span>
     ),
   },
   {
     accessorKey: "whatsappNumber",
     header: "Whatsapp",
-    cell: ({ row }) => <span>{row.getValue("whatsappNumber")}</span>,
+    cell: ({ row }) => <span>{row.original.mediaBlastAccountPhone}</span>,
   },
   {
     id: "actions",
@@ -113,7 +106,7 @@ const columns: ColumnDef<any>[] = [
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
               <Link
-                href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.id}`}
+                href={`/admin/broadcast/campaign-list/account-list/edit/${row.original.mediaBlastAccountId}`}
               >
                 Edit
               </Link>

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

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 import {
-  ColumnDef,
   ColumnFiltersState,
   PaginationState,
   SortingState,
@@ -15,7 +14,6 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 import { Button } from "@/components/ui/button";
-
 import {
   Table,
   TableBody,
@@ -24,25 +22,64 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { UserIcon } from "lucide-react";
-
-import { useRouter, useSearchParams } from "next/navigation";
-import TablePagination from "@/components/table/table-pagination";
-import columns from "./column";
+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 { getMediaBlastAccountPage } from "@/service/broadcast/broadcast";
 import { Checkbox } from "@/components/ui/checkbox";
-import { close, loading } from "@/config/swal";
+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";
-import { Icon } from "@iconify/react/dist/iconify.js";
+
+// 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 router = useRouter();
+  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>([]);
@@ -56,10 +93,19 @@ const AccountListTable = () => {
     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,
@@ -83,24 +129,24 @@ const AccountListTable = () => {
 
   React.useEffect(() => {
     const pageFromUrl = searchParams?.get("page");
-    if (pageFromUrl) {
-      setPage(Number(pageFromUrl));
-    }
+    if (pageFromUrl) setPage(Number(pageFromUrl));
   }, [searchParams]);
 
   React.useEffect(() => {
     fetchData();
-  }, [page]);
+  }, [page, filtered]);
 
   async function fetchData() {
     try {
       loading();
-      const res = await getMediaBlastAccountPage(
+      const res = await getMediaBlastCampaignAccountList(
         page - 1,
-        filtered ? filtered.join(",") : ""
+        filtered ? filtered.join(",") : "",
+        campaignId
       );
+
       const data = res?.data?.data;
-      const contentData = data?.content;
+      const contentData = data?.content || [];
       contentData.forEach((item: any, index: number) => {
         item.no = (page - 1) * 10 + index + 1;
       });
@@ -109,42 +155,349 @@ const AccountListTable = () => {
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
       close();
-    } catch (error) {
-      console.error("Error fetching tasks:", error);
+    } 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);
-    }
+    if (checked) temp = [...temp, id];
+    else temp = temp.filter((a) => a !== id);
     setFiltered(temp);
-    console.log("sss", 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 p-4 rounded-sm space-y-3">
-      <div className="flex justify-between mb-10 items-center">
+    <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">
-          <Link href="/admin/broadcast/campaign-list/account-list/create">
-            <Button color="primary" size="md" className="text-sm">
-              <Icon icon="tdesign:user-add-filled" />
-              Tambah Akun
-            </Button>
-          </Link>
-          <Link href="/admin/broadcast/campaign-list/import">
-            <Button color="success" size="md" className="text-sm">
-              <UserIcon />
-              Import Akun
-            </Button>
-          </Link>
+          {/* === 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>
-      <div className="flex justify-end">
+
+      {/* === 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">
@@ -163,65 +516,28 @@ const AccountListTable = () => {
                 </a>
               </div>
               <div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="accepted"
-                    checked={filtered.includes("polri")}
-                    onCheckedChange={(e) => handleFilter("polri", Boolean(e))}
-                  />
-                  <label
-                    htmlFor="accepted"
-                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    POLRI
-                  </label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="accepted"
-                    checked={filtered.includes("jurnalis")}
-                    onCheckedChange={(e) =>
-                      handleFilter("jurnalis", Boolean(e))
-                    }
-                  />
-                  <label
-                    htmlFor="accepted"
-                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    JURNALIS
-                  </label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="accepted"
-                    checked={filtered.includes("umum")}
-                    onCheckedChange={(e) => handleFilter("umum", Boolean(e))}
-                  />
-                  <label
-                    htmlFor="accepted"
-                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    UMUM
-                  </label>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <Checkbox
-                    id="accepted"
-                    checked={filtered.includes("ksp")}
-                    onCheckedChange={(e) => handleFilter("ksp", Boolean(e))}
-                  />
-                  <label
-                    htmlFor="accepted"
-                    className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    KSP
-                  </label>
-                </div>
+                {["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) => (
@@ -263,6 +579,7 @@ const AccountListTable = () => {
           )}
         </TableBody>
       </Table>
+
       <TablePagination
         table={table}
         totalData={totalData}

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

@@ -6,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -14,55 +13,80 @@ import {
 } 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 {
+  getMediaBlastCampaignPage,
   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 { useEffect, useState } from "react";
+
+// ----------------------------
+// ZOD SCHEMA (dinamis)
+// ----------------------------
 
 const FormSchema = z.object({
-  name: z.string({
-    required_error: "Required",
-  }),
+  name: z.string({ required_error: "Required" }),
+
   accountType: z
     .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
-  accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
-    required_error: "Required",
-  }),
-  email: z.string({
-    required_error: "Required",
-  }),
-  whatsapp: z.string({
-    required_error: "Required",
-  }),
-});
+    .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: [] },
+    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",
@@ -85,10 +109,8 @@ export default function CreateAccountForBroadcast() {
       icon: "success",
       confirmButtonColor: "#3085d6",
       confirmButtonText: "OK",
-    }).then((result) => {
-      if (result.isConfirmed) {
-        router.push("/admin/broadcast/campaign-list/account-list");
-      }
+    }).then(() => {
+      router.push("/admin/broadcast/campaign-list/account-list");
     });
   }
 
@@ -96,20 +118,21 @@ export default function CreateAccountForBroadcast() {
     const reqData = {
       accountName: data.name,
       accountType: data.accountType.join(","),
-      accountCategory: data.accountCategory,
-      emailAddress: data.email,
-      whatsappNumber: data.whatsapp,
+      emailAddress: data.email ?? "",
+      whatsappNumber: data.whatsapp ?? "",
+      campaignId: data.campaignId,
     };
-    console.log("data", data);
+
+    console.log("REQ:", reqData);
 
     const response = await saveMediaBlastAccount(reqData);
     if (response?.error) {
       error(response.message);
-      return false;
+      return;
     }
-
     successSubmit();
   };
+
   return (
     <div>
       <SiteBreadcrumb />
@@ -118,7 +141,9 @@ export default function CreateAccountForBroadcast() {
           onSubmit={form.handleSubmit(onSubmit)}
           className="space-y-3 bg-white rounded-sm p-4"
         >
-          <p className="fonnt-semibold">Account</p>
+          <p className="font-semibold">Account</p>
+
+          {/* NAMA */}
           <FormField
             control={form.control}
             name="name"
@@ -130,172 +155,125 @@ export default function CreateAccountForBroadcast() {
                   placeholder="Masukkan nama"
                   onChange={field.onChange}
                 />
-
                 <FormMessage />
               </FormItem>
             )}
           />
+
+          {/* CHECKBOX TIPE AKUN */}
           <FormField
             control={form.control}
             name="accountType"
-            render={() => (
+            render={({ field }) => (
               <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>
+                <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="accountCategory"
+            name="campaignId"
             render={({ field }) => (
-              <FormItem className="space-y-3">
-                <FormLabel>Kategori</FormLabel>
+              <FormItem>
+                <FormLabel>Campaign</FormLabel>
                 <FormControl>
-                  <RadioGroup
-                    onValueChange={field.onChange}
-                    defaultValue={field.value}
-                    className="flex flex-row gap-2"
+                  <select
+                    className="w-full border rounded-md p-2 text-sm"
+                    value={field.value}
+                    onChange={field.onChange}
                   >
-                    <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>
+                    <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>
             )}
           />
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Nama</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>
-            )}
-          />
+          {/* BUTTON */}
           <div className="flex flex-row gap-2 mt-4 pt-4">
-            <Button
-              size="md"
-              type="button"
-              variant="outline"
-              color="destructive"
-              className="text-xs"
-            >
+            <Button type="button" variant="outline" color="destructive">
               Cancel
             </Button>
-            <Button size="md" type="submit" color="primary" className="text-xs">
+            <Button type="submit" color="primary">
               Submit
             </Button>
           </div>
@@ -304,3 +282,380 @@ export default function CreateAccountForBroadcast() {
     </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

@@ -37,46 +37,74 @@ 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({
-  name: z.string({
-    required_error: "Required",
-  }),
-  accountType: z
-    .array(z.string())
-    .refine((value) => value.some((item) => item), {
-      message: "Required",
-    }),
-  accountCategory: z.enum(["polri", "jurnalis", "umumu", "ksp"], {
-    required_error: "Required",
-  }),
-  email: z.string({
-    required_error: "Required",
-  }),
-  whatsapp: z.string({
-    required_error: "Required",
-  }),
+  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: [] },
+    // defaultValues: { accountType: [] },
   });
 
   useEffect(() => {
     async function getDetailData() {
-      const response = await getMediaBlastAccount(String(id));
+      const response = await getUserById(String(id));
       const details = response?.data?.data;
-      console.log("new", details);
-      form.setValue("name", details.accountName);
-      form.setValue("email", details?.emailAddress);
-      form.setValue("whatsapp", details?.whatsappNumber);
-      form.setValue("accountCategory", details?.accountCategory);
-      form.setValue("accountType", details?.accountType.split(","));
+      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();
@@ -106,23 +134,32 @@ export default function EditAccountForBroadcast() {
       confirmButtonText: "OK",
     }).then((result) => {
       if (result.isConfirmed) {
-        router.push("/admin/broadcast/campaign-list/account-list");
+        router.push("/admin/broadcast/campaign-list");
       }
     });
   }
 
   const save = async (data: z.infer<typeof FormSchema>) => {
     const reqData = {
-      id: String(id),
-      accountName: data.name,
-      accountType: data.accountType.join(","),
-      accountCategory: data.accountCategory,
-      emailAddress: data.email,
-      whatsappNumber: data.whatsapp,
+      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 saveMediaBlastAccount(reqData);
+    const response = await saveUserInternal(reqData);
     if (response?.error) {
       error(response.message);
       return false;
@@ -141,7 +178,7 @@ export default function EditAccountForBroadcast() {
           <p className="fonnt-semibold">Account</p>
           <FormField
             control={form.control}
-            name="name"
+            name="fullname"
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Nama</FormLabel>
@@ -155,7 +192,7 @@ export default function EditAccountForBroadcast() {
               </FormItem>
             )}
           />
-          <FormField
+          {/* <FormField
             control={form.control}
             name="accountType"
             render={() => (
@@ -227,8 +264,8 @@ export default function EditAccountForBroadcast() {
                 <FormMessage />
               </FormItem>
             )}
-          />
-          <FormField
+          /> */}
+          {/* <FormField
             control={form.control}
             name="accountCategory"
             render={({ field }) => (
@@ -269,13 +306,13 @@ export default function EditAccountForBroadcast() {
                 <FormMessage />
               </FormItem>
             )}
-          />
+          /> */}
           <FormField
             control={form.control}
             name="email"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Nama</FormLabel>
+                <FormLabel>Email</FormLabel>
                 <Input
                   type="email"
                   value={field.value}
@@ -289,14 +326,14 @@ export default function EditAccountForBroadcast() {
           />
           <FormField
             control={form.control}
-            name="whatsapp"
+            name="phoneNumber"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Nama</FormLabel>
+                <FormLabel>Nomor Whatsapp</FormLabel>
                 <Input
                   type="number"
                   value={field.value}
-                  placeholder="Masukkan whatsapp"
+                  placeholder="Masukkan nomor whatsapp"
                   onChange={field.onChange}
                 />
 

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

@@ -11,8 +11,11 @@ import {
 } 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>[] = [
   {
@@ -58,10 +61,47 @@ const columns: ColumnDef<any>[] = [
 
   {
     id: "actions",
-    accessorKey: "action",
     header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
+    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>
@@ -73,28 +113,113 @@ const columns: ColumnDef<any>[] = [
             </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/detail/${row.original.id}`}
-              >
+            <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
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link
-                href={`//admin/broadcast/campaign-list/edit/${row.original.id}`}
-              >
+              </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
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <a>Delete</a>
+              </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

@@ -89,6 +89,11 @@ const CampaignListTable = () => {
 
   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,
@@ -143,16 +148,16 @@ const CampaignListTable = () => {
   }
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <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">
+          {/* <Link href="/admin/broadcast/campaign-list/account-list">
             <Button color="primary" size="md" className="text-sm">
               <UserIcon />
               Daftar Akun
             </Button>
-          </Link>
+          </Link> */}
           <Link href="/admin/broadcast/campaign-list/create">
             <Button color="primary" size="md" className="text-sm">
               <NewCampaignIcon size={23} />
@@ -189,7 +194,14 @@ const CampaignListTable = () => {
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    {/* {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>

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

@@ -101,7 +101,7 @@ export default function CreateCampaign() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
         >
           <p className="fonnt-semibold">Campaign</p>
           <FormField

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

@@ -130,7 +130,7 @@ export default function EditCampaign() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-3 bg-white rounded-sm p-4"
+          className="space-y-3 bg-white dark:bg-black rounded-sm p-4"
         >
           <p className="fonnt-semibold">Campaign</p>
           <FormField

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

@@ -5,7 +5,7 @@ export default function CreateEmailBlast() {
   return (
     <div>
       <SiteBreadcrumb />
-      <ContentBlast type="email" />
+      <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

@@ -204,7 +204,7 @@ const BroadcastEmailTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <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">

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

@@ -1,6 +1,6 @@
 "use client";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-import BroadcastTable from "./email/component/table";
+import BroadcastTable from "./create/component/table";
 import { PlusIcon } from "lucide-react";
 
 import EscalationTable from "../../shared/communication/escalation/components/escalation-table";
@@ -8,7 +8,7 @@ import InternalTable from "../../shared/communication/internal/components/intern
 import { useState } from "react";
 import { Link } from "@/i18n/routing";
 import { Button } from "@/components/ui/button";
-import BroadcastEmailTable from "./email/component/table";
+import BroadcastEmailTable from "./create/component/table";
 import BroadcastWhatsAppTable from "./whatsapp/component/table";
 
 export default function AdminBroadcast() {
@@ -16,33 +16,7 @@ export default function AdminBroadcast() {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
-        <div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
-          <Button
-            rounded="md"
-            onClick={() => setTab("Email Blast")}
-            className={` hover:text-white
-                ${
-                  tab === "Email Blast"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
-          >
-            Email Blast
-          </Button>
-          <Button
-            rounded="md"
-            onClick={() => setTab("WhatsApp Blast")}
-            className={` hover:text-white
-                ${
-                  tab === "WhatsApp Blast"
-                    ? "bg-black text-white "
-                    : "bg-white text-black "
-                }`}
-          >
-            WhatsApp Blast
-          </Button>
-        </div>
+      <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>

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

@@ -5,7 +5,7 @@ export default function CreateWABlast() {
   return (
     <div>
       <SiteBreadcrumb />
-      <ContentBlast type="wa" />
+      {/* <ContentBlast /> */}
     </div>
   );
 }

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

@@ -80,23 +80,21 @@ const columns: ColumnDef<any>[] = [
             </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}`}
-              >
+            <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
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/email/${row.original.id}`}>
+              </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
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
+              </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
-              </Link>
-            </DropdownMenuItem>
+              </DropdownMenuItem>
+            </Link>
           </DropdownMenuContent>
         </DropdownMenu>
       );

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

@@ -76,9 +76,6 @@ export default function EditUserForm() {
     },
   });
 
-  const passwordVal = form.watch("password");
-  const confPasswordVal = form.watch("confirmPassword");
-
   useEffect(() => {
     initData();
   }, []);

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

@@ -145,6 +145,7 @@ export default function EditUserForm() {
       password: data.password,
       passwordConf: data.confirmPassword,
       isDefault: false,
+      isAdmin: true,
     };
 
     loading();
@@ -352,8 +353,8 @@ export default function EditUserForm() {
           <PasswordChecklist
             rules={["minLength", "specialChar", "number", "capital", "match"]}
             minLength={8}
-            value={passwordVal}
-            valueAgain={confPasswordVal}
+            value={passwordVal || ""}
+            valueAgain={confPasswordVal || ""}
             onChange={(isValid) => {
               form.setValue("isValidPassword", isValid);
             }}

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

@@ -2,10 +2,9 @@
 
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Check, ChevronsUpDown } from "lucide-react";
+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 {
@@ -174,7 +173,8 @@ export default function CreateUserForm() {
   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>();
@@ -285,10 +285,21 @@ export default function CreateUserForm() {
       password: data.password,
       passwordConf: data.confirmPassword,
       isDefault: false,
+      isAdmin: true,
     };
 
     if (data.role == "OPT-ID") {
-      req.handledSocialMedia = data?.sns ? data.sns.join(",") : "";
+      // 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") {
@@ -341,7 +352,7 @@ export default function CreateUserForm() {
       <Form {...form}>
         <form
           onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6 bg-white p-10 w-full"
+          className="space-y-6 bg-white dark:bg-black p-10 w-full"
         >
           <p className="text-xl">Data Pengelola Media Hub</p>
           <FormField
@@ -693,18 +704,26 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Password</FormLabel>
                 <FormControl>
-                  <Input
-                    type="password"
-                    placeholder="Masukkan kata sandi"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <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"
@@ -712,23 +731,37 @@ export default function CreateUserForm() {
               <FormItem>
                 <FormLabel>Konfirmasi Kata Sandi</FormLabel>
                 <FormControl>
-                  <Input
-                    type="password"
-                    placeholder="Masukkan kata sandi"
-                    {...field}
-                    className="w-1/2"
-                  />
+                  <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}
+            value={passwordVal || ""}
+            valueAgain={confPasswordVal || ""}
             onChange={(isValid) => {
               form.setValue("isValidPassword", isValid);
             }}

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

@@ -191,8 +191,6 @@ export default function DetailUserForm() {
     },
   });
 
-  const passwordVal = form.watch("password");
-  const confPasswordVal = form.watch("confirmPassword");
   const selectedRole = form.watch("role");
 
   useEffect(() => {

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

@@ -221,7 +221,6 @@ export default function EditUserForm() {
       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);
@@ -302,7 +301,7 @@ export default function EditUserForm() {
 
   async function save(data: z.infer<typeof FormSchema>) {
     let req: any = {
-      id: id,
+      id: Number(id),
       firstName: data.fullname,
       username: data.username,
       roleId: data.role,
@@ -313,6 +312,7 @@ export default function EditUserForm() {
       password: data.password,
       passwordConf: data.confirmPassword,
       isDefault: false,
+      isAdmin: true,
     };
 
     if (data.role == "OPT-ID") {
@@ -755,8 +755,8 @@ export default function EditUserForm() {
           <PasswordChecklist
             rules={["minLength", "specialChar", "number", "capital", "match"]}
             minLength={8}
-            value={passwordVal}
-            valueAgain={confPasswordVal}
+            value={passwordVal || ""}
+            valueAgain={confPasswordVal || ""}
             onChange={(isValid) => {
               form.setValue("isValidPassword", isValid);
             }}

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

@@ -36,7 +36,7 @@ export default function ManagementUser() {
         <ManagementUserVisualization />
       </section>
 
-      <section className="flex flex-col gap-2 bg-white rounded-lg p-3 mt-5">
+      <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"}

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

@@ -0,0 +1,121 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { toast } from "sonner";
+
+import { Input } from "@/components/ui/input";
+import { close, error, loading, successCallback } from "@/config/swal";
+import { 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 getMediaTracking(page - 1, search, showData);
+    setContent(response?.data?.data.content);
+  };
+
+  const fecthAll = async (search?: string) => {
+    const response = await listDataAllNonPagination(search || inputValue);
+    setContent(response?.data?.data.content);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const nowLength = value.split(" ").length;
+    const prevLength = inputValue.split(" ").length;
+
+    setInputValue(value);
+
+    if (value === "") {
+      initFecth();
+      setSelectedId(0);
+    }
+
+    if (/\s/.test(value)) {
+      console.log("Terdapat spasi dalam input");
+      fecthAll();
+    }
+
+    if (nowLength !== prevLength) {
+      fecthAll();
+    }
+  };
+
+  const doSave = async () => {
+    loading();
+    const req = {
+      mediaUploadId: selectedId,
+      duration: 24,
+      scrapingPeriod: 3,
+    };
+
+    const res = await mediaTrackingSave(req);
+    if (res?.error) {
+      error(res?.message);
+      return false;
+    }
+    close();
+
+    toast("Berhasil Menambahkan", {
+      description: "",
+    });
+    props.triggerFetch();
+    return false;
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button className="bg-blue-600" size="md">
+          Tracking Berita
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Form Tracking Berita</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2">
+          {" "}
+          <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"}`}
+                  onClick={() => {
+                    setSelectedId(item.id);
+                    setInputValue(item.title);
+                    fecthAll(item.title);
+                  }}
+                >
+                  {item.title}
+                </a>
+              ))}
+          </div>
+        </div>
+        {/* <DialogFooter className="sm:justify-start">
+          <DialogClose asChild>
+            <Button type="button">Close</Button>
+          </DialogClose>
+        </DialogFooter> */}
+        <DialogFooter className="flex justify-end gap-2">
+          <Button className="bg-blue-600 text-white" onClick={doSave}>
+            Tracking Berita
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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/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/table.tsx

@@ -46,25 +46,11 @@ import {
   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 { usePathname, 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,
@@ -75,21 +61,26 @@ import {
   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 [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 [onSearch, setOnSearch] = React.useState("");
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
@@ -97,10 +88,19 @@ const NewsTable = () => {
     pageIndex: 0,
     pageSize: Number(showData),
   });
-  const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  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 [totalPage, setTotalPage] = 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,
@@ -125,15 +125,6 @@ const NewsTable = () => {
   let typingTimer: any;
   const doneTypingInterval = 1500;
 
-  // const handleKeyUp = () => {
-  //   clearTimeout(typingTimer);
-  //   typingTimer = setTimeout(doneTyping, doneTypingInterval);
-  // };
-
-  const handleKeyDown = () => {
-    clearTimeout(typingTimer);
-  };
-
   // async function doneTyping() {
   //   fetchData();
   // }
@@ -145,41 +136,6 @@ const NewsTable = () => {
     }
   }, [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();
   }, []);
@@ -190,30 +146,85 @@ const NewsTable = () => {
     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);
-      }
+  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 {
-      if (checked) {
-        const temp: number[] = [...statusFilter];
-        temp.push(id);
-        setStatusFilter(temp);
-      } else {
-        const temp = statusFilter.filter((a) => a !== id);
-        setStatusFilter(temp);
+      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="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!
@@ -225,30 +236,38 @@ const NewsTable = () => {
             Tracking Berita
           </Button>
         </DialogTrigger>
-        <DialogContent className="sm:max-w-md">
+        <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">
-            <div className="space-y-2">
+          <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
-                id="link"
-                placeholder="Masukkan Link disini!"
-                value={link}
-                onChange={(e) => setLink(e.target.value)}
+              <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"
               />
-              <p className="text-sm text-muted-foreground mt-1">
-                Sisa Kuota Harian: 5 Kata Kunci
-              </p>
+            </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 variant="outline">Batal</Button>
+            <Button onClick={cleanCheckbox} variant="outline">
+              Riset Filter
+            </Button>
             <Button className="bg-blue-600 text-white">Tracking Berita</Button>
           </DialogFooter>
         </DialogContent>

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/settings/banner/component/banner-column.tsx

@@ -58,16 +58,6 @@ const columns: ColumnDef<any>[] = [
       <span>{formatDateToIndonesian(row.getValue("createdAt"))}</span>
     ),
   },
-  {
-    accessorKey: "static",
-    header: "Static Banner",
-    cell: ({ row }) => (
-      <StaticToogle
-        id={row.original.id}
-        initChecked={row.original.staticPage}
-      />
-    ),
-  },
   {
     accessorKey: "statusName",
     header: "Status Banner",
@@ -75,7 +65,6 @@ const columns: ColumnDef<any>[] = [
       <StatusToogle id={row.original.id} initChecked={row.original.isBanner} />
     ),
   },
-
   {
     id: "actions",
     accessorKey: "action",

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

@@ -96,22 +96,9 @@ const BannerListTable = () => {
     let temp: any;
 
     const response = await listBanner();
-    temp = response?.data?.data;
-    const response2 = await listStaticBanner();
-    console.log("sadadddd", response2?.data?.data.length);
-    for (let i = 0; i < response2?.data?.data.length; i++) {
-      for (let j = 0; j < temp.length; j++) {
-        console.log("temp", j, temp[j].id);
-        if (response2?.data?.data[i].mediaUploadId === temp[j].id) {
-          temp[j].staticPage = true;
-        } else {
-          temp[j].staticPage = false;
-        }
-      }
-    }
-
-    console.log("tesmasdasdasdasd", temp);
-    setGetData(temp);
+    const data = response?.data?.data?.content;
+    console.log("banner", data);
+    setGetData(data);
 
     close();
   }

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

@@ -65,13 +65,18 @@ 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 ContentListTable = () => {
+const ContentListBanner = () => {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const [showData, setShowData] = React.useState("10");
+  const [showData, setShowData] = React.useState("9");
   const [categories, setCategories] = React.useState<any>();
-  const [dataTable, setDataTable] = 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>(
@@ -86,31 +91,29 @@ const ContentListTable = () => {
   });
   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 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 [searchQuery, setSearchQuery] = React.useState("");
+  const [bannerCount, setBannerCount] = React.useState<number>(0);
 
-  let typingTimer: any;
-  const doneTypingInterval = 1500;
+  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);
@@ -122,6 +125,21 @@ const ContentListTable = () => {
     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();
   }
@@ -135,10 +153,10 @@ const ContentListTable = () => {
 
   React.useEffect(() => {
     fetchData();
-    setPagination({
-      pageIndex: 0,
-      pageSize: Number(showData),
-    });
+    // setPagination({
+    //   pageIndex: 0,
+    //   pageSize: Number(showData),
+    // });
   }, [page, showData]);
 
   async function fetchData() {
@@ -147,10 +165,11 @@ const ContentListTable = () => {
       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) => {
@@ -159,7 +178,7 @@ const ContentListTable = () => {
 
       console.log("contentData : ", data);
 
-      setDataTable(contentData);
+      setData(contentData);
       setTotalData(data?.totalElements);
       setTotalPage(data?.totalPages);
       close();
@@ -200,17 +219,73 @@ const ContentListTable = () => {
     }
   };
 
+  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"
-          onKeyUp={handleKeyUp}
-          onKeyDown={handleKeyDown}
+          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">
+
+        {/* <div className="flex flex-row gap-2">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button size="md" variant="outline">
@@ -338,56 +413,65 @@ const ContentListTable = () => {
               </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>
-      <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}
-      />
     </>
   );
 };
 
-export default ContentListTable;
+export default ContentListBanner;

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

@@ -5,6 +5,7 @@ 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");
@@ -12,7 +13,7 @@ export default function AdminBanner() {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <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"}
 
@@ -27,7 +28,7 @@ export default function AdminBanner() {
                     : "bg-white text-black "
                 }`}
             >
-              Kontent
+              Konten
             </Button>
             <Button
               rounded="md"
@@ -44,7 +45,11 @@ export default function AdminBanner() {
           </div>
         </div>
 
-        {selectedTab === "content" ? <ContentListTable /> : <BannerListTable />}
+        {selectedTab === "content" ? (
+          <ContentListBanner />
+        ) : (
+          <BannerListTable />
+        )}
       </div>
     </div>
   );

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

@@ -45,19 +45,17 @@ const columns: ColumnDef<any>[] = [
     ),
   },
   {
-    accessorKey: "contentType",
+    accessorKey: "mediaTypesString",
     header: "Tipe Konten",
     cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("contentType")}</span>
+      <span className="normal-case">{row.getValue("mediaTypesString")}</span>
     ),
   },
   {
-    accessorKey: "isInternational",
+    accessorKey: "publishedLocation",
     header: "Wilayah",
     cell: ({ row }) => (
-      <span className="normal-case">
-        {row.getValue("isInternational") ? "INT" : "ID"}
-      </span>
+      <span className="normal-case">{row.getValue("publishedLocation")}</span>
     ),
   },
   {
@@ -69,6 +67,16 @@ const columns: ColumnDef<any>[] = [
       </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",
@@ -92,7 +100,7 @@ const columns: ColumnDef<any>[] = [
         router.push("/admin/settings/category?dataChange=true");
       };
       return (
-        <Menubar className="border-none">
+        <Menubar className="border-none dark:bg-black">
           <MenubarMenu>
             <MenubarTrigger>
               <Button

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

@@ -125,16 +125,16 @@ export default function CreateCategoryModal() {
   });
 
   const contentType = form.watch("contentType");
-  const isAllContentChecked = listContent.every((item) =>
-    contentType?.includes(item.id)
+  const isAllContentChecked = contentType && listContent.every((item) =>
+    contentType.includes(item.id)
   );
 
   const users = form.watch("selectedUser");
-  const isAllUserChecked = userList.every((item) => users?.includes(item.id));
+  const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
   );
 
   const { getRootProps, getInputProps } = useDropzone({
@@ -240,7 +240,7 @@ export default function CreateCategoryModal() {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button color="primary" size="md">
-          {t("add-category")}
+          {t("add-category", { defaultValue: "Add Category" })}
         </Button>
       </DialogTrigger>
       <DialogContent
@@ -248,12 +248,12 @@ export default function CreateCategoryModal() {
         className="sm:h-[300px] md:h-[300px] lg:h-[500px] overflow-y-auto"
       >
         <DialogHeader>
-          <DialogTitle> {t("add-category")}</DialogTitle>
+          <DialogTitle> {t("add-category", { defaultValue: "Add Category" })}</DialogTitle>
         </DialogHeader>
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className="space-y-3 bg-white rounded-sm"
+            className="space-y-3 bg-white dark:bg-[#1f2937] rounded-sm"
           >
             <FormField
               control={form.control}

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

@@ -138,35 +138,34 @@ export default function EditCategoryModal(props: {
     maxFiles: 1,
   });
 
-  useEffect(() => {
-    const initFetch = async () => {
-      const req = await getCategoryDetail(id);
-      const data = req?.data?.data;
-      console.log("dataC", 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);
+  // useEffect(() => {
+  //   initFetch();
+  // }, [id]);
 
-      setUnitData(filterString(data?.publishedLocationLevel, "under"));
-      setSatkerData(filterString(data?.publishedLocationLevel, "above"));
-    };
+  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);
 
-    initFetch();
-  }, [id]);
+    setUnitData(filterString(data?.publishedLocationLevel, "under"));
+    setSatkerData(filterString(data?.publishedLocationLevel, "above"));
+  };
 
   function removeAndReturn(inputString: string, toRemove: number[]) {
-    const numbers = inputString.split(",").map(Number);
+    const numbers = inputString?.split(",").map(Number);
 
-    const filteredNumbers = numbers.filter((num) => !toRemove.includes(num));
+    const filteredNumbers = numbers?.filter((num) => !toRemove?.includes(num));
 
-    return filteredNumbers.map(String);
+    return filteredNumbers?.map(String);
   }
 
   function filterString(inputString: string, type: string) {
@@ -183,17 +182,16 @@ export default function EditCategoryModal(props: {
   }
 
   const contentType = form.watch("contentType");
-  const isAllContentChecked = listContent.every((item) =>
-    contentType?.includes(item.id)
-  );
+  const isAllContentChecked =
+    contentType && listContent.every((item) => contentType.includes(item.id));
 
   const users = form.watch("selectedUser");
-  const isAllUserChecked = userList.every((item) => users?.includes(item.id));
+  const isAllUserChecked =
+    users && userList.every((item) => users.includes(item.id));
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
-  );
+  const isAllTargetChecked =
+    target && publishToList.every((item) => target.includes(item.id));
 
   useEffect(() => {
     getRoles();
@@ -213,6 +211,7 @@ export default function EditCategoryModal(props: {
     const uniqueNumbers = Array.from(new Set(numbers));
     return uniqueNumbers.join(",");
   }
+
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
     const formMedia = new FormData();
 
@@ -263,7 +262,9 @@ export default function EditCategoryModal(props: {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger>
         <a
-          onClick={() => setIsOpen(true)}
+          onClick={() =>{
+            initFetch()
+            setIsOpen(true); } }
           className="hover:underline cursor-pointer"
         >
           {isDetail ? "Detail" : "Edit"}

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

@@ -10,15 +10,34 @@ export default function StatusToogle(props: {
 }) {
   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(response);
+    console.log("API Response:", response);
+
+    // cek error interceptor
     if (response?.error) {
-      error(response.message);
+      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)}

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

@@ -28,23 +28,17 @@ import {
 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 } from "@/service/settings/settings";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
 import CreateCategoryModal from "./create";
 import { useTranslations } from "next-intl";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 
 const AdminCategoryTable = () => {
   const router = useRouter();
@@ -55,6 +49,9 @@ const AdminCategoryTable = () => {
   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>(
     []
   );
@@ -89,6 +86,14 @@ const AdminCategoryTable = () => {
     },
   });
 
+  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");
@@ -105,14 +110,28 @@ const AdminCategoryTable = () => {
 
   React.useEffect(() => {
     fetchData();
-  }, [page]);
+  }, [page, regionFilter]);
 
   async function fetchData() {
     try {
       loading();
-      const response = await getCategories(page - 1);
+
+      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;
       });
@@ -122,17 +141,124 @@ const AdminCategoryTable = () => {
       setTotalPage(data?.totalPages);
       close();
     } catch (error) {
-      console.error("Error fetching tasks:", 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 p-4 rounded-sm space-y-3">
+    <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")}</p>
+        <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) => (

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

@@ -68,11 +68,11 @@ export function UnitMapping(props: {
 
   const unitType = form.watch("items");
 
-  const isAllUnitChecked = unitList.every((item) =>
-    unitType?.includes(String(item.id))
+  const isAllUnitChecked = unitType && unitList.every((item) =>
+    unitType.includes(String(item.id))
   );
-  const isAllSatkerChecked = satkerList.every((item) =>
-    unitType?.includes(String(item.id))
+  const isAllSatkerChecked = unitType && satkerList.every((item) =>
+    unitType.includes(String(item.id))
   );
 
   const setupUnit = (data: UnitType[]) => {

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

@@ -91,8 +91,8 @@ export default function CreateFAQModal() {
   });
 
   const target = form.watch("publishTo");
-  const isAllTargetChecked = publishToList.every((item) =>
-    target?.includes(item.id)
+  const isAllTargetChecked = target && publishToList.every((item) =>
+    target.includes(item.id)
   );
 
   const onSubmit = async (data: z.infer<typeof FormSchema>) => {
@@ -121,12 +121,12 @@ export default function CreateFAQModal() {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button color="primary" size="md">
-          {t("add")} FAQ
+          {t("add", { defaultValue: "Add" })} FAQ
         </Button>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
-          <DialogTitle>{t("add")} FAQ</DialogTitle>
+          <DialogTitle>{t("add", { defaultValue: "Add" })} FAQ</DialogTitle>
         </DialogHeader>
         <Form {...form}>
           <form

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

@@ -111,12 +111,12 @@ export default function CreateFAQModal() {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button color="primary" size="md">
-          {t("add")} Feedback
+          {t("add", { defaultValue: "Add" })} Feedback
         </Button>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
-          <DialogTitle>{t("add")} Feedback</DialogTitle>
+          <DialogTitle>{t("add", { defaultValue: "Add" })} Feedback</DialogTitle>
         </DialogHeader>
         <Form {...form}>
           <form

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;

app/[locale]/(protected)/admin/settings/iklan/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/iklan/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/iklan/component/table.tsx

@@ -0,0 +1,420 @@
+"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,
+  Plus,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+  UploadIcon,
+  UserIcon,
+} from "lucide-react";
+import { cn, getCookiesDecrypt } 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 { 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 {
+  listDataAdvertisements,
+  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, useRouter } from "@/i18n/routing";
+import { TambahIklanModal } from "@/components/form/setting/form-add-iklan";
+
+const AdvertisementsList = () => {
+  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 roleId = getCookiesDecrypt("urie");
+  const levelNumber = getCookiesDecrypt("ulne");
+  const userLevelId = getCookiesDecrypt("ulie");
+  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);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  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 listDataAdvertisements(page - 1, showData, "");
+      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>
+        {levelNumber === "1" && (
+          <div className="flex-none">
+            <Link href={"/admin/settings/iklan/create"}>
+              <Button
+                disabled={dataTable.length == 4}
+                color="primary"
+                className="text-white"
+                size="md"
+              >
+                <UploadIcon size={18} className="mr-2" />
+                Tambah Iklan
+              </Button>
+            </Link>
+            {dataTable.length == 4 && (
+              <p className="text-sm text-red-400 pt-1">
+                Jumlah Iklan Sudah Maksimal (4)
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* <TambahIklanModal /> */}
+      </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 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>
+      <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}
+      />
+    </>
+  );
+};
+
+export default AdvertisementsList;

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

@@ -0,0 +1,19 @@
+import { Card, CardContent } from "@/components/ui/card";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormTask from "@/components/form/task/task-form";
+import FormPressConference from "@/components/form/schedule/press-conference-form";
+import { CalendarPolriAdd } from "@/components/form/schedule/form-calendar-polri";
+import { TambahIklanModal } from "@/components/form/setting/form-add-iklan";
+
+const AdvertisementsCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <TambahIklanModal />
+      </div>
+    </div>
+  );
+};
+
+export default AdvertisementsCreatePage;

app/[locale]/(protected)/admin/settings/iklan/detail/[id]/page.tsx

@@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { TambahIklanDetail } from "@/components/form/setting/form-add-iklan-detail";
+
+const AdvertisementsDetailPage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <TambahIklanDetail />
+      </div>
+    </div>
+  );
+};
+
+export default AdvertisementsDetailPage;

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

@@ -0,0 +1,17 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { useState } from "react";
+import AdvertisementsList from "./component/table";
+
+export default function AdminAdvertisements() {
+  const [selectedTab, setSelectedTab] = useState("content");
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+        <AdvertisementsList />
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/admin/settings/iklan/update/[id]/page.tsx

@@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { TambahIklanUpdate } from "@/components/form/setting/form-add-iklan-update";
+
+const AdvertisementsUpdatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <TambahIklanUpdate />
+      </div>
+    </div>
+  );
+};
+
+export default AdvertisementsUpdatePage;

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

@@ -31,6 +31,9 @@ import {
   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>[] = [
   {
@@ -44,11 +47,6 @@ const columns: ColumnDef<any>[] = [
     header: "Judul",
     cell: ({ row }) => <span>{row.getValue("title")}</span>,
   },
-  {
-    accessorKey: "fileTypeName",
-    header: "Konten",
-    cell: ({ row }) => <span>{row.getValue("fileTypeName")}</span>,
-  },
   {
     accessorKey: "categoryName",
     header: "Kategori",
@@ -74,6 +72,14 @@ const columns: ColumnDef<any>[] = [
     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>
@@ -93,14 +99,9 @@ const columns: ColumnDef<any>[] = [
               </Link>
             </DropdownMenuItem>
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/email/${row.original.id}`}>
-                Email Blast
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href={`/admin/broadcast/whatsapp/${row.original.id}`}>
-                Whatsapp Blast
-              </Link>
+              <a onClick={() => handleBanner(row.original.id)}>
+                Jadikan Banner
+              </a>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

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

@@ -0,0 +1,99 @@
+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: "statusName",
+    header: "Status Pop Up",
+    cell: ({ row }) => (
+      <StatusToogle id={row.original.id} initChecked={row.original.isInterstitial} />
+    ),
+  },
+  {
+    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/popup/component/popup-table.tsx

@@ -0,0 +1,158 @@
+"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 { getListPopUp, listBanner, listStaticBanner } from "@/service/settings/settings";
+import { listDataPopUp } from "@/service/broadcast/broadcast";
+
+const PopUpListTable = () => {
+  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 [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
+  const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
+  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/popup");
+    }
+    getPopUp();
+  }, [dataChange]);
+
+  React.useEffect(() => {
+    getPopUp();
+    // getListStaticBanner();
+  }, [page, showData]);
+
+  async function getPopUp() {
+    loading();
+    let temp: any;
+
+    const response = await getListPopUp();
+    const data = response?.data?.data?.content;
+    console.log("banner", data);
+    setGetData(data);
+
+    close();
+  }
+
+  return (
+    <>
+      {table && 
+        <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 PopUpListTable;

app/[locale]/(protected)/admin/settings/popup/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/popup/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, setPopUp } 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 setPopUp(id, false);
+
+    if (response?.error) {
+      toast({
+        variant: "destructive",
+        title: response?.message,
+      });
+      return false;
+    }
+
+    toast({
+      title: "Success ",
+    });
+    router.push("/admin/settings/popup?dataChange=true");
+  };
+  return (
+    <Switch
+      id="status-toogle"
+      checked={initChecked}
+      onCheckedChange={() => disableBanner()}
+    />
+  );
+}

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

@@ -0,0 +1,495 @@
+"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, listDataPopUp } 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, setPopUp } from "@/service/settings/settings";
+import { id } from "date-fns/locale";
+import CustomPagination from "@/components/table/custom-pagination";
+
+const ContentListPopUp = () => {
+  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("");
+
+  let typingTimer: NodeJS.Timeout;
+  const doneTypingInterval = 2000;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    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 listDataPopUp(
+  //       page - 1,
+  //       showData,
+  //       "",
+  //       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);
+  //   }
+  // }
+
+  async function fetchData() {
+    try {
+      loading();
+      const res = await listDataMedia(
+        page - 1,
+        showData,
+        searchQuery, // <-- gunakan nilai pencarian
+        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 handlePopUp = async (ids: number[]) => {
+  //   try {
+  //     await Promise.all(ids.map((id) => setPopUp(id, true)));
+  //     toast({
+  //       title: "Sukses",
+  //       description: `${ids.length} item berhasil dijadikan Popup.`,
+  //     });
+  //   } catch (err) {
+  //     toast({
+  //       title: "Gagal",
+  //       description: "Terjadi kesalahan saat menjadikan Popup.",
+  //       variant: "destructive",
+  //     });
+  //   }
+  // };
+
+  const handlePopUp = async (ids: number[]) => {
+    try {
+      // const res = await Promise.all(ids.map((id) => setBanner(id, true)));
+
+      for (const element of ids) {
+        loading();
+        const res = await setPopUp(element, true);
+        close();
+        if (res?.error) {
+          toast({
+            title: "Gagal",
+            description:
+              "Banner sudah melebihi batas maksimum (4 konten). Silahkan di disable popup 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);
+            handleKeyDown();
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              fetchData();
+            }
+          }}
+          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 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>Pilih Semua</span>
+          </div>
+          {selectedItems.length > 0 && (
+            <Button color="primary" onClick={() => handlePopUp(selectedItems)}>
+              Jadikan PopUp
+            </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 ContentListPopUp;

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

@@ -0,0 +1,52 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import ContentListTable from "../banner/component/table";
+import BannerListTable from "../banner/component/banner-table";
+import PopUpList from "./component/table";
+import PopUpListTable from "./component/popup-table";
+
+export default function AdminPopup() {
+  const [selectedTab, setSelectedTab] = useState("content");
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+        <div className="flex justify-between">
+          {selectedTab === "content" ? "List Media" : " List Pop Up"}
+
+          <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("popup")}
+              className={` hover:text-white
+                ${
+                  selectedTab === "popup"
+                    ? "bg-black text-white "
+                    : "bg-white text-black "
+                }`}
+            >
+              Pop Up
+            </Button>
+          </div>
+        </div>
+
+        {selectedTab === "content" ? <PopUpList /> : <PopUpListTable />}
+      </div>
+    </div>
+  );
+}

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

@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/form";
 import { close, error, loading } from "@/config/swal";
 import { Input } from "@/components/ui/input";
-import JoditEditor from "jodit-react";
+
 import { useEffect, useRef } from "react";
 import { getPrivacy, savePrivacy } from "@/service/settings/settings";
 import { useToast } from "@/components/ui/use-toast";
@@ -104,16 +104,6 @@ export default function AdminPrivacyPolicy() {
               <FormItem>
                 <FormLabel>Konten</FormLabel>
                 <FormControl>
-                  {/* <JoditEditor
-                    ref={editor}
-                    value={field.value}
-                    config={{
-                      height: 400, // Tinggi editor dalam piksel
-                    }}
-                    className="dark:text-black"
-                    onChange={field.onChange}
-                    
-                  /> */}
                   <CustomEditor
                     onChange={field.onChange}
                     initialData={field.value}

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

@@ -0,0 +1,158 @@
+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 } from "@/service/settings/settings";
+import { useToast } from "@/components/ui/use-toast";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Menubar,
+  MenubarContent,
+  MenubarMenu,
+  MenubarTrigger,
+} from "@/components/ui/menubar";
+import EditCategoryModal from "../../category/component/edit";
+import withReactContent from "sweetalert2-react-content";
+import { deleteMedia } from "@/service/content/content";
+import Swal from "sweetalert2";
+import { useTranslations } from "next-intl";
+import DetailSettingTracking from "./detail";
+import UpdateSettingTracking from "./update";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
+  const MySwal = withReactContent(Swal);
+  const columns: ColumnDef<any>[] = [
+    {
+      accessorKey: "no",
+      header: "No",
+      cell: ({ row }) => <span>{row.getValue("no")}</span>,
+    },
+
+    {
+      accessorKey: "name",
+      header: "Wilayah",
+      cell: ({ row }) => (
+        <span className="normal-case">{row.getValue("name")}</span>
+      ),
+    },
+    {
+      accessorKey: "mediaTypesString",
+      header: "Jumlah Tracking Berita Harian",
+      cell: ({ row }) => (
+        <span className="normal-case">{row.getValue("mediaTypesString")}</span>
+      ),
+    },
+    {
+      id: "actions",
+      accessorKey: "action",
+      header: t("action", { defaultValue: "Action" }),
+      enableHiding: false,
+      cell: ({ row }) => {
+        const MySwal = withReactContent(Swal);
+
+        async function doDelete(id: any) {
+          // loading();
+          const data = {
+            id,
+          };
+
+          const response = await deleteMedia(data);
+
+          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 handleDeleteMedia = (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"
+              >
+                <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/settings/setting-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>
+              <Link
+                href={`/admin/settings/setting-tracking/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={() => handleDeleteMedia(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>
+        );
+      },
+    },
+  ];
+
+  return columns;
+};
+
+export default useTableColumns;

app/[locale]/(protected)/admin/settings/setting-tracking/component/create.tsx

@@ -0,0 +1,141 @@
+// "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 { 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 wilayahList = [
+//   { id: "mabes", label: "Mabes" },
+//   { id: "polda", label: "Polda" },
+//   { id: "satker", label: "Satker" },
+// ];
+
+// const jumlahList = [5, 10, 15, 20, 25, 30];
+
+// export default function CreateSettingTracking() {
+//   const t = useTranslations("Menu");
+//   const [isOpen, setIsOpen] = useState(false);
+
+//   const form = useForm({
+//     defaultValues: {
+//       wilayah: [] as string[],
+//       jumlah: [] as number[],
+//     },
+//   });
+
+//   const onSubmit = (values: any) => {
+//     console.log("Submitted values:", values);
+//     setIsOpen(false);
+//   };
+
+//   return (
+//     <Dialog open={isOpen} onOpenChange={setIsOpen}>
+//       <DialogTrigger asChild>
+//         <Button onClick={() => setIsOpen(true)}>Tambah Setting Tracking</Button>
+//       </DialogTrigger>
+
+//       <DialogContent className="sm:max-w-md">
+//         <DialogHeader>
+//           <DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
+//         </DialogHeader>
+
+//         <Form {...form}>
+//           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+//             {/* Wilayah */}
+//             <FormField
+//               control={form.control}
+//               name="wilayah"
+//               render={({ field }) => (
+//                 <FormItem>
+//                   <FormLabel>Wilayah</FormLabel>
+//                   <div className="flex gap-4">
+//                     {wilayahList.map((item) => (
+//                       <div key={item.id} className="flex items-center gap-2">
+//                         <Checkbox
+//                           checked={field.value.includes(item.id)}
+//                           onCheckedChange={(checked) => {
+//                             const updated = checked
+//                               ? [...field.value, item.id]
+//                               : field.value.filter((val) => val !== item.id);
+//                             field.onChange(updated);
+//                           }}
+//                         />
+//                         <label className="text-sm">{item.label}</label>
+//                       </div>
+//                     ))}
+//                   </div>
+//                 </FormItem>
+//               )}
+//             />
+
+//             <FormField
+//               control={form.control}
+//               name="jumlah"
+//               render={({ field }) => (
+//                 <FormItem>
+//                   <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
+//                   <div className="flex gap-4 flex-wrap">
+//                     {jumlahList.map((num) => (
+//                       <div key={num} className="flex items-center gap-2">
+//                         <Checkbox
+//                           checked={field.value.includes(num)}
+//                           onCheckedChange={(checked) => {
+//                             const updated = checked
+//                               ? [...field.value, num]
+//                               : field.value.filter((val) => val !== num);
+//                             field.onChange(updated);
+//                           }}
+//                         />
+//                         <label className="text-sm">{num}</label>
+//                       </div>
+//                     ))}
+//                   </div>
+//                 </FormItem>
+//               )}
+//             />
+
+//             <DialogFooter>
+//               <Button type="submit">Tambah Setting</Button>
+//             </DialogFooter>
+//           </form>
+//         </Form>
+//       </DialogContent>
+//     </Dialog>
+//   );
+// }

app/[locale]/(protected)/admin/settings/setting-tracking/component/detail.tsx

@@ -0,0 +1,151 @@
+"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 { useToast } from "@/components/ui/use-toast";
+import { stringify } from "querystring";
+import { useDropzone } from "react-dropzone";
+import { CloudUpload, EyeIcon, SquarePen } 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 wilayahList = [
+  { id: "mabes", label: "Mabes" },
+  { id: "polda", label: "Polda" },
+  { id: "satker", label: "Satker" },
+];
+
+const jumlahList = [5, 10, 15, 20, 25, 30];
+
+export default function DetailSettingTracking(props: {
+  id: string;
+  isDetail?: boolean;
+}) {
+  const { id, isDetail } = props;
+  const t = useTranslations("Menu");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm({
+    defaultValues: {
+      wilayah: [] as string[],
+      jumlah: [] as number[],
+    },
+  });
+
+  const onSubmit = (values: any) => {
+    console.log("Submitted values:", values);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <a
+          onClick={() => setIsOpen(true)}
+          className="flex flex-row items-center border-b p-2 hover:cursor-pointer hover:bg-black hover:text-white"
+        >
+          <EyeIcon className="w-4 h-4 me-1.5" />
+          Detail
+        </a>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Wilayah */}
+            <FormField
+              control={form.control}
+              name="wilayah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wilayah</FormLabel>
+                  <div className="flex gap-4">
+                    {wilayahList.map((item) => (
+                      <div key={item.id} className="flex items-center gap-2">
+                        <Checkbox
+                          checked={field.value.includes(item.id)}
+                          onCheckedChange={(checked) => {
+                            const updated = checked
+                              ? [...field.value, item.id]
+                              : field.value.filter((val) => val !== item.id);
+                            field.onChange(updated);
+                          }}
+                        />
+                        <label className="text-sm">{item.label}</label>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="jumlah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
+                  <div className="flex gap-4 flex-wrap">
+                    {jumlahList.map((num) => (
+                      <div key={num} className="flex items-center gap-2">
+                        <Checkbox
+                          checked={field.value.includes(num)}
+                          onCheckedChange={(checked) => {
+                            const updated = checked
+                              ? [...field.value, num]
+                              : field.value.filter((val) => val !== num);
+                            field.onChange(updated);
+                          }}
+                        />
+                        <label className="text-sm">{num}</label>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="submit">Tambah Setting</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,318 @@
+"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 { Checkbox } from "@/components/ui/checkbox";
+import { close, loading } from "@/config/swal";
+import { Link, useRouter } from "@/i18n/routing";
+import { getCategories } from "@/service/settings/settings";
+import { useTranslations } from "next-intl";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import useTableColumns from "./column";
+import { UploadIcon } from "lucide-react";
+
+const AdminSettingTrackingTable = () => {
+  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 columns = useTableColumns();
+  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 items-end justify-between">
+        {/* <CreateSettingTracking /> */}
+        <div className="flex-none">
+          <Link href={"/admin/settings/setting-tracking/create"}>
+            <Button color="primary" className="text-white" size="md">
+              <UploadIcon size={18} className="mr-2" />
+              Tambah Setting Tracking
+            </Button>
+          </Link>
+        </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">
+                <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 AdminSettingTrackingTable;

app/[locale]/(protected)/admin/settings/setting-tracking/component/update.tsx

@@ -0,0 +1,151 @@
+"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 { useToast } from "@/components/ui/use-toast";
+import { stringify } from "querystring";
+import { useDropzone } from "react-dropzone";
+import { CloudUpload, SquareEqual, SquarePen } 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 wilayahList = [
+  { id: "mabes", label: "Mabes" },
+  { id: "polda", label: "Polda" },
+  { id: "satker", label: "Satker" },
+];
+
+const jumlahList = [5, 10, 15, 20, 25, 30];
+
+export default function UpdateSettingTracking(props: {
+  id: string;
+  isUpdate?: boolean;
+}) {
+  const { id, isUpdate } = props;
+  const t = useTranslations("Menu");
+  const [isOpen, setIsOpen] = useState(false);
+
+  const form = useForm({
+    defaultValues: {
+      wilayah: [] as string[],
+      jumlah: [] as number[],
+    },
+  });
+
+  const onSubmit = (values: any) => {
+    console.log("Submitted values:", values);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <a
+          onClick={() => setIsOpen(true)}
+          className="flex flex-row items-center border-b p-2 hover:cursor-pointer hover:bg-black hover:text-white"
+        >
+          <SquarePen className="w-4 h-4 me-1.5" />
+          Edit
+        </a>
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {/* Wilayah */}
+            <FormField
+              control={form.control}
+              name="wilayah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wilayah</FormLabel>
+                  <div className="flex gap-4">
+                    {wilayahList.map((item) => (
+                      <div key={item.id} className="flex items-center gap-2">
+                        <Checkbox
+                          checked={field.value.includes(item.id)}
+                          onCheckedChange={(checked) => {
+                            const updated = checked
+                              ? [...field.value, item.id]
+                              : field.value.filter((val) => val !== item.id);
+                            field.onChange(updated);
+                          }}
+                        />
+                        <label className="text-sm">{item.label}</label>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="jumlah"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Jumlah Tracking Berita Harian</FormLabel>
+                  <div className="flex gap-4 flex-wrap">
+                    {jumlahList.map((num) => (
+                      <div key={num} className="flex items-center gap-2">
+                        <Checkbox
+                          checked={field.value.includes(num)}
+                          onCheckedChange={(checked) => {
+                            const updated = checked
+                              ? [...field.value, num]
+                              : field.value.filter((val) => val !== num);
+                            field.onChange(updated);
+                          }}
+                        />
+                        <label className="text-sm">{num}</label>
+                      </div>
+                    ))}
+                  </div>
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button type="submit">Tambah Setting</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/[locale]/(protected)/admin/settings/setting-tracking/create/page.tsx

@@ -0,0 +1,15 @@
+import CreateSettingTracking from "@/components/form/media-tracking/setting-tracking-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const SettingTrackingCreatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <CreateSettingTracking />
+      </div>
+    </div>
+  );
+};
+
+export default SettingTrackingCreatePage;

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

@@ -0,0 +1,15 @@
+import DetailSettingTracking from "@/components/form/media-tracking/setting-tracking-detail-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const SettingTrackingDetailPage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <DetailSettingTracking />
+      </div>
+    </div>
+  );
+};
+
+export default SettingTrackingDetailPage;

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

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

app/[locale]/(protected)/admin/settings/setting-tracking/update/[id]/page.tsx

@@ -0,0 +1,15 @@
+import UpdateSettingTracking from "@/components/form/media-tracking/setting-tracking-update-form";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+const SettingTrackingUpdatePage = () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <UpdateSettingTracking />
+      </div>
+    </div>
+  );
+};
+
+export default SettingTrackingUpdatePage;

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

@@ -109,12 +109,12 @@ export default function CreateTagModal() {
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
         <Button color="primary" size="md">
-          {t("add-tags")}
+          {t("add-tags", { defaultValue: "Add Tags" })}
         </Button>
       </DialogTrigger>
       <DialogContent size="md">
         <DialogHeader>
-          <DialogTitle> {t("add-tags")}</DialogTitle>
+          <DialogTitle> {t("add-tags", { defaultValue: "Add Tags" })}</DialogTitle>
         </DialogHeader>
         <Form {...form}>
           <form

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

@@ -126,7 +126,7 @@ const AdminTagTable = () => {
   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">{t("tags")}</p>
+        <p className="text-xl font-medium text-default-900">{t("tags", { defaultValue: "Tags" })}</p>
         <CreateFAQModal />
       </div>
 

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

@@ -54,22 +54,7 @@ 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";
-import search from "../../../app/chat/components/search";
 import {
   Select,
   SelectContent,
@@ -79,7 +64,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Card, CardContent } from "@/components/ui/card";
 import {
   Bar,
   BarChart,
@@ -206,7 +190,7 @@ const SurveyListTable = () => {
   };
 
   return (
-    <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+    <div className="w-full overflow-x-auto bg-white dark:bg-black p-4 rounded-sm space-y-3">
       <div className="flex-1 text-xl font-medium text-default-900">Survey</div>
       <div className="flex flex-row gap-2 items-center justify-between">
         <div className="w-full md:w-[200px] lg:w-[300px] px-2">

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

@@ -10,7 +10,7 @@ export default function AdminSurvey() {
   return (
     <div>
       <SiteBreadcrumb />
-      <div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
+      <div className="w-full overflow-x-auto bg-white  p-4 rounded-sm space-y-3">
         <SurveyListTable />
       </div>
     </div>

app/[locale]/(protected)/app/calendar/calender-view.tsx

@@ -1,243 +0,0 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import FullCalendar from "@fullcalendar/react"; // must go before plugins
-import dayGridPlugin from "@fullcalendar/daygrid";
-import timeGridPlugin from "@fullcalendar/timegrid";
-import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
-import listPlugin from "@fullcalendar/list";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import ExternalDraggingevent from "./dragging-events";
-import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Plus } from "lucide-react";
-import { Checkbox } from "@/components/ui/checkbox";
-import { CalendarEvent, CalendarCategory } from "./data"
-import {
-  EventContentArg,
-} from '@fullcalendar/core'
-import EventModal from "./event-modal";
-import { useTranslations } from "next-intl";
-const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
-interface CalendarViewProps {
-  events: CalendarEvent[];
-  categories: CalendarCategory[];
-
-
-}
-
-const CalendarView = ({ events, categories }: CalendarViewProps) => {
-  const [selectedCategory, setSelectedCategory] = useState<string[] | null>(null);
-  const [selectedEventDate, setSelectedEventDate] = useState<Date | null>(null);
-  const [selectedEvent, setSelectedEvent] = useState<CalendarEvent | null>(null);
-  const [draggableInitialized, setDraggableInitialized] = useState<boolean>(false);
-const t = useTranslations("CalendarApp")
-  // event canvas state
-  const [sheetOpen, setSheetOpen] = useState<boolean>(false);
-  const [date, setDate] = React.useState<Date>(new Date());
-
-  const [dragEvents] = useState([
-    { title: "New Event Planning", id: "101", tag: "business" },
-    { title: "Meeting", id: "102", tag: "meeting" },
-    { title: "Generating Reports", id: "103", tag: "holiday" },
-    { title: "Create New theme", id: "104", tag: "etc" },
-  ]);
-
-  useEffect(() => {
-    setSelectedCategory(categories?.map((c) => c.value));
-  }, [events, categories]);
-
-  useEffect(() => {
-    const draggableEl = document.getElementById("external-events");
-
-    const initDraggable = () => {
-      if (draggableEl) {
-        new Draggable(draggableEl, {
-          itemSelector: ".fc-event",
-          eventData: function (eventEl) {
-            let title = eventEl.getAttribute("title");
-            let id = eventEl.getAttribute("data");
-            let event = dragEvents.find((e) => e.id === id);
-            let tag = event ? event.tag : "";
-            return {
-              title: title,
-              id: id,
-              extendedProps: {
-                calendar: tag,
-              },
-            };
-          },
-        });
-      }
-    };
-
-    if (dragEvents.length > 0) {
-      initDraggable();
-    }
-
-    return () => {
-      draggableEl?.removeEventListener("mousedown", initDraggable);
-    };
-  }, [dragEvents]);
-  // event click
-  const handleEventClick = (arg: any) => {
-    setSelectedEventDate(null);
-    setSheetOpen(true);
-    setSelectedEvent(arg);
-    wait().then(() => (document.body.style.pointerEvents = "auto"));
-  };
-  // handle close modal
-  const handleCloseModal = () => {
-    setSheetOpen(false);
-    setSelectedEvent(null);
-    setSelectedEventDate(null);
-  };
-  const handleDateClick = (arg: any) => {
-    setSheetOpen(true);
-    setSelectedEventDate(arg);
-    setSelectedEvent(null);
-    wait().then(() => (document.body.style.pointerEvents = "auto"));
-  };
-
-  const handleCategorySelection = (category: string) => {
-    if (selectedCategory && selectedCategory.includes(category)) {
-      setSelectedCategory(selectedCategory.filter((c) => c !== category));
-    } else {
-      setSelectedCategory([...selectedCategory || [], category]);
-    }
-  };
-
-  const handleClassName = (arg: EventContentArg) => {
-
-    if (arg.event.extendedProps.calendar === "holiday") {
-      return "destructive";
-    }
-    else if (arg.event.extendedProps.calendar === "business") {
-      return "primary";
-    } else if (arg.event.extendedProps.calendar === "personal") {
-      return "success";
-    } else if (arg.event.extendedProps.calendar === "family") {
-      return "info";
-    } else if (arg.event.extendedProps.calendar === "etc") {
-      return "info";
-    } else if (arg.event.extendedProps.calendar === "meeting") {
-      return "warning";
-    }
-    else {
-      return "primary";
-    }
-
-  };
-
-  const filteredEvents = events?.filter((event) =>
-    selectedCategory?.includes(event.extendedProps.calendar)
-  );
-
-  return (
-    <>
-      <div className="grid grid-cols-12 gap-6 divide-x  divide-border">
-        <Card className="col-span-12 lg:col-span-4 2xl:col-span-3  pb-5">
-          <CardContent className="p-0">
-            <CardHeader className="border-none mb-2 pt-5">
-              <Button
-                onClick={handleDateClick}
-                className="dark:bg-background dark:text-foreground"
-              >
-                <Plus className="w-4 h-4   me-1" />
-                {t("addEvent")}
-              </Button>
-            </CardHeader>
-            <div className="px-3">
-              <Calendar
-                mode="single"
-                selected={date}
-                onSelect={(s) => {
-                  handleDateClick(s);
-                }}
-                className="rounded-md border w-full p-0 border-none"
-              />
-            </div>
-
-            <div id="external-events" className=" space-y-1.5 mt-6 px-4">
-              <p className="text-sm font-medium text-default-700 mb-3">
-               {t("shortDesc")}
-              </p>
-              {dragEvents.map((event) => (
-                <ExternalDraggingevent key={event.id} event={event} />
-              ))}
-            </div>
-            <div className="py-4 text-default-800  font-semibold text-xs uppercase mt-4 mb-2 px-4">
-            {t("filter")}
-            </div>
-            <ul className="space-y-3 px-4">
-              <li className=" flex gap-3">
-                <Checkbox
-                  checked={selectedCategory?.length === categories?.length}
-                  onClick={() => {
-                    if (selectedCategory?.length === categories?.length) {
-                      setSelectedCategory([]);
-                    } else {
-                      setSelectedCategory(categories.map((c) => c.value));
-                    }
-                  }}
-                />
-                <Label>All</Label>
-              </li>
-              {categories?.map((category) => (
-                <li className="flex gap-3 " key={category.value}>
-                  <Checkbox
-                    className={category.className}
-                    id={category.label}
-                    checked={selectedCategory?.includes(category.value)}
-                    onClick={() => handleCategorySelection(category.value)}
-                  />
-                  <Label htmlFor={category.label}>{category.label}</Label>
-                </li>
-              ))}
-            </ul>
-          </CardContent>
-        </Card>
-
-        <Card className="col-span-12 lg:col-span-8 2xl:col-span-9  pt-5">
-          <CardContent className="dashcode-app-calendar">
-            <FullCalendar
-              plugins={[
-                dayGridPlugin,
-                timeGridPlugin,
-                interactionPlugin,
-                listPlugin,
-              ]}
-              headerToolbar={{
-                left: "prev,next today",
-                center: "title",
-                right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
-              }}
-              events={filteredEvents}
-              editable={true}
-              rerenderDelay={10}
-              eventDurationEditable={false}
-              selectable={true}
-              selectMirror={true}
-              droppable={true}
-              dayMaxEvents={2}
-              weekends={true}
-              eventClassNames={handleClassName}
-              dateClick={handleDateClick}
-              eventClick={handleEventClick}
-              initialView="dayGridMonth"
-            />
-          </CardContent>
-        </Card>
-      </div>
-      <EventModal
-        open={sheetOpen}
-        onClose={handleCloseModal}
-        categories={categories}
-        event={selectedEvent}
-        selectedDate={selectedEventDate}
-      />
-    </>
-  );
-};
-
-export default CalendarView;

app/[locale]/(protected)/app/calendar/data.ts

@@ -1,155 +0,0 @@
-import { faker } from "@faker-js/faker";
-
-const date = new Date();
-const prevDay = new Date().getDate() - 1;
-const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
-
-// prettier-ignore
-const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
-// prettier-ignore
-const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
-export const calendarEvents = [
-  {
-    id: faker.string.uuid() ,
-    title: "All Day Event",
-    start: date,
-    end: nextDay,
-    allDay: false,
-    //className: "warning",
-    extendedProps: {
-      calendar: "business",
-    },
-  },
-  {
-    id: faker.string.uuid(),
-    title: "Meeting With Client",
-    start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
-    end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
-    allDay: true,
-    //className: "success",
-    extendedProps: {
-      calendar: "personal",
-    },
-  },
-  {
-    id: faker.string.uuid(),
-    title: "Lunch",
-    allDay: true,
-    start: new Date(date.getFullYear(), date.getMonth() + 1, -9),
-    end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
-    // className: "info",
-    extendedProps: {
-      calendar: "family",
-    },
-  },
-  {
-    id: faker.string.uuid(),
-    title: "Birthday Party",
-    start: new Date(date.getFullYear(), date.getMonth() + 1, -11),
-    end: new Date(date.getFullYear(), date.getMonth() + 1, -10),
-    allDay: true,
-    //className: "primary",
-    extendedProps: {
-      calendar: "meeting",
-    },
-  },
-  {
-    id: faker.string.uuid(),
-    title: "Birthday Party",
-    start: new Date(date.getFullYear(), date.getMonth() + 1, -13),
-    end: new Date(date.getFullYear(), date.getMonth() + 1, -12),
-    allDay: true,
-    // className: "danger",
-    extendedProps: {
-      calendar: "holiday",
-    },
-  },
-  {
-    id: faker.string.uuid(),
-    title: "Monthly Meeting",
-    start: nextMonth,
-    end: nextMonth,
-    allDay: true,
-    //className: "primary",
-    extendedProps: {
-      calendar: "business",
-    },
-  },
-];
-
-export const calendarCategories  = [
-  {
-    label: "Business",
-    value: "business",
-    activeClass: "ring-primary-500 bg-primary-500",
-    className: "group-hover:border-blue-500",
-  },
-  {
-    label: "Personal",
-    value: "personal",
-    activeClass: "ring-success-500 bg-success-500",
-    className: " group-hover:border-green-500",
-  },
-  {
-    label: "Holiday",
-    value: "holiday",
-    activeClass: "ring-danger-500 bg-danger-500",
-    className: " group-hover:border-red-500",
-  },
-  {
-    label: "Family",
-    value: "family",
-    activeClass: "ring-info-500 bg-info-500",
-    className: " group-hover:border-cyan-500",
-  },
-  {
-    label: "Meeting",
-    value: "meeting",
-    activeClass: "ring-warning-500 bg-warning-500",
-    className: " group-hover:border-yellow-500",
-  },
-  {
-    label: "Etc",
-    value: "etc",
-    activeClass: "ring-info-500 bg-info-500",
-    className: " group-hover:border-cyan-500",
-  }
-];
-
-export const categories = [
-  {
-    label: "Business",
-    value: "business",
-    className: "data-[state=checked]:bg-primary data-[state=checked]:ring-primary",
-  },
-  {
-    label: "Personal",
-    value: "personal",
-
-    className: "data-[state=checked]:bg-success data-[state=checked]:ring-success",
-  },
-  {
-    label: "Holiday",
-    value: "holiday",
-    className: "data-[state=checked]:bg-destructive  data-[state=checked]:ring-destructive ",
-  },
-  {
-    label: "Family",
-    value: "family",
-    className: "data-[state=checked]:bg-info data-[state=checked]:ring-info ",
-  },
-  {
-    label: "Meeting",
-    value: "meeting",
-    className: "data-[state=checked]:bg-warning data-[state=checked]:ring-warning",
-  },
-  {
-    label: "Etc",
-    value: "etc",
-    className: "data-[state=checked]:bg-info data-[state=checked]:ring-info",
-  }
-];
-
-export type CalendarEvent = (typeof  calendarEvents)[number]
-export type CalendarCategory = (typeof  calendarCategories)[number]
-export type Category = (typeof  categories)[number]

app/[locale]/(protected)/app/calendar/dragging-events.tsx

@@ -1,23 +0,0 @@
-import { cn } from "@/lib/utils";
-const ExternalDraggingevent = ({ event }: any) => {
-  const { title, id, tag } = event;
-
-  return (
-    <div
-      title={title}
-      data-id={id}
-      className="fc-event  px-4 py-1.5 bg-default-100 dark:bg-default-300  rounded text-sm flex  items-center gap-2 shadow-sm  cursor-move" >
-      <span
-        className={cn("h-2 w-2 rounded-full block", {
-          "bg-primary": tag === "business",
-          "bg-warning": tag === "meeting",
-          "bg-destructive": tag === "holiday",
-          "bg-info": tag === "etc",
-        })}
-      ></span>
-      <span className="text-sm font-medium text-default-900">{title}</span>
-    </div>
-  );
-};
-
-export default ExternalDraggingevent;

app/[locale]/(protected)/app/calendar/event-modal.tsx

@@ -1,285 +0,0 @@
-"use client";
-import React, { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useForm, Controller } from "react-hook-form";
-import { cn } from "@/lib/utils";
-import { format } from "date-fns";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Calendar } from "@/components/ui/calendar";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Loader2, CalendarIcon } from "lucide-react";
-import DeleteConfirmationDialog from "@/components/delete-confirmation-dialog";
-import { CalendarCategory } from "./data";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-const schema = z.object({
-  title: z.string().min(3, { message: "Required" }),
-});
-
-const EventModal = ({
-  open,
-  onClose,
-  categories,
-  event,
-  selectedDate,
-}: {
-  open: boolean;
-  onClose: () => void;
-  categories: any;
-  event: any;
-  selectedDate: any;
-}) => {
-  const [startDate, setStartDate] = useState<Date>(new Date());
-  const [endDate, setEndDate] = useState<Date>(new Date());
-  const [isPending, startTransition] = React.useTransition();
-  const [calendarProps, setCalendarProps] = React.useState<any>(
-    categories[0].value
-  );
-  // delete modal state
-  const [deleteModalOpen, setDeleteModalOpen] = useState<boolean>(false);
-  const [eventIdToDelete, setEventIdToDelete] = useState<string | null>(null);
-
-  const {
-    register,
-    control,
-    reset,
-    setValue,
-    formState: { errors },
-    handleSubmit,
-  } = useForm({
-    resolver: zodResolver(schema),
-    mode: "all",
-  });
-
-  const onSubmit = (data: any) => {
-    startTransition(() => {
-      if (!event) {
-        data.start = startDate;
-        data.end = endDate;
-        data.allDay = false;
-        data.extendedProps = {
-          calendar: calendarProps,
-        };
-      }
-      if (event) {
-      }
-    });
-  };
-  useEffect(() => {
-    if (selectedDate) {
-      setStartDate(selectedDate.date);
-      setEndDate(selectedDate.date);
-    }
-    if (event) {
-      setStartDate(event?.event?.start);
-      setEndDate(event?.event?.end);
-      const eventCalendar = event?.event?.extendedProps?.calendar;
-      if (eventCalendar) {
-        setCalendarProps(eventCalendar);
-      } else {
-        setCalendarProps(categories[0].value);
-      }
-    }
-    setValue("title", event?.event?.title || "");
-  }, [event, selectedDate, open, categories, setValue]);
-
-  const onDeleteEventAction = async () => {
-    try {
-    } catch (error) {}
-  };
-
-  const handleOpenDeleteModal = (eventId: string) => {
-    setEventIdToDelete(eventId);
-    setDeleteModalOpen(true);
-    onClose();
-  };
-
-  return (
-    <>
-      <DeleteConfirmationDialog
-        open={deleteModalOpen}
-        onClose={() => setDeleteModalOpen(false)}
-        onConfirm={onDeleteEventAction}
-        defaultToast={false}
-      />
-      <Dialog open={open} onOpenChange={onClose}>
-        <DialogContent onPointerDownOutside={onClose}>
-          <DialogHeader>
-            <DialogTitle>
-              {event ? "Edit Event" : "Create Event"} {event?.title}
-            </DialogTitle>
-          </DialogHeader>
-          <div className="mt-6 h-full">
-            <form className="h-full" onSubmit={handleSubmit(onSubmit)}>
-              <div className="space-y-4 pb-5 ">
-                <div className="space-y-1.5">
-                  <Label htmlFor="title">Event Name</Label>
-                  <Input
-                    id="title"
-                    type="text"
-                    placeholder="Enter Event Name"
-                    {...register("title")}
-                  />
-                  {errors?.title?.message && (
-                    <div className="text-destructive text-sm">
-                      {typeof errors?.title?.message === "string"
-                        ? errors?.title?.message
-                        : JSON.stringify(errors?.title?.message)}
-                    </div>
-                  )}
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label htmlFor="startDate">Start Date </Label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        size="md"
-                        className={cn(
-                          "w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        {startDate ? (
-                          format(startDate, "PP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                        <CalendarIcon className="h-4 w-4" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Controller
-                        name="startDate"
-                        control={control}
-                        render={({ field }) => (
-                          <Calendar
-                            mode="single"
-                            selected={startDate}
-                            onSelect={(date) => setStartDate(date as Date)}
-                            initialFocus
-                          />
-                        )}
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="space-y-1.5">
-                  <Label htmlFor="endDate">End Date</Label>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        size="md"
-                        className={cn(
-                          "w-full justify-between text-left font-normal border-default-200 text-default-600 md:px-4",
-                          !endDate && "text-muted-foreground"
-                        )}
-                      >
-                        {endDate ? (
-                          format(endDate, "PP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                        <CalendarIcon className="h-4 w-4" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Controller
-                        name="endDate"
-                        control={control}
-                        render={({ field }) => (
-                          <Calendar
-                            mode="single"
-                            selected={endDate}
-                            onSelect={(date) => setEndDate(date as Date)}
-                            initialFocus
-                          />
-                        )}
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-
-                <div className="space-y-1.5">
-                  <Label htmlFor="calendarProps">Label </Label>
-                  <Controller
-                    name="calendarProps"
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        value={calendarProps}
-                        onValueChange={(data) => setCalendarProps(data)}
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Label" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {categories.map((category: CalendarCategory) => (
-                            <SelectItem
-                              value={category.value}
-                              key={category.value}
-                            >
-                              {category.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    )}
-                  />
-                </div>
-              </div>
-
-              <div className="flex flex-wrap  gap-2 mt-10">
-                <Button type="submit" disabled={isPending} className="flex-1">
-                  {isPending ? (
-                    <>
-                      <Loader2 className="me-2 h-4 w-4 animate-spin" />
-                      {event ? "Updating..." : "Adding..."}
-                    </>
-                  ) : event ? (
-                    "Update Event"
-                  ) : (
-                    "Add Event"
-                  )}
-                </Button>
-                {event && (
-                  <Button
-                    type="button"
-                    color="destructive"
-                    onClick={() => handleOpenDeleteModal(event?.event?.id)}
-                    className="flex-1"
-                  >
-                    Delete
-                  </Button>
-                )}
-              </div>
-            </form>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};
-
-export default EventModal;