diff --git a/app/[locale]/(protected)/blog/table-blog/blog-table.tsx b/app/[locale]/(protected)/blog/table-blog/blog-table.tsx index b7ea563b..210931e0 100644 --- a/app/[locale]/(protected)/blog/table-blog/blog-table.tsx +++ b/app/[locale]/(protected)/blog/table-blog/blog-table.tsx @@ -46,17 +46,33 @@ import { } from "@/components/ui/dropdown-menu"; export type CompanyData = { + no: number; title: string; category: string; - date: string; - tag: string; - status: string; + createdAt: string; + tags: string; + statusName: string; }; import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { listTask } from "@/service/ppid-categories-services"; +import { paginationBlog } from "@/service/blog/blog"; export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

+
+
+ ), + }, { accessorKey: "title", header: "Judul", @@ -71,33 +87,33 @@ export const columns: ColumnDef[] = [ ), }, { - accessorKey: "category", + accessorKey: "categoryName", header: "Kategori ", cell: ({ row }) => ( - {row.getValue("category")} + {row.getValue("categoryName")} ), }, { - accessorKey: "date", + accessorKey: "createdAt", header: "Tanggal Unggah ", cell: ({ row }) => ( - {row.getValue("date")} + {row.getValue("createdAt")} ), }, { - accessorKey: "tag", + accessorKey: "tags", header: "Tag ", cell: ({ row }) => ( - {row.getValue("tag")} + {row.getValue("tags")} ), }, { - accessorKey: "status", + accessorKey: "statusName", header: "Status", cell: ({ row }) => { return ( - {row.getValue("status")} + {row.getValue("statusName")} ); }, @@ -140,6 +156,7 @@ export const columns: ColumnDef[] = [ ]; const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -149,11 +166,14 @@ const BlogTable = () => { const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: 6, + pageSize: 10, }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); const table = useReactTable({ - data, + data: blogTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -173,6 +193,30 @@ const BlogTable = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const res = await paginationBlog(limit, page); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + categoryName: item.categoryName, + tags: item.tags, + assignmentType: item.assignmentType?.name || "-", + createdAt: item.createdAt, + statusName: item.statusName, + })); + + setBlogTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
diff --git a/app/[locale]/(protected)/communication/collaboration/create/page.tsx b/app/[locale]/(protected)/communication/collaboration/create/page.tsx new file mode 100644 index 00000000..9c51de4c --- /dev/null +++ b/app/[locale]/(protected)/communication/collaboration/create/page.tsx @@ -0,0 +1,16 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormInternal from "@/components/form/communication/internal-form"; +import FormCollaboration from "@/components/form/communication/collaboration-form"; + +const CollaborationCreatePage = async () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default CollaborationCreatePage; diff --git a/app/[locale]/(protected)/communication/collaboration/table-collaboration/collabroation-table.tsx b/app/[locale]/(protected)/communication/collaboration/table-collaboration/collabroation-table.tsx index b4ad7a59..cd87c78b 100644 --- a/app/[locale]/(protected)/communication/collaboration/table-collaboration/collabroation-table.tsx +++ b/app/[locale]/(protected)/communication/collaboration/table-collaboration/collabroation-table.tsx @@ -56,6 +56,7 @@ export type CompanyData = { import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { Link } from "@/components/navigation"; export const columns: ColumnDef[] = [ { @@ -181,10 +182,12 @@ const CollaborationTable = () => {
- + + +
diff --git a/app/[locale]/(protected)/communication/internal/create/page.tsx b/app/[locale]/(protected)/communication/internal/create/page.tsx new file mode 100644 index 00000000..ddb27415 --- /dev/null +++ b/app/[locale]/(protected)/communication/internal/create/page.tsx @@ -0,0 +1,15 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormInternal from "@/components/form/communication/internal-form"; + +const InternalCreatePage = async () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default InternalCreatePage; diff --git a/app/[locale]/(protected)/communication/internal/table-internal/internal-table.tsx b/app/[locale]/(protected)/communication/internal/table-internal/internal-table.tsx index cee3ad8e..db7d14e3 100644 --- a/app/[locale]/(protected)/communication/internal/table-internal/internal-table.tsx +++ b/app/[locale]/(protected)/communication/internal/table-internal/internal-table.tsx @@ -47,16 +47,31 @@ import { } from "@/components/ui/dropdown-menu"; export type CompanyData = { + no: number; title: string; - createBy: string; - sendTo: string; - date: string; + commentFromUserName: string; + commentToUserName: string; + createdAt: string; }; -import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { listTicketingInternal } from "@/service/communication/communication"; +import { Link } from "@/components/navigation"; export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

+
+
+ ), + }, { accessorKey: "title", header: "Pertanyaan", @@ -71,24 +86,28 @@ export const columns: ColumnDef[] = [ ), }, { - accessorKey: "createBy", + accessorKey: "commentFromUserName", header: "Pengirim ", cell: ({ row }) => ( - {row.getValue("createBy")} + + {row.getValue("commentFromUserName")} + ), }, { - accessorKey: "sendTo", + accessorKey: "commentToUserName", header: "Penerima", cell: ({ row }) => ( - {row.getValue("sendTo")} + + {row.getValue("commentToUserName")} + ), }, { - accessorKey: "date", + accessorKey: "createdAt", header: "Waktu ", cell: ({ row }) => ( - {row.getValue("date")} + {row.getValue("createdAt")} ), }, { @@ -129,6 +148,7 @@ export const columns: ColumnDef[] = [ ]; const InternalTable = () => { + const [internalTable, setInternalTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -140,9 +160,12 @@ const InternalTable = () => { pageIndex: 0, pageSize: 6, }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); const table = useReactTable({ - data, + data: internalTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -162,15 +185,41 @@ const InternalTable = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const res = await listTicketingInternal(page); + + const data = res.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + commentFromUserName: item.commentFromUserName, + commentToUserName: item.commentToUserName, + createdAt: item.createdAt, + })); + + setInternalTable(data); + setTotalPage(res.data.totalPages); + console.log(res?.data?.data); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
- + + +
diff --git a/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx b/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx index 15500f7e..136b25f7 100644 --- a/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx +++ b/app/[locale]/(protected)/content/audio-visual/table-video/index.tsx @@ -2,7 +2,9 @@ import * as React from "react"; import { + ColumnDef, ColumnFiltersState, + PaginationState, SortingState, VisibilityState, flexRender, @@ -12,7 +14,6 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table"; -import { columns } from "./columns"; import { Input } from "@/components/ui/input"; import { @@ -26,8 +27,177 @@ import { import { data } from "./data"; import TablePagination from "./table-pagination"; +import { Button } from "@/components/ui/button"; +import { format } from "date-fns"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Trash2, +} from "lucide-react"; +import { title } from "process"; + +import { getCookiesDecrypt } from "@/lib/utils"; +import { listDataImage, listDataVideo } from "@/service/content/content"; + +export type CompanyData = { + no: number; + title: string; + categoryName: string; + createdAt: string; + creatorGroup: string; + publishedOn: string; + isPublish: any; + isPublishOnPolda: any; + isDone: string; +}; + +export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

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

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

+
+
+ ), + }, + { + accessorKey: "categoryName", + header: "Kategori", + cell: ({ row }) => ( + {row.getValue("categoryName")} + ), + }, + { + accessorKey: "createdAt", + header: "Tanggal Unggah", + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "creatorGroup", + header: "Sumber ", + cell: ({ row }) => ( + {row.getValue("creatorGroup")} + ), + }, + { + accessorKey: "publishedOn", + header: "Penempatan File", + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; + + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } + + return ( +
+ {displayText} +
+ ); + }, + }, + + { + accessorKey: "isDone", + header: "Status", + cell: ({ row }) => { + const isDone = row.getValue("isDone"); + return ( +
+ +
+ ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + Delete + + + + ); + }, + }, +]; const TableVideo = () => { + const [videoTable, setVideoTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -35,9 +205,29 @@ const TableVideo = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, // Halaman pertama + pageSize: 10, // Jumlah baris per halaman + }); + const [page, setPage] = React.useState(1); // Halaman aktif + const [totalPage, setTotalPage] = React.useState(1); // Total halaman + const [limit, setLimit] = React.useState(6); // Jumlah baris per halaman + const [search, setSearch] = React.useState(title); + const userId = getCookiesDecrypt("uie"); + const userLevelId = getCookiesDecrypt("ulie"); + + const [categories, setCategories] = React.useState(); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); + const [startDateString, setStartDateString] = React.useState(""); + const [endDateString, setEndDateString] = React.useState(""); + const [filterByCreator, setFilterByCreator] = React.useState(""); + const [filterBySource, setFilterBySource] = React.useState(""); + + const roleId = getCookiesDecrypt("urie"); const table = useReactTable({ - data, + data: videoTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -55,6 +245,48 @@ const TableVideo = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const isForSelf = Number(roleId) == 4; + const res = await listDataVideo( + limit, + page, + isForSelf, + !isForSelf, + categoryFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") + ? "1,2" + : statusFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") ? userLevelId : "", + filterByCreator, + filterBySource, + startDateString, + endDateString + ); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + categoryName: item.categoryName, + creatorGroup: item.creatorGroup, + assignmentType: item.assignmentType?.name || "-", + createdAt: item.createdAt, + isDone: item.isDone, + publishedOn: item.publishedOn, + isPublish: item.isPublish, + isPublishOnPolda: item.isPublishOnPolda, + })); + + setVideoTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
@@ -72,22 +304,20 @@ const TableVideo = () => {
- +
{table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} ))} @@ -97,6 +327,7 @@ const TableVideo = () => { {row.getVisibleCells().map((cell) => ( @@ -114,7 +345,41 @@ const TableVideo = () => { )}
- +
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
); }; diff --git a/app/[locale]/(protected)/content/audio/table-audio/index.tsx b/app/[locale]/(protected)/content/audio/table-audio/index.tsx index 38813a4d..760a8ab7 100644 --- a/app/[locale]/(protected)/content/audio/table-audio/index.tsx +++ b/app/[locale]/(protected)/content/audio/table-audio/index.tsx @@ -2,7 +2,9 @@ import * as React from "react"; import { + ColumnDef, ColumnFiltersState, + PaginationState, SortingState, VisibilityState, flexRender, @@ -12,7 +14,6 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table"; -import { columns } from "./columns"; import { Input } from "@/components/ui/input"; import { @@ -26,8 +27,181 @@ import { import { data } from "./data"; import TablePagination from "./table-pagination"; +import { Button } from "@/components/ui/button"; +import { format } from "date-fns"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Trash2, +} from "lucide-react"; +import { title } from "process"; + +import { getCookiesDecrypt } from "@/lib/utils"; +import { + listDataAudio, + listDataImage, + listDataVideo, +} from "@/service/content/content"; + +export type CompanyData = { + no: number; + title: string; + categoryName: string; + createdAt: string; + creatorGroup: string; + publishedOn: string; + isPublish: any; + isPublishOnPolda: any; + isDone: string; +}; + +export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

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

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

+
+
+ ), + }, + { + accessorKey: "categoryName", + header: "Kategori", + cell: ({ row }) => ( + {row.getValue("categoryName")} + ), + }, + { + accessorKey: "createdAt", + header: "Tanggal Unggah", + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "creatorGroup", + header: "Sumber ", + cell: ({ row }) => ( + {row.getValue("creatorGroup")} + ), + }, + { + accessorKey: "publishedOn", + header: "Penempatan File", + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; + + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } + + return ( +
+ {displayText} +
+ ); + }, + }, + + { + accessorKey: "isDone", + header: "Status", + cell: ({ row }) => { + const isDone = row.getValue("isDone"); + return ( +
+ +
+ ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + Delete + + + + ); + }, + }, +]; const TableAudio = () => { + const [videoTable, setVideoTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -35,9 +209,29 @@ const TableAudio = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, // Halaman pertama + pageSize: 10, // Jumlah baris per halaman + }); + const [page, setPage] = React.useState(1); // Halaman aktif + const [totalPage, setTotalPage] = React.useState(1); // Total halaman + const [limit, setLimit] = React.useState(6); // Jumlah baris per halaman + const [search, setSearch] = React.useState(title); + const userId = getCookiesDecrypt("uie"); + const userLevelId = getCookiesDecrypt("ulie"); + + const [categories, setCategories] = React.useState(); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); + const [startDateString, setStartDateString] = React.useState(""); + const [endDateString, setEndDateString] = React.useState(""); + const [filterByCreator, setFilterByCreator] = React.useState(""); + const [filterBySource, setFilterBySource] = React.useState(""); + + const roleId = getCookiesDecrypt("urie"); const table = useReactTable({ - data, + data: videoTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -55,6 +249,48 @@ const TableAudio = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const isForSelf = Number(roleId) == 4; + const res = await listDataAudio( + limit, + page, + isForSelf, + !isForSelf, + categoryFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") + ? "1,2" + : statusFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") ? userLevelId : "", + filterByCreator, + filterBySource, + startDateString, + endDateString + ); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + categoryName: item.categoryName, + creatorGroup: item.creatorGroup, + assignmentType: item.assignmentType?.name || "-", + createdAt: item.createdAt, + isDone: item.isDone, + publishedOn: item.publishedOn, + isPublish: item.isPublish, + isPublishOnPolda: item.isPublishOnPolda, + })); + + setVideoTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
@@ -72,22 +308,20 @@ const TableAudio = () => {
- +
{table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} ))} @@ -97,6 +331,7 @@ const TableAudio = () => { {row.getVisibleCells().map((cell) => ( @@ -114,7 +349,41 @@ const TableAudio = () => { )}
- +
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
); }; diff --git a/app/[locale]/(protected)/content/image/create/page.tsx b/app/[locale]/(protected)/content/image/create/page.tsx new file mode 100644 index 00000000..6b169ce1 --- /dev/null +++ b/app/[locale]/(protected)/content/image/create/page.tsx @@ -0,0 +1,17 @@ +import { Card, CardContent } from "@/components/ui/card"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import FormTask from "@/components/form/task/task-form"; +import FormImage from "@/components/form/content/create-form"; + +const ImageCreatePage = async () => { + return ( +
+ +
+ +
+
+ ); +}; + +export default ImageCreatePage; diff --git a/app/[locale]/(protected)/content/image/page.tsx b/app/[locale]/(protected)/content/image/page.tsx index 070ef5d1..bbbd5df8 100644 --- a/app/[locale]/(protected)/content/image/page.tsx +++ b/app/[locale]/(protected)/content/image/page.tsx @@ -5,6 +5,7 @@ import TableImage from "./table-image"; import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Icon } from "@iconify/react/dist/iconify.js"; +import { Link } from "@/components/navigation"; const ReactTableImagePage = () => { return ( @@ -54,10 +55,12 @@ const ReactTableImagePage = () => { Konten Foto
- + + + +
+ ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + Delete + + + + ); + }, + }, +]; const TableImage = () => { const [sorting, setSorting] = React.useState([]); @@ -35,9 +205,29 @@ const TableImage = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); + const [imageTable, setImageTable] = React.useState([]); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, // Halaman pertama + pageSize: 10, // Jumlah baris per halaman + }); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); // Jumlah baris per halaman + const [search, setSearch] = React.useState(""); + const userId = getCookiesDecrypt("uie"); + const userLevelId = getCookiesDecrypt("ulie"); + + const [categories, setCategories] = React.useState(); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); + const [startDateString, setStartDateString] = React.useState(""); + const [endDateString, setEndDateString] = React.useState(""); + const [filterByCreator, setFilterByCreator] = React.useState(""); + const [filterBySource, setFilterBySource] = React.useState(""); + + const roleId = getCookiesDecrypt("urie"); const table = useReactTable({ - data, + data: imageTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -55,6 +245,59 @@ const TableImage = () => { }, }); + React.useEffect(() => { + initState(); + }, [limit]); + + async function initState() { + try { + const isForSelf = Number(roleId) === 4; + const res = await listDataImage( + pagination.pageSize, // Ambil nilai dari pagination.pageSize + pagination.pageIndex + 1, // API sering menggunakan page 1-based + isForSelf, + !isForSelf, + categoryFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") + ? "1,2" + : statusFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") ? userLevelId : "", + filterByCreator, + filterBySource, + startDateString, + endDateString + ); + + setupData(res.data?.data); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + + function setupData(rawData: { + content: any[]; + totalPages: number; + totalElements: number; + }) { + if (rawData?.content) { + const data: CompanyData[] = rawData.content.map((item, index) => ({ + no: pagination.pageIndex * pagination.pageSize + index + 1, + title: item.title, + categoryName: item.categoryName, + creatorGroup: item.creatorGroup, + createdAt: item.createdAt, + isDone: item.isDone, + publishedOn: item.publishedOn, + isPublish: item.isPublish, + isPublishOnPolda: item.isPublishOnPolda, + })); + + setImageTable(data); + setTotalPage(rawData.totalPages); + console.log(data, "dataImage"); + } + } + return (
@@ -72,22 +315,20 @@ const TableImage = () => {
- +
{table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} ))} @@ -97,6 +338,7 @@ const TableImage = () => { {row.getVisibleCells().map((cell) => ( @@ -114,7 +356,41 @@ const TableImage = () => { )}
- +
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
); }; diff --git a/app/[locale]/(protected)/content/spit/table-spit/index.tsx b/app/[locale]/(protected)/content/spit/table-spit/index.tsx index d7d8ee97..f45b1930 100644 --- a/app/[locale]/(protected)/content/spit/table-spit/index.tsx +++ b/app/[locale]/(protected)/content/spit/table-spit/index.tsx @@ -2,7 +2,9 @@ import * as React from "react"; import { + ColumnDef, ColumnFiltersState, + PaginationState, SortingState, VisibilityState, flexRender, @@ -12,7 +14,6 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table"; -import { columns } from "./columns"; import { Input } from "@/components/ui/input"; import { @@ -26,8 +27,183 @@ import { import { data } from "./data"; import TablePagination from "./table-pagination"; +import { Button } from "@/components/ui/button"; +import { format } from "date-fns"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Trash2, +} from "lucide-react"; +import { title } from "process"; + +import { getCookiesDecrypt } from "@/lib/utils"; +import { + listDataAudio, + listDataImage, + listDataVideo, + listSPIT, +} from "@/service/content/content"; +import { pages } from "next/dist/build/templates/app-page"; + +export type CompanyData = { + no: number; + title: string; + categoryName: string; + createdAt: string; + creatorGroup: string; + publishedOn: string; + isPublish: any; + isPublishOnPolda: any; + isDone: string; +}; + +export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

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

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

+
+
+ ), + }, + { + accessorKey: "categoryName", + header: "Kategori", + cell: ({ row }) => ( + {row.getValue("categoryName")} + ), + }, + { + accessorKey: "createdAt", + header: "Tanggal Unggah", + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "creatorGroup", + header: "Sumber ", + cell: ({ row }) => ( + {row.getValue("creatorGroup")} + ), + }, + { + accessorKey: "publishedOn", + header: "Penempatan File", + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; + + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } + + return ( +
+ {displayText} +
+ ); + }, + }, + + { + accessorKey: "isDone", + header: "Status", + cell: ({ row }) => { + const isDone = row.getValue("isDone"); + return ( +
+ +
+ ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + Delete + + + + ); + }, + }, +]; const TableSPIT = () => { + const [spitTable, setSpitTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -35,9 +211,29 @@ const TableSPIT = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, // Halaman pertama + pageSize: 10, // Jumlah baris per halaman + }); + const [page, setPage] = React.useState(1); // Halaman aktif + const [totalPage, setTotalPage] = React.useState(1); // Total halaman + const [limit, setLimit] = React.useState(6); // Jumlah baris per halaman + const [search, setSearch] = React.useState(title); + const userId = getCookiesDecrypt("uie"); + const userLevelId = getCookiesDecrypt("ulie"); + + const [categories, setCategories] = React.useState(); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([1, 2]); + const [startDateString, setStartDateString] = React.useState(""); + const [endDateString, setEndDateString] = React.useState(""); + const [filterByCreator, setFilterByCreator] = React.useState(""); + const [filterBySource, setFilterBySource] = React.useState(""); + + const roleId = getCookiesDecrypt("urie"); const table = useReactTable({ - data, + data: spitTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -55,6 +251,47 @@ const TableSPIT = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const isForSelf = Number(roleId) == 4; + + let isPublish; + if (statusFilter.length > 1) { + isPublish = ""; + } else if (statusFilter.length === 1) { + if (statusFilter.includes(1)) { + isPublish = false; + } else { + isPublish = true; + } + } else { + isPublish = undefined; + } + const res = await listSPIT(pages, limit, search, isPublish); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + categoryName: item.categoryName, + creatorGroup: item.creatorGroup, + assignmentType: item.assignmentType?.name || "-", + createdAt: item.createdAt, + isDone: item.isDone, + publishedOn: item.publishedOn, + isPublish: item.isPublish, + isPublishOnPolda: item.isPublishOnPolda, + })); + + setSpitTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
@@ -72,22 +309,20 @@ const TableSPIT = () => {
- +
{table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} ))} @@ -97,6 +332,7 @@ const TableSPIT = () => { {row.getVisibleCells().map((cell) => ( @@ -114,7 +350,41 @@ const TableSPIT = () => { )}
- +
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
); }; diff --git a/app/[locale]/(protected)/content/teks/table-teks/index.tsx b/app/[locale]/(protected)/content/teks/table-teks/index.tsx index a2b1e4cc..02823c01 100644 --- a/app/[locale]/(protected)/content/teks/table-teks/index.tsx +++ b/app/[locale]/(protected)/content/teks/table-teks/index.tsx @@ -2,7 +2,9 @@ import * as React from "react"; import { + ColumnDef, ColumnFiltersState, + PaginationState, SortingState, VisibilityState, flexRender, @@ -12,7 +14,6 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table"; -import { columns } from "./columns"; import { Input } from "@/components/ui/input"; import { @@ -26,6 +27,175 @@ import { import { data } from "./data"; import TablePagination from "./table-pagination"; +import { Button } from "@/components/ui/button"; +import { format } from "date-fns"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Trash2, +} from "lucide-react"; +import { title } from "process"; + +import { getCookiesDecrypt } from "@/lib/utils"; +import { listDataImage, listDataTeks } from "@/service/content/content"; +import page from "../page"; + +export type CompanyData = { + no: number; + title: string; + categoryName: string; + createdAt: string; + creatorGroup: string; + publishedOn: string; + isPublish: any; + isPublishOnPolda: any; + isDone: string; +}; + +export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

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

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

+
+
+ ), + }, + { + accessorKey: "categoryName", + header: "Kategori", + cell: ({ row }) => ( + {row.getValue("categoryName")} + ), + }, + { + accessorKey: "createdAt", + header: "Tanggal Unggah", + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, + }, + { + accessorKey: "creatorGroup", + header: "Sumber ", + cell: ({ row }) => ( + {row.getValue("creatorGroup")} + ), + }, + { + accessorKey: "publishedOn", + header: "Penempatan File", + cell: ({ row }) => { + const isPublish = row.original.isPublish; + const isPublishOnPolda = row.original.isPublishOnPolda; + + let displayText = "-"; + if (isPublish && !isPublishOnPolda) { + displayText = "Mabes"; + } else if (isPublish && isPublishOnPolda) { + displayText = "Mabes & Polda"; + } else if (!isPublish && isPublishOnPolda) { + displayText = "Polda"; + } + + return ( +
+ {displayText} +
+ ); + }, + }, + + { + accessorKey: "isDone", + header: "Status", + cell: ({ row }) => { + const isDone = row.getValue("isDone"); + return ( +
+ +
+ ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + + View + + + + + Delete + + + + ); + }, + }, +]; const TableTeks = () => { const [sorting, setSorting] = React.useState([]); @@ -35,9 +205,29 @@ const TableTeks = () => { const [columnVisibility, setColumnVisibility] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({}); + const [imageTable, setImageTable] = React.useState([]); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, // Halaman pertama + pageSize: 10, // Jumlah baris per halaman + }); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); // Jumlah baris per halaman + const [search, setSearch] = React.useState(""); + const userId = getCookiesDecrypt("uie"); + const userLevelId = getCookiesDecrypt("ulie"); + + const [categories, setCategories] = React.useState(); + const [categoryFilter, setCategoryFilter] = React.useState([]); + const [statusFilter, setStatusFilter] = React.useState([]); + const [startDateString, setStartDateString] = React.useState(""); + const [endDateString, setEndDateString] = React.useState(""); + const [filterByCreator, setFilterByCreator] = React.useState(""); + const [filterBySource, setFilterBySource] = React.useState(""); + + const roleId = getCookiesDecrypt("urie"); const table = useReactTable({ - data, + data: imageTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -55,6 +245,59 @@ const TableTeks = () => { }, }); + React.useEffect(() => { + initState(); + }, [limit]); + + async function initState() { + try { + const isForSelf = Number(roleId) === 4; + const res = await listDataTeks( + pagination.pageSize, // Ambil nilai dari pagination.pageSize + pagination.pageIndex + 1, // API sering menggunakan page 1-based + isForSelf, + !isForSelf, + categoryFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") + ? "1,2" + : statusFilter?.sort().join(","), + statusFilter?.sort().join(",").includes("1") ? userLevelId : "", + filterByCreator, + filterBySource, + startDateString, + endDateString + ); + + setupData(res.data?.data); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + + function setupData(rawData: { + content: any[]; + totalPages: number; + totalElements: number; + }) { + if (rawData?.content) { + const data: CompanyData[] = rawData.content.map((item, index) => ({ + no: pagination.pageIndex * pagination.pageSize + index + 1, + title: item.title, + categoryName: item.categoryName, + creatorGroup: item.creatorGroup, + createdAt: item.createdAt, + isDone: item.isDone, + publishedOn: item.publishedOn, + isPublish: item.isPublish, + isPublishOnPolda: item.isPublishOnPolda, + })); + + setImageTable(data); + setTotalPage(rawData.totalPages); + console.log(data, "dataImage"); + } + } + return (
@@ -72,22 +315,20 @@ const TableTeks = () => {
- +
{table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => { - return ( - - {header.isPlaceholder - ? null - : flexRender( - header.column.columnDef.header, - header.getContext() - )} - - ); - })} + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} ))} @@ -97,6 +338,7 @@ const TableTeks = () => { {row.getVisibleCells().map((cell) => ( @@ -114,7 +356,41 @@ const TableTeks = () => { )}
- +
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
); }; diff --git a/app/[locale]/(protected)/contest/table-contest/contest-table.tsx b/app/[locale]/(protected)/contest/table-contest/contest-table.tsx index 20ef7936..69d672fc 100644 --- a/app/[locale]/(protected)/contest/table-contest/contest-table.tsx +++ b/app/[locale]/(protected)/contest/table-contest/contest-table.tsx @@ -46,20 +46,36 @@ import { } from "@/components/ui/dropdown-menu"; export type CompanyData = { - code: string; - title: string; + no: number; + hastagCode: string; + theme: string; duration: string; targetOutput: string; - targetParticipant: string; - status: string; + targetParticipantTopLevel: string; + isPublishForAll: string; }; import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { listTask } from "@/service/task"; +import { listContest } from "@/service/contest/contest"; export const columns: ColumnDef[] = [ { - accessorKey: "code", + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

+
+
+ ), + }, + { + accessorKey: "hastagCode", header: "Kode", cell: ({ row }) => (
@@ -68,20 +84,20 @@ export const columns: ColumnDef[] = [ className="text-sm font-bold text-default-600 whitespace-nowrap mb-1" > - {row.getValue("code")} + {row.getValue("hastagCode")}
), }, { - accessorKey: "title", + accessorKey: "theme", header: "Judul", cell: ({ row }) => (

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

@@ -96,27 +112,27 @@ export const columns: ColumnDef[] = [ }, { accessorKey: "targetOutput", - header: "Tanggal Unggah ", + header: "Target Output ", cell: ({ row }) => ( {row.getValue("targetOutput")} ), }, { - accessorKey: "targetParticipant", + accessorKey: "targetParticipantTopLevel", header: "Tag ", cell: ({ row }) => ( - {row.getValue("targetParticipant")} + {row.getValue("targetParticipantTopLevel")} ), }, { - accessorKey: "status", + accessorKey: "isPublishForAll", header: "Status", cell: ({ row }) => { return ( - {row.getValue("status")} + {row.getValue("isPublishForAll")} ); }, @@ -159,6 +175,7 @@ export const columns: ColumnDef[] = [ ]; const ContestTable = () => { + const [contestTable, setContestTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -170,9 +187,12 @@ const ContestTable = () => { pageIndex: 0, pageSize: 6, }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); const table = useReactTable({ - data, + data: contestTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -192,6 +212,30 @@ const ContestTable = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const res = await listContest(limit, page); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + hastagCode: item.hastagCode, + theme: item.theme, + targetOutput: item.targetOutput, + targetParticipantTopLevel: item.targetParticipantTopLevel, + duration: item.duration, + isDone: item.isDone, + })); + + setContestTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
diff --git a/app/[locale]/(protected)/planning/mediahub/table-mediahub/mediahub-table.tsx b/app/[locale]/(protected)/planning/mediahub/table-mediahub/mediahub-table.tsx index 1ba02331..d1185740 100644 --- a/app/[locale]/(protected)/planning/mediahub/table-mediahub/mediahub-table.tsx +++ b/app/[locale]/(protected)/planning/mediahub/table-mediahub/mediahub-table.tsx @@ -46,15 +46,32 @@ import { } from "@/components/ui/dropdown-menu"; export type CompanyData = { + no: number; title: string; date: string; - status: string; + isActive: boolean; }; import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { listTask } from "@/service/ppid-categories-services"; +import page from "../page"; +import { getPlanningSentPagination } from "@/service/planning/planning"; export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

+
+
+ ), + }, { accessorKey: "title", header: "Judul", @@ -69,20 +86,26 @@ export const columns: ColumnDef[] = [ ), }, { - accessorKey: "date", + accessorKey: "createdAt", header: "Tanggal Unggah ", cell: ({ row }) => ( - {row.getValue("date")} + {row.getValue("createdAt")} ), }, { - accessorKey: "status", + accessorKey: "isActive", header: "Status", cell: ({ row }) => { + const isActive = row.getValue("isActive"); + console.log("isActive value:", isActive); // TypeScript type is inferred correctly return ( - - {row.getValue("status")} - +
+ {isActive ? ( + Terkirim + ) : ( + Belum Terkirim + )} +
); }, }, @@ -124,6 +147,7 @@ export const columns: ColumnDef[] = [ ]; const MediahubTable = () => { + const [mediahubTable, setMediahubTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -133,11 +157,15 @@ const MediahubTable = () => { const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: 6, + pageSize: 10, }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + // const [search, setSearch] = React.useState(title); const table = useReactTable({ - data, + data: mediahubTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -157,6 +185,27 @@ const MediahubTable = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const res = await getPlanningSentPagination(limit, page, 1); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + createdAt: item.createdAt, + isActive: item.isActive === true, + })); + + setMediahubTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
diff --git a/app/[locale]/(protected)/planning/medsos-mediahub/table-medsos/medsos-table.tsx b/app/[locale]/(protected)/planning/medsos-mediahub/table-medsos/medsos-table.tsx index c6dbda3d..14eda2a6 100644 --- a/app/[locale]/(protected)/planning/medsos-mediahub/table-medsos/medsos-table.tsx +++ b/app/[locale]/(protected)/planning/medsos-mediahub/table-medsos/medsos-table.tsx @@ -46,15 +46,32 @@ import { } from "@/components/ui/dropdown-menu"; export type CompanyData = { + no: number; title: string; date: string; - status: string; + isActive: boolean; }; import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { listTask } from "@/service/ppid-categories-services"; +import page from "../page"; +import { getPlanningSentPagination } from "@/service/planning/planning"; export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

+
+
+ ), + }, { accessorKey: "title", header: "Judul", @@ -69,20 +86,26 @@ export const columns: ColumnDef[] = [ ), }, { - accessorKey: "date", + accessorKey: "createdAt", header: "Tanggal Unggah ", cell: ({ row }) => ( - {row.getValue("date")} + {row.getValue("createdAt")} ), }, { - accessorKey: "status", + accessorKey: "isActive", header: "Status", cell: ({ row }) => { + const isActive = row.getValue("isActive"); + console.log("isActive value:", isActive); return ( - - {row.getValue("status")} - +
+ {isActive ? ( + Terkirim + ) : ( + Belum Terkirim + )} +
); }, }, @@ -124,6 +147,7 @@ export const columns: ColumnDef[] = [ ]; const MedsosTable = () => { + const [mediahubTable, setMediahubTable] = React.useState([]); const [sorting, setSorting] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] @@ -133,11 +157,15 @@ const MedsosTable = () => { const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: 6, + pageSize: 10, }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + // const [search, setSearch] = React.useState(title); const table = useReactTable({ - data, + data: mediahubTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, @@ -157,6 +185,27 @@ const MedsosTable = () => { }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const res = await getPlanningSentPagination(limit, page, 2); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + createdAt: item.createdAt, + isActive: item.isActive === true, + })); + + setMediahubTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
diff --git a/app/[locale]/(protected)/task/page.tsx b/app/[locale]/(protected)/task/page.tsx index 7b62e7dd..5be51476 100644 --- a/app/[locale]/(protected)/task/page.tsx +++ b/app/[locale]/(protected)/task/page.tsx @@ -1,11 +1,23 @@ +"use client"; import { Card, CardContent } from "@/components/ui/card"; import TaskTable from "./table-task/task-table"; import { Button } from "@/components/ui/button"; import { UploadIcon } from "lucide-react"; import SiteBreadcrumb from "@/components/site-breadcrumb"; import { Link } from "@/components/navigation"; +import { checkAuthorization, checkLoginSession } from "@/lib/utils"; +import React, { useEffect } from "react"; + +const TaskPage = () => { + useEffect(() => { + function initState() { + checkAuthorization("admin"); // Specify the page, e.g., "admin" or another value + checkLoginSession(); + } + + initState(); + }, []); -const TaskPage = async () => { return (
diff --git a/app/[locale]/(protected)/task/table-task/data.ts b/app/[locale]/(protected)/task/table-task/data.ts deleted file mode 100644 index 93d38fe7..00000000 --- a/app/[locale]/(protected)/task/table-task/data.ts +++ /dev/null @@ -1,106 +0,0 @@ -export const data = [ - { - title: "Giat Pimpinan", - code: "PNMH-1287", - status: "paid", - date: "$231.26", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Liputan Kegiatan", - code: "PNMH-1287", - status: "due", - date: "$432.81", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Giat Pimpinan", - code: "PNMH-1287", - status: "due", - date: "$437.65", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Pers Rilis", - code: "PNMH-1287", - status: "canceled", - date: "$387.55", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Giat Pimpinan", - code: "PNMH-1287", - status: "canceled", - date: "$489.80", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Liputan Kegiatan", - code: "PNMH-1287", - status: "canceled", - date: "$421.45", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Pers Rilis", - code: "PNMH-1287", - status: "canceled", - date: "$207.61", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Giat Pimpinan", - code: "PNMH-1287", - status: "paid", - date: "$392.86", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Pers Rilis", - code: "PNMH-1287", - status: "paid", - date: "$162.87", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Giat Pimpinan", - code: "PNMH-1287", - status: "paid", - date: "$268.58", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Liputan Kegiatan", - code: "PNMH-1287", - status: "paid", - date: "$369.19", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Liputan Kegiatan", - code: "PNMH-1287", - status: "paid", - date: "$420.87", - category: "amplifikasi", - typeTask: "Mediahub", - }, - { - title: "Giat Pimpinan", - code: "PNMH-1287", - status: "paid", - date: "$420.26", - category: "amplifikasi", - typeTask: "Mediahub", - }, -]; diff --git a/app/[locale]/(protected)/task/table-task/task-table.tsx b/app/[locale]/(protected)/task/table-task/task-table.tsx index 3a3644a2..d4593b2a 100644 --- a/app/[locale]/(protected)/task/table-task/task-table.tsx +++ b/app/[locale]/(protected)/task/table-task/task-table.tsx @@ -37,7 +37,6 @@ import { TrendingDown, TrendingUp, } from "lucide-react"; -import { cn } from "@/lib/utils"; import { DropdownMenu, DropdownMenuContent, @@ -45,20 +44,45 @@ import { DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -export type CompanyData = { - title: string; - code: string; - typeTask: string; - category: string; - date: string; - status: string; -}; -import { data } from "./data"; import { Input } from "@/components/ui/input"; import { InputGroup, InputGroupText } from "@/components/ui/input-group"; import { Link } from "@/components/navigation"; +import { title } from "process"; +import search from "../../app/chat/components/search"; +import { format } from "date-fns"; +import { listTask } from "@/service/task"; +import { getCookiesDecrypt } from "@/lib/utils"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, +} from "@/components/ui/select"; + +export type CompanyData = { + no: number; + title: string; + uniqueCode: string; + assignmentMainType: string; + assignmentType: string; + createdAt: string; + isDone: string; +}; export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => ( +
+
+

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

+
+
+ ), + }, { accessorKey: "title", header: "Judul", @@ -73,47 +97,65 @@ export const columns: ColumnDef[] = [ ), }, { - accessorKey: "code", + accessorKey: "uniqueCode", header: "Kode ", cell: ({ row }) => ( - {row.getValue("code")} + {row.getValue("uniqueCode")} ), }, { - accessorKey: "typeTask", - header: "Kode ", + accessorKey: "assignmentMainType", + header: "Tipe Tugas ", cell: ({ row }) => ( - {row.getValue("typeTask")} + + {row.getValue("assignmentMainType")} + ), }, { - accessorKey: "category", + accessorKey: "assignmentType", header: "Jenis Tugas ", cell: ({ row }) => ( - {row.getValue("category")} + + {row.getValue("assignmentType")} + ), }, { - accessorKey: "date", - header: "Tanggal Unggah ", - cell: ({ row }) => ( - {row.getValue("date")} - ), + accessorKey: "createdAt", + header: "Tanggal Unggah", + cell: ({ row }) => { + const createdAt = row.getValue("createdAt") as + | string + | number + | undefined; + + const formattedDate = + createdAt && !isNaN(new Date(createdAt).getTime()) + ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss") + : "-"; + return {formattedDate}; + }, }, + { - accessorKey: "status", + accessorKey: "isDone", header: "Status", cell: ({ row }) => { - const statusColors: Record = { - paid: "bg-success/20 text-success", - due: "bg-warning/20 text-warning", - canceled: "bg-destructive/20 text-destructive", - }; - const status = row.getValue("status"); + const isDone = row.getValue("isDone"); return ( - - {status} - +
+ +
); }, }, @@ -154,6 +196,7 @@ export const columns: ColumnDef[] = [ const TaskTable = () => { const [sorting, setSorting] = React.useState([]); + const [taskTable, setTaskTable] = React.useState([]); const [columnFilters, setColumnFilters] = React.useState( [] ); @@ -162,30 +205,58 @@ const TaskTable = () => { const [rowSelection, setRowSelection] = React.useState({}); const [pagination, setPagination] = React.useState({ pageIndex: 0, - pageSize: 6, + pageSize: 10, }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + const [search, setSearch] = React.useState(title); + + const userId = getCookiesDecrypt("uie"); + const userLevelNumber = getCookiesDecrypt("ulne"); + const userRoleId = getCookiesDecrypt("urie"); const table = useReactTable({ - data, + data: taskTable, columns, onSortingChange: setSorting, onColumnFiltersChange: setColumnFilters, + onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), getFilteredRowModel: getFilteredRowModel(), - onColumnVisibilityChange: setColumnVisibility, - onRowSelectionChange: setRowSelection, - onPaginationChange: setPagination, state: { sorting, columnFilters, - columnVisibility, - rowSelection, pagination, }, }); + React.useEffect(() => { + initState(); + }, [page, limit]); + + async function initState() { + try { + const res = await listTask(limit, page); + const data = res.data.data.content.map((item: any, index: number) => ({ + no: (page - 1) * limit + index + 1, + title: item.title, + uniqueCode: item.uniqueCode || "-", + assignmentMainType: item.assignmentMainType?.name || "-", + assignmentType: item.assignmentType?.name || "-", + createdAt: item.createdAt, + isDone: item.isDone, + })); + + setTaskTable(data); + setTotalPage(res.data.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + return (
@@ -201,6 +272,18 @@ const TaskTable = () => { />
+
+ {/* */} +
{ className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50" > -
+
- + -

- Unlock your Project - performance -

- +
@@ -43,20 +51,30 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
-
-

Sign in

-
Sign in to your account to start using Dashcode
+
+

+ Silahkan Masuk Ke akun anda terlebih dahulu +

+
+ Belum punya akun?{" "} + registrasi +
-
Or continue with
+
+ Or continue with +
Don’t have an account?{" "} - + Sign up
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx index 94461251..2192256f 100644 --- a/app/[locale]/page.tsx +++ b/app/[locale]/page.tsx @@ -1,20 +1,18 @@ "use client"; - import SearchSection from "@/components/landing-page/search-section"; import NewContent from "@/components/landing-page/new-content"; import PopularContent from "@/components/landing-page/popular-content"; import ContentCategory from "@/components/landing-page/content-category"; import Coverage from "@/components/landing-page/coverage"; import Navbar from "@/components/landing-page/navbar"; -import Hero from "@/components/landing-page/hero"; +import Hero from "@/components/landing-page/Hero"; import Footer from "@/components/landing-page/footer"; import Division from "@/components/landing-page/division"; const Home = ({ params: { locale } }: { params: { locale: string } }) => { return ( <> - diff --git a/components/form/communication/collaboration-form.tsx b/components/form/communication/collaboration-form.tsx new file mode 100644 index 00000000..768e9cca --- /dev/null +++ b/components/form/communication/collaboration-form.tsx @@ -0,0 +1,296 @@ +"use client"; +import React, { useEffect, useRef, useState } from "react"; +import { useForm, Controller } from "react-hook-form"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Card } from "@/components/ui/card"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import Swal from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import { useRouter } from "next/navigation"; + +import { Checkbox } from "@/components/ui/checkbox"; +import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; +import JoditEditor from "jodit-react"; +import { type } from "os"; +import loading from "@/app/[locale]/(protected)/app/projects/loading"; +import { request } from "http"; +import { error } from "@/lib/utils"; +import { createTask } from "@/service/task"; +import { options } from "@fullcalendar/core/preact.js"; +import { setOptions } from "leaflet"; +import { + getCuratorUser, + getTicketingPriority, + saveTicketing, + saveTicketingInternal, +} from "@/service/communication/communication"; +import makeAnimated from "react-select/animated"; +import Select from "react-select"; +import { + SelectTrigger, + SelectValue, + SelectContent, + SelectItem, +} from "@radix-ui/react-select"; +import { SelectGroup } from "@/components/ui/select"; + +const taskSchema = z.object({ + title: z.string().min(1, { message: "Judul diperlukan" }), + naration: z.string().min(2, { + message: "Narasi Penugasan harus lebih dari 2 karakter.", + }), +}); + +interface Option { + id: string; + label: string; + value: string; + fullname: string; + userLevel: string; + userLevelId: string; +} + +export default function FormCollaboration() { + const MySwal = withReactContent(Swal); + const router = useRouter(); + const editor = useRef(null); + type TaskSchema = z.infer; + + // State for various form fields + const [taskOutput, setTaskOutput] = useState({ + all: false, + video: false, + audio: false, + image: false, + text: false, + }); + + const [assignmentType, setAssignmentType] = useState("mediahub"); + const [assignmentCategory, setAssignmentCategory] = useState("publication"); + const [mainType, setMainType] = useState(1); // untuk Tipe Penugasan + const [type, setType] = useState("1"); + const [options, setOptions] = useState([]); + const [ticketPriority, setTicketPriority] = useState([]); + const [selectedOption, setSelectedOption] = useState