mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev-anang' of https://gitlab.com/hanifsalafi/mediahub_redesign

This commit is contained in:
hanif salafi 2025-03-10 11:08:10 +07:00
parent 5604d9f09d 7164e99d17
commit ac2bba1e02
57 changed files with 3216 additions and 2595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@ export default function PerformancePolda() {
return (
<div>
<SiteBreadcrumb />
<p className="font-semibold">PERFORMANCE KUMULATIF PER POLDA</p>
<p className="font-semibold">PERFORMANCE KUMULATIF PER POLRES</p>
<PerformancePolresViz />
</div>
);

13
app/[locale]/(protected)/admin/performance-satker/page.tsx Normal file
View File

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

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

@ -14,9 +14,7 @@ export default function AdminBanner() {
<SiteBreadcrumb />
<div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
<div className="flex justify-between">
{selectedTab === "content"
? "Daftar List Media"
: "Table List Banner"}
{selectedTab === "content" ? "List Media" : " List Banner"}
<div className="flex flex-row gap-1 border-2 rounded-md w-fit mb-5">
<Button

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

@ -39,6 +39,7 @@ import Image from "next/image";
import { Upload } from "tus-js-client";
import { getCookiesDecrypt } from "@/lib/utils";
import Cookies from "js-cookie";
import { useTranslations } from "next-intl";
const FormSchema = z.object({
title: z.string({
@ -109,7 +110,7 @@ export default function CreateCategoryModal() {
const levelNumber = getCookiesDecrypt("ulne");
const userLevelId = getCookiesDecrypt("ulie");
const poldaState = Cookies.get("state");
const t = useTranslations("Menu");
const [files, setFiles] = useState<File[]>([]);
const [isOpen, setIsOpen] = useState(false);
const [satkerData, setSatkerData] = useState<string[]>([]);
@ -239,12 +240,12 @@ export default function CreateCategoryModal() {
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button color="primary" size="md">
Tambah Kategori
{t("add-category")}
</Button>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Tambah Kategori</DialogTitle>
<DialogTitle> {t("add-category")}</DialogTitle>
</DialogHeader>
<Form {...form}>
<form

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

@ -44,10 +44,12 @@ import {
DialogTrigger,
} from "@/components/ui/dialog";
import CreateCategoryModal from "./create";
import { useTranslations } from "next-intl";
const AdminCategoryTable = () => {
const router = useRouter();
const searchParams = useSearchParams();
const t = useTranslations("Menu");
const dataChange = searchParams?.get("dataChange");
const [openModal, setOpenModal] = React.useState(false);
const [dataTable, setDataTable] = React.useState<any[]>([]);
@ -127,7 +129,7 @@ const AdminCategoryTable = () => {
return (
<div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
<div className="flex justify-between mb-10 items-center">
<p className="text-xl font-medium text-default-900">Kategori</p>
<p className="text-xl font-medium text-default-900">{t("category")}</p>
<CreateCategoryModal />
</div>

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

@ -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<string[]>([]);
const [unitData, setUnitData] = useState<string[]>([]);
@ -120,12 +121,12 @@ export default function CreateFAQModal() {
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button color="primary" size="md">
Tambah FAQ
{t("add")} FAQ
</Button>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Tambah FAQ</DialogTitle>
<DialogTitle>{t("add")} FAQ</DialogTitle>
</DialogHeader>
<Form {...form}>
<form

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

@ -41,6 +41,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({
question: z.string({
@ -77,7 +78,7 @@ const publishToList = [
export default function CreateFAQModal() {
const router = useRouter();
const { toast } = useToast();
const t = useTranslations("Menu");
const [isOpen, setIsOpen] = useState(false);
const form = useForm<z.infer<typeof FormSchema>>({
@ -110,12 +111,12 @@ export default function CreateFAQModal() {
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button color="primary" size="md">
Tambah Feedback
{t("add")} Feedback
</Button>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Tambah Feedback</DialogTitle>
<DialogTitle>{t("add")} Feedback</DialogTitle>
</DialogHeader>
<Form {...form}>
<form

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

@ -41,11 +41,13 @@ import {
} from "@/service/settings/settings";
import CreateFAQModal from "./create";
import { useTranslations } from "next-intl";
const AdminFeedbackTable = () => {
const router = useRouter();
const searchParams = useSearchParams();
const dataChange = searchParams?.get("dataChange");
const [openModal, setOpenModal] = React.useState(false);
const [dataTable, setDataTable] = React.useState<any[]>([]);
const [totalData, setTotalData] = React.useState<number>(1);

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

@ -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() {
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogTrigger asChild>
<Button color="primary" size="md">
Tambah Tag
{t("add-tags")}
</Button>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Tambah Tag</DialogTitle>
<DialogTitle> {t("add-tags")}</DialogTitle>
</DialogHeader>
<Form {...form}>
<form

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

@ -42,10 +42,12 @@ import {
} from "@/service/settings/settings";
import CreateFAQModal from "./create";
import { useTranslations } from "next-intl";
const AdminTagTable = () => {
const router = useRouter();
const searchParams = useSearchParams();
const t = useTranslations("Menu");
const dataChange = searchParams?.get("dataChange");
const [openModal, setOpenModal] = React.useState(false);
const [dataTable, setDataTable] = React.useState<any[]>([]);
@ -124,7 +126,7 @@ const AdminTagTable = () => {
return (
<div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
<div className="flex justify-between mb-10 items-center">
<p className="text-xl font-medium text-default-900">Tag</p>
<p className="text-xl font-medium text-default-900">{t("tags")}</p>
<CreateFAQModal />
</div>

3
app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
View File

@ -45,6 +45,7 @@ import { listEnableCategory } from "@/service/content/content";
import { useTranslations } from "next-intl";
import { CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "@/i18n/routing";
import useTableColumns from "./columns";
const BlogTable = () => {
const router = useRouter();
@ -73,7 +74,7 @@ const BlogTable = () => {
);
const [categoryFilter, setCategoryFilter] = React.useState<string>("");
const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

285
app/[locale]/(protected)/contributor/blog/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Title",
cell: ({ row }) => (
<span className="whitespace-normal">{row.getValue("title")}</span>
),
},
{
accessorKey: "categoryName",
header: "Category",
cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
},
{
accessorKey: "tags",
header: "Tag",
cell: ({ row }) => <span className="">{row.getValue("tags")}</span>,
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge className={cn("rounded-full px-5", statusStyles)}>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
{
accessorKey: "title",
header: t("title"),
cell: ({ row }) => (
<span className="whitespace-normal">{row.getValue("title")}</span>
),
},
},
{
accessorKey: "categoryName",
header: t("category"),
cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
accessorKey: "tags",
header: t("tag"),
cell: ({ row }) => <span className="">{row.getValue("tags")}</span>,
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge className={cn("rounded-full px-5", statusStyles)}>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/blog/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/blog/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/contributor/blog/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteBlog(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
<Link href={`/contributor/blog/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteBlog(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

397
app/[locale]/(protected)/contributor/content/audio/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const MySwal = withReactContent(Swal);
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "categoryName",
header: t("category-name"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("categoryName")}
</span>
);
),
},
},
{
accessorKey: "categoryName",
header: "Category Name",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
),
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
},
{
accessorKey: "creatorName",
header: "Creator Group",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
{
accessorKey: "creatorGroupLevelName",
header: "Sumber",
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
{
accessorKey: "creatorName",
header: t("creator-group"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
{
accessorKey: "creatorGroupLevelName",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/content/audio/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/contributor/content/audio/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
return (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
},
];
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/content/audio/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/content/audio/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
View File

@ -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,

400
app/[locale]/(protected)/contributor/content/image/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const MySwal = withReactContent(Swal);
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "categoryName",
header: t("category-name"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("categoryName")}
</span>
);
),
},
},
{
accessorKey: "categoryName",
header: "Category Name",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
),
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
},
{
accessorKey: "creatorName",
header: "Creator Group",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
{
accessorKey: "creatorGroupLevelName",
header: "Sumber",
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
{
accessorKey: "creatorName",
header: t("creator-group"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
},
//
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
{
accessorKey: "creatorGroupLevelName",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
},
},
//
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/content/image/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/contributor/content/image/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
return (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
},
];
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/content/image/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/content/image/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return columns;
};
export default useTableColumns;

5
app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
View File

@ -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,

249
app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const MySwal = withReactContent(Swal);
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "contentTag",
header: t("tag"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
),
},
{
accessorKey: "contentType",
header: t("type-content"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("contentType")}</span>
),
},
{
accessorKey: "contentCreatedGroupBy",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("contentCreatedGroupBy")}
</span>
);
),
},
},
{
accessorKey: "contentTag",
header: "Tag",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
),
},
{
accessorKey: "contentType",
header: "Tipe Konten ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("contentType")}</span>
),
},
{
accessorKey: "contentCreatedGroupBy",
header: "Sumber ",
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("contentCreatedGroupBy")}
</span>
),
},
{
accessorKey: "isPublish",
header: "Status",
cell: ({ row }) => {
const isPublish = row.getValue<boolean>("isPublish");
return (
<div>
<Button
size="sm"
color={isPublish ? "success" : "warning"}
variant="outline"
className={`btn btn-sm ${
isPublish ? "btn-outline-success" : "btn-outline-warning"
} pill-btn ml-1`}
>
{isPublish ? "Diterima" : "Menunggu Review"}
</Button>
</div>
);
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
const isDisabled = row.original.isPublish; // Check the isPublish value
return (
<DropdownMenu>
<DropdownMenuTrigger asChild disabled={isDisabled}>
{
accessorKey: "isPublish",
header: "Status",
cell: ({ row }) => {
const isPublish = row.getValue<boolean>("isPublish");
return (
<div>
<Button
size="icon"
className={`bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent ${
isDisabled ? "cursor-not-allowed opacity-50" : ""
}`}
disabled={isDisabled} // Disable button if isPublish is true
size="sm"
color={isPublish ? "success" : "warning"}
variant="outline"
className={`btn btn-sm ${
isPublish ? "btn-outline-success" : "btn-outline-warning"
} pill-btn ml-1`}
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
{isPublish ? "Diterima" : "Menunggu Review"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/content/spit/convert/${row.original.contentId}`}
>
<DropdownMenuItem
className={`p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none ${
</div>
);
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
const isDisabled = row.original.isPublish; // Check the isPublish value
return (
<DropdownMenu>
<DropdownMenuTrigger asChild disabled={isDisabled}>
<Button
size="icon"
className={`bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent ${
isDisabled ? "cursor-not-allowed opacity-50" : ""
}`}
disabled={isDisabled} // Disable dropdown item if isPublish is true
disabled={isDisabled} // Disable button if isPublish is true
>
<MoveDownRight className="w-4 h-4 me-1.5" />
Pindah Ke Mediahub
</DropdownMenuItem>
</Link>
</DropdownMenuContent>
</DropdownMenu>
);
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/content/spit/convert/${row.original.contentId}`}
>
<DropdownMenuItem
className={`p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none ${
isDisabled ? "cursor-not-allowed opacity-50" : ""
}`}
disabled={isDisabled} // Disable dropdown item if isPublish is true
>
<MoveDownRight className="w-4 h-4 me-1.5" />
Pindah Ke Mediahub
</DropdownMenuItem>
</Link>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx
View File

@ -49,6 +49,7 @@ import {
import { Label } from "@/components/ui/label";
import { useTranslations } from "next-intl";
import { format } from "date-fns";
import useTableColumns from "./columns";
// export type CompanyData = {
// no: number;
@ -89,7 +90,7 @@ const TableSPIT = () => {
const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
const roleId = getCookiesDecrypt("urie");
const columns = useTableColumns();
const table = useReactTable({
data: spitTable,
columns,

398
app/[locale]/(protected)/contributor/content/teks/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const MySwal = withReactContent(Swal);
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "categoryName",
header: t("category-name"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("categoryName")}
</span>
);
),
},
},
{
accessorKey: "categoryName",
header: "Category Name",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
),
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
},
{
accessorKey: "creatorName",
header: "Creator Group",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
{
accessorKey: "creatorGroupLevelName",
header: "Sumber",
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
{
accessorKey: "creatorName",
header: t("creator-group"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
{
accessorKey: "creatorGroupLevelName",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/content/teks/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/contributor/content/teks/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
return (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
},
];
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/content/teks/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/content/teks/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
View File

@ -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,

396
app/[locale]/(protected)/contributor/content/video/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const MySwal = withReactContent(Swal);
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "categoryName",
header: t("category-name"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("categoryName")}
</span>
);
),
},
},
{
accessorKey: "categoryName",
header: "Category Name",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
),
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
},
{
accessorKey: "creatorName",
header: "Creator Group",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
{
accessorKey: "creatorGroupLevelName",
header: "Sumber",
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
{
accessorKey: "creatorName",
header: t("creator-group"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorName")}</span>
),
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
{
accessorKey: "creatorGroupLevelName",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("creatorGroupLevelName")}
</span>
),
},
},
{
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 (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/content/video/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/contributor/content/video/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
return (
<Badge
className={cn(
"rounded-full px-5 w-full whitespace-nowrap",
statusStyles
)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
},
];
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/content/video/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/content/video/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => handleDeleteMedia(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
View File

@ -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,

192
app/[locale]/(protected)/contributor/planning/mediahub/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
accessorKey: "title",
header: "Judul",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("title")}
</h4>
),
},
{
accessorKey: "title",
header: t("title"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("title")}
</h4>
</div>
</div>
</div>
),
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
},
{
accessorKey: "isActive",
header: "Status",
cell: ({ row }) => {
const isActive = row.getValue<boolean>("isActive");
console.log("isActive value:", isActive); // TypeScript type is inferred correctly
return (
<div>
{isActive ? (
<b className="text-blue-500">Terkirim</b>
) : (
<b className="text-danger">Belum Terkirim</b>
)}
</div>
);
{
accessorKey: "isActive",
header: "Status",
cell: ({ row }) => {
const isActive = row.getValue<boolean>("isActive");
console.log("isActive value:", isActive); // TypeScript type is inferred correctly
return (
<div>
{isActive ? (
<b className="text-blue-500">Terkirim</b>
) : (
<b className="text-danger">Belum Terkirim</b>
)}
</div>
);
},
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/planning/mediahub/publish/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
Publish
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/planning/mediahub/publish/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
Publish
</DropdownMenuItem>
</Link>
<DropdownMenuItem
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// onClick={() => deletePlan(row.id)}
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
<DropdownMenuItem
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
// onClick={() => deletePlan(row.id)}
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/planning/mediahub/components/mediahub-table.tsx
View File

@ -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,

188
app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
accessorKey: "title",
header: "Judul",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("title")}
</h4>
),
},
{
accessorKey: "title",
header: t("title"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("title")}
</h4>
</div>
</div>
</div>
),
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
},
{
accessorKey: "isActive",
header: "Status",
cell: ({ row }) => {
const isActive = row.getValue<boolean>("isActive");
console.log("isActive value:", isActive); // TypeScript type is inferred correctly
return (
<div>
{isActive ? (
<b className="text-blue-500">Terkirim</b>
) : (
<b className="text-danger">Belum Terkirim</b>
)}
</div>
);
{
accessorKey: "isActive",
header: "Status",
cell: ({ row }) => {
const isActive = row.getValue<boolean>("isActive");
console.log("isActive value:", isActive); // TypeScript type is inferred correctly
return (
<div>
{isActive ? (
<b className="text-blue-500">Terkirim</b>
) : (
<b className="text-danger">Belum Terkirim</b>
)}
</div>
);
},
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/planning/medsos-mediahub/publish/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
Publish
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/planning/medsos-mediahub/publish/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
Publish
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/planning/medsos-mediahub/components/medsos-table.tsx
View File

@ -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,

308
app/[locale]/(protected)/contributor/schedule/event/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "startDate",
header: t("start-date"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("startDate")}</span>
),
},
{
accessorKey: "endDate",
header: t("end-date"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("endDate")}</span>
),
},
{
accessorKey: "time",
header: t("time"),
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { startTime, endTime } = row.original;
return (
<span className="whitespace-nowrap">
{startTime || "N/A"} - {endTime || "N/A"}
</span>
);
},
},
{
accessorKey: "address",
header: t("address"),
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
const address: string = row.getValue("address");
return (
<span className="whitespace-nowrap">
{address.length > 50 ? `${address.slice(0, 40)}...` : address}
</span>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
{
accessorKey: "speaker",
header: t("speaker"),
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { speakerTitle, speakerName } = row.original;
return (
<span className="whitespace-nowrap">
{speakerTitle || ""} {speakerName || ""}
</span>
);
},
},
{
accessorKey: "uploaderName",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("uploaderName")}
</span>
);
),
},
},
{
accessorKey: "startDate",
header: "Start Date ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("startDate")}</span>
),
},
{
accessorKey: "endDate",
header: "End Date",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("endDate")}</span>
),
},
{
accessorKey: "time",
header: "Time",
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { startTime, endTime } = row.original;
return (
<span className="whitespace-nowrap">
{startTime || "N/A"} - {endTime || "N/A"}
</span>
);
},
},
{
accessorKey: "address",
header: "Address",
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
const address: string = row.getValue("address");
return (
<span className="whitespace-nowrap">
{address.length > 50 ? `${address.slice(0, 40)}...` : address}
</span>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
{
accessorKey: "speaker",
header: "Disampaikan oleh",
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { speakerTitle, speakerName } = row.original;
return (
<span className="whitespace-nowrap">
{speakerTitle || ""} {speakerName || ""}
</span>
);
},
},
{
accessorKey: "uploaderName",
header: "Sumber ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>
),
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/schedule/event/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/schedule/event/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/schedule/event/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/schedule/event/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
return columns;
};
export default columns;
export default useTableColumns;

3
app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
View File

@ -33,6 +33,7 @@ import { useTranslations } from "next-intl";
import { CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "@/i18n/routing";
import { Button } from "@/components/ui/button";
import useTableColumns from "./columns";
const EventTable = () => {
const router = useRouter();
@ -55,7 +56,7 @@ const EventTable = () => {
const [totalPage, setTotalPage] = React.useState(1);
const [limit, setLimit] = React.useState(10);
const [search, setSearch] = React.useState<string>("");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

309
app/[locale]/(protected)/contributor/schedule/press-conference/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "startDate",
header: t("start-date"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("startDate")}</span>
),
},
{
accessorKey: "endDate",
header: t("end-date"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("endDate")}</span>
),
},
{
accessorKey: "time",
header: t("time"),
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { startTime, endTime } = row.original;
return (
<span className="whitespace-nowrap">
{startTime || "N/A"} - {endTime || "N/A"}
</span>
);
},
},
{
accessorKey: "address",
header: t("address"),
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
const address: string = row.getValue("address");
return (
<span className="whitespace-nowrap">
{address.length > 50 ? `${address.slice(0, 40)}...` : address}
</span>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
{
accessorKey: "speaker",
header: t("speaker"),
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { speakerTitle, speakerName } = row.original;
return (
<span className="whitespace-nowrap">
{speakerTitle || ""} {speakerName || ""}
</span>
);
},
},
{
accessorKey: "uploaderName",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("uploaderName")}
</span>
);
),
},
},
{
accessorKey: "startDate",
header: "Start Date ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("startDate")}</span>
),
},
{
accessorKey: "endDate",
header: "End Date",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("endDate")}</span>
),
},
{
accessorKey: "time",
header: "Time",
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { startTime, endTime } = row.original;
return (
<span className="whitespace-nowrap">
{startTime || "N/A"} - {endTime || "N/A"}
</span>
);
},
},
{
accessorKey: "address",
header: "Address",
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
const address: string = row.getValue("address");
return (
<span className="whitespace-nowrap">
{address.length > 50 ? `${address.slice(0, 40)}...` : address}
</span>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
{
accessorKey: "speaker",
header: "Disampaikan oleh",
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { speakerTitle, speakerName } = row.original;
return (
<span className="whitespace-nowrap">
{speakerTitle || ""} {speakerName || ""}
</span>
);
},
},
{
accessorKey: "uploaderName",
header: "Sumber ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>
),
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/schedule/press-conference/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
Detail
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/schedule/press-conference/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
Detail
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/schedule/press-conference/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/schedule/press-conference/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
View File

@ -46,6 +46,7 @@ import { paginationSchedule } from "@/service/schedule/schedule";
import { CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl";
import useTableColumns from "./columns";
const PressConferenceTable = () => {
const router = useRouter();
@ -68,7 +69,7 @@ const PressConferenceTable = () => {
const [totalPage, setTotalPage] = React.useState(1);
const [limit, setLimit] = React.useState(10);
const [search, setSearch] = React.useState<string>("");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

309
app/[locale]/(protected)/contributor/schedule/press-release/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
),
},
{
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 (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
</span>
);
},
},
{
accessorKey: "startDate",
header: t("start-date"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("startDate")}</span>
),
},
{
accessorKey: "endDate",
header: t("end-date"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("endDate")}</span>
),
},
{
accessorKey: "time",
header: t("time"),
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { startTime, endTime } = row.original;
return (
<span className="whitespace-nowrap">
{startTime || "N/A"} - {endTime || "N/A"}
</span>
);
},
},
{
accessorKey: "address",
header: t("address"),
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
const address: string = row.getValue("address");
return (
<span className="whitespace-nowrap">
{address.length > 50 ? `${address.slice(0, 40)}...` : address}
</span>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
{
accessorKey: "speaker",
header: t("speaker"),
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { speakerTitle, speakerName } = row.original;
return (
<span className="whitespace-nowrap">
{speakerTitle || ""} {speakerName || ""}
</span>
);
},
},
{
accessorKey: "uploaderName",
header: t("source"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{title.length > 50 ? `${title.slice(0, 30)}...` : title}
{row.getValue("uploaderName")}
</span>
);
),
},
},
{
accessorKey: "startDate",
header: "Start Date ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("startDate")}</span>
),
},
{
accessorKey: "endDate",
header: "End Date",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("endDate")}</span>
),
},
{
accessorKey: "time",
header: "Time",
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { startTime, endTime } = row.original;
return (
<span className="whitespace-nowrap">
{startTime || "N/A"} - {endTime || "N/A"}
</span>
);
},
},
{
accessorKey: "address",
header: "Address",
cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
const address: string = row.getValue("address");
return (
<span className="whitespace-nowrap">
{address.length > 50 ? `${address.slice(0, 40)}...` : address}
</span>
);
},
},
{
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<string, string> = {
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 (
<Badge
className={cn("rounded-full px-5 whitespace-nowrap", statusStyles)}
>
{status} {/* Tetap tampilkan nilai asli */}
</Badge>
);
},
},
{
accessorKey: "speaker",
header: "Disampaikan oleh",
cell: ({ row }: { row: { original: any } }) => {
console.log("Row Original Data:", row.original);
const { speakerTitle, speakerName } = row.original;
return (
<span className="whitespace-nowrap">
{speakerTitle || ""} {speakerName || ""}
</span>
);
},
},
{
accessorKey: "uploaderName",
header: "Sumber ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("uploaderName")}</span>
),
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/schedule/press-release/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/contributor/schedule/press-release/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/schedule/press-release/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
<Link
href={`/contributor/schedule/press-release/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
View File

@ -47,6 +47,7 @@ import { paginationSchedule } from "@/service/schedule/schedule";
import { useTranslations } from "next-intl";
import { CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "@/i18n/routing";
import useTableColumns from "./columns";
const PressReleaseTable = () => {
const router = useRouter();
@ -69,7 +70,7 @@ const PressReleaseTable = () => {
const [totalPage, setTotalPage] = React.useState(1);
const [limit, setLimit] = React.useState(10);
const [search, setSearch] = React.useState<string>("");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

360
app/[locale]/(protected)/contributor/task/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Title",
cell: ({ row }) => (
<div>
<span>{row.getValue("title")}</span>
{row.original.isForward && (
<Button
variant={"outline"}
color="primary"
size="sm"
className="ml-3 rounded-xl"
>
Forward
</Button>
)}
</div>
),
},
{
accessorKey: "uniqueCode",
header: "Code",
cell: ({ row }) => <span>{row.getValue("uniqueCode")}</span>,
},
{
accessorKey: "assignmentMainType",
header: "Type Task",
cell: ({ row }) => {
const type = row.getValue("assignmentMainType") as { name: string };
return <span>{type?.name}</span>;
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => <span>{row.getValue("no")}</span>,
},
},
{
accessorKey: "assignmentType",
header: "Category Task",
cell: ({ row }) => {
const type = row.getValue("assignmentType") as { name: string };
return <span>{type?.name}</span>;
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
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<string, string> = {
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 (
<Badge className={cn("rounded-full px-5", statusStyles)}>
{statusText}
</Badge>
);
},
},
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
{
accessorKey: "title",
header: t("title"),
cell: ({ row }) => (
<div>
<span>{row.getValue("title")}</span>
{row.original.isForward && (
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
variant={"outline"}
color="primary"
size="sm"
className="ml-3 rounded-xl"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
Forward
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/task/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/contributor/task/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => TaskDelete(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
)}
</div>
),
},
},
];
export default columns;
{
accessorKey: "uniqueCode",
header: t("code"),
cell: ({ row }) => <span>{row.getValue("uniqueCode")}</span>,
},
{
accessorKey: "assignmentMainType",
header: t("type-task"),
cell: ({ row }) => {
const type = row.getValue("assignmentMainType") as { name: string };
return <span>{type?.name}</span>;
},
},
{
accessorKey: "assignmentType",
header: t("category-task"),
cell: ({ row }) => {
const type = row.getValue("assignmentType") as { name: string };
return <span>{type?.name}</span>;
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
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<string, string> = {
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 (
<Badge className={cn("rounded-full px-5", statusStyles)}>
{statusText}
</Badge>
);
},
},
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/task/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link href={`/contributor/task/update/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem
onClick={() => TaskDelete(row.original.id)}
className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none"
>
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/contributor/task/components/task-table.tsx
View File

@ -56,6 +56,7 @@ import { listTask } from "@/service/task";
import { Label } from "@/components/ui/label";
import { format } from "date-fns";
import { useTranslations } from "next-intl";
import useTableColumns from "./columns";
const TaskTable = () => {
const router = useRouter();
@ -83,7 +84,7 @@ const TaskTable = () => {
const [limit, setLimit] = React.useState(10);
const [isSpecificAttention, setIsSpecificAttention] = React.useState(true);
const [search, setSearch] = React.useState<string>("");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

33
app/[locale]/(protected)/dashboard/executive/page.tsx
View File

@ -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 (
<div>
<SiteBreadcrumb />
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Download Report</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Download Report</DialogTitle>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="w-full">
<Label>Date</Label>
<Input
type="date"
// value={dateFilter}
// onChange={(e) => setDateFilter(e.target.value)}
className="w-full"
/>
</div>
</div>
<DialogFooter>
<Button
type="submit"
// onClick={downloadReport}
>
Download
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div className="mt-3 flex flex-row gap-3 justify-center">
<Card className="rounded-sm w-4/12 p-3">
<div className="flex flex-row justify-between">
@ -412,7 +383,7 @@ export default function ExecutiveDashboard() {
</Card>
</div>
<div className="w-full mt-3">
<Card className="rounded-sm p-3 h-[300px]">
<Card className="rounded-sm p-3 h-auto">
<div className="flex flex-row justify-between">
<p className="text-base font-semibold">Emergency Issue</p>
<LucideBoxSelect />

3
app/[locale]/(protected)/shared/communication/collaboration/components/collabroation-table.tsx
View File

@ -63,6 +63,7 @@ import {
getTicketingEscalationPagination,
listTicketingInternal,
} from "@/service/communication/communication";
import useTableColumns from "./columns";
const CollaborationTable = () => {
const router = useRouter();
@ -88,7 +89,7 @@ const CollaborationTable = () => {
const [search, setSearch] = React.useState<string>("");
const roleId = getCookiesDecrypt("urie");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

197
app/[locale]/(protected)/shared/communication/collaboration/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Pertanyaan",
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
{
accessorKey: "commentFromUserName",
header: "CreateBy",
cell: ({ row }) => (
<span className="normal-case">{row.getValue("commentFromUserName")}</span>
),
},
{
accessorKey: "Type",
header: "Channel",
cell: ({ row }) => {
const type = row.original.type;
return <span className="normal-case">{type?.name || "N/A"}</span>;
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
{
accessorKey: "title",
header: t("question"),
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
},
{
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 (
<Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
);
{
accessorKey: "commentFromUserName",
header: t("sender"),
cell: ({ row }) => (
<span className="normal-case">
{row.getValue("commentFromUserName")}
</span>
),
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
const router = useRouter();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem
onClick={() =>
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"
>
<Eye className="w-4 h-4 me-1.5" />
Detail
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
{
accessorKey: "Type",
header: t("type"),
cell: ({ row }) => {
const type = row.original.type;
return <span className="normal-case">{type?.name || "N/A"}</span>;
},
},
},
];
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
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 (
<Badge className={`rounded-full px-5 ${statusStyles}`}>
{status}
</Badge>
);
},
},
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
const router = useRouter();
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<DropdownMenuItem
onClick={() =>
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"
>
<Eye className="w-4 h-4 me-1.5" />
Detail
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return columns;
};
export default useTableColumns;

188
app/[locale]/(protected)/shared/communication/escalation/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Pertanyaan",
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
{
accessorKey: "commentFromUserName",
header: "Penerima",
cell: ({ row }) => (
<span className="normal-case">{row.getValue("commentFromUserName")}</span>
),
},
{
accessorKey: "type",
header: "Penerima",
cell: ({ row }) => {
const type = row.original.type; // Akses properti category
return <span className="normal-case">{type?.name || "N/A"}</span>;
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
{
accessorKey: "title",
header: t("question"),
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
},
{
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 (
<Badge className={`rounded-full px-5 ${statusStyles}`}>{status}</Badge>
);
{
accessorKey: "commentFromUserName",
header: t("sender"),
cell: ({ row }) => (
<span className="normal-case">
{row.getValue("commentFromUserName")}
</span>
),
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/shared/communication/escalation/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
</DropdownMenuContent>
</DropdownMenu>
);
{
accessorKey: "type",
header: t("type"),
cell: ({ row }) => {
const type = row.original.type; // Akses properti category
return <span className="normal-case">{type?.name || "N/A"}</span>;
},
},
},
];
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
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 (
<Badge className={`rounded-full px-5 ${statusStyles}`}>
{status}
</Badge>
);
},
},
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/shared/communication/escalation/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
</DropdownMenuContent>
</DropdownMenu>
);
},
},
];
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/shared/communication/escalation/components/escalation-table.tsx
View File

@ -62,6 +62,7 @@ import {
getTicketingEscalationPagination,
listTicketingInternal,
} from "@/service/communication/communication";
import useTableColumns from "./columns";
const EscalationTable = () => {
const router = useRouter();
@ -87,7 +88,7 @@ const EscalationTable = () => {
const [search, setSearch] = React.useState<string>("");
const roleId = getCookiesDecrypt("urie");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

183
app/[locale]/(protected)/shared/communication/internal/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
{
accessorKey: "title",
header: "Pertanyaan",
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
{
accessorKey: "createdBy",
header: "Pengirim",
cell: ({ row }) => {
const createdBy = row.original.createdBy; // Akses properti category
return (
<span className="normal-case">{createdBy?.fullname || "N/A"}</span>
);
},
},
{
accessorKey: "sendTo",
header: "Penerima",
cell: ({ row }) => {
const sendTo = row.original.sendTo; // Akses properti category
return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => <span> {row.getValue("no")}</span>,
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/shared/communication/internal/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
{
accessorKey: "title",
header: t("question"),
cell: ({ row }) => (
<span className="normal-case"> {row.getValue("title")}</span>
),
},
{
accessorKey: "createdBy",
header: t("sender"),
cell: ({ row }) => {
const createdBy = row.original.createdBy; // Akses properti category
return (
<span className="normal-case">{createdBy?.fullname || "N/A"}</span>
);
},
},
{
accessorKey: "sendTo",
header: t("sendto"),
cell: ({ row }) => {
const sendTo = row.original.sendTo; // Akses properti category
return <span className="normal-case">{sendTo?.fullname || "N/A"}</span>;
},
},
{
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 <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
id: "actions",
accessorKey: "action",
header: t("action"),
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<Link
href={`/shared/communication/internal/detail/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
<Link
href={`/shared/communication/internal/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</Link>
<Link
href={`/shared/communication/internal/update/${row.original.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
</Link>
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/shared/communication/internal/components/internal-table.tsx
View File

@ -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,

399
app/[locale]/(protected)/shared/contest/components/columns.tsx
View File

@ -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<any>[] = [
{
accessorKey: "no",
header: "No",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
const useTableColumns = () => {
const t = useTranslations("Table"); // Panggil di dalam hook
const columns: ColumnDef<any>[] = [
{
accessorKey: "no",
header: t("no"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("no")}
</h4>
</div>
</div>
</div>
),
},
{
accessorKey: "hastagCode",
header: "Kode",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4
className="text-sm font-bold
text-default-600 whitespace-nowrap mb-1"
>
{row.getValue("hastagCode")}
</h4>
</div>
</div>
),
},
{
accessorKey: "theme",
header: "Judul",
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("theme")}
</h4>
</div>
</div>
),
},
{
accessorKey: "duration",
header: "Durasi ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("duration")}</span>
),
},
{
accessorKey: "targetOutput",
header: "Target Output ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("targetOutput")}</span>
),
},
{
accessorKey: "targetParticipantTopLevel",
header: "Target Participant ",
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("targetParticipantTopLevel")}
</span>
),
},
{
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 (
<Badge
className={`whitespace-nowrap px-2 py-1 rounded-full ${
isPending
? "bg-orange-100 text-orange-600" // Warna kuning untuk "Pending"
: isTerkirim
? "bg-blue-100 text-blue-600" // Warna biru untuk "Terkirim"
: "bg-green-100 text-green-600" // Warna hijau untuk "Publish"
}`}
>
{isPending ? "Pending" : isTerkirim ? "Terkirim" : "Publish"}
</Badge>
);
),
},
},
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
{
accessorKey: "hastagCode",
header: t("code"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4
className="text-sm font-bold
text-default-600 whitespace-nowrap mb-1"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
{((userRoleId == 11 || userRoleId == 12) &&
row?.original?.isPublishForMabes != true) ||
(userRoleId == 3 &&
userLevelNumber == 1 &&
row?.original?.isPublishForAll != true) ? (
<DropdownMenuItem
className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"
onClick={() => handlePublishContest(row.original.id)}
{row.getValue("hastagCode")}
</h4>
</div>
</div>
),
},
{
accessorKey: "theme",
header: t("title"),
cell: ({ row }) => (
<div className="flex items-center gap-5">
<div className="flex-1 text-start">
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
{row.getValue("theme")}
</h4>
</div>
</div>
),
},
{
accessorKey: "duration",
header: t("duration"),
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("duration")}</span>
),
},
{
accessorKey: "targetOutput",
header: t("target-output"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("targetOutput")}
</span>
),
},
{
accessorKey: "targetParticipantTopLevel",
header: t("target-participant"),
cell: ({ row }) => (
<span className="whitespace-nowrap">
{row.getValue("targetParticipantTopLevel")}
</span>
),
},
{
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 (
<Badge
className={`whitespace-nowrap px-2 py-1 rounded-full ${
isPending
? "bg-orange-100 text-orange-600" // Warna kuning untuk "Pending"
: isTerkirim
? "bg-blue-100 text-blue-600" // Warna biru untuk "Terkirim"
: "bg-green-100 text-green-600" // Warna hijau untuk "Publish"
}`}
>
{isPending ? "Pending" : isTerkirim ? "Terkirim" : "Publish"}
</Badge>
);
},
},
{
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 (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<Upload className="w-4 h-4 me-1.5" />
Publish
</DropdownMenuItem>
) : (
""
)}
<Link href={`/shared/contest/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
{/* <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
{((userRoleId == 11 || userRoleId == 12) &&
row?.original?.isPublishForMabes != true) ||
(userRoleId == 3 &&
userLevelNumber == 1 &&
row?.original?.isPublishForAll != true) ? (
<DropdownMenuItem
className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"
onClick={() => handlePublishContest(row.original.id)}
>
<Upload className="w-4 h-4 me-1.5" />
Publish
</DropdownMenuItem>
) : (
""
)}
<Link href={`/shared/contest/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />
View
</DropdownMenuItem>
</Link>
{/* <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<SquarePen className="w-4 h-4 me-1.5" />
Edit
</DropdownMenuItem>
@ -219,11 +225,14 @@ const columns: ColumnDef<any>[] = [
<Trash2 className="w-4 h-4 me-1.5" />
Delete
</DropdownMenuItem> */}
</DropdownMenuContent>
</DropdownMenu>
);
</DropdownMenuContent>
</DropdownMenu>
);
},
},
},
];
];
export default columns;
return columns;
};
export default useTableColumns;

3
app/[locale]/(protected)/shared/contest/components/contest-table.tsx
View File

@ -42,6 +42,7 @@ import { useRouter, useSearchParams } from "next/navigation";
import TablePagination from "@/components/table/table-pagination";
import columns from "./columns";
import { listContest } from "@/service/contest/contest";
import useTableColumns from "./columns";
const TaskTable = () => {
const router = useRouter();
@ -63,7 +64,7 @@ const TaskTable = () => {
const [totalPage, setTotalPage] = React.useState(1);
const [limit, setLimit] = React.useState(10);
const [search, setSearch] = React.useState<string>("");
const columns = useTableColumns();
const table = useReactTable({
data: dataTable,
columns,

6
app/[locale]/(protected)/shared/curated-content/page.tsx
View File

@ -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 (
<div>
<SiteBreadcrumb />
<div className="my-3">
<Tabs defaultValue="giat-routine" className="w-full">
<Card className="py-3 px-2 my-4">
<p className="text-lg font-semibold ml-2">Kurasi Konten</p>
<p className="text-lg font-semibold ml-2">
{t("content-curation")}
</p>
<TabsList className="flex-wrap">
<TabsTrigger
value="giat-routine"

21
components/form/content/audio-form.tsx
View File

@ -442,7 +442,22 @@ export default function FormAudio() {
return;
}
const requestData = {
let requestData: {
title: string;
description: string;
htmlDescription: string;
fileTypeId: string;
categoryId: any;
subCategoryId: any;
uploadedBy: string;
statusId: string;
publishedFor: string;
creatorName: string;
tags: string;
isYoutube: boolean;
isInternationalMedia: boolean;
attachFromScheduleId?: number; // ✅ Tambahkan properti ini
} = {
...data,
title: finalTitle,
description: finalDescription,
@ -461,6 +476,10 @@ export default function FormAudio() {
let id = Cookies.get("idCreate");
if (scheduleId !== undefined) {
requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
}
if (id == undefined) {
const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData);

39
components/form/content/image-form.tsx
View File

@ -56,6 +56,7 @@ import { options } from "@fullcalendar/core/preact.js";
import dynamic from "next/dynamic";
import { getCsrfToken } from "@/service/auth";
import { Link } from "@/i18n/routing";
import { request } from "http";
interface FileWithPreview extends File {
preview: string;
@ -443,11 +444,28 @@ export default function FormImage() {
const finalTags = tags.join(", ");
const finalTitle = isSwitchOn ? title : data.title;
const finalDescription = articleBody || data.description;
if (!finalDescription.trim()) {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
return;
}
const requestData = {
let requestData: {
title: string;
description: string;
htmlDescription: string;
fileTypeId: string;
categoryId: any;
subCategoryId: any;
uploadedBy: string;
statusId: string;
publishedFor: string;
creatorName: string;
tags: string;
isYoutube: boolean;
isInternationalMedia: boolean;
attachFromScheduleId?: number; // ✅ Tambahkan properti ini
} = {
...data,
title: finalTitle,
description: finalDescription,
@ -466,14 +484,14 @@ export default function FormImage() {
let id = Cookies.get("idCreate");
if (scheduleId !== undefined) {
requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
}
if (id == undefined) {
const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData);
// if (response?.error) {
// MySwal.fire("Error", response?.message, "error");
// return;
// }
Cookies.set("idCreate", response?.data?.data, { expires: 1 });
id = response?.data?.data;
@ -489,16 +507,15 @@ export default function FormImage() {
}
// Upload File
const progressInfoArr = [];
for (const item of files) {
progressInfoArr.push({ percentage: 0, fileName: item.name });
}
const progressInfoArr = files.map((item) => ({
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) => {

2
components/form/content/spit-convert-form.tsx
View File

@ -812,7 +812,7 @@ export default function FormConvertSPIT() {
<div className="mt-3">
<Label className="text-xl">Penempatan file</Label>
</div>
{files.length > 1 && (
{files?.length > 1 && (
<div className="flex flex-wrap gap-2 mt-2">
<div className="flex items-center space-x-2">
<Checkbox

21
components/form/content/teks-form.tsx
View File

@ -441,7 +441,22 @@ export default function FormTeks() {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
return;
}
const requestData = {
let requestData: {
title: string;
description: string;
htmlDescription: string;
fileTypeId: string;
categoryId: any;
subCategoryId: any;
uploadedBy: string;
statusId: string;
publishedFor: string;
creatorName: string;
tags: string;
isYoutube: boolean;
isInternationalMedia: boolean;
attachFromScheduleId?: number; // ✅ Tambahkan properti ini
} = {
...data,
title: finalTitle,
description: finalDescription,
@ -460,6 +475,10 @@ export default function FormTeks() {
let id = Cookies.get("idCreate");
if (scheduleId !== undefined) {
requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
}
if (id == undefined) {
const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData);

21
components/form/content/video-form.tsx
View File

@ -441,7 +441,22 @@ export default function FormVideo() {
MySwal.fire("Error", "Deskripsi tidak boleh kosong.", "error");
return;
}
const requestData = {
let requestData: {
title: string;
description: string;
htmlDescription: string;
fileTypeId: string;
categoryId: any;
subCategoryId: any;
uploadedBy: string;
statusId: string;
publishedFor: string;
creatorName: string;
tags: string;
isYoutube: boolean;
isInternationalMedia: boolean;
attachFromScheduleId?: number; // ✅ Tambahkan properti ini
} = {
...data,
title: finalTitle,
description: finalDescription,
@ -460,6 +475,10 @@ export default function FormVideo() {
let id = Cookies.get("idCreate");
if (scheduleId !== undefined) {
requestData.attachFromScheduleId = Number(scheduleId); // ✅ Tambahkan nilai ini
}
if (id == undefined) {
const response = await createMedia(requestData);
console.log("Form Data Submitted:", requestData);

223
components/form/schedule/event-detail-form.tsx
View File

@ -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,
@ -61,6 +62,14 @@ interface Detail {
addressLong: number;
}
interface Attachment {
id: any;
title: string;
fileTypeId: number;
type: number;
fileTypeName: string;
}
export default function FormEventDetail() {
const [open, setOpen] = useState(false);
const { id } = useParams() as { id: string };
@ -89,6 +98,14 @@ export default function FormEventDetail() {
},
});
const [lampiran, setDataLampiran] = useState<Attachment[]>([]);
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<HTMLInputElement>) => {
@ -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<number, string> = {
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 (
<div className="flex flex-col lg:flex-row gap-2">
<Card className="w-full lg:w-9/12">
@ -336,92 +377,67 @@ export default function FormEventDetail() {
<Button color="primary" size="sm" type="button">
<Plus /> Tambah Lampiran
</Button>
<p>0 Lampiran</p>
<p>{lampiran?.length || 0} Lampiran</p>
</div>
</DialogTrigger>
<DialogContent className="max-w-md p-6 bg-white rounded-lg shadow-lg h-[420px] w-[700px]">
<h2 className="text-lg font-semibold">
Pilih Jenis Lampiran
</h2>
<div className=" space-y-4 gap-y-4">
<Link href={"/contributor/schedule/media/video/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-video.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">
Audio Visual
</h3>
<div className="space-y-4 gap-y-4">
{[
{
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) => (
<a
key={item.type}
onClick={() =>
handleDestinationUpload(
item.type,
id,
setOpen,
router
)
}
>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={item.img}
alt={item.label}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">
{item.label}
</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa {item.label.toLowerCase()}{" "}
dengan format sesuai yang didukung.
</p>
</div>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
<Link href={"/contributor/schedule/media/image/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-image.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">Foto</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
<Link href={"/contributor/schedule/media/text/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-text.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">Teks</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
<Link href={"/contributor/schedule/media/audio/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-audio.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">Audio</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
</a>
))}
</div>
</DialogContent>
</Dialog>
@ -430,7 +446,52 @@ export default function FormEventDetail() {
""
)}
</div>
<div className="mt-4 flex justify-end">
<div className="mt-6 mx-6">
<table className="w-full border border-gray-300 rounded-lg">
<thead className="bg-gray-200 text-left">
<tr>
<th className="p-3 font-semibold">Judul Konten</th>
<th className="p-3 font-semibold">Konten</th>
<th className="p-3 font-semibold">Tindakan</th>
<th className="p-3 font-semibold">Aksi</th>
</tr>
</thead>
<tbody>
{lampiran.map((item, index) => (
<tr key={index} className="border-t border-gray-300">
<td className="p-3 text-blue-600 cursor-pointer">
{item.title}
</td>
<td className="p-3">{item.fileTypeName}</td>
<td className="p-3 text-blue-600">Konfersi Ai</td>
<td className="p-3">
<Link
href={
Number(item.fileTypeId) == 1
? `/contributor/content/image/detail/${item.id}`
: Number(item.fileTypeId) == 2
? `/contributor/content/video/detail/${item.id}`
: Number(item.fileTypeId) == 3
? `/contributor/content/teks/detail/${item.id}`
: `/contributor/content/audio/detail/${item.id}`
}
target="_blank"
className="btn"
rel="noreferrer"
>
<Eye
className={
item.type === 1 ? "text-blue-600" : "text-black"
}
/>
</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="my-4 mr-6 flex justify-end">
<Button type="submit" color="primary">
Submit
</Button>

231
components/form/schedule/pers-release--detail-form.tsx
View File

@ -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<Attachment[]>([]);
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<HTMLInputElement>) => {
@ -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<number, string> = {
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() {
<Button color="primary" size="sm" type="button">
<Plus /> Tambah Lampiran
</Button>
<p>0 Lampiran</p>
<p>{lampiran?.length || 0} Lampiran</p>
</div>
</DialogTrigger>
<DialogContent className="max-w-md p-6 bg-white rounded-lg shadow-lg h-[420px] w-[700px]">
<h2 className="text-lg font-semibold">
Pilih Jenis Lampiran
</h2>
<div className=" space-y-4 gap-y-4">
<Link href={"/contributor/schedule/media/video/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-video.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">
Audio Visual
</h3>
<div className="space-y-4 gap-y-4">
{[
{
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) => (
<a
key={item.type}
onClick={() =>
handleDestinationUpload(
item.type,
id,
setOpen,
router
)
}
>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={item.img}
alt={item.label}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">
{item.label}
</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa {item.label.toLowerCase()}{" "}
dengan format sesuai yang didukung.
</p>
</div>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
<Link href={"/contributor/schedule/media/image/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-image.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">Foto</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
<Link href={"/contributor/schedule/media/text/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-text.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">Teks</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
<Link href={"/contributor/schedule/media/audio/create"}>
<div className="flex flex-row items-center space-x-4">
<div className="flex flex-col w-4/12 items-center">
<img
src={"/assets/img/upload-audio.png"}
alt={"item.label"}
className="w-12 h-12"
/>
<h3 className="text-base font-semibold">Audio</h3>
</div>
<div className="w-8/12">
<p className="text-sm text-gray-600">
Unggah media berupa video dengan format avi, wmv,
atau mp4 dengan ukuran minimal 2mb dan maksimal
500mb.
</p>
</div>
</div>
</Link>
</a>
))}
</div>
</DialogContent>
</Dialog>
@ -472,6 +472,51 @@ export default function FormDetailPressRillis() {
) : (
""
)}
<div className="mt-6">
<table className="w-full border border-gray-300 rounded-lg">
<thead className="bg-gray-200 text-left">
<tr>
<th className="p-3 font-semibold">Judul Konten</th>
<th className="p-3 font-semibold">Konten</th>
<th className="p-3 font-semibold">Tindakan</th>
<th className="p-3 font-semibold">Aksi</th>
</tr>
</thead>
<tbody>
{lampiran.map((item, index) => (
<tr key={index} className="border-t border-gray-300">
<td className="p-3 text-blue-600 cursor-pointer">
{item.title}
</td>
<td className="p-3">{item.fileTypeName}</td>
<td className="p-3 text-blue-600">Konfersi Ai</td>
<td className="p-3">
<Link
href={
Number(item.fileTypeId) == 1
? `/contributor/content/image/detail/${item.id}`
: Number(item.fileTypeId) == 2
? `/contributor/content/video/detail/${item.id}`
: Number(item.fileTypeId) == 3
? `/contributor/content/teks/detail/${item.id}`
: `/contributor/content/audio/detail/${item.id}`
}
target="_blank"
className="btn"
rel="noreferrer"
>
<Eye
className={
item.type === 1 ? "text-blue-600" : "text-black"
}
/>
</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
<div className="mt-4 flex justify-end">
<Button type="submit" color="primary">
Submit

41
components/page-title.tsx
View File

@ -3,6 +3,17 @@ import React, { useEffect } from "react";
import DateRangePicker from "@/components/date-range-picker";
import { usePathname } from "@/components/navigation";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "./ui/dialog";
import { Button } from "./ui/button";
import { Label } from "./ui/label";
import { Input } from "./ui/input";
const PageTitle = ({
title,
@ -30,7 +41,35 @@ const PageTitle = ({
<div className="text-2xl font-medium text-default-800 capitalize">
Dashboard
</div>
<DateRangePicker />
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Download Report</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Download Report</DialogTitle>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="w-full">
<Label>Date</Label>
<Input
type="date"
// value={dateFilter}
// onChange={(e) => setDateFilter(e.target.value)}
className="w-full"
/>
</div>
</div>
<DialogFooter>
<Button
type="submit"
// onClick={downloadReport}
>
Download
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
);
};

84
components/visualization/performance-satker.tsx Normal file
View File

@ -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 (
<div className="flex flex-col gap-2 bg-white rounded-lg p-3">
<p className="text-lg">
<b>
{isInternational[0] ? "SATKER PERFORMANCE" : "POLFORMANCE SATKER"}
</b>
</p>
<div className="my-5">
{ticket1 == "" ? (
<iframe
src={`${baseUrl + view1 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket1}/${view1}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
</div>
);
}

129
lib/menus.ts
View File

@ -1591,21 +1591,21 @@ export function getMenuList(pathname: string, t: any): Group[] {
submenus: [
{
href: "/contributor/schedule/press-conference",
label: "konferensi pers",
label: t("press-conference"),
active: pathname.includes("/schedule/press-conference"),
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/contributor/schedule/event",
label: "event",
label: t("event"),
active: pathname.includes("/schedule/event"),
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/contributor/schedule/press-release",
label: "pers rilis",
label: t("press-release"),
active: pathname.includes("/schedule/press-release"),
icon: "heroicons:shopping-cart",
children: [],
@ -1789,21 +1789,21 @@ export function getMenuList(pathname: string, t: any): Group[] {
submenus: [
{
href: "/contributor/schedule/press-conference",
label: "konferensi pers",
label: t("press-conference"),
active: pathname.includes("/schedule/press-conference"),
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/contributor/schedule/event",
label: "event",
label: t("event"),
active: pathname.includes("/schedule/event"),
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/contributor/schedule/press-release",
label: "pers rilis",
label: t("press-release"),
active: pathname.includes("/schedule/press-release"),
icon: "heroicons:shopping-cart",
children: [],
@ -2019,7 +2019,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
submenus: [
{
href: "/contributor/schedule/press-conference",
label: "konferensi pers",
label: t("press-conference"),
active: pathname.includes("/schedule/press-conference"),
icon: "heroicons:arrow-trending-up",
children: [],
@ -2033,7 +2033,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
{
href: "/contributor/schedule/press-release",
label: "pers rilis",
label: t("press-release"),
active: pathname.includes("/schedule/press-release"),
icon: "heroicons:shopping-cart",
children: [],
@ -2233,21 +2233,21 @@ export function getMenuList(pathname: string, t: any): Group[] {
submenus: [
{
href: "/contributor/schedule/press-conference",
label: "konferensi pers",
label: t("press-conference"),
active: pathname.includes("/schedule/press-conference"),
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/contributor/schedule/event",
label: "event",
label: t("event"),
active: pathname.includes("/schedule/event"),
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/contributor/schedule/press-release",
label: "pers rilis",
label: t("press-release"),
active: pathname.includes("/schedule/press-release"),
icon: "heroicons:shopping-cart",
children: [],
@ -2442,21 +2442,21 @@ export function getMenuList(pathname: string, t: any): Group[] {
submenus: [
{
href: "/contributor/schedule/press-conference",
label: "konferensi pers",
label: t("press-conference"),
active: pathname.includes("/schedule/press-conference"),
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/contributor/schedule/event",
label: "event",
label: t("event"),
active: pathname.includes("/schedule/event"),
icon: "heroicons:shopping-cart",
children: [],
},
{
href: "/contributor/schedule/press-release",
label: "pers rilis",
label: t("press-release"),
active: pathname.includes("/schedule/press-release"),
icon: "heroicons:shopping-cart",
children: [],
@ -3202,20 +3202,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
{
groupLabel: "",
id: "agenda-setting",
menus: [
{
id: "agenda-setting",
href: "/contributor/agenda-setting",
label: t("agenda-setting"),
active: pathname.includes("/agenda-setting"),
icon: "iconoir:journal-page",
submenus: [],
},
],
},
// {
// groupLabel: "",
// id: "agenda-setting",
// menus: [
// {
// id: "agenda-setting",
// href: "/contributor/agenda-setting",
// label: t("agenda-setting"),
// active: pathname.includes("/agenda-setting"),
// icon: "iconoir:journal-page",
// submenus: [],
// },
// ],
// },
{
groupLabel: "",
id: "performance-polres",
@ -3364,11 +3364,39 @@ export function getMenuList(pathname: string, t: any): Group[] {
label: t("dashboard"),
active: pathname.includes("/dashboard"),
icon: "material-symbols:dashboard",
submenus: [
{
href: "/dashboard/executive",
label: "Executive",
active: pathname === "/dashboard/executive",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/dashboard",
label: "Breakdown",
active: pathname === "/dashboard",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
{
groupLabel: "",
id: "management-user",
menus: [
{
id: "management-user-menu",
href: "/admin/management-user",
label: "Management User",
active: pathname.includes("/management-user"),
icon: "clarity:users-solid",
submenus: [],
},
],
},
{
groupLabel: "",
id: "content-production",
@ -3397,6 +3425,49 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
{
groupLabel: "",
id: "performance-polres",
menus: [
{
id: "performance-polres",
href: "/admin/performance-satker",
label: t("performance-satker"),
active: pathname.includes("/admin/performance-satker"),
icon: "ant-design:signal-filled",
submenus: [],
},
],
},
{
groupLabel: "",
id: "media-tracking",
menus: [
{
id: "media-tracking",
href: "/curator/media-tracking",
label: t("media-tracking"),
active: pathname.includes("/media-tracking"),
icon: "material-symbols:map-search-outline",
submenus: [
{
href: "/admin/media-tracking/media-online",
label: "Media Online",
active: pathname === "/media-tracking/media-online",
icon: "heroicons:arrow-trending-up",
children: [],
},
{
href: "/admin/media-tracking/tb-news",
label: "Tracking Beritra Hari Ini",
active: pathname === "/media-tracking/news",
icon: "heroicons:arrow-trending-up",
children: [],
},
],
},
],
},
{
groupLabel: "",
id: "communication",

40
messages/en.json
View File

@ -325,10 +325,15 @@
"colors": "Colors",
"performance-polda": "Performance Polda",
"performance-polres": "Performance Polres",
"performance-satker": "Performance Satker",
"analysis": "Analysis",
"management-content": "Content Management ",
"add-experts": "Add Experts",
"category": "Category",
"add-category": "Add Category",
"tags": "Tags",
"add-tags": "Add Tags",
"add": "Add",
"privacy": "Privacy Policy"
},
"Changelog": {
@ -580,7 +585,8 @@
"schedule": "Schedule",
"press-conference": "Press Conference",
"press-release": "Press Release",
"create-schedule": "Create Schedule"
"create-schedule": "Create Schedule",
"event": "event"
},
"Blog": {
"table": "Table",
@ -599,5 +605,37 @@
"table": "Table",
"contest": "Lomba",
"create-contest": "Create Contest"
},
"Curation": {
"content-curation": "Content Curation"
},
"Table": {
"no": "No",
"title": "Title",
"category-name": "Category Name",
"upload-date": "Upload Date",
"creator-group": "Creator Group",
"source": "source",
"published": "Published",
"date": "Date",
"category": "Category",
"tag": "Tag",
"type-content": "Content Type",
"type-task": "Task Type",
"category-task": "Category Task",
"code": "Code",
"start-date": "Start Date",
"end-date": "End Date",
"speaker": "Speaker",
"time": "Time",
"address": "Address",
"question": "Question",
"sender": "Created By",
"sendto": "SendTo",
"type": "Type",
"duration": "Duration",
"target-output": "Target Output",
"target-participant": "Target Participant",
"action": "Actions"
}
}

40
messages/in.json
View File

@ -326,10 +326,15 @@
"colors": "Colors",
"performance-polda": "Performa Polda",
"performance-polres": "Performa Polres",
"performance-satker": "Performa Satker",
"analysis": "Analisa",
"management-content": "Manajemen Konten",
"add-experts": "Tambah Tenaga Ahli",
"category": "Kategori",
"add-category": "Tambah Kategori",
"tags": "Tag",
"add-tags": "Tambah Tag",
"add": "Tambah",
"privacy": "Kebijakan Privacy"
},
"Changelog": {
@ -581,7 +586,8 @@
"schedule": "Jadwal",
"press-conference": "Konferensi Pers",
"press-release": "Pers Rilis",
"create-schedule": "Buat Jadwal"
"create-schedule": "Buat Jadwal",
"event": "event"
},
"Blog": {
"table": "Tabel",
@ -600,5 +606,37 @@
"table": "Tabel",
"contest": "Lomba",
"create-contest": "Buat Lomba"
},
"Curation": {
"content-curation": "Kurasi Konten"
},
"Table": {
"no": "Nomor",
"title": "Judul",
"category-name": "Nama Kategori",
"upload-date": "Tanggal Upload",
"creator-group": "Pembuat",
"source": "Sumber",
"published": "Diterbitkan",
"date": "Tanggal",
"category": "Kategori",
"tag": "Tag",
"type-content": "Tipe Konten",
"type-task": "Tipen Penugasan",
"category-task": "Kategori Penugasan",
"code": "Kode",
"start-date": "Tanggal Mulai",
"end-date": "Tanggal Selesai",
"speaker": "Disampaikan Oleh",
"time": "Waktu",
"address": "Alamat",
"question": "Pertanyaan",
"sender": "Pengirim",
"sendto": "Penerima",
"type": "Tipe",
"duration": "Durasi",
"target-output": "Target Output",
"target-participant": "Target Peserta",
"action": "Aksi"
}
}

16
service/schedule/schedule.ts
View File

@ -5,8 +5,15 @@ import {
import { httpGet } from "../http-config/http-base-service";
import { any } from "zod";
export async function paginationSchedule(size: number, page: number, type: any, title: string = "") {
return await httpGetInterceptor(`schedule/pagination?enablePage=1&scheduleTypeId=${type}&page=${page}&size=${size}&title=${title}`);
export async function paginationSchedule(
size: number,
page: number,
type: any,
title: string = ""
) {
return await httpGetInterceptor(
`schedule/pagination?enablePage=1&scheduleTypeId=${type}&page=${page}&size=${size}&title=${title}`
);
}
export async function postSchedule(data: any) {
@ -49,6 +56,11 @@ export async function listScheduleToday() {
return httpGetInterceptor(url);
}
export async function getListScheduleAttachment(scheduleId: any) {
const url = `media/list?&enablePage=0&scheduleId=${scheduleId}`;
return httpGetInterceptor(url);
}
export async function listScheduleNext() {
const url = "schedule/next-activity";
return httpGetInterceptor(url);