From b842c63998b68bf954ed7cd133b5d6891243f577 Mon Sep 17 00:00:00 2001 From: Anang Yusman Date: Thu, 6 Mar 2025 16:18:31 +0800 Subject: [PATCH] feat:language table approver --- .../blog/components/blog-table.tsx | 3 +- .../contributor/blog/components/columns.tsx | 285 +++++++------ .../content/audio/components/columns.tsx | 397 ++++++++--------- .../content/audio/components/table-audio.tsx | 3 +- .../content/image/components/columns.tsx | 400 +++++++++--------- .../content/image/components/table-image.tsx | 5 +- .../content/spit/table-spit/columns.tsx | 249 +++++------ .../content/spit/table-spit/table-spit.tsx | 3 +- .../content/teks/components/columns.tsx | 398 ++++++++--------- .../content/teks/components/table-teks.tsx | 3 +- .../content/video/components/columns.tsx | 396 ++++++++--------- .../content/video/components/table-video.tsx | 3 +- .../planning/mediahub/components/columns.tsx | 192 +++++---- .../mediahub/components/mediahub-table.tsx | 3 +- .../medsos-mediahub/components/columns.tsx | 188 ++++---- .../components/medsos-table.tsx | 3 +- .../schedule/event/components/columns.tsx | 308 +++++++------- .../schedule/event/components/event-table.tsx | 3 +- .../press-conference/components/columns.tsx | 309 +++++++------- .../components/presscon-table.tsx | 3 +- .../press-release/components/columns.tsx | 309 +++++++------- .../components/pressrilis-table.tsx | 3 +- .../contributor/task/components/columns.tsx | 360 ++++++++-------- .../task/components/task-table.tsx | 3 +- .../components/collabroation-table.tsx | 3 +- .../collaboration/components/columns.tsx | 197 +++++---- .../escalation/components/columns.tsx | 188 ++++---- .../components/escalation-table.tsx | 3 +- .../internal/components/columns.tsx | 183 ++++---- .../internal/components/internal-table.tsx | 3 +- .../shared/contest/components/columns.tsx | 399 ++++++++--------- .../contest/components/contest-table.tsx | 3 +- components/form/content/spit-convert-form.tsx | 2 +- messages/en.json | 29 ++ messages/in.json | 29 ++ 35 files changed, 2545 insertions(+), 2323 deletions(-) diff --git a/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx b/app/[locale]/(protected)/contributor/blog/components/blog-table.tsx index 4ccda3e8..60104d67 100644 --- 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(""); const [statusFilter, setStatusFilter] = React.useState([]); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/app/[locale]/(protected)/contributor/blog/components/columns.tsx b/app/[locale]/(protected)/contributor/blog/components/columns.tsx index c111ef2e..87b5d362 100644 --- a/app/[locale]/(protected)/contributor/blog/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/blog/components/columns.tsx @@ -17,155 +17,162 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => {row.getValue("no")}, - }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }) => ( - {row.getValue("title")} - ), - }, - { - accessorKey: "categoryName", - header: "Category", - cell: ({ row }) => {row.getValue("categoryName")}, - }, - { - accessorKey: "createdAt", - header: "Upload Date", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; +const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => {row.getValue("no")}, }, - }, - { - accessorKey: "tags", - header: "Tag", - cell: ({ row }) => {row.getValue("tags")}, - }, - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - - // Mengambil `statusName` dari data API - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - - // Gunakan `statusName` untuk pencocokan - const statusStyles = - statusColors[statusName] || "bg-gray-100 text-gray-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); + { + accessorKey: "title", + header: t("title"), + cell: ({ row }) => ( + {row.getValue("title")} + ), }, - }, + { + accessorKey: "categoryName", + header: t("category"), + cell: ({ row }) => {row.getValue("categoryName")}, + }, + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const router = useRouter(); - const MySwal = withReactContent(Swal); + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "tags", + header: t("tag"), + cell: ({ row }) => {row.getValue("tags")}, + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; - async function deleteProcess(id: any) { - loading(); - const resDelete = await deleteBlog(id); + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - if (resDelete?.error) { - error(resDelete.message); - return false; + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, + }, + + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const router = useRouter(); + const MySwal = withReactContent(Swal); + + async function deleteProcess(id: any) { + loading(); + const resDelete = await deleteBlog(id); + + if (resDelete?.error) { + error(resDelete.message); + return false; + } + success(); } - success(); - } - function success() { - MySwal.fire({ - title: "Sukses", - icon: "success", - confirmButtonColor: "#3085d6", - confirmButtonText: "OK", - }).then((result) => { - if (result.isConfirmed) { - window.location.reload(); - } - }); - } + function success() { + MySwal.fire({ + title: "Sukses", + icon: "success", + confirmButtonColor: "#3085d6", + confirmButtonText: "OK", + }).then((result) => { + if (result.isConfirmed) { + window.location.reload(); + } + }); + } - const handleDeleteBlog = (id: any) => { - MySwal.fire({ - title: "Hapus Data", - text: "", - icon: "warning", - showCancelButton: true, - cancelButtonColor: "#3085d6", - confirmButtonColor: "#d33", - confirmButtonText: "Hapus", - }).then((result) => { - if (result.isConfirmed) { - deleteProcess(id); - } - }); - }; - return ( - - - - - - - - - View + const handleDeleteBlog = (id: any) => { + MySwal.fire({ + title: "Hapus Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Hapus", + }).then((result) => { + if (result.isConfirmed) { + deleteProcess(id); + } + }); + }; + return ( + + + + + + + + + View + + + + + + Edit + + + handleDeleteBlog(row.original.id)} + className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" + > + + Delete - - - - - Edit - - - handleDeleteBlog(row.original.id)} - className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" - > - - Delete - - - - ); + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx index f6410a19..58f69d01 100644 --- a/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/audio/components/columns.tsx @@ -17,211 +17,224 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const MySwal = withReactContent(Swal); + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("title"); - return ( + ), + }, + { + accessorKey: "title", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("title"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "categoryName", + header: t("category-name"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("categoryName")} - ); + ), }, - }, - { - accessorKey: "categoryName", - header: "Category Name", - cell: ({ row }) => ( - {row.getValue("categoryName")} - ), - }, - { - accessorKey: "createdAt", - header: "Upload Date", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, }, - }, - { - accessorKey: "creatorName", - header: "Creator Group", - cell: ({ row }) => ( - {row.getValue("creatorName")} - ), - }, - { - accessorKey: "creatorGroupLevelName", - header: "Sumber", - cell: ({ row }) => ( - - {row.getValue("creatorGroupLevelName")} - - ), - }, - { - accessorKey: "publishedOn", - header: "Published", - cell: ({ row }) => { - const isPublish = row.original.isPublish; - const isPublishOnPolda = row.original.isPublishOnPolda; - - let displayText = "-"; - if (isPublish && !isPublishOnPolda) { - displayText = "Mabes"; - } else if (isPublish && isPublishOnPolda) { - displayText = "Mabes & Polda"; - } else if (!isPublish && isPublishOnPolda) { - displayText = "Polda"; - } - - return ( -
- {displayText} -
- ); + { + accessorKey: "creatorName", + header: t("creator-group"), + cell: ({ row }) => ( + {row.getValue("creatorName")} + ), }, - }, - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - - // Mengambil `statusName` dari data API - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - - // Gunakan `statusName` untuk pencocokan - const statusStyles = - statusColors[statusName] || "bg-gray-100 text-gray-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); + { + accessorKey: "creatorGroupLevelName", + header: t("source"), + cell: ({ row }) => ( + + {row.getValue("creatorGroupLevelName")} + + ), }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const MySwal = withReactContent(Swal); + { + accessorKey: "publishedOn", + header: t("published"), + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; - async function doDelete(id: any) { - // loading(); - const data = { - id, + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } + + return ( +
+ {displayText} +
+ ); + }, + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", }; - const response = await deleteMedia(data); + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - if (response?.error) { - error(response.message); - return false; - } - success(); - } + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; - 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 ( - - - - - - - - - View - - - - - - Edit - - - handleDeleteMedia(row.original.id)} - className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" - > - - Delete - - - - ); + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, }, - }, -]; + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const MySwal = withReactContent(Swal); -export default columns; + 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 ( + + + + + + + + + View + + + + + + Edit + + + handleDeleteMedia(row.original.id)} + className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" + > + + Delete + + + + ); + }, + }, + ]; + + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx b/app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx index 05e29ee8..7a2b9196 100644 --- 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, diff --git a/app/[locale]/(protected)/contributor/content/image/components/columns.tsx b/app/[locale]/(protected)/contributor/content/image/components/columns.tsx index e6afa317..28e03f43 100644 --- 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,213 +20,224 @@ 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 MySwal = withReactContent(Swal); - -const columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const MySwal = withReactContent(Swal); + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("title"); - return ( + ), + }, + { + accessorKey: "title", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("title"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "categoryName", + header: t("category-name"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("categoryName")} - ); + ), }, - }, - { - accessorKey: "categoryName", - header: "Category Name", - cell: ({ row }) => ( - {row.getValue("categoryName")} - ), - }, - { - accessorKey: "createdAt", - header: "Upload Date", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, }, - }, - { - accessorKey: "creatorName", - header: "Creator Group", - cell: ({ row }) => ( - {row.getValue("creatorName")} - ), - }, - { - accessorKey: "creatorGroupLevelName", - header: "Sumber", - cell: ({ row }) => ( - - {row.getValue("creatorGroupLevelName")} - - ), - }, - { - accessorKey: "publishedOn", - header: "Published", - cell: ({ row }) => { - const isPublish = row.original.isPublish; - const isPublishOnPolda = row.original.isPublishOnPolda; - - let displayText = "-"; - if (isPublish && !isPublishOnPolda) { - displayText = "Mabes"; - } else if (isPublish && isPublishOnPolda) { - displayText = "Mabes & Polda"; - } else if (!isPublish && isPublishOnPolda) { - displayText = "Polda"; - } - - return ( -
- {displayText} -
- ); + { + accessorKey: "creatorName", + header: t("creator-group"), + cell: ({ row }) => ( + {row.getValue("creatorName")} + ), }, - }, - // - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); - const statusStyles = - statusColors[statusName] || "bg-red-200 text-red-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); + { + accessorKey: "creatorGroupLevelName", + header: t("source"), + cell: ({ row }) => ( + + {row.getValue("creatorGroupLevelName")} + + ), }, - }, + { + accessorKey: "publishedOn", + header: t("published"), + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const router = useRouter(); - const MySwal = withReactContent(Swal); + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } - async function doDelete(id: any) { - // loading(); - const data = { - id, + return ( +
+ {displayText} +
+ ); + }, + }, + // + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", }; - const response = await deleteMedia(data); + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); + const statusStyles = + statusColors[statusName] || "bg-red-200 text-red-600"; - 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 ( - - - - - - - - - View - - - - - - Edit - - - handleDeleteMedia(row.original.id)} - className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" - > - - Delete - - - - ); + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, }, - }, -]; -export default columns; + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const router = useRouter(); + 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 ( + + + + + + + + + View + + + + + + Edit + + + handleDeleteMedia(row.original.id)} + className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" + > + + Delete + + + + ); + }, + }, + ]; + + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx b/app/[locale]/(protected)/contributor/content/image/components/table-image.tsx index 3f15c2d8..16f6f398 100644 --- 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, diff --git a/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx b/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx index 1eaa46ef..d39ca88c 100644 --- a/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx @@ -16,137 +16,146 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const MySwal = withReactContent(Swal); + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "contentTitle", - header: "Judul", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("contentTitle"); - return ( + ), + }, + { + accessorKey: "contentTitle", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("contentTitle"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "contentTag", + header: t("tag"), + cell: ({ row }) => ( + {row.getValue("contentTag")} + ), + }, + + { + accessorKey: "contentType", + header: t("type-content"), + cell: ({ row }) => ( + {row.getValue("contentType")} + ), + }, + { + accessorKey: "contentCreatedGroupBy", + header: t("source"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("contentCreatedGroupBy")} - ); + ), }, - }, - { - accessorKey: "contentTag", - header: "Tag", - cell: ({ row }) => ( - {row.getValue("contentTag")} - ), - }, - { - accessorKey: "contentType", - header: "Tipe Konten ", - cell: ({ row }) => ( - {row.getValue("contentType")} - ), - }, - { - accessorKey: "contentCreatedGroupBy", - header: "Sumber ", - cell: ({ row }) => ( - - {row.getValue("contentCreatedGroupBy")} - - ), - }, - - { - accessorKey: "isPublish", - header: "Status", - cell: ({ row }) => { - const isPublish = row.getValue("isPublish"); - return ( -
- -
- ); - }, - }, - - { - accessorKey: "contentCreatedDate", - header: "Tanggal Unggah", - cell: ({ row }) => { - const createdAt = row.getValue("contentCreatedDate") as - | string - | number - | undefined; - - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; - }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const isDisabled = row.original.isPublish; // Check the isPublish value - - return ( - - + { + accessorKey: "isPublish", + header: "Status", + cell: ({ row }) => { + const isPublish = row.getValue("isPublish"); + return ( +
- - - - + ); + }, + }, + + { + accessorKey: "contentCreatedDate", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("contentCreatedDate") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + const isDisabled = row.original.isPublish; // Check the isPublish value + + return ( + + + + + + + + + Pindah Ke Mediahub + + + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx b/app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx index edb57893..791ea4f9 100644 --- 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([]); const roleId = getCookiesDecrypt("urie"); - + const columns = useTableColumns(); const table = useReactTable({ data: spitTable, columns, diff --git a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx index ad40c578..0a25137b 100644 --- a/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/teks/components/columns.tsx @@ -17,212 +17,224 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const MySwal = withReactContent(Swal); + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("title"); - return ( + ), + }, + { + accessorKey: "title", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("title"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "categoryName", + header: t("category-name"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("categoryName")} - ); + ), }, - }, - { - accessorKey: "categoryName", - header: "Category Name", - cell: ({ row }) => ( - {row.getValue("categoryName")} - ), - }, - { - accessorKey: "createdAt", - header: "Upload Date", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, }, - }, - { - accessorKey: "creatorName", - header: "Creator Group", - cell: ({ row }) => ( - {row.getValue("creatorName")} - ), - }, - { - accessorKey: "creatorGroupLevelName", - header: "Sumber", - cell: ({ row }) => ( - - {row.getValue("creatorGroupLevelName")} - - ), - }, - { - accessorKey: "publishedOn", - header: "Published", - cell: ({ row }) => { - const isPublish = row.original.isPublish; - const isPublishOnPolda = row.original.isPublishOnPolda; - - let displayText = "-"; - if (isPublish && !isPublishOnPolda) { - displayText = "Mabes"; - } else if (isPublish && isPublishOnPolda) { - displayText = "Mabes & Polda"; - } else if (!isPublish && isPublishOnPolda) { - displayText = "Polda"; - } - - return ( -
- {displayText} -
- ); + { + accessorKey: "creatorName", + header: t("creator-group"), + cell: ({ row }) => ( + {row.getValue("creatorName")} + ), }, - }, - - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - - // Mengambil `statusName` dari data API - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - - // Gunakan `statusName` untuk pencocokan - const statusStyles = - statusColors[statusName] || "bg-gray-100 text-gray-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); + { + accessorKey: "creatorGroupLevelName", + header: t("source"), + cell: ({ row }) => ( + + {row.getValue("creatorGroupLevelName")} + + ), }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const MySwal = withReactContent(Swal); + { + accessorKey: "publishedOn", + header: t("published"), + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; - async function doDelete(id: any) { - // loading(); - const data = { - id, + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } + + return ( +
+ {displayText} +
+ ); + }, + }, + + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", }; - const response = await deleteMedia(data); + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - if (response?.error) { - error(response.message); - return false; - } - success(); - } + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; - 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 ( - - - - - - - - - View - - - - - - Edit - - - handleDeleteMedia(row.original.id)} - className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" - > - - Delete - - - - ); + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, }, - }, -]; + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const MySwal = withReactContent(Swal); -export default columns; + 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 ( + + + + + + + + + View + + + + + + Edit + + + handleDeleteMedia(row.original.id)} + className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" + > + + Delete + + + + ); + }, + }, + ]; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx b/app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx index dd1924c5..6b2f9492 100644 --- 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, diff --git a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx index 409fe156..0fbf71f6 100644 --- a/app/[locale]/(protected)/contributor/content/video/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/content/video/components/columns.tsx @@ -17,209 +17,223 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const MySwal = withReactContent(Swal); + + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("title"); - return ( + ), + }, + { + accessorKey: "title", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("title"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "categoryName", + header: t("category-name"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("categoryName")} - ); + ), }, - }, - { - accessorKey: "categoryName", - header: "Category Name", - cell: ({ row }) => ( - {row.getValue("categoryName")} - ), - }, - { - accessorKey: "createdAt", - header: "Upload Date", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, }, - }, - { - accessorKey: "creatorName", - header: "Creator Group", - cell: ({ row }) => ( - {row.getValue("creatorName")} - ), - }, - { - accessorKey: "creatorGroupLevelName", - header: "Sumber", - cell: ({ row }) => ( - - {row.getValue("creatorGroupLevelName")} - - ), - }, - { - accessorKey: "publishedOn", - header: "Published", - cell: ({ row }) => { - const isPublish = row.original.isPublish; - const isPublishOnPolda = row.original.isPublishOnPolda; - - let displayText = "-"; - if (isPublish && !isPublishOnPolda) { - displayText = "Mabes"; - } else if (isPublish && isPublishOnPolda) { - displayText = "Mabes & Polda"; - } else if (!isPublish && isPublishOnPolda) { - displayText = "Polda"; - } - - return ( -
- {displayText} -
- ); + { + accessorKey: "creatorName", + header: t("creator-group"), + cell: ({ row }) => ( + {row.getValue("creatorName")} + ), }, - }, - - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); - const statusStyles = - statusColors[statusName] || "bg-red-200 text-red-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); + { + accessorKey: "creatorGroupLevelName", + header: t("source"), + cell: ({ row }) => ( + + {row.getValue("creatorGroupLevelName")} + + ), }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const MySwal = withReactContent(Swal); + { + accessorKey: "publishedOn", + header: t("published"), + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; - async function doDelete(id: any) { - // loading(); - const data = { - id, + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } + + return ( +
+ {displayText} +
+ ); + }, + }, + + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", }; - const response = await deleteMedia(data); + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); + const statusStyles = + statusColors[statusName] || "bg-red-200 text-red-600"; - 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 ( - - - - - - - - - View - - - - - - Edit - - - handleDeleteMedia(row.original.id)} - className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" - > - - Delete - - - - ); + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, }, - }, -]; + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const MySwal = withReactContent(Swal); -export default columns; + 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 ( + + + + + + + + + View + + + + + + Edit + + + handleDeleteMedia(row.original.id)} + className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" + > + + Delete + + + + ); + }, + }, + ]; + + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx b/app/[locale]/(protected)/contributor/content/video/components/table-video.tsx index 210257a4..3885eb53 100644 --- 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, diff --git a/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx b/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx index 666d3856..f073d942 100644 --- a/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx @@ -13,105 +13,111 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "title", - header: "Judul", - cell: ({ row }) => ( -
-
-

