diff --git a/app/[locale]/(protected)/blog/page.tsx b/app/[locale]/(protected)/blog/page.tsx index 400210a5..98fa1cb8 100644 --- a/app/[locale]/(protected)/blog/page.tsx +++ b/app/[locale]/(protected)/blog/page.tsx @@ -3,7 +3,7 @@ import { Card, CardContent } from "@/components/ui/card"; import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; import { Button } from "@/components/ui/button"; import { UploadIcon } from "lucide-react"; -import BlogTable from "./table-blog/blog-table"; +import BlogTable from "./table/blog-table"; const BlogPage = async () => { return ( diff --git a/app/[locale]/(protected)/blog/table-blog/blog-table.tsx b/app/[locale]/(protected)/blog/table/blog-table.tsx similarity index 86% rename from app/[locale]/(protected)/blog/table-blog/blog-table.tsx rename to app/[locale]/(protected)/blog/table/blog-table.tsx index 210931e0..bb8974d7 100644 --- a/app/[locale]/(protected)/blog/table-blog/blog-table.tsx +++ b/app/[locale]/(protected)/blog/table/blog-table.tsx @@ -56,7 +56,6 @@ export type CompanyData = { 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[] = [ @@ -286,40 +285,46 @@ const BlogTable = () => { )} -
- - {table.getPageOptions().map((page, pageIndex) => ( +
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
- ))} - + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
); diff --git a/app/[locale]/(protected)/blog/table-blog/data.ts b/app/[locale]/(protected)/blog/table/data.ts similarity index 100% rename from app/[locale]/(protected)/blog/table-blog/data.ts rename to app/[locale]/(protected)/blog/table/data.ts diff --git a/app/[locale]/(protected)/blog/table/table-pagination.tsx b/app/[locale]/(protected)/blog/table/table-pagination.tsx new file mode 100644 index 00000000..5c5658b3 --- /dev/null +++ b/app/[locale]/(protected)/blog/table/table-pagination.tsx @@ -0,0 +1,84 @@ +import { Button } from '@/components/ui/button'; +import { Table } from '@tanstack/react-table'; +import { ChevronLeft, ChevronRight } from 'lucide-react'; +import { useSearchParams } from 'next/navigation'; +import { useRouter } from 'next/navigation'; +import React from 'react'; + +interface DataTablePaginationProps { + table: Table; + totalPage: number; // Total jumlah halaman + totalData: number; // Total jumlah data + visiblePageCount?: number; // Jumlah halaman yang ditampilkan (default 5) +} + +const TablePagination = ({ table, totalPage, totalData, visiblePageCount = 5 }: DataTablePaginationProps) => { + const router = useRouter(); + const searchParams = useSearchParams(); + + const [currentPageIndex, setCurrentPageIndex] = React.useState(1); + + React.useEffect(() => { + const pageFromUrl = searchParams?.get('page'); + if (pageFromUrl) { + setCurrentPageIndex(Number(pageFromUrl)); + } + }, [searchParams]); + + // Hitung startPage dan endPage, disesuaikan untuk dimulai dari 1 + const startPage = Math.max(1, currentPageIndex - Math.floor(visiblePageCount / 2)); + const endPage = Math.min(totalPage, startPage + visiblePageCount - 1); + + const handlePageChange = (pageIndex: number) => { + // Perbarui query parameter di URL + const searchParams = new URLSearchParams(window.location.search); + searchParams.set('page', (pageIndex).toString()); // Menyimpan halaman sebagai 1-based index + router.push(`${window.location.pathname}?${searchParams.toString()}`); + + // Pindahkan halaman di tabel + table.setPageIndex(pageIndex); + setCurrentPageIndex(pageIndex + 1); // Update state untuk halaman saat ini + }; + + return ( +
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {totalData} row(s) selected. +
+
+ + {Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index).map((pageIndex) => ( + + ))} + +
+
+ ); +}; + +export default TablePagination; diff --git a/app/[locale]/(protected)/communications/account-report/layout.tsx b/app/[locale]/(protected)/communications/account-report/layout.tsx new file mode 100644 index 00000000..47e2f324 --- /dev/null +++ b/app/[locale]/(protected)/communications/account-report/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Blog", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/communications/account-report/page.tsx b/app/[locale]/(protected)/communications/account-report/page.tsx new file mode 100644 index 00000000..98fa1cb8 --- /dev/null +++ b/app/[locale]/(protected)/communications/account-report/page.tsx @@ -0,0 +1,36 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import BlogTable from "./table/blog-table"; + +const BlogPage = async () => { + return ( +
+ +
+ +
+
+ Table Indeks +
+
+ +
+
+ + + + + + +
+
+ ); +}; + +export default BlogPage; diff --git a/app/[locale]/(protected)/communications/account-report/table/blog-table.tsx b/app/[locale]/(protected)/communications/account-report/table/blog-table.tsx new file mode 100644 index 00000000..bb8974d7 --- /dev/null +++ b/app/[locale]/(protected)/communications/account-report/table/blog-table.tsx @@ -0,0 +1,333 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Badge, + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export type CompanyData = { + no: number; + title: string; + category: 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 { paginationBlog } from "@/service/blog/blog"; + +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 }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "tags", + header: "Tag ", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + return ( + + {row.getValue("statusName")} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: blogTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + 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 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 ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
+
+
+ ); +}; + +export default BlogTable; diff --git a/app/[locale]/(protected)/communications/account-report/table/data.ts b/app/[locale]/(protected)/communications/account-report/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/communications/account-report/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/communications/collaboration/layout.tsx b/app/[locale]/(protected)/communications/collaboration/layout.tsx new file mode 100644 index 00000000..47e2f324 --- /dev/null +++ b/app/[locale]/(protected)/communications/collaboration/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Blog", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/communications/collaboration/page.tsx b/app/[locale]/(protected)/communications/collaboration/page.tsx new file mode 100644 index 00000000..98fa1cb8 --- /dev/null +++ b/app/[locale]/(protected)/communications/collaboration/page.tsx @@ -0,0 +1,36 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import BlogTable from "./table/blog-table"; + +const BlogPage = async () => { + return ( +
+ +
+ +
+
+ Table Indeks +
+
+ +
+
+ + + + + + +
+
+ ); +}; + +export default BlogPage; diff --git a/app/[locale]/(protected)/communications/collaboration/table/blog-table.tsx b/app/[locale]/(protected)/communications/collaboration/table/blog-table.tsx new file mode 100644 index 00000000..bb8974d7 --- /dev/null +++ b/app/[locale]/(protected)/communications/collaboration/table/blog-table.tsx @@ -0,0 +1,333 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Badge, + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export type CompanyData = { + no: number; + title: string; + category: 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 { paginationBlog } from "@/service/blog/blog"; + +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 }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "tags", + header: "Tag ", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + return ( + + {row.getValue("statusName")} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: blogTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + 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 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 ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
+
+
+ ); +}; + +export default BlogTable; diff --git a/app/[locale]/(protected)/communications/collaboration/table/data.ts b/app/[locale]/(protected)/communications/collaboration/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/communications/collaboration/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/communications/forward/layout.tsx b/app/[locale]/(protected)/communications/forward/layout.tsx new file mode 100644 index 00000000..47e2f324 --- /dev/null +++ b/app/[locale]/(protected)/communications/forward/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Blog", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/communications/forward/page.tsx b/app/[locale]/(protected)/communications/forward/page.tsx new file mode 100644 index 00000000..98fa1cb8 --- /dev/null +++ b/app/[locale]/(protected)/communications/forward/page.tsx @@ -0,0 +1,36 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import BlogTable from "./table/blog-table"; + +const BlogPage = async () => { + return ( +
+ +
+ +
+
+ Table Indeks +
+
+ +
+
+ + + + + + +
+
+ ); +}; + +export default BlogPage; diff --git a/app/[locale]/(protected)/communications/forward/table/blog-table.tsx b/app/[locale]/(protected)/communications/forward/table/blog-table.tsx new file mode 100644 index 00000000..bb8974d7 --- /dev/null +++ b/app/[locale]/(protected)/communications/forward/table/blog-table.tsx @@ -0,0 +1,333 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Badge, + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export type CompanyData = { + no: number; + title: string; + category: 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 { paginationBlog } from "@/service/blog/blog"; + +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 }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "tags", + header: "Tag ", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + return ( + + {row.getValue("statusName")} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: blogTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + 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 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 ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
+
+
+ ); +}; + +export default BlogTable; diff --git a/app/[locale]/(protected)/communications/forward/table/data.ts b/app/[locale]/(protected)/communications/forward/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/communications/forward/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/communications/internal/layout.tsx b/app/[locale]/(protected)/communications/internal/layout.tsx new file mode 100644 index 00000000..47e2f324 --- /dev/null +++ b/app/[locale]/(protected)/communications/internal/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Blog", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/communications/internal/page.tsx b/app/[locale]/(protected)/communications/internal/page.tsx new file mode 100644 index 00000000..98fa1cb8 --- /dev/null +++ b/app/[locale]/(protected)/communications/internal/page.tsx @@ -0,0 +1,36 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import BlogTable from "./table/blog-table"; + +const BlogPage = async () => { + return ( +
+ +
+ +
+
+ Table Indeks +
+
+ +
+
+ + + + + + +
+
+ ); +}; + +export default BlogPage; diff --git a/app/[locale]/(protected)/communications/internal/table/blog-table.tsx b/app/[locale]/(protected)/communications/internal/table/blog-table.tsx new file mode 100644 index 00000000..bb8974d7 --- /dev/null +++ b/app/[locale]/(protected)/communications/internal/table/blog-table.tsx @@ -0,0 +1,333 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Badge, + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export type CompanyData = { + no: number; + title: string; + category: 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 { paginationBlog } from "@/service/blog/blog"; + +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 }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "tags", + header: "Tag ", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + return ( + + {row.getValue("statusName")} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: blogTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + 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 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 ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
+
+
+ ); +}; + +export default BlogTable; diff --git a/app/[locale]/(protected)/communications/internal/table/data.ts b/app/[locale]/(protected)/communications/internal/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/communications/internal/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/communications/questions/layout.tsx b/app/[locale]/(protected)/communications/questions/layout.tsx new file mode 100644 index 00000000..47e2f324 --- /dev/null +++ b/app/[locale]/(protected)/communications/questions/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Blog", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/communications/questions/page.tsx b/app/[locale]/(protected)/communications/questions/page.tsx new file mode 100644 index 00000000..98fa1cb8 --- /dev/null +++ b/app/[locale]/(protected)/communications/questions/page.tsx @@ -0,0 +1,36 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import BlogTable from "./table/blog-table"; + +const BlogPage = async () => { + return ( +
+ +
+ +
+
+ Table Indeks +
+
+ +
+
+ + + + + + +
+
+ ); +}; + +export default BlogPage; diff --git a/app/[locale]/(protected)/communications/questions/table/blog-table.tsx b/app/[locale]/(protected)/communications/questions/table/blog-table.tsx new file mode 100644 index 00000000..bb8974d7 --- /dev/null +++ b/app/[locale]/(protected)/communications/questions/table/blog-table.tsx @@ -0,0 +1,333 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Badge, + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export type CompanyData = { + no: number; + title: string; + category: 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 { paginationBlog } from "@/service/blog/blog"; + +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 }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "tags", + header: "Tag ", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + return ( + + {row.getValue("statusName")} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: blogTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + 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 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 ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
+
+
+ ); +}; + +export default BlogTable; diff --git a/app/[locale]/(protected)/communications/questions/table/data.ts b/app/[locale]/(protected)/communications/questions/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/communications/questions/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/dashboard/page.tsx b/app/[locale]/(protected)/dashboard/page.tsx index a7bad057..2f117fee 100644 --- a/app/[locale]/(protected)/dashboard/page.tsx +++ b/app/[locale]/(protected)/dashboard/page.tsx @@ -9,7 +9,7 @@ import RecentActivity from "./routine-task/recent-activity"; import CompanyTable from "./routine-task/routine-task-table"; import TaskTable from "../task/table-task/task-table"; import PressConferenceTable from "../schedule/press-release/table-persrilis/pressrilis-table"; -import BlogTable from "../blog/table-blog/blog-table"; +import BlogTable from "../blog/table/blog-table"; const DashboardPage = () => { const t = useTranslations("AnalyticsDashboard"); diff --git a/app/[locale]/(protected)/faq/layout.tsx b/app/[locale]/(protected)/faq/layout.tsx new file mode 100644 index 00000000..47e2f324 --- /dev/null +++ b/app/[locale]/(protected)/faq/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Blog", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/faq/page.tsx b/app/[locale]/(protected)/faq/page.tsx new file mode 100644 index 00000000..98fa1cb8 --- /dev/null +++ b/app/[locale]/(protected)/faq/page.tsx @@ -0,0 +1,36 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import BlogTable from "./table/blog-table"; + +const BlogPage = async () => { + return ( +
+ +
+ +
+
+ Table Indeks +
+
+ +
+
+ + + + + + +
+
+ ); +}; + +export default BlogPage; diff --git a/app/[locale]/(protected)/faq/table/blog-table.tsx b/app/[locale]/(protected)/faq/table/blog-table.tsx new file mode 100644 index 00000000..bb8974d7 --- /dev/null +++ b/app/[locale]/(protected)/faq/table/blog-table.tsx @@ -0,0 +1,333 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Badge, + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export type CompanyData = { + no: number; + title: string; + category: 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 { paginationBlog } from "@/service/blog/blog"; + +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 }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "tags", + header: "Tag ", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + return ( + + {row.getValue("statusName")} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: blogTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + 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 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 ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
+
+
+ ); +}; + +export default BlogTable; diff --git a/app/[locale]/(protected)/faq/table/data.ts b/app/[locale]/(protected)/faq/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/faq/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/knowledge-base/layout.tsx b/app/[locale]/(protected)/knowledge-base/layout.tsx new file mode 100644 index 00000000..47e2f324 --- /dev/null +++ b/app/[locale]/(protected)/knowledge-base/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Blog", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/knowledge-base/page.tsx b/app/[locale]/(protected)/knowledge-base/page.tsx new file mode 100644 index 00000000..98fa1cb8 --- /dev/null +++ b/app/[locale]/(protected)/knowledge-base/page.tsx @@ -0,0 +1,36 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import MediahubTable from "../planning/mediahub/table-mediahub/mediahub-table"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import BlogTable from "./table/blog-table"; + +const BlogPage = async () => { + return ( +
+ +
+ +
+
+ Table Indeks +
+
+ +
+
+ + + + + + +
+
+ ); +}; + +export default BlogPage; diff --git a/app/[locale]/(protected)/knowledge-base/table/blog-table.tsx b/app/[locale]/(protected)/knowledge-base/table/blog-table.tsx new file mode 100644 index 00000000..bb8974d7 --- /dev/null +++ b/app/[locale]/(protected)/knowledge-base/table/blog-table.tsx @@ -0,0 +1,333 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + Badge, + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +export type CompanyData = { + no: number; + title: string; + category: 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 { paginationBlog } from "@/service/blog/blog"; + +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 }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "tags", + header: "Tag ", + cell: ({ row }) => ( + {row.getValue("tags")} + ), + }, + { + accessorKey: "statusName", + header: "Status", + cell: ({ row }) => { + return ( + + {row.getValue("statusName")} + + ); + }, + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const BlogTable = () => { + const [blogTable, setBlogTable] = React.useState([]); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: blogTable, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + 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 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 ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "} + {table.getFilteredRowModel().rows.length} row(s) selected. +
+
+ + {table.getPageOptions().map((page, pageIndex) => ( + + ))} + +
+
+
+ ); +}; + +export default BlogTable; diff --git a/app/[locale]/(protected)/knowledge-base/table/data.ts b/app/[locale]/(protected)/knowledge-base/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/knowledge-base/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/ticketing/layout.tsx b/app/[locale]/(protected)/ticketing/layout.tsx new file mode 100644 index 00000000..de39c9b1 --- /dev/null +++ b/app/[locale]/(protected)/ticketing/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Ticketing", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/ticketing/page.tsx b/app/[locale]/(protected)/ticketing/page.tsx new file mode 100644 index 00000000..84568e2f --- /dev/null +++ b/app/[locale]/(protected)/ticketing/page.tsx @@ -0,0 +1,29 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { UploadIcon } from "lucide-react"; +import TicketingTable from "./table/ticketing-table"; + +const TicketingPage = async () => { + return ( +
+ +
+ +
+
+ Ticketing Table +
+
+ + + + + + +
+
+ ); +}; + +export default TicketingPage; diff --git a/app/[locale]/(protected)/ticketing/table/data.ts b/app/[locale]/(protected)/ticketing/table/data.ts new file mode 100644 index 00000000..6bb2b47a --- /dev/null +++ b/app/[locale]/(protected)/ticketing/table/data.ts @@ -0,0 +1,65 @@ +export const data = [ + { + title: "Ops Mantap Praja & Pilkada 2024", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + status: "Terkirim", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Ops Mantap Praja & Pilkada 2024", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, + { + title: "Seputar Prestasi", + status: "Terkirim", + category: "Giat Pimpinan", + date: "15/10/2024 9:11", + tag: "percobaan", + }, +]; diff --git a/app/[locale]/(protected)/ticketing/table/ticketing-table.tsx b/app/[locale]/(protected)/ticketing/table/ticketing-table.tsx new file mode 100644 index 00000000..f91aa5e2 --- /dev/null +++ b/app/[locale]/(protected)/ticketing/table/ticketing-table.tsx @@ -0,0 +1,303 @@ +"use client"; + +import * as React from "react"; +import { + ColumnDef, + ColumnFiltersState, + PaginationState, + SortingState, + VisibilityState, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, +} from "@tanstack/react-table"; +import { Button } from "@/components/ui/button"; + +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + ChevronLeft, + ChevronRight, + Eye, + MoreVertical, + Search, + SquarePen, + Trash2, + TrendingDown, + TrendingUp, +} from "lucide-react"; +import { cn } from "@/lib/utils"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; + +import { data } from "./data"; +import { Input } from "@/components/ui/input"; +import { InputGroup, InputGroupText } from "@/components/ui/input-group"; +import { paginationBlog } from "@/service/blog/blog"; +import { ticketingPagination } from "@/service/ticketing/ticketing"; +import { Badge } from "@/components/ui/badge"; +import TablePagination from "../../blog/table/table-pagination"; +import { useRouter, useSearchParams } from "next/navigation"; + +export const columns: ColumnDef[] = [ + { + accessorKey: "no", + header: "No", + cell: ({ row }) => {row.getValue("no")}, + }, + { + accessorKey: "referenceNumber", + header: "Ticket Number", + cell: ({ row }) => {row.getValue("referenceNumber")}, + }, + { + accessorKey: "title", + header: "Title", + cell: ({ row }) => {row.getValue("title")}, + }, + { + accessorKey: "commentFromUserName", + header: "Sender", + cell: ({ row }) => {row.getValue("commentFromUserName")}, + }, + { + accessorKey: "type", + header: "Channel", + cell: ({ row }) => { + const type = row.getValue("type") as { name: string }; + return {type?.name}; + }, + }, + { + accessorKey: "createdBy", + header: "Operator", + cell: ({ row }) => { + const createdBy = row.getValue("createdBy") as { fullname: string }; + return {createdBy?.fullname}; + }, + }, + { + accessorKey: "createdAt", + header: "Tanggal Unggah ", + cell: ({ row }) => ( + {row.getValue("createdAt")} + ), + }, + { + accessorKey: "status", + header: "Status", + cell: ({ row }) => { + const statusColors: Record = { + open: "bg-primary/20 text-primary", + close: "bg-success/20 text-success", + }; + const status = row.getValue("status") as { id: number, name: string };; + const statusName = status?.name?.toLocaleLowerCase(); + console.log(statusName); + const statusStyles = statusColors[statusName] || "default"; + if (statusName) { + return ( + {statusName} + ); + } + } + }, + { + id: "actions", + accessorKey: "action", + header: "Actions", + enableHiding: false, + cell: ({ row }) => { + return ( + + + + + + + + View + + + + Edit + + + + Delete + + + + ); + }, + }, +]; + +const TicketingTable = () => { + const router = useRouter(); + const searchParams = useSearchParams(); + const [ticketData, setTicketData] = React.useState([]); + const [totalData, setTotalData] = React.useState(1); + const [sorting, setSorting] = React.useState([]); + const [columnFilters, setColumnFilters] = React.useState( + [] + ); + const [columnVisibility, setColumnVisibility] = + React.useState({}); + const [rowSelection, setRowSelection] = React.useState({}); + const [pagination, setPagination] = React.useState({ + pageIndex: 0, + pageSize: 10, + }); + const [page, setPage] = React.useState(1); + const [totalPage, setTotalPage] = React.useState(1); + const [limit, setLimit] = React.useState(10); + + const table = useReactTable({ + data: ticketData, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onPaginationChange: setPagination, + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + pagination, + }, + }); + + React.useEffect(() => { + const pageFromUrl = searchParams?.get('page'); + if (pageFromUrl) { + setPage(Number(pageFromUrl)); + } + }, [searchParams]); + + React.useEffect(() => { + fetchData(); + }, [page, limit]); + + async function fetchData() { + try { + const res = await ticketingPagination('', limit, page-1); + const data = res.data?.data; + const contentData = data?.content; + contentData.forEach((item: any, index: number) => { + item.no = (page - 1) * limit + index + 1; + }); + + console.log("contentData : ", contentData); + + setTicketData(contentData); + setTotalData(data?.totalElements); + setTotalPage(data?.totalPages); + } catch (error) { + console.error("Error fetching tasks:", error); + } + } + + return ( +
+
+
+ + + + + + +
+
+ ) => + table.getColumn("status")?.setFilterValue(event.target.value) + } + className="max-w-sm " + /> +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + + ))} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender(cell.column.columnDef.cell, cell.getContext())} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+ +
+ ); +}; + +export default TicketingTable; diff --git a/components/partials/sidebar/common/menu-widget.tsx b/components/partials/sidebar/common/menu-widget.tsx index 0b067ac9..216ee16b 100644 --- a/components/partials/sidebar/common/menu-widget.tsx +++ b/components/partials/sidebar/common/menu-widget.tsx @@ -11,7 +11,7 @@ const MenuWidget = () => {
- + {/*
Unlimited Access
@@ -22,7 +22,7 @@ const MenuWidget = () => { -
+
*/}
) diff --git a/lib/menus.ts b/lib/menus.ts index e21c3058..23634a99 100644 --- a/lib/menus.ts +++ b/lib/menus.ts @@ -1,3 +1,5 @@ +import { getCookiesDecrypt } from "./utils"; + export type SubChildren = { href: string; label: string; @@ -29,7 +31,12 @@ export type Group = { }; export function getMenuList(pathname: string, t: any): Group[] { - return [ + + const roleId = getCookiesDecrypt("urie"); + const levelNumber = getCookiesDecrypt("ulne"); + const userLevelId = getCookiesDecrypt("ulie"); + + let menusSelected = [ { groupLabel: t("apps"), id: "dashboard", @@ -1373,6 +1380,148 @@ export function getMenuList(pathname: string, t: any): Group[] { ], }, ]; + + if (Number(roleId) == 9) { + menusSelected = [ + { + groupLabel: t("apps"), + id: "dashboard", + menus: [ + { + id: "dashboard", + href: "/dashboard", + label: t("dashboard"), + active: pathname.includes("/dashboard"), + icon: "material-symbols:dashboard", + submenus: [], + }, + ], + }, + { + groupLabel: "", + id: "ticketing", + menus: [ + { + id: "ticketing", + href: "/ticketing", + label: t("ticketing"), + active: pathname.includes("/ticketing"), + icon: "mdi:ticket-outline", + submenus: [], + }, + ], + }, + { + groupLabel: "", + id: "knowledge-base", + menus: [ + { + id: "knowledge-base", + href: "/knowledge-base", + label: t("knowledge-base"), + active: pathname.includes("/knowledge-base"), + icon: "hugeicons:knowledge-02", + submenus: [], + }, + ], + }, + { + groupLabel: "", + id: "faq", + menus: [ + { + id: "faq", + href: "/frequently-asked-question", + label: t("faq"), + active: pathname.includes("/frequently-asked-question"), + icon: "wpf:faq", + submenus: [], + }, + ], + }, + { + groupLabel: "", + id: "communication", + menus: [ + { + id: "communication", + href: "/communication", + label: t("communication"), + active: pathname.includes("/communication"), + icon: "icon-park-outline:communication", + submenus: [ + { + href: "/communication/questions", + label: t("questions"), + active: pathname.includes("/communication/questions"), + icon: "solar:inbox-line-outline", + children: [], + }, + { + href: "/communication/internal", + label: t("internal"), + active: pathname.includes("/communication/internal"), + icon: "ri:chat-private-line", + children: [], + }, + { + href: "/communication/forward", + label: t("forward"), + active: pathname.includes("/communication/forward"), + icon: "ri:share-forward-2-fill", + children: [], + }, + { + href: "/communication/collaboration", + label: t("collaboration"), + active: pathname.includes("/communication/collaboration"), + icon: "clarity:employee-group-line", + children: [], + }, + { + href: "/communication/account-report", + label: t("account-report"), + active: pathname.includes("/communication/account-report"), + icon: "uiw:user-delete", + children: [], + }, + ], + }, + ], + }, + { + groupLabel: "", + id: "settings", + menus: [ + { + id: "settings", + href: "/settings", + label: t("settings"), + active: pathname.includes("/settings"), + icon: "uil:setting", + submenus: [ + { + href: "/settings/feedback", + label: t("feedback"), + active: pathname.includes("/settings/feedback"), + icon: "clarity:employee-group-line", + children: [], + }, + { + href: "/settings/social-media", + label: t("social-media"), + active: pathname.includes("/settings/social-media"), + icon: "clarity:employee-group-line", + children: [], + }, + ], + }, + ], + } + ] + } + + return menusSelected; } export function getHorizontalMenuList(pathname: string, t: any): Group[] { return [ diff --git a/messages/en.json b/messages/en.json index 44792f82..005101ca 100644 --- a/messages/en.json +++ b/messages/en.json @@ -137,6 +137,17 @@ "curated-content": "Curated Content", "communication": "Communication", "contest": "Contest", + "ticketing": "Ticketing", + "knowledge-base": "Knowledge Base", + "faq": "FAQ", + "questions": "Questions", + "internal": "Internal Questions", + "forward": "Forward", + "collaboration": "Collaboration", + "account-report": "Account Report", + "settings": "Settings", + "feedback": "Feedback", + "social-media": "Social media", "analytics": "Analytics", "banking": "Banking", "crm": "Crm", @@ -167,11 +178,9 @@ "utility": "utility", "blankPage": "Blank Page", "blog": "Blog", - "faq": "Faq", "invoice": "Invoice", "pricing": "Pricing", "profile": "Profile", - "settings": "Settings", "elements": "Elements", "components": "Components", "avatar": "Avatar", diff --git a/messages/in.json b/messages/in.json index f1c4c2ad..b7f1db19 100644 --- a/messages/in.json +++ b/messages/in.json @@ -137,6 +137,17 @@ "curated-content": "Kurasi Konten", "communication": "Komunikasi", "contest": "Kontes", + "ticketing": "Ticketing", + "knowledge-base": "Knowledge Base", + "faq": "FAQ", + "questions": "Questions", + "internal": "Internal Questions", + "forward": "Forward", + "collaboration": "Collaboration", + "account-report": "Account Report", + "settings": "Settings", + "feedback": "Feedback", + "social-media": "Social media", "analytics": "Analytics", "banking": "Banking", "crm": "Crm", @@ -167,11 +178,9 @@ "utility": "utility", "blankPage": "Blank Page", "blog": "Blog", - "faq": "Faq", "invoice": "Invoice", "pricing": "Pricing", "profile": "Profile", - "settings": "Settings", "elements": "Elements", "components": "Components", "avatar": "Avatar", diff --git a/service/ticketing/ticketing.ts b/service/ticketing/ticketing.ts new file mode 100644 index 00000000..cf19148f --- /dev/null +++ b/service/ticketing/ticketing.ts @@ -0,0 +1,8 @@ +import { title } from "process"; +import { httpGetInterceptor } from "../http-config/http-interceptor-service"; + +export async function ticketingPagination(title: string = '', size: number, page: number) { + return await httpGetInterceptor( + `/ticketing/pagination?enablePage=1&page=${page}&size=${size}&title=${title}` + ); +}