feat:language table approver

2025-03-06 16:18:31 +08:00 · 2025-03-06 16:18:31 +08:00 · b842c63998
parent dbf0edb58e
commit b842c63998
35 changed files with 2545 additions and 2323 deletions
--- a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
+++ b/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
@ -45,6 +45,7 @@ import { listEnableCategory } from "@/service/content/content";
 import { useTranslations } from "next-intl";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { Link } from "@/i18n/routing";
+import useTableColumns from "./columns";

 const BlogTable = () => {
  const router = useRouter();
@ -73,7 +74,7 @@ const BlogTable = () => {
  );
  const [categoryFilter, setCategoryFilter] = React.useState<string>("");
  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/blog/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/blog/components/columns.tsx
@ -17,28 +17,32 @@ import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { deleteBlog } from "@/service/blog/blog";
 import { error, loading } from "@/lib/swal";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => <span>{row.getValue("no")}</span>,
    },
    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }) => (
        <span className="whitespace-normal">{row.getValue("title")}</span>
      ),
    },
    {
      accessorKey: "categoryName",
-    header: "Category",
+      header: t("category"),
      cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
    },
    {
      accessorKey: "createdAt",
-    header: "Upload Date",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -54,7 +58,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "tags",
-    header: "Tag",
+      header: t("tag"),
      cell: ({ row }) => <span className="">{row.getValue("tags")}</span>,
    },
    {
@ -85,7 +89,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const router = useRouter();
@ -168,4 +172,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
@ -17,11 +17,15 @@ import withReactContent from "sweetalert2-react-content";
 import { deleteMedia } from "@/service/content/content";
 import { error } from "@/lib/swal";
 import Swal from "sweetalert2";
+import { useTranslations } from "next-intl";

+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
+  const MySwal = withReactContent(Swal);
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -34,7 +38,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("title");
        return (
@ -46,14 +50,16 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "categoryName",
-    header: "Category Name",
+      header: t("category-name"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("categoryName")}
+        </span>
      ),
    },
    {
      accessorKey: "createdAt",
-    header: "Upload Date",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -69,14 +75,14 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "creatorName",
-    header: "Creator Group",
+      header: t("creator-group"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
      ),
    },
    {
      accessorKey: "creatorGroupLevelName",
-    header: "Sumber",
+      header: t("source"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">
          {row.getValue("creatorGroupLevelName")}
@ -85,7 +91,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "publishedOn",
-    header: "Published",
+      header: t("published"),
      cell: ({ row }) => {
        const isPublish = row.original.isPublish;
        const isPublishOnPolda = row.original.isPublishOnPolda;
@ -138,7 +144,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const MySwal = withReactContent(Swal);
@ -198,13 +204,17 @@ const columns: ColumnDef<any>[] = [
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="p-0" align="end">
-            <Link href={`/contributor/content/audio/detail/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/audio/detail/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <Eye className="w-4 h-4 me-1.5" />
                  View
                </DropdownMenuItem>
              </Link>
-            <Link href={`/contributor/content/audio/update/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/audio/update/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <SquarePen className="w-4 h-4 me-1.5" />
                  Edit
@ -224,4 +234,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
+++ b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
@ -61,6 +61,7 @@ import {
 } from "@/service/content/content";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
+import useTableColumns from "./columns";

 const TableAudio = () => {
  const router = useRouter();
@ -99,7 +100,7 @@ const TableAudio = () => {
  const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx
@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { ColumnDef } from "@tanstack/react-table";

@ -19,13 +20,15 @@ import { deleteMedia } from "@/service/content/content";
 import { error, loading } from "@/lib/swal";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
+import { useTranslations } from "next-intl";

+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
  const MySwal = withReactContent(Swal);
-
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -38,7 +41,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("title");
        return (
@ -50,14 +53,16 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "categoryName",
-    header: "Category Name",
+      header: t("category-name"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("categoryName")}
+        </span>
      ),
    },
    {
      accessorKey: "createdAt",
-    header: "Upload Date",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -73,14 +78,14 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "creatorName",
-    header: "Creator Group",
+      header: t("creator-group"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
      ),
    },
    {
      accessorKey: "creatorGroupLevelName",
-    header: "Sumber",
+      header: t("source"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">
          {row.getValue("creatorGroupLevelName")}
@ -89,7 +94,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "publishedOn",
-    header: "Published",
+      header: t("published"),
      cell: ({ row }) => {
        const isPublish = row.original.isPublish;
        const isPublishOnPolda = row.original.isPublishOnPolda;
@ -141,7 +146,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const router = useRouter();
@ -202,13 +207,17 @@ const columns: ColumnDef<any>[] = [
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="p-0" align="end">
-            <Link href={`/contributor/content/image/detail/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/image/detail/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <Eye className="w-4 h-4 me-1.5" />
                  View
                </DropdownMenuItem>
              </Link>
-            <Link href={`/contributor/content/image/update/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/image/update/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <SquarePen className="w-4 h-4 me-1.5" />
                  Edit
@ -228,4 +237,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
+++ b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
@ -52,7 +52,7 @@ 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 "./columns";
+
 import {
  deleteMedia,
  listDataImage,
@ -66,6 +66,7 @@ import withReactContent from "sweetalert2-react-content";
 import { error } from "@/lib/swal";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
+import useTableColumns from "./columns";

 const TableImage = () => {
  const router = useRouter();
@ -104,7 +105,7 @@ const TableImage = () => {
  const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
@ -16,11 +16,17 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { format } from "date-fns";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+import withReactContent from "sweetalert2-react-content";
+import Swal from "sweetalert2";

+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
+  const MySwal = withReactContent(Swal);
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -33,7 +39,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "contentTitle",
-    header: "Judul",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("contentTitle");
        return (
@ -45,7 +51,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "contentTag",
-    header: "Tag",
+      header: t("tag"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
      ),
@ -53,14 +59,14 @@ const columns: ColumnDef<any>[] = [

    {
      accessorKey: "contentType",
-    header: "Tipe Konten ",
+      header: t("type-content"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("contentType")}</span>
      ),
    },
    {
      accessorKey: "contentCreatedGroupBy",
-    header: "Sumber ",
+      header: t("source"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">
          {row.getValue("contentCreatedGroupBy")}
@ -92,7 +98,7 @@ const columns: ColumnDef<any>[] = [

    {
      accessorKey: "contentCreatedDate",
-    header: "Tanggal Unggah",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("contentCreatedDate") as
          | string
@ -149,4 +155,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
+++ b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
@ -49,6 +49,7 @@ import {
 import { Label } from "@/components/ui/label";
 import { useTranslations } from "next-intl";
 import { format } from "date-fns";
+import useTableColumns from "./columns";

 // export type CompanyData = {
 //   no: number;
@ -89,7 +90,7 @@ const TableSPIT = () => {
  const [statusFilter, setStatusFilter] = React.useState<any[]>([]);

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: spitTable,
    columns,
--- a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
@ -17,11 +17,15 @@ import { error } from "@/lib/swal";
 import { deleteMedia } from "@/service/content/content";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
+import { useTranslations } from "next-intl";

+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
+  const MySwal = withReactContent(Swal);
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -34,7 +38,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("title");
        return (
@ -46,14 +50,16 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "categoryName",
-    header: "Category Name",
+      header: t("category-name"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("categoryName")}
+        </span>
      ),
    },
    {
      accessorKey: "createdAt",
-    header: "Upload Date",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -69,14 +75,14 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "creatorName",
-    header: "Creator Group",
+      header: t("creator-group"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
      ),
    },
    {
      accessorKey: "creatorGroupLevelName",
-    header: "Sumber",
+      header: t("source"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">
          {row.getValue("creatorGroupLevelName")}
@ -85,7 +91,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "publishedOn",
-    header: "Published",
+      header: t("published"),
      cell: ({ row }) => {
        const isPublish = row.original.isPublish;
        const isPublishOnPolda = row.original.isPublishOnPolda;
@ -139,7 +145,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const MySwal = withReactContent(Swal);
@ -199,13 +205,17 @@ const columns: ColumnDef<any>[] = [
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="p-0" align="end">
-            <Link href={`/contributor/content/teks/detail/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/teks/detail/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <Eye className="w-4 h-4 me-1.5" />
                  View
                </DropdownMenuItem>
              </Link>
-            <Link href={`/contributor/content/teks/update/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/teks/update/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <SquarePen className="w-4 h-4 me-1.5" />
                  Edit
@ -224,5 +234,7 @@ const columns: ColumnDef<any>[] = [
      },
    },
  ];
+  return columns;
+};

-export default columns;
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
+++ b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
@ -60,6 +60,7 @@ import {
 } from "@/service/content/content";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
+import useTableColumns from "./columns";

 const TableTeks = () => {
  const router = useRouter();
@ -98,7 +99,7 @@ const TableTeks = () => {
  const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx
@ -17,11 +17,16 @@ import { deleteMedia } from "@/service/content/content";
 import Swal from "sweetalert2";
 import withReactContent from "sweetalert2-react-content";
 import { error } from "@/lib/swal";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
+  const MySwal = withReactContent(Swal);

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -34,7 +39,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("title");
        return (
@ -46,14 +51,16 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "categoryName",
-    header: "Category Name",
+      header: t("category-name"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("categoryName")}
+        </span>
      ),
    },
    {
      accessorKey: "createdAt",
-    header: "Upload Date",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -69,14 +76,14 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "creatorName",
-    header: "Creator Group",
+      header: t("creator-group"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
      ),
    },
    {
      accessorKey: "creatorGroupLevelName",
-    header: "Sumber",
+      header: t("source"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">
          {row.getValue("creatorGroupLevelName")}
@ -85,7 +92,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "publishedOn",
-    header: "Published",
+      header: t("published"),
      cell: ({ row }) => {
        const isPublish = row.original.isPublish;
        const isPublishOnPolda = row.original.isPublishOnPolda;
@ -136,7 +143,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const MySwal = withReactContent(Swal);
@ -196,13 +203,17 @@ const columns: ColumnDef<any>[] = [
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="p-0" align="end">
-            <Link href={`/contributor/content/video/detail/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/video/detail/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <Eye className="w-4 h-4 me-1.5" />
                  View
                </DropdownMenuItem>
              </Link>
-            <Link href={`/contributor/content/video/update/${row.original.id}`}>
+              <Link
+                href={`/contributor/content/video/update/${row.original.id}`}
+              >
                <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                  <SquarePen className="w-4 h-4 me-1.5" />
                  Edit
@ -222,4 +233,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
+++ b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
@ -60,6 +60,7 @@ import {
 } from "@/service/content/content";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
+import useTableColumns from "./columns";

 const TableVideo = () => {
  const router = useRouter();
@ -98,7 +99,7 @@ const TableVideo = () => {
  const [filterByCreatorGroup, setFilterByCreatorGroup] = React.useState("");

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx
@ -13,11 +13,14 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";

+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -30,7 +33,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "title",
-    header: "Judul",
+      header: t("title"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -43,7 +46,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "createdAt",
-    header: "Tanggal Unggah ",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -77,7 +80,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        return (
@ -114,4 +117,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
+++ b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
@ -55,6 +55,7 @@ import { getPlanningSentPagination } from "@/service/planning/planning";
 import search from "@/app/[locale]/(protected)/app/chat/components/search";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { useTranslations } from "next-intl";
+import useTableColumns from "./columns";

 const MediahubTable = () => {
  const t = useTranslations("Planning");
@ -78,7 +79,7 @@ const MediahubTable = () => {
  const [totalPage, setTotalPage] = React.useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState("");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx
@ -13,11 +13,14 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";

+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -30,7 +33,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "title",
-    header: "Judul",
+      header: t("title"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -43,7 +46,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "createdAt",
-    header: "Tanggal Unggah ",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -77,7 +80,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        return (
@ -112,4 +115,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
+++ b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
@ -54,6 +54,7 @@ import columns from "./columns";
 import { getPlanningSentPagination } from "@/service/planning/planning";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { useTranslations } from "next-intl";
+import useTableColumns from "./columns";

 const MedsosTable = () => {
  const t = useTranslations("Planning");
@ -77,7 +78,7 @@ const MedsosTable = () => {
  const [totalPage, setTotalPage] = React.useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState("");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx
@ -12,11 +12,15 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -30,7 +34,7 @@ const columns: ColumnDef<any>[] = [

    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("title");
        return (
@ -42,21 +46,21 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "startDate",
-    header: "Start Date ",
+      header: t("start-date"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
      ),
    },
    {
      accessorKey: "endDate",
-    header: "End Date",
+      header: t("end-date"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
      ),
    },
    {
      accessorKey: "time",
-    header: "Time",
+      header: t("time"),
      cell: ({ row }: { row: { original: any } }) => {
        console.log("Row Original Data:", row.original);
        const { startTime, endTime } = row.original;
@ -69,7 +73,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "address",
-    header: "Address",
+      header: t("address"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const address: string = row.getValue("address");
        return (
@ -107,7 +111,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "speaker",
-    header: "Disampaikan oleh",
+      header: t("speaker"),
      cell: ({ row }: { row: { original: any } }) => {
        console.log("Row Original Data:", row.original);
        const { speakerTitle, speakerName } = row.original;
@ -120,16 +124,18 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "uploaderName",
-    header: "Sumber ",
+      header: t("source"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("uploaderName")}
+        </span>
      ),
    },

    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        return (
@ -170,5 +176,7 @@ const columns: ColumnDef<any>[] = [
      },
    },
  ];
+  return columns;
+};

-export default columns;
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
@ -33,6 +33,7 @@ import { useTranslations } from "next-intl";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { Link } from "@/i18n/routing";
 import { Button } from "@/components/ui/button";
+import useTableColumns from "./columns";

 const EventTable = () => {
  const router = useRouter();
@ -55,7 +56,7 @@ const EventTable = () => {
  const [totalPage, setTotalPage] = React.useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState<string>("");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx
@ -12,11 +12,15 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -30,7 +34,7 @@ const columns: ColumnDef<any>[] = [

    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("title");
        return (
@ -42,21 +46,21 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "startDate",
-    header: "Start Date ",
+      header: t("start-date"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
      ),
    },
    {
      accessorKey: "endDate",
-    header: "End Date",
+      header: t("end-date"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
      ),
    },
    {
      accessorKey: "time",
-    header: "Time",
+      header: t("time"),
      cell: ({ row }: { row: { original: any } }) => {
        console.log("Row Original Data:", row.original);
        const { startTime, endTime } = row.original;
@ -69,7 +73,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "address",
-    header: "Address",
+      header: t("address"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const address: string = row.getValue("address");
        return (
@ -107,7 +111,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "speaker",
-    header: "Disampaikan oleh",
+      header: t("speaker"),
      cell: ({ row }: { row: { original: any } }) => {
        console.log("Row Original Data:", row.original);
        const { speakerTitle, speakerName } = row.original;
@ -120,16 +124,18 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "uploaderName",
-    header: "Sumber ",
+      header: t("source"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("uploaderName")}
+        </span>
      ),
    },

    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        return (
@ -171,4 +177,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
@ -46,6 +46,7 @@ import { paginationSchedule } from "@/service/schedule/schedule";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { Link } from "@/i18n/routing";
 import { useTranslations } from "next-intl";
+import useTableColumns from "./columns";

 const PressConferenceTable = () => {
  const router = useRouter();
@ -68,7 +69,7 @@ const PressConferenceTable = () => {
  const [totalPage, setTotalPage] = React.useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState<string>("");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx
@ -12,11 +12,15 @@ import {
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -30,7 +34,7 @@ const columns: ColumnDef<any>[] = [

    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const title: string = row.getValue("title");
        return (
@ -42,21 +46,21 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "startDate",
-    header: "Start Date ",
+      header: t("start-date"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("startDate")}</span>
      ),
    },
    {
      accessorKey: "endDate",
-    header: "End Date",
+      header: t("end-date"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("endDate")}</span>
      ),
    },
    {
      accessorKey: "time",
-    header: "Time",
+      header: t("time"),
      cell: ({ row }: { row: { original: any } }) => {
        console.log("Row Original Data:", row.original);
        const { startTime, endTime } = row.original;
@ -69,7 +73,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "address",
-    header: "Address",
+      header: t("address"),
      cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
        const address: string = row.getValue("address");
        return (
@ -107,7 +111,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "speaker",
-    header: "Disampaikan oleh",
+      header: t("speaker"),
      cell: ({ row }: { row: { original: any } }) => {
        console.log("Row Original Data:", row.original);
        const { speakerTitle, speakerName } = row.original;
@ -120,16 +124,18 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "uploaderName",
-    header: "Sumber ",
+      header: t("source"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("uploaderName")}
+        </span>
      ),
    },

    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        return (
@ -171,4 +177,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
+++ b/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
@ -47,6 +47,7 @@ import { paginationSchedule } from "@/service/schedule/schedule";
 import { useTranslations } from "next-intl";
 import { CardHeader, CardTitle } from "@/components/ui/card";
 import { Link } from "@/i18n/routing";
+import useTableColumns from "./columns";

 const PressReleaseTable = () => {
  const router = useRouter();
@ -69,7 +70,7 @@ const PressReleaseTable = () => {
  const [totalPage, setTotalPage] = React.useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState<string>("");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/contributor/task/components/columns.tsx
+++ b/app/[locale]/(protected)/contributor/task/components/columns.tsx
@ -20,16 +20,19 @@ import { deleteTask } from "@/service/task";
 import { error, loading } from "@/lib/swal";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
+import { useTranslations } from "next-intl";

+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook
  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => <span>{row.getValue("no")}</span>,
    },
    {
      accessorKey: "title",
-    header: "Title",
+      header: t("title"),
      cell: ({ row }) => (
        <div>
          <span>{row.getValue("title")}</span>
@ -49,13 +52,13 @@ const columns: ColumnDef<any>[] = [

    {
      accessorKey: "uniqueCode",
-    header: "Code",
+      header: t("code"),
      cell: ({ row }) => <span>{row.getValue("uniqueCode")}</span>,
    },

    {
      accessorKey: "assignmentMainType",
-    header: "Type Task",
+      header: t("type-task"),
      cell: ({ row }) => {
        const type = row.getValue("assignmentMainType") as { name: string };
        return <span>{type?.name}</span>;
@ -63,7 +66,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "assignmentType",
-    header: "Category Task",
+      header: t("category-task"),
      cell: ({ row }) => {
        const type = row.getValue("assignmentType") as { name: string };
        return <span>{type?.name}</span>;
@ -71,7 +74,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "createdAt",
-    header: "Upload Date ",
+      header: t("upload-date"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -119,7 +122,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const router = useRouter();
@ -203,4 +206,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/contributor/task/components/task-table.tsx
+++ b/app/[locale]/(protected)/contributor/task/components/task-table.tsx
@ -56,6 +56,7 @@ import { listTask } from "@/service/task";
 import { Label } from "@/components/ui/label";
 import { format } from "date-fns";
 import { useTranslations } from "next-intl";
+import useTableColumns from "./columns";

 const TaskTable = () => {
  const router = useRouter();
@ -83,7 +84,7 @@ const TaskTable = () => {
  const [limit, setLimit] = React.useState(10);
  const [isSpecificAttention, setIsSpecificAttention] = React.useState(true);
  const [search, setSearch] = React.useState<string>("");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
@ -63,6 +63,7 @@ import {
  getTicketingEscalationPagination,
  listTicketingInternal,
 } from "@/service/communication/communication";
+import useTableColumns from "./columns";

 const CollaborationTable = () => {
  const router = useRouter();
@ -88,7 +89,7 @@ const CollaborationTable = () => {
  const [search, setSearch] = React.useState<string>("");

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx
+++ b/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx
@ -13,30 +13,36 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import { Link, useRouter } from "@/i18n/routing";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => <span> {row.getValue("no")}</span>,
    },
    {
      accessorKey: "title",
-    header: "Pertanyaan",
+      header: t("question"),
      cell: ({ row }) => (
        <span className="normal-case"> {row.getValue("title")}</span>
      ),
    },
    {
      accessorKey: "commentFromUserName",
-    header: "CreateBy",
+      header: t("sender"),
      cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
+        <span className="normal-case">
+          {row.getValue("commentFromUserName")}
+        </span>
      ),
    },
    {
      accessorKey: "Type",
-    header: "Channel",
+      header: t("type"),
      cell: ({ row }) => {
        const type = row.original.type;
        return <span className="normal-case">{type?.name || "N/A"}</span>;
@ -44,7 +50,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "createdAt",
-    header: "Waktu",
+      header: t("time"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -69,7 +75,9 @@ const columns: ColumnDef<any>[] = [
          : "bg-red-100 text-red-600"; // Gaya untuk "Closed"

        return (
-        <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
+          <Badge className={`rounded-full px-5 ${statusStyles}`}>
+            {status}
+          </Badge>
        );
      },
    },
@ -77,7 +85,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const router = useRouter();
@ -111,4 +119,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
+++ b/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
@ -13,30 +13,36 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => <span> {row.getValue("no")}</span>,
    },
    {
      accessorKey: "title",
-    header: "Pertanyaan",
+      header: t("question"),
      cell: ({ row }) => (
        <span className="normal-case"> {row.getValue("title")}</span>
      ),
    },
    {
      accessorKey: "commentFromUserName",
-    header: "Penerima",
+      header: t("sender"),
      cell: ({ row }) => (
-      <span className="normal-case">{row.getValue("commentFromUserName")}</span>
+        <span className="normal-case">
+          {row.getValue("commentFromUserName")}
+        </span>
      ),
    },
    {
      accessorKey: "type",
-    header: "Penerima",
+      header: t("type"),
      cell: ({ row }) => {
        const type = row.original.type; // Akses properti category
        return <span className="normal-case">{type?.name || "N/A"}</span>;
@ -44,7 +50,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "createdAt",
-    header: "Waktu",
+      header: t("time"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -69,7 +75,9 @@ const columns: ColumnDef<any>[] = [
          : "bg-red-100 text-red-600"; // Gaya untuk "Closed"

        return (
-        <Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
+          <Badge className={`rounded-full px-5 ${statusStyles}`}>
+            {status}
+          </Badge>
        );
      },
    },
@ -77,7 +85,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        return (
@ -106,5 +114,7 @@ const columns: ColumnDef<any>[] = [
      },
    },
  ];
+  return columns;
+};

-export default columns;
+export default useTableColumns;
--- a/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
@ -62,6 +62,7 @@ import {
  getTicketingEscalationPagination,
  listTicketingInternal,
 } from "@/service/communication/communication";
+import useTableColumns from "./columns";

 const EscalationTable = () => {
  const router = useRouter();
@ -87,7 +88,7 @@ const EscalationTable = () => {
  const [search, setSearch] = React.useState<string>("");

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx
+++ b/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx
@ -13,23 +13,27 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { format } from "date-fns";
 import { Link } from "@/components/navigation";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => <span> {row.getValue("no")}</span>,
    },
    {
      accessorKey: "title",
-    header: "Pertanyaan",
+      header: t("question"),
      cell: ({ row }) => (
        <span className="normal-case"> {row.getValue("title")}</span>
      ),
    },
    {
      accessorKey: "createdBy",
-    header: "Pengirim",
+      header: t("sender"),
      cell: ({ row }) => {
        const createdBy = row.original.createdBy; // Akses properti category
        return (
@ -39,7 +43,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "sendTo",
-    header: "Penerima",
+      header: t("sendto"),
      cell: ({ row }) => {
        const sendTo = row.original.sendTo; // Akses properti category
        return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
@ -47,7 +51,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "createdAt",
-    header: "Waktu",
+      header: t("time"),
      cell: ({ row }) => {
        const createdAt = row.getValue("createdAt") as
          | string
@ -64,7 +68,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        return (
@ -106,4 +110,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
+++ b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
@ -61,6 +61,7 @@ import {
 } from "@/service/content/content";
 import { listTicketingInternal } from "@/service/communication/communication";
 import { Link } from "@/components/navigation";
+import useTableColumns from "./columns";

 const InternalTable = () => {
  const router = useRouter();
@ -88,7 +89,7 @@ const InternalTable = () => {
  const userLevelId = getCookiesDecrypt("ulie");

  const roleId = getCookiesDecrypt("urie");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/app/[locale]/(protected)/shared/contest/components/columns.tsx
+++ b/app/[locale]/(protected)/shared/contest/components/columns.tsx
@ -18,11 +18,15 @@ import Swal from "sweetalert2";
 import { error } from "@/lib/swal";
 import { deleteMedia } from "@/service/content/content";
 import { publishContest } from "@/service/contest/contest";
+import { useTranslations } from "next-intl";
+
+const useTableColumns = () => {
+  const t = useTranslations("Table"); // Panggil di dalam hook

  const columns: ColumnDef<any>[] = [
    {
      accessorKey: "no",
-    header: "No",
+      header: t("no"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -35,7 +39,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "hastagCode",
-    header: "Kode",
+      header: t("code"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -51,7 +55,7 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "theme",
-    header: "Judul",
+      header: t("title"),
      cell: ({ row }) => (
        <div className="flex items-center gap-5">
          <div className="flex-1 text-start">
@ -64,21 +68,23 @@ const columns: ColumnDef<any>[] = [
    },
    {
      accessorKey: "duration",
-    header: "Durasi ",
+      header: t("duration"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">{row.getValue("duration")}</span>
      ),
    },
    {
      accessorKey: "targetOutput",
-    header: "Target Output ",
+      header: t("target-output"),
      cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("targetOutput")}</span>
+        <span className="whitespace-nowrap">
+          {row.getValue("targetOutput")}
+        </span>
      ),
    },
    {
      accessorKey: "targetParticipantTopLevel",
-    header: "Target Participant ",
+      header: t("target-participant"),
      cell: ({ row }) => (
        <span className="whitespace-nowrap">
          {row.getValue("targetParticipantTopLevel")}
@ -128,7 +134,7 @@ const columns: ColumnDef<any>[] = [
    {
      id: "actions",
      accessorKey: "action",
-    header: "Actions",
+      header: t("action"),
      enableHiding: false,
      cell: ({ row }) => {
        const MySwal = withReactContent(Swal);
@ -226,4 +232,7 @@ const columns: ColumnDef<any>[] = [
    },
  ];

-export default columns;
+  return columns;
+};
+
+export default useTableColumns;
--- a/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
+++ b/app/[locale]/(protected)/shared/contest/components/contest-table.tsx
@ -42,6 +42,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import TablePagination from "@/components/table/table-pagination";
 import columns from "./columns";
 import { listContest } from "@/service/contest/contest";
+import useTableColumns from "./columns";

 const TaskTable = () => {
  const router = useRouter();
@ -63,7 +64,7 @@ const TaskTable = () => {
  const [totalPage, setTotalPage] = React.useState(1);
  const [limit, setLimit] = React.useState(10);
  const [search, setSearch] = React.useState<string>("");
-
+  const columns = useTableColumns();
  const table = useReactTable({
    data: dataTable,
    columns,
--- a/components/form/content/spit-convert-form.tsx
+++ b/components/form/content/spit-convert-form.tsx
@ -812,7 +812,7 @@ export default function FormConvertSPIT() {
                <div className="mt-3">
                  <Label className="text-xl">Penempatan file</Label>
                </div>
-                {files.length > 1 && (
+                {files?.length > 1 && (
                  <div className="flex flex-wrap gap-2 mt-2">
                    <div className="flex items-center space-x-2">
                      <Checkbox
--- a/messages/en.json
+++ b/messages/en.json
@ -607,5 +607,34 @@
  },
  "Curation": {
    "content-curation": "Content Curation"
+  },
+  "Table": {
+    "no": "No",
+    "title": "Title",
+    "category-name": "Category Name",
+    "upload-date": "Upload Date",
+    "creator-group": "Creator Group",
+    "source": "source",
+    "published": "Published",
+    "date": "Date",
+    "category": "Category",
+    "tag": "Tag",
+    "type-content": "Content Type",
+    "type-task": "Task Type",
+    "category-task": "Category Task",
+    "code": "Code",
+    "start-date": "Start Date",
+    "end-date": "End Date",
+    "speaker": "Speaker",
+    "time": "Time",
+    "address": "Address",
+    "question": "Question",
+    "sender": "Created By",
+    "sendto": "SendTo",
+    "type": "Type",
+    "duration": "Duration",
+    "target-output": "Target Output",
+    "target-participant": "Target Participant",
+    "action": "Actions"
  }
 }
--- a/messages/in.json
+++ b/messages/in.json
@ -608,5 +608,34 @@
  },
  "Curation": {
    "content-curation": "Kurasi Konten"
+  },
+  "Table": {
+    "no": "Nomor",
+    "title": "Judul",
+    "category-name": "Nama Kategori",
+    "upload-date": "Tanggal Upload",
+    "creator-group": "Pembuat",
+    "source": "Sumber",
+    "published": "Diterbitkan",
+    "date": "Tanggal",
+    "category": "Kategori",
+    "tag": "Tag",
+    "type-content": "Tipe Konten",
+    "type-task": "Tipen Penugasan",
+    "category-task": "Kategori Penugasan",
+    "code": "Kode",
+    "start-date": "Tanggal Mulai",
+    "end-date": "Tanggal Selesai",
+    "speaker": "Disampaikan Oleh",
+    "time": "Waktu",
+    "address": "Alamat",
+    "question": "Pertanyaan",
+    "sender": "Pengirim",
+    "sendto": "Penerima",
+    "type": "Tipe",
+    "duration": "Durasi",
+    "target-output": "Target Output",
+    "target-participant": "Target Peserta",
+    "action": "Aksi"
  }
 }