diff --git a/app/[locale]/(protected)/admin/performance-polres/page.tsx b/app/[locale]/(protected)/admin/performance-polres/page.tsx index 7301a74e..79f22bce 100644 --- a/app/[locale]/(protected)/admin/performance-polres/page.tsx +++ b/app/[locale]/(protected)/admin/performance-polres/page.tsx @@ -5,7 +5,7 @@ export default function PerformancePolda() { return (
-

PERFORMANCE KUMULATIF PER POLDA

+

PERFORMANCE KUMULATIF PER POLRES

); diff --git a/app/[locale]/(protected)/admin/performance-satker/page.tsx b/app/[locale]/(protected)/admin/performance-satker/page.tsx new file mode 100644 index 00000000..1296113c --- /dev/null +++ b/app/[locale]/(protected)/admin/performance-satker/page.tsx @@ -0,0 +1,13 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import PerformancePolresViz from "@/components/visualization/performance-polres"; +import PerformanceSatkerViz from "@/components/visualization/performance-satker"; + +export default function PerformanceSatker() { + return ( +
+ +

PERFORMANCE KUMULATIF PER SATKER

+ +
+ ); +} diff --git a/app/[locale]/(protected)/admin/settings/banner/page.tsx b/app/[locale]/(protected)/admin/settings/banner/page.tsx index 9fc14206..c3fcbe33 100644 --- a/app/[locale]/(protected)/admin/settings/banner/page.tsx +++ b/app/[locale]/(protected)/admin/settings/banner/page.tsx @@ -14,9 +14,7 @@ export default function AdminBanner() {
- {selectedTab === "content" - ? "Daftar List Media" - : "Table List Banner"} + {selectedTab === "content" ? "List Media" : " List Banner"}
- Tambah Kategori + {t("add-category")}
{ const router = useRouter(); const searchParams = useSearchParams(); + const t = useTranslations("Menu"); const dataChange = searchParams?.get("dataChange"); const [openModal, setOpenModal] = React.useState(false); const [dataTable, setDataTable] = React.useState([]); @@ -127,7 +129,7 @@ const AdminCategoryTable = () => { return (
-

Kategori

+

{t("category")}

diff --git a/app/[locale]/(protected)/admin/settings/faq/component/create.tsx b/app/[locale]/(protected)/admin/settings/faq/component/create.tsx index 0254c600..0e5da32e 100644 --- a/app/[locale]/(protected)/admin/settings/faq/component/create.tsx +++ b/app/[locale]/(protected)/admin/settings/faq/component/create.tsx @@ -40,6 +40,7 @@ import { useDropzone } from "react-dropzone"; import { CloudUpload } from "lucide-react"; import Image from "next/image"; import { Upload } from "tus-js-client"; +import { useTranslations } from "next-intl"; const FormSchema = z.object({ answer: z.string({ @@ -79,7 +80,7 @@ const publishToList = [ export default function CreateFAQModal() { const router = useRouter(); const { toast } = useToast(); - + const t = useTranslations("Menu"); const [isOpen, setIsOpen] = useState(false); const [satkerData, setSatkerData] = useState([]); const [unitData, setUnitData] = useState([]); @@ -120,12 +121,12 @@ export default function CreateFAQModal() { - Tambah FAQ + {t("add")} FAQ >({ @@ -110,12 +111,12 @@ export default function CreateFAQModal() { - Tambah Feedback + {t("add")} Feedback { const router = useRouter(); const searchParams = useSearchParams(); const dataChange = searchParams?.get("dataChange"); + const [openModal, setOpenModal] = React.useState(false); const [dataTable, setDataTable] = React.useState([]); const [totalData, setTotalData] = React.useState(1); diff --git a/app/[locale]/(protected)/admin/settings/tag/component/create.tsx b/app/[locale]/(protected)/admin/settings/tag/component/create.tsx index 216188aa..9955faf9 100644 --- a/app/[locale]/(protected)/admin/settings/tag/component/create.tsx +++ b/app/[locale]/(protected)/admin/settings/tag/component/create.tsx @@ -42,6 +42,7 @@ import { CommandList, } from "@/components/ui/command"; import { cn } from "@/lib/utils"; +import { useTranslations } from "next-intl"; const FormSchema = z.object({ name: z.string({ @@ -55,6 +56,7 @@ const FormSchema = z.object({ export default function CreateTagModal() { const router = useRouter(); const { toast } = useToast(); + const t = useTranslations("Menu"); const [categoryList, setCategoryList] = useState< { id: number; label: string; value: string }[] >([]); @@ -107,12 +109,12 @@ export default function CreateTagModal() { - Tambah Tag + {t("add-tags")} { const router = useRouter(); const searchParams = useSearchParams(); + const t = useTranslations("Menu"); const dataChange = searchParams?.get("dataChange"); const [openModal, setOpenModal] = React.useState(false); const [dataTable, setDataTable] = React.useState([]); @@ -124,7 +126,7 @@ const AdminTagTable = () => { return (
-

Tag

+

{t("tags")}

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)/dashboard/executive/page.tsx b/app/[locale]/(protected)/dashboard/executive/page.tsx index 010a7363..5a34c8eb 100644 --- a/app/[locale]/(protected)/dashboard/executive/page.tsx +++ b/app/[locale]/(protected)/dashboard/executive/page.tsx @@ -218,7 +218,7 @@ export default function ExecutiveDashboard() { const response3 = await generateTicket(); setTicket3(response3?.data?.data); - + const response4 = await generateTicket(); setTicket4(response4?.data?.data); @@ -250,35 +250,6 @@ export default function ExecutiveDashboard() { return (
- - - - - - - Download Report - -
-
- - setDateFilter(e.target.value)} - className="w-full" - /> -
-
- - - - -
@@ -412,7 +383,7 @@ export default function ExecutiveDashboard() {
- +

Emergency Issue

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/app/[locale]/(protected)/shared/curated-content/page.tsx b/app/[locale]/(protected)/shared/curated-content/page.tsx index fcc17421..03d2c871 100644 --- a/app/[locale]/(protected)/shared/curated-content/page.tsx +++ b/app/[locale]/(protected)/shared/curated-content/page.tsx @@ -24,15 +24,19 @@ import AudioSliderPage from "./giat-routine/audio/audio"; import ImageSliderPage from "./giat-routine/image/image"; import TeksSliderPage from "./giat-routine/document/teks"; import ContestTable from "../contest/components/contest-table"; +import { useTranslations } from "next-intl"; const CuratedContentPage = () => { + const t = useTranslations("Curation"); return (
-

Kurasi Konten

+

+ {t("content-curation")} +

({ + percentage: 0, + fileName: item.name, + })); progressInfo = progressInfoArr; setIsStartUpload(true); setProgressList(progressInfoArr); close(); - // showProgress(); files.map(async (item: any, index: number) => { await uploadResumableFile( index, @@ -509,8 +526,6 @@ export default function FormImage() { }); Cookies.remove("idCreate"); - - // MySwal.fire("Sukses", "Data berhasil disimpan.", "success"); }; const onSubmit = (data: ImageSchema) => { 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 && (
([]); + + async function getDataAttachment() { + const response = await getListScheduleAttachment(id); + console.log("data attach", response?.data?.data?.content); + setDataLampiran(response?.data?.data?.content); + } + async function getDataByDate() { const resToday = await listScheduleToday(); const today = resToday?.data?.data; @@ -120,6 +137,7 @@ export default function FormEventDetail() { } } initState(); + getDataAttachment(); }, [refresh, setValue]); const handleStartTime = (e: React.ChangeEvent) => { @@ -130,6 +148,29 @@ export default function FormEventDetail() { setEndTime(e.target.value); }; + const handleDestinationUpload = ( + type: number, + id: string | number, + setOpen: (open: boolean) => void, + router: any + ) => { + setOpen(false); // Tutup modal dialog + + if (id !== undefined) { + Cookies.set("scheduleId", id.toString(), { expires: 1 }); + Cookies.set("scheduleType", "3", { expires: 1 }); + + const routes: Record = { + 1: "/in/contributor/schedule/media/image/create", + 2: "/in/contributor/schedule/media/video/create", + 3: "/in/contributor/schedule/media/text/create", + 4: "/in/contributor/schedule/media/audio/create", + }; + + router.push(routes[type] || "/admin/schedule/media/audio/create"); + } + }; + return (
@@ -336,92 +377,67 @@ export default function FormEventDetail() { -

0 Lampiran

+

{lampiran?.length || 0} Lampiran

Pilih Jenis Lampiran

-
- -
-
- {"item.label"} -

- Audio Visual -

+
+ {[ + { + type: 2, + img: "/assets/img/upload-video.png", + label: "Audio Visual", + }, + { + type: 1, + img: "/assets/img/upload-image.png", + label: "Foto", + }, + { + type: 3, + img: "/assets/img/upload-text.png", + label: "Teks", + }, + { + type: 4, + img: "/assets/img/upload-audio.png", + label: "Audio", + }, + ].map((item) => ( + + handleDestinationUpload( + item.type, + id, + setOpen, + router + ) + } + > +
+
+ {item.label} +

+ {item.label} +

+
+
+

+ Unggah media berupa {item.label.toLowerCase()}{" "} + dengan format sesuai yang didukung. +

+
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- - -
-
- {"item.label"} -

Foto

-
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- - -
-
- {"item.label"} -

Teks

-
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- - -
-
- {"item.label"} -

Audio

-
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- + + ))}
@@ -430,7 +446,52 @@ export default function FormEventDetail() { "" )}
-
+
+ + + + + + + + + + + {lampiran.map((item, index) => ( + + + + + + + ))} + +
Judul KontenKontenTindakanAksi
+ {item.title} + {item.fileTypeName}Konfersi Ai + + + +
+
+
diff --git a/components/form/schedule/pers-release--detail-form.tsx b/components/form/schedule/pers-release--detail-form.tsx index 10e4eeaa..b13bf7af 100644 --- a/components/form/schedule/pers-release--detail-form.tsx +++ b/components/form/schedule/pers-release--detail-form.tsx @@ -17,7 +17,7 @@ import { PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; -import { CalendarIcon, Clock1, MapPin, Plus, User2 } from "lucide-react"; +import { CalendarIcon, Clock1, Eye, MapPin, Plus, User2 } from "lucide-react"; import { Calendar } from "@/components/ui/calendar"; import { addDays, format, parseISO, setDate } from "date-fns"; import { DateRange } from "react-day-picker"; @@ -30,6 +30,7 @@ import { error, loading } from "@/lib/swal"; import Cookies from "js-cookie"; import { detailSchedule, + getListScheduleAttachment, listScheduleNext, listScheduleToday, postSchedule, @@ -50,6 +51,7 @@ import { import { formatDate } from "@fullcalendar/core/index.js"; import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"; import { Link } from "@/i18n/routing"; +import $ from "jquery"; const taskSchema = z.object({ title: z.string().min(1, { message: "Judul diperlukan" }), @@ -68,6 +70,14 @@ interface Detail { addressLong: number; } +interface Attachment { + id: any; + title: string; + fileTypeId: number; + type: number; + fileTypeName: string; +} + export default function FormDetailPressRillis() { const [open, setOpen] = useState(false); const { id } = useParams() as { id: string }; @@ -98,6 +108,14 @@ export default function FormDetailPressRillis() { }, }); + const [lampiran, setDataLampiran] = useState([]); + + async function getDataAttachment() { + const response = await getListScheduleAttachment(id); + console.log("data attach", response?.data?.data?.content); + setDataLampiran(response?.data?.data?.content); + } + async function getDataByDate() { const resToday = await listScheduleToday(); const today = resToday?.data?.data; @@ -129,6 +147,7 @@ export default function FormDetailPressRillis() { } } initState(); + getDataAttachment(); }, [refresh, setValue]); const handleStartTime = (e: React.ChangeEvent) => { @@ -139,20 +158,26 @@ export default function FormDetailPressRillis() { setEndTime(e.target.value); }; - const handleUploadAttachment = () => { - const scheduleId = Cookies.get("scheduleId"); + const handleDestinationUpload = ( + type: number, + id: string | number, + setOpen: (open: boolean) => void, + router: any + ) => { + setOpen(false); // Tutup modal dialog - if (scheduleId == undefined) { - MySwal.fire({ - title: "Simpan Jadwal Terlebih Dahulu", - icon: "info", - confirmButtonColor: "#3085d6", - confirmButtonText: "Ok", - }).then((result) => { - if (result.isConfirmed) { - return true; - } - }); + if (id !== undefined) { + Cookies.set("scheduleId", id.toString(), { expires: 1 }); + Cookies.set("scheduleType", "3", { expires: 1 }); + + const routes: Record = { + 1: "/in/contributor/schedule/media/image/create", + 2: "/in/contributor/schedule/media/video/create", + 3: "/in/contributor/schedule/media/text/create", + 4: "/in/contributor/schedule/media/audio/create", + }; + + router.push(routes[type] || "/admin/schedule/media/audio/create"); } }; @@ -379,92 +404,67 @@ export default function FormDetailPressRillis() { -

0 Lampiran

+

{lampiran?.length || 0} Lampiran

Pilih Jenis Lampiran

-
- -
-
- {"item.label"} -

- Audio Visual -

+
+ {[ + { + type: 2, + img: "/assets/img/upload-video.png", + label: "Audio Visual", + }, + { + type: 1, + img: "/assets/img/upload-image.png", + label: "Foto", + }, + { + type: 3, + img: "/assets/img/upload-text.png", + label: "Teks", + }, + { + type: 4, + img: "/assets/img/upload-audio.png", + label: "Audio", + }, + ].map((item) => ( + + handleDestinationUpload( + item.type, + id, + setOpen, + router + ) + } + > +
+
+ {item.label} +

+ {item.label} +

+
+
+

+ Unggah media berupa {item.label.toLowerCase()}{" "} + dengan format sesuai yang didukung. +

+
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- - -
-
- {"item.label"} -

Foto

-
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- - -
-
- {"item.label"} -

Teks

-
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- - -
-
- {"item.label"} -

Audio

-
-
-

- Unggah media berupa video dengan format avi, wmv, - atau mp4 dengan ukuran minimal 2mb dan maksimal - 500mb. -

-
-
- + + ))}
@@ -472,6 +472,51 @@ export default function FormDetailPressRillis() { ) : ( "" )} +
+ + + + + + + + + + + {lampiran.map((item, index) => ( + + + + + + + ))} + +
Judul KontenKontenTindakanAksi
+ {item.title} + {item.fileTypeName}Konfersi Ai + + + +
+
+ + + + Download Report + +
+
+ + setDateFilter(e.target.value)} + className="w-full" + /> +
+
+ + + + +
); }; diff --git a/components/visualization/performance-satker.tsx b/components/visualization/performance-satker.tsx new file mode 100644 index 00000000..e53116cd --- /dev/null +++ b/components/visualization/performance-satker.tsx @@ -0,0 +1,84 @@ +"use client"; +import Cookies from "js-cookie"; +import { useEffect, useState } from "react"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { generateTicket } from "@/service/tableau/tableau-service"; +import { Button } from "../ui/button"; +import { useTranslations } from "next-intl"; + +export default function PerformanceSatkerViz() { + const [hasMounted, setHasMounted] = useState(false); + const t = useTranslations("AnalyticsDashboard"); + const levelName = getCookiesDecrypt("ulnae"); + const poldaState = Cookies.get("state"); + const provState = Cookies.get("state-prov"); + + const [ticket1, setTicket1] = useState(""); + const [ticket2, setTicket2] = useState(""); + const [ticket3, setTicket3] = useState(""); + const [ticket4, setTicket4] = useState(""); + const [isInternational, setIsInternational] = useState([false, false, false]); + + const baseUrl = "https://db-mediahub.polri.go.id/"; + const url = "https://db-mediahub.polri.go.id/trusted/"; + + const view1 = + levelName == "MABES POLRI" + ? isInternational[0] + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10?" + : `/views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${provState}&`; + + const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true"; + + useEffect(() => { + async function initState() { + const response1 = await generateTicket(); + setTicket1(response1?.data?.data); + } + + initState(); + }, [isInternational]); + + // Hooks + useEffect(() => { + setHasMounted(true); + }, []); + + // Render + if (!hasMounted) return null; + + const handleInternational = (index: number, val: boolean) => { + const updatedIsInternational = [...isInternational]; + + updatedIsInternational[index] = val; + setIsInternational(updatedIsInternational); + }; + + return ( +
+

+ + {isInternational[0] ? "SATKER PERFORMANCE" : "POLFORMANCE SATKER"} + +

+
+ {ticket1 == "" ? ( +