- {row.getValue("title")} -

+ ), + }, + { + accessorKey: "title", + header: t("title"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("title")} +

+
-
- ), - }, - { - accessorKey: "createdAt", - header: "Tanggal Unggah ", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; + ), + }, + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, }, - }, - { - accessorKey: "isActive", - header: "Status", - cell: ({ row }) => { - const isActive = row.getValue("isActive"); - console.log("isActive value:", isActive); // TypeScript type is inferred correctly - return ( -
- {isActive ? ( - Terkirim - ) : ( - Belum Terkirim - )} -
- ); + { + accessorKey: "isActive", + header: "Status", + cell: ({ row }) => { + const isActive = row.getValue("isActive"); + console.log("isActive value:", isActive); // TypeScript type is inferred correctly + return ( +
+ {isActive ? ( + Terkirim + ) : ( + Belum Terkirim + )} +
+ ); + }, }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - - Publish + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + Publish + + + deletePlan(row.id)} + > + + Delete - - deletePlan(row.id)} - > - - Delete - - - - ); + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx b/app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx index a05d796f..9d3d6fc5 100644 --- 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, diff --git a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx index 5adee17a..efa2629c 100644 --- a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx @@ -13,103 +13,109 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "title", - header: "Judul", - cell: ({ row }) => ( -
-
-

- {row.getValue("title")} -

+ ), + }, + { + accessorKey: "title", + header: t("title"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("title")} +

+
-
- ), - }, - { - accessorKey: "createdAt", - header: "Tanggal Unggah ", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; + ), + }, + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, }, - }, - { - accessorKey: "isActive", - header: "Status", - cell: ({ row }) => { - const isActive = row.getValue("isActive"); - console.log("isActive value:", isActive); // TypeScript type is inferred correctly - return ( -
- {isActive ? ( - Terkirim - ) : ( - Belum Terkirim - )} -
- ); + { + accessorKey: "isActive", + header: "Status", + cell: ({ row }) => { + const isActive = row.getValue("isActive"); + console.log("isActive value:", isActive); // TypeScript type is inferred correctly + return ( +
+ {isActive ? ( + Terkirim + ) : ( + Belum Terkirim + )} +
+ ); + }, }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - - Publish + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + Publish + + + + + + Delete - - - - - Delete - - - - ); + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx b/app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx index 0451632c..b909ffeb 100644 --- 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, diff --git a/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx b/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx index 85734969..52afd9b5 100644 --- a/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx @@ -12,163 +12,171 @@ import { import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Link } from "@/components/navigation"; +import { useTranslations } from "next-intl"; -const columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, + ), + }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("title"); - return ( + { + accessorKey: "title", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("title"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "startDate", + header: t("start-date"), + cell: ({ row }) => ( + {row.getValue("startDate")} + ), + }, + { + accessorKey: "endDate", + header: t("end-date"), + cell: ({ row }) => ( + {row.getValue("endDate")} + ), + }, + { + accessorKey: "time", + header: t("time"), + cell: ({ row }: { row: { original: any } }) => { + console.log("Row Original Data:", row.original); + const { startTime, endTime } = row.original; + return ( + + {startTime || "N/A"} - {endTime || "N/A"} + + ); + }, + }, + { + accessorKey: "address", + header: t("address"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const address: string = row.getValue("address"); + return ( + + {address.length > 50 ? `${address.slice(0, 40)}...` : address} + + ); + }, + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; + + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil + + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, + }, + { + accessorKey: "speaker", + header: t("speaker"), + cell: ({ row }: { row: { original: any } }) => { + console.log("Row Original Data:", row.original); + const { speakerTitle, speakerName } = row.original; + return ( + + {speakerTitle || ""} {speakerName || ""} + + ); + }, + }, + { + accessorKey: "uploaderName", + header: t("source"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("uploaderName")} - ); + ), }, - }, - { - accessorKey: "startDate", - header: "Start Date ", - cell: ({ row }) => ( - {row.getValue("startDate")} - ), - }, - { - accessorKey: "endDate", - header: "End Date", - cell: ({ row }) => ( - {row.getValue("endDate")} - ), - }, - { - accessorKey: "time", - header: "Time", - cell: ({ row }: { row: { original: any } }) => { - console.log("Row Original Data:", row.original); - const { startTime, endTime } = row.original; - return ( - - {startTime || "N/A"} - {endTime || "N/A"} - - ); - }, - }, - { - accessorKey: "address", - header: "Address", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const address: string = row.getValue("address"); - return ( - - {address.length > 50 ? `${address.slice(0, 40)}...` : address} - - ); - }, - }, - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - // Mengambil `statusName` dari data API - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - - // Gunakan `statusName` untuk pencocokan - const statusStyles = - statusColors[statusName] || "bg-gray-100 text-gray-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); - }, - }, - { - accessorKey: "speaker", - header: "Disampaikan oleh", - cell: ({ row }: { row: { original: any } }) => { - console.log("Row Original Data:", row.original); - const { speakerTitle, speakerName } = row.original; - return ( - - {speakerTitle || ""} {speakerName || ""} - - ); - }, - }, - { - accessorKey: "uploaderName", - header: "Sumber ", - cell: ({ row }) => ( - {row.getValue("uploaderName")} - ), - }, - - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - - View + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + + Edit + + + + + Delete - - - - - Edit - - - - - Delete - - - - ); + + + ); + }, }, - }, -]; + ]; + return columns; +}; -export default columns; +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx b/app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx index 701dcc8e..30e4ca99 100644 --- 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(""); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx b/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx index 7e9737aa..1a3a3ae3 100644 --- a/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx @@ -12,163 +12,172 @@ import { import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Link } from "@/components/navigation"; +import { useTranslations } from "next-intl"; -const columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, + ), + }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("title"); - return ( + { + accessorKey: "title", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("title"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "startDate", + header: t("start-date"), + cell: ({ row }) => ( + {row.getValue("startDate")} + ), + }, + { + accessorKey: "endDate", + header: t("end-date"), + cell: ({ row }) => ( + {row.getValue("endDate")} + ), + }, + { + accessorKey: "time", + header: t("time"), + cell: ({ row }: { row: { original: any } }) => { + console.log("Row Original Data:", row.original); + const { startTime, endTime } = row.original; + return ( + + {startTime || "N/A"} - {endTime || "N/A"} + + ); + }, + }, + { + accessorKey: "address", + header: t("address"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const address: string = row.getValue("address"); + return ( + + {address.length > 50 ? `${address.slice(0, 40)}...` : address} + + ); + }, + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; + + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil + + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, + }, + { + accessorKey: "speaker", + header: t("speaker"), + cell: ({ row }: { row: { original: any } }) => { + console.log("Row Original Data:", row.original); + const { speakerTitle, speakerName } = row.original; + return ( + + {speakerTitle || ""} {speakerName || ""} + + ); + }, + }, + { + accessorKey: "uploaderName", + header: t("source"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("uploaderName")} - ); + ), }, - }, - { - accessorKey: "startDate", - header: "Start Date ", - cell: ({ row }) => ( - {row.getValue("startDate")} - ), - }, - { - accessorKey: "endDate", - header: "End Date", - cell: ({ row }) => ( - {row.getValue("endDate")} - ), - }, - { - accessorKey: "time", - header: "Time", - cell: ({ row }: { row: { original: any } }) => { - console.log("Row Original Data:", row.original); - const { startTime, endTime } = row.original; - return ( - - {startTime || "N/A"} - {endTime || "N/A"} - - ); - }, - }, - { - accessorKey: "address", - header: "Address", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const address: string = row.getValue("address"); - return ( - - {address.length > 50 ? `${address.slice(0, 40)}...` : address} - - ); - }, - }, - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - // Mengambil `statusName` dari data API - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - - // Gunakan `statusName` untuk pencocokan - const statusStyles = - statusColors[statusName] || "bg-gray-100 text-gray-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); - }, - }, - { - accessorKey: "speaker", - header: "Disampaikan oleh", - cell: ({ row }: { row: { original: any } }) => { - console.log("Row Original Data:", row.original); - const { speakerTitle, speakerName } = row.original; - return ( - - {speakerTitle || ""} {speakerName || ""} - - ); - }, - }, - { - accessorKey: "uploaderName", - header: "Sumber ", - cell: ({ row }) => ( - {row.getValue("uploaderName")} - ), - }, - - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - - Detail + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + Detail + + + + + + Edit + + + + + Delete - - - - - Edit - - - - - Delete - - - - ); + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx b/app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx index ee8f34e3..8922a214 100644 --- 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(""); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx b/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx index 0bfb7dfa..98f71883 100644 --- a/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx @@ -12,163 +12,172 @@ import { import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Link } from "@/components/navigation"; +import { useTranslations } from "next-intl"; -const columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, + ), + }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const title: string = row.getValue("title"); - return ( + { + accessorKey: "title", + header: t("title"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const title: string = row.getValue("title"); + return ( + + {title.length > 50 ? `${title.slice(0, 30)}...` : title} + + ); + }, + }, + { + accessorKey: "startDate", + header: t("start-date"), + cell: ({ row }) => ( + {row.getValue("startDate")} + ), + }, + { + accessorKey: "endDate", + header: t("end-date"), + cell: ({ row }) => ( + {row.getValue("endDate")} + ), + }, + { + accessorKey: "time", + header: t("time"), + cell: ({ row }: { row: { original: any } }) => { + console.log("Row Original Data:", row.original); + const { startTime, endTime } = row.original; + return ( + + {startTime || "N/A"} - {endTime || "N/A"} + + ); + }, + }, + { + accessorKey: "address", + header: t("address"), + cell: ({ row }: { row: { getValue: (key: string) => string } }) => { + const address: string = row.getValue("address"); + return ( + + {address.length > 50 ? `${address.slice(0, 40)}...` : address} + + ); + }, + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + diterima: "bg-green-100 text-green-600", + "menunggu review": "bg-orange-100 text-orange-600", + }; + + // Mengambil `statusName` dari data API + const status = row.getValue("statusName") as string; + const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil + + // Gunakan `statusName` untuk pencocokan + const statusStyles = + statusColors[statusName] || "bg-gray-100 text-gray-600"; + + return ( + + {status} {/* Tetap tampilkan nilai asli */} + + ); + }, + }, + { + accessorKey: "speaker", + header: t("speaker"), + cell: ({ row }: { row: { original: any } }) => { + console.log("Row Original Data:", row.original); + const { speakerTitle, speakerName } = row.original; + return ( + + {speakerTitle || ""} {speakerName || ""} + + ); + }, + }, + { + accessorKey: "uploaderName", + header: t("source"), + cell: ({ row }) => ( - {title.length > 50 ? `${title.slice(0, 30)}...` : title} + {row.getValue("uploaderName")} - ); + ), }, - }, - { - accessorKey: "startDate", - header: "Start Date ", - cell: ({ row }) => ( - {row.getValue("startDate")} - ), - }, - { - accessorKey: "endDate", - header: "End Date", - cell: ({ row }) => ( - {row.getValue("endDate")} - ), - }, - { - accessorKey: "time", - header: "Time", - cell: ({ row }: { row: { original: any } }) => { - console.log("Row Original Data:", row.original); - const { startTime, endTime } = row.original; - return ( - - {startTime || "N/A"} - {endTime || "N/A"} - - ); - }, - }, - { - accessorKey: "address", - header: "Address", - cell: ({ row }: { row: { getValue: (key: string) => string } }) => { - const address: string = row.getValue("address"); - return ( - - {address.length > 50 ? `${address.slice(0, 40)}...` : address} - - ); - }, - }, - { - accessorKey: "statusName", - header: "Status", - cell: ({ row }) => { - const statusColors: Record = { - diterima: "bg-green-100 text-green-600", - "menunggu review": "bg-orange-100 text-orange-600", - }; - // Mengambil `statusName` dari data API - const status = row.getValue("statusName") as string; - const statusName = status?.toLocaleLowerCase(); // Ubah ke huruf kecil - - // Gunakan `statusName` untuk pencocokan - const statusStyles = - statusColors[statusName] || "bg-gray-100 text-gray-600"; - - return ( - - {status} {/* Tetap tampilkan nilai asli */} - - ); - }, - }, - { - accessorKey: "speaker", - header: "Disampaikan oleh", - cell: ({ row }: { row: { original: any } }) => { - console.log("Row Original Data:", row.original); - const { speakerTitle, speakerName } = row.original; - return ( - - {speakerTitle || ""} {speakerName || ""} - - ); - }, - }, - { - accessorKey: "uploaderName", - header: "Sumber ", - cell: ({ row }) => ( - {row.getValue("uploaderName")} - ), - }, - - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - - View + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + + Edit + + + + + Delete - - - - - Edit - - - - - Delete - - - - ); + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx b/app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx index cb5938c4..1aefa609 100644 --- 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(""); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/app/[locale]/(protected)/contributor/task/components/columns.tsx b/app/[locale]/(protected)/contributor/task/components/columns.tsx index 89c8cd8a..fb44c3b9 100644 --- a/app/[locale]/(protected)/contributor/task/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/task/components/columns.tsx @@ -20,187 +20,193 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => {row.getValue("no")}, - }, - { - accessorKey: "title", - header: "Title", - cell: ({ row }) => ( -
- {row.getValue("title")} - {row.original.isForward && ( - - )} -
- ), - }, - - { - accessorKey: "uniqueCode", - header: "Code", - cell: ({ row }) => {row.getValue("uniqueCode")}, - }, - - { - accessorKey: "assignmentMainType", - header: "Type Task", - cell: ({ row }) => { - const type = row.getValue("assignmentMainType") as { name: string }; - return {type?.name}; +const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => {row.getValue("no")}, }, - }, - { - accessorKey: "assignmentType", - header: "Category Task", - cell: ({ row }) => { - const type = row.getValue("assignmentType") as { name: string }; - return {type?.name}; - }, - }, - { - accessorKey: "createdAt", - header: "Upload Date ", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; - - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; - }, - }, - { - accessorKey: "status", - header: "Status", - cell: ({ row }) => { - const isActive = row.original.isActive; - const isDone = row.original.isDone; - - let statusText = ""; - if (isDone) { - statusText = "Selesai"; - } else if (isActive) { - statusText = "Aktif"; - } else { - statusText = "Nonaktif"; - } - - const statusColors: Record = { - Aktif: "bg-primary/20 text-primary", - Selesai: "bg-success/20 text-success", - Nonaktif: "bg-gray-200 text-gray-500", - }; - - const statusStyles = statusColors[statusText] || "default"; - - return ( - - {statusText} - - ); - }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const router = useRouter(); - const MySwal = withReactContent(Swal); - - async function deleteProcess(id: any) { - loading(); - const resDelete = await deleteTask(id); - - if (resDelete?.error) { - error(resDelete.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 TaskDelete = (id: any) => { - MySwal.fire({ - title: "Hapus Data", - text: "", - icon: "warning", - showCancelButton: true, - cancelButtonColor: "#3085d6", - confirmButtonColor: "#d33", - confirmButtonText: "Hapus", - }).then((result) => { - if (result.isConfirmed) { - deleteProcess(id); - } - }); - }; - - return ( - - + { + accessorKey: "title", + header: t("title"), + cell: ({ row }) => ( +
+ {row.getValue("title")} + {row.original.isForward && ( - - - - - - View - - - - - - Edit - - - TaskDelete(row.original.id)} - className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" - > - - Delete - - - - ); + )} +
+ ), }, - }, -]; -export default columns; + { + accessorKey: "uniqueCode", + header: t("code"), + cell: ({ row }) => {row.getValue("uniqueCode")}, + }, + + { + accessorKey: "assignmentMainType", + header: t("type-task"), + cell: ({ row }) => { + const type = row.getValue("assignmentMainType") as { name: string }; + return {type?.name}; + }, + }, + { + accessorKey: "assignmentType", + header: t("category-task"), + cell: ({ row }) => { + const type = row.getValue("assignmentType") as { name: string }; + return {type?.name}; + }, + }, + { + accessorKey: "createdAt", + header: t("upload-date"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => { + const isActive = row.original.isActive; + const isDone = row.original.isDone; + + let statusText = ""; + if (isDone) { + statusText = "Selesai"; + } else if (isActive) { + statusText = "Aktif"; + } else { + statusText = "Nonaktif"; + } + + const statusColors: Record = { + Aktif: "bg-primary/20 text-primary", + Selesai: "bg-success/20 text-success", + Nonaktif: "bg-gray-200 text-gray-500", + }; + + const statusStyles = statusColors[statusText] || "default"; + + return ( + + {statusText} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const router = useRouter(); + const MySwal = withReactContent(Swal); + + async function deleteProcess(id: any) { + loading(); + const resDelete = await deleteTask(id); + + if (resDelete?.error) { + error(resDelete.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 TaskDelete = (id: any) => { + MySwal.fire({ + title: "Hapus Data", + text: "", + icon: "warning", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Hapus", + }).then((result) => { + if (result.isConfirmed) { + deleteProcess(id); + } + }); + }; + + return ( + + + + + + + + + View + + + + + + Edit + + + TaskDelete(row.original.id)} + className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none" + > + + Delete + + + + ); + }, + }, + ]; + + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/contributor/task/components/task-table.tsx b/app/[locale]/(protected)/contributor/task/components/task-table.tsx index 5dca9c2b..dde139dc 100644 --- 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(""); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx b/app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx index 7d2693e5..fc30c0ca 100644 --- 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(""); const roleId = getCookiesDecrypt("urie"); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx b/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx index 5b57cde1..d4a1f3cc 100644 --- a/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx +++ b/app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx @@ -13,102 +13,113 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => {row.getValue("no")}, - }, - { - accessorKey: "title", - header: "Pertanyaan", - cell: ({ row }) => ( - {row.getValue("title")} - ), - }, - { - accessorKey: "commentFromUserName", - header: "CreateBy", - cell: ({ row }) => ( - {row.getValue("commentFromUserName")} - ), - }, - { - accessorKey: "Type", - header: "Channel", - cell: ({ row }) => { - const type = row.original.type; - return {type?.name || "N/A"}; +const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => {row.getValue("no")}, }, - }, - { - accessorKey: "createdAt", - header: "Waktu", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; - - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + { + accessorKey: "title", + header: t("question"), + cell: ({ row }) => ( + {row.getValue("title")} + ), }, - }, - { - accessorKey: "isActive", - header: "Status", - cell: ({ row }) => { - const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive - const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive - const statusStyles = isActive - ? "bg-green-100 text-green-600" // Gaya untuk "Open" - : "bg-red-100 text-red-600"; // Gaya untuk "Closed" - - return ( - {status} - ); + { + accessorKey: "commentFromUserName", + header: t("sender"), + cell: ({ row }) => ( + + {row.getValue("commentFromUserName")} + + ), }, - }, - - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const router = useRouter(); - return ( - - - - - - - router.push( - `/shared/communication/collaboration/detail/${row.original.id}` - ) - } - className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center" - > - - Detail - - - - ); + { + accessorKey: "Type", + header: t("type"), + cell: ({ row }) => { + const type = row.original.type; + return {type?.name || "N/A"}; + }, }, - }, -]; + { + accessorKey: "createdAt", + header: t("time"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; -export default columns; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "isActive", + header: "Status", + cell: ({ row }) => { + const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive + const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive + const statusStyles = isActive + ? "bg-green-100 text-green-600" // Gaya untuk "Open" + : "bg-red-100 text-red-600"; // Gaya untuk "Closed" + + return ( + + {status} + + ); + }, + }, + + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const router = useRouter(); + return ( + + + + + + + router.push( + `/shared/communication/collaboration/detail/${row.original.id}` + ) + } + className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none items-center" + > + + Detail + + + + ); + }, + }, + ]; + + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx b/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx index 753f3e80..a3a32011 100644 --- a/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx +++ b/app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx @@ -13,98 +13,108 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => {row.getValue("no")}, - }, - { - accessorKey: "title", - header: "Pertanyaan", - cell: ({ row }) => ( - {row.getValue("title")} - ), - }, - { - accessorKey: "commentFromUserName", - header: "Penerima", - cell: ({ row }) => ( - {row.getValue("commentFromUserName")} - ), - }, - { - accessorKey: "type", - header: "Penerima", - cell: ({ row }) => { - const type = row.original.type; // Akses properti category - return {type?.name || "N/A"}; +const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => {row.getValue("no")}, }, - }, - { - accessorKey: "createdAt", - header: "Waktu", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; - - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + { + accessorKey: "title", + header: t("question"), + cell: ({ row }) => ( + {row.getValue("title")} + ), }, - }, - { - accessorKey: "isActive", - header: "Status", - cell: ({ row }) => { - const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive - const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive - const statusStyles = isActive - ? "bg-green-100 text-green-600" // Gaya untuk "Open" - : "bg-red-100 text-red-600"; // Gaya untuk "Closed" - - return ( - {status} - ); + { + accessorKey: "commentFromUserName", + header: t("sender"), + cell: ({ row }) => ( + + {row.getValue("commentFromUserName")} + + ), }, - }, - - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - - View - - - - - ); + { + accessorKey: "type", + header: t("type"), + cell: ({ row }) => { + const type = row.original.type; // Akses properti category + return {type?.name || "N/A"}; + }, }, - }, -]; + { + accessorKey: "createdAt", + header: t("time"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; -export default columns; + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "isActive", + header: "Status", + cell: ({ row }) => { + const isActive = row.getValue("isActive") as boolean; // Ambil nilai isActive + const status = isActive ? "Open" : "Closed"; // Tentukan teks berdasarkan isActive + const statusStyles = isActive + ? "bg-green-100 text-green-600" // Gaya untuk "Open" + : "bg-red-100 text-red-600"; // Gaya untuk "Closed" + + return ( + + {status} + + ); + }, + }, + + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + ); + }, + }, + ]; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx b/app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx index 5b51d09a..f0f369c0 100644 --- 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(""); const roleId = getCookiesDecrypt("urie"); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx b/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx index a0e9d60e..d6d5c81c 100644 --- a/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx +++ b/app/[locale]/(protected)/shared/communication/internal/components/columns.tsx @@ -13,97 +13,104 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => {row.getValue("no")}, - }, - { - accessorKey: "title", - header: "Pertanyaan", - cell: ({ row }) => ( - {row.getValue("title")} - ), - }, - { - accessorKey: "createdBy", - header: "Pengirim", - cell: ({ row }) => { - const createdBy = row.original.createdBy; // Akses properti category - return ( - {createdBy?.fullname || "N/A"} - ); - }, - }, - { - accessorKey: "sendTo", - header: "Penerima", - cell: ({ row }) => { - const sendTo = row.original.sendTo; // Akses properti category - return {sendTo?.fullname || "N/A"}; - }, - }, - { - accessorKey: "createdAt", - header: "Waktu", - cell: ({ row }) => { - const createdAt = row.getValue("createdAt") as - | string - | number - | undefined; +const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook - const formattedDate = - createdAt && !isNaN(new Date(createdAt).getTime()) - ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") - : "-"; - return {formattedDate}; + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => {row.getValue("no")}, }, - }, - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - return ( - - - - - - - - - View + { + accessorKey: "title", + header: t("question"), + cell: ({ row }) => ( + {row.getValue("title")} + ), + }, + { + accessorKey: "createdBy", + header: t("sender"), + cell: ({ row }) => { + const createdBy = row.original.createdBy; // Akses properti category + return ( + {createdBy?.fullname || "N/A"} + ); + }, + }, + { + accessorKey: "sendTo", + header: t("sendto"), + cell: ({ row }) => { + const sendTo = row.original.sendTo; // Akses properti category + return {sendTo?.fullname || "N/A"}; + }, + }, + { + accessorKey: "createdAt", + header: t("time"), + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + + Edit + + + + + Delete - - - - - Edit - - - - - Delete - - - - ); + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx b/app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx index 050a6080..4f1ea31a 100644 --- 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, diff --git a/app/[locale]/(protected)/shared/contest/components/columns.tsx b/app/[locale]/(protected)/shared/contest/components/columns.tsx index 9188c38b..58967acb 100644 --- a/app/[locale]/(protected)/shared/contest/components/columns.tsx +++ b/app/[locale]/(protected)/shared/contest/components/columns.tsx @@ -18,200 +18,206 @@ 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 columns: ColumnDef[] = [ - { - accessorKey: "no", - header: "No", - cell: ({ row }) => ( -
-
-

- {row.getValue("no")} -

+const useTableColumns = () => { + const t = useTranslations("Table"); // Panggil di dalam hook + + const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: t("no"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("no")} +

+
-
- ), - }, - { - accessorKey: "hastagCode", - header: "Kode", - cell: ({ row }) => ( -
-
-

- {row.getValue("hastagCode")} -

-
-
- ), - }, - { - accessorKey: "theme", - header: "Judul", - cell: ({ row }) => ( -
-
-

- {row.getValue("theme")} -

-
-
- ), - }, - { - accessorKey: "duration", - header: "Durasi ", - cell: ({ row }) => ( - {row.getValue("duration")} - ), - }, - { - accessorKey: "targetOutput", - header: "Target Output ", - cell: ({ row }) => ( - {row.getValue("targetOutput")} - ), - }, - { - accessorKey: "targetParticipantTopLevel", - header: "Target Participant ", - cell: ({ row }) => ( - - {row.getValue("targetParticipantTopLevel")} - - ), - }, - { - accessorKey: "isPublishForAll", // Bisa menggunakan ini untuk membaca default data - header: "Status", - cell: ({ - row, - }: { - row: { - original: { isPublishForAll?: boolean; isPublishForMabes?: boolean }; - }; - }) => { - const userRoleId: number = Number(getCookiesDecrypt("urie")); - const userLevelNumber: number = Number(getCookiesDecrypt("ulne")); - - const isPublishForAll: boolean = Boolean(row.original.isPublishForAll); - const isPublishForMabes: boolean = Boolean( - row.original.isPublishForMabes - ); - - const isPending: boolean = - (userRoleId === 3 && userLevelNumber === 1 && !isPublishForAll) || - ((userRoleId === 11 || userRoleId === 12) && !isPublishForMabes); - - const isTerkirim: boolean = isPublishForMabes && !isPublishForAll; - - return ( - - {isPending ? "Pending" : isTerkirim ? "Terkirim" : "Publish"} - - ); + ), }, - }, - - { - id: "actions", - accessorKey: "action", - header: "Actions", - enableHiding: false, - cell: ({ row }) => { - const MySwal = withReactContent(Swal); - const userRoleId = Number(getCookiesDecrypt("urie")); - const userLevelId = Number(getCookiesDecrypt("ulie")); - const userLevelNumber = Number(getCookiesDecrypt("ulne")); - - async function doPublish(id: any) { - // loading(); - // const data = { - // id, - // }; - - const response = await publishContest(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 handlePublishContest = (id: any) => { - MySwal.fire({ - title: "Apakah anda ingin publish Lomba?", - showCancelButton: true, - cancelButtonColor: "#3085d6", - confirmButtonColor: "#d33", - confirmButtonText: "Ya", - cancelButtonText: "Tidak", - }).then((result) => { - if (result.isConfirmed) { - doPublish(id); - } - }); - }; - return ( - - - - - - {((userRoleId == 11 || userRoleId == 12) && - row?.original?.isPublishForMabes != true) || - (userRoleId == 3 && - userLevelNumber == 1 && - row?.original?.isPublishForAll != true) ? ( - handlePublishContest(row.original.id)} + {row.getValue("hastagCode")} + +
+
+ ), + }, + { + accessorKey: "theme", + header: t("title"), + cell: ({ row }) => ( +
+
+

+ {row.getValue("theme")} +

+
+
+ ), + }, + { + accessorKey: "duration", + header: t("duration"), + cell: ({ row }) => ( + {row.getValue("duration")} + ), + }, + { + accessorKey: "targetOutput", + header: t("target-output"), + cell: ({ row }) => ( + + {row.getValue("targetOutput")} + + ), + }, + { + accessorKey: "targetParticipantTopLevel", + header: t("target-participant"), + cell: ({ row }) => ( + + {row.getValue("targetParticipantTopLevel")} + + ), + }, + { + accessorKey: "isPublishForAll", // Bisa menggunakan ini untuk membaca default data + header: "Status", + cell: ({ + row, + }: { + row: { + original: { isPublishForAll?: boolean; isPublishForMabes?: boolean }; + }; + }) => { + const userRoleId: number = Number(getCookiesDecrypt("urie")); + const userLevelNumber: number = Number(getCookiesDecrypt("ulne")); + + const isPublishForAll: boolean = Boolean(row.original.isPublishForAll); + const isPublishForMabes: boolean = Boolean( + row.original.isPublishForMabes + ); + + const isPending: boolean = + (userRoleId === 3 && userLevelNumber === 1 && !isPublishForAll) || + ((userRoleId === 11 || userRoleId === 12) && !isPublishForMabes); + + const isTerkirim: boolean = isPublishForMabes && !isPublishForAll; + + return ( + + {isPending ? "Pending" : isTerkirim ? "Terkirim" : "Publish"} + + ); + }, + }, + + { + id: "actions", + accessorKey: "action", + header: t("action"), + enableHiding: false, + cell: ({ row }) => { + const MySwal = withReactContent(Swal); + const userRoleId = Number(getCookiesDecrypt("urie")); + const userLevelId = Number(getCookiesDecrypt("ulie")); + const userLevelNumber = Number(getCookiesDecrypt("ulne")); + + async function doPublish(id: any) { + // loading(); + // const data = { + // id, + // }; + + const response = await publishContest(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 handlePublishContest = (id: any) => { + MySwal.fire({ + title: "Apakah anda ingin publish Lomba?", + showCancelButton: true, + cancelButtonColor: "#3085d6", + confirmButtonColor: "#d33", + confirmButtonText: "Ya", + cancelButtonText: "Tidak", + }).then((result) => { + if (result.isConfirmed) { + doPublish(id); + } + }); + }; + return ( + + + + + + {((userRoleId == 11 || userRoleId == 12) && + row?.original?.isPublishForMabes != true) || + (userRoleId == 3 && + userLevelNumber == 1 && + row?.original?.isPublishForAll != true) ? ( + handlePublishContest(row.original.id)} + > + + Publish + + ) : ( + "" + )} + + + + View + + + {/* Edit @@ -219,11 +225,14 @@ const columns: ColumnDef[] = [ Delete */} - - - ); + + + ); + }, }, - }, -]; + ]; -export default columns; + return columns; +}; + +export default useTableColumns; diff --git a/app/[locale]/(protected)/shared/contest/components/contest-table.tsx b/app/[locale]/(protected)/shared/contest/components/contest-table.tsx index d18cb801..12039a4d 100644 --- 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(""); - + const columns = useTableColumns(); const table = useReactTable({ data: dataTable, columns, diff --git a/components/form/content/spit-convert-form.tsx b/components/form/content/spit-convert-form.tsx index 700fe5fe..f272446e 100644 --- a/components/form/content/spit-convert-form.tsx +++ b/components/form/content/spit-convert-form.tsx @@ -812,7 +812,7 @@ export default function FormConvertSPIT() {
- {files.length > 1 && ( + {files?.length > 1 && (