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 584351c5..bb8974d7 100644 --- a/app/[locale]/(protected)/blog/table-blog/blog-table.tsx +++ b/app/[locale]/(protected)/blog/table/blog-table.tsx @@ -285,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/app/[locale]/(public)/image/detail/[slug]/page.tsx b/app/[locale]/(public)/image/detail/[slug]/page.tsx index c7233931..fcc00b66 100644 --- a/app/[locale]/(public)/image/detail/[slug]/page.tsx +++ b/app/[locale]/(public)/image/detail/[slug]/page.tsx @@ -6,6 +6,8 @@ import { Textarea } from "@/components/ui/textarea"; import Link from "next/link"; import { useParams, usePathname, useRouter } from "next/navigation"; import React, { useState } from "react"; +import { Icon } from "@iconify/react/dist/iconify.js"; +import { textEllipsis } from "@/utils/globals"; const dummyImage = [ { id: 1, thumbnail: "/assets/banner-sample.png" }, @@ -17,7 +19,7 @@ const dummyImage = [ const dummyData = { id: 12312, - title: "ahahah", + title: "TITLE", createdBy: "Mabes", createdAt: "21-21-2021", time: "18:23", @@ -26,6 +28,27 @@ const dummyData = { '

Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.

Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.

"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.

Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.

“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.

', }; +const dummyImageContent = [ + { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 2, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 3, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 4, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 5, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 6, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 7, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 8, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, + { id: 9, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, +]; + +const dummyDescription = [ + { id: 1, title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 2, title: "Kapolres Lahat Himbau Cipta Kondisi Cooling System Pasca Pemungutan Suara Pilkada 2024", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 3, title: "17 Ton Pupuk Bersubsidi yang Akan Diselewengkan ke Banyuasin Berhasil Digagalkan", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 4, title: "Kapolda Sumsel Apelkan 1471 Personel Persiapan Pengamanan Pengawalan Tahan Pungut dan Hitung Suara", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 5, title: "Polrestabes Palembang Berhasil Mengungkap Kasus Penganiayaan Berat di Ilir Barat II", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, + { id: 6, title: "Tahapan Pilkada di Sumsel Berlangsung Kondusif", date: "28 November 2024", time: "11.15 WIB", duration: "00:24:55" }, +]; + const DetailInfo = () => { const [selectedSize, setSelectedSize] = useState("L"); const [selectedTab, setSelectedTab] = useState("video"); @@ -43,14 +66,14 @@ const DetailInfo = () => { ]; return ( -
+
{/* Container Utama */}
{/* Bagian Kiri */} -
+
{/* Gambar Utama */}
- Main + Main
@@ -61,14 +84,14 @@ const DetailInfo = () => { key={index} src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" alt={`Thumbnail ${index + 1}`} - className="w-full h-16 object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" + className="w-full h-fit object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600" /> ))}
{/* Bagian Kanan */} -
+
@@ -132,7 +155,7 @@ const DetailInfo = () => {
{/* Keterangan */} -
+

{dummyData.title}

@@ -145,24 +168,36 @@ const DetailInfo = () => {
{/* Konten Serupa */} -
-
-
-

- Konten Serupa +
+
+
+

+ Konten Terbaru

- + Audio Visual - + Audio - + Foto - + Teks @@ -170,15 +205,21 @@ const DetailInfo = () => {
{selectedTab == "video" ? ( - + - {dummyImage.map((image) => ( + {dummyImageContent.map((image) => ( - - - - - + +
+ {image.date} {image.time} | 518{" "} + + + {" "} +
+
{image.title}
 ))} @@ -188,13 +229,27 @@ const DetailInfo = () => { ) : selectedTab == "audio" ? ( - {dummyImage.map((image) => ( - - - - - - + {dummyDescription.map((description) => ( + + ))} @@ -204,13 +259,19 @@ const DetailInfo = () => { ) : selectedTab == "image" ? ( - {dummyImage.map((image) => ( + {dummyImageContent.map((image) => ( - router.push(`${locale}/image/detail/${image.id}`)}> - - - - + +
+ {image.date} {image.time} | 518{" "} + + + {" "} +
+
{image.title}
 ))} @@ -220,13 +281,33 @@ const DetailInfo = () => { ) : ( - {dummyImage.map((image) => ( - - - - - - + {dummyImageContent.map((description) => ( + + ))} diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx index 9387cf43..e7f05e43 100644 --- a/app/[locale]/(public)/image/filter/page.tsx +++ b/app/[locale]/(public)/image/filter/page.tsx @@ -4,6 +4,8 @@ import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, Pagi import { Card, CardContent } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Icon } from "@iconify/react/dist/iconify.js"; +import { generateLocalizedPath } from "@/utils/globals"; +import { useParams, usePathname, useRouter } from "next/navigation"; const dummyImage = [ { id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" }, @@ -37,6 +39,11 @@ const formatPicture = [ ]; const FilterPage = () => { + const router = useRouter(); + const pathname = usePathname(); + const params = useParams(); + const locale = params?.locale; + return (
{/* Header */} @@ -124,7 +131,7 @@ const FilterPage = () => {
{dummyImage.map((image) => ( - + router.push(generateLocalizedPath(`/image/detail/${image.id}`, String(locale)))} className="flex flex-col text-xs lg:text-sm">
{image.date} {image.time} | 518{" "} diff --git a/app/[locale]/(public)/indeks/page.tsx b/app/[locale]/(public)/indeks/page.tsx index 3def81d7..8543e2a3 100644 --- a/app/[locale]/(public)/indeks/page.tsx +++ b/app/[locale]/(public)/indeks/page.tsx @@ -17,7 +17,7 @@ const ImageCard: React.FC = ({ imageUrl, label, title, date }) = {title}
{label} -

{title}

+

{title}

{date}
@@ -73,7 +73,7 @@ const ImageGallery: React.FC = () => { return ( <> {/* Hero */} -
+
@@ -83,7 +83,7 @@ const ImageGallery: React.FC = () => {
{/* Bottom */} -
+
{imageBottom.map((image) => (
diff --git a/app/[locale]/(public)/schedule/page.tsx b/app/[locale]/(public)/schedule/page.tsx index 93311fa7..371a1fce 100644 --- a/app/[locale]/(public)/schedule/page.tsx +++ b/app/[locale]/(public)/schedule/page.tsx @@ -8,8 +8,9 @@ import React, { useEffect, useState } from "react"; import { format } from "date-fns"; import { cn } from "@/lib/utils"; import { Checkbox } from "@/components/ui/checkbox"; +import { Icon } from "@iconify/react/dist/iconify.js"; -const Jadwal = () => { +const Schedule = () => { const city = [ { key: 1, @@ -64,6 +65,9 @@ const Jadwal = () => { const [startDate, setStartDate] = useState(new Date()); const [dateAWeek, setDateAWeek] = useState([]); + const [scheduleSearch, setScheduleSearch] = useState(); + const [todayList, setTodayList] = useState([]); + const curr = new Date(); const startDays = (curr.getDay() + 7 - 1) % 7; @@ -190,7 +194,7 @@ const Jadwal = () => { return ( <> {/* Awal Komponen Kiri */} -
+
+ + {/* Dropdown Menu */} + {isOpen && ( +
+ + +
+ )} +
- - - 🔍 + + + + +
- - + +
@@ -407,14 +438,12 @@ const Navbar = () => { />
- - + + Masuk - +
)} diff --git a/components/landing-page/division.tsx b/components/landing-page/division.tsx new file mode 100644 index 00000000..311414cf --- /dev/null +++ b/components/landing-page/division.tsx @@ -0,0 +1,102 @@ +import React, { useState } from "react"; +import { Button } from "../ui/button"; + +const Division = () => { + const [searchTerm, setSearchTerm] = useState(""); + const [seeAllValue, setSeeAllValue] = useState(false); + + const regions = [ + { name: "SIBER", logo: "/assets/satker/siber.png" }, + { name: "DIVKUM", logo: "/assets/satker/divkum.png" }, + { name: "PUSKEU", logo: "/assets/satker/puskeu.png" }, + { name: "SSDM", logo: "/assets/satker/ssdm.png" }, + { name: "ITWASUM", logo: "/assets/satker/itwasum.png" }, + { name: "STIK-PTIK", logo: "/assets/satker/stik-ptik.png" }, + { name: "SATUAN KERJA POLRI", logo: "/assets/satker/satuan-kerja-polri.png" }, + { name: "BRIMOB", logo: "/assets/satker/brimob.png" }, + { name: "DIV HUMAS", logo: "/assets/satker/div-humas.png" }, + { name: "PUSLITBANG", logo: "/assets/satker/puslitbang.png" }, + { name: "BINMAS", logo: "/assets/satker/binmas.png" }, + { name: "DIV TIK", logo: "/assets/satker/div-tik.png" }, + { name: "SPRIPIM", logo: "/assets/satker/spripim.png" }, + { name: "DIVPROPRAM", logo: "/assets/satker/div-propram.png" }, + { name: "KORPS SABHARA BAHARKAM", logo: "/assets/satker/khorp-sabhara-baharkam.png" }, + { name: "PUSDOKKES", logo: "/assets/satker/pusdokkes.png" }, + { name: "BAHARKAM", logo: "/assets/satker/baharkam.png" }, + { name: "POLAIRUD", logo: "/assets/satker/polairud.png" }, + { name: "POLAIR", logo: "/assets/satker/polair.png" }, + { name: "POLUDARA", logo: "/assets/satker/poludara.png" }, + { name: "LEMDIKLAT", logo: "/assets/satker/lemdiklat.png" }, + { name: "AKPOL", logo: "/assets/satker/akpol.png" }, + { name: "KORLANTAS", logo: "/assets/satker/korlantas.png" }, + { name: "PUSINAFIS", logo: "/assets/satker/pusinafis.png" }, + { name: "PUSJARAH", logo: "/assets/satker/pusjarah.png" }, + { name: "PUSIKNAS", logo: "/assets/satker/pusiknas.png" }, + { name: "SLOG", logo: "/assets/satker/slog.png" }, + { name: "BAINTELKAM", logo: "/assets/satker/baintelkam.jpg" }, + { name: "BARESKRIM", logo: "/assets/satker/bareskrim.png" }, + { name: "DIVHUBINTER", logo: "/assets/satker/divhubinter.png" }, + { name: "SETUM", logo: "/assets/satker/setum.png" }, + { name: "PUSLABFOR", logo: "/assets/satker/puslabfor.png" }, + { name: "DENSUS 88", logo: "/assets/satker/densus88.png" }, + { name: "SAHLI KAPOLRI", logo: "/assets/satker/sahli-kapolri.png" }, + { name: "SOPS", logo: "/assets/satker/sops.png" }, + { name: "SRENA", logo: "/assets/satker/srena.png" }, + { name: "SESPIM POLRI", logo: "/assets/satker/sespim-polri.png" }, + { name: "SETUPA POLRI", logo: "/assets/satker/setupa-polri.png" }, + ]; + + return ( +
+ {/* Header */} +

+ Liputan Satker +

+
+ + {/* Pencarian */} +
+ setSearchTerm(e.target.value)} + /> + +
+ + {/* Grid Wilayah */} +
+ {regions.map((region, index) => + !seeAllValue ? ( + index < 7 ? ( +
+
+ {region.name} +
+

{region.name}

+
+ ) : ( + "" + ) + ) : ( +
+
+ {region.name} +
+

{region.name}

+
+ ) + )} +
+
+ +
+
+ ); +}; + +export default Division; diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx index 0054635d..7ca9028d 100644 --- a/components/landing-page/new-content.tsx +++ b/components/landing-page/new-content.tsx @@ -8,9 +8,10 @@ import { CarouselPrevious, } from "@/components/ui/carousel"; import Link from "next/link"; -import { usePathname, useRouter } from "next/navigation"; +import { useParams, usePathname, useRouter } from "next/navigation"; import { Icon } from "@iconify/react/dist/iconify.js"; import { textEllipsis } from "@/utils/globals"; +import { generateLocalizedPath } from "@/utils/globals"; const dummyImage = [ { @@ -141,6 +142,8 @@ const NewContent = () => { const [selectedTab, setSelectedTab] = useState("video"); const router = useRouter(); const pathname = usePathname(); + const params = useParams(); + const locale = params?.locale; return (
@@ -183,30 +186,22 @@ const NewContent = () => { {dummyImage.map((image) => ( - - -
- {image.date} {image.time} |{" "} - 518{" "} - - - {" "} -
-
{image.title}
+ + + +
+

{image.title}

+

+ {image.date} {image.time} | 518{" "} + + + {" "} +

+
+ ))} @@ -264,30 +259,22 @@ const NewContent = () => { {dummyImage.map((image) => ( - - -
- {image.date} {image.time} |{" "} - 518{" "} - - - {" "} -
-
{image.title}
+ + + +
+

{image.title}

+

+ {image.date} {image.time} | 518{" "} + + + {" "} +

+
+ ))} diff --git a/components/landing-page/popular-content.tsx b/components/landing-page/popular-content.tsx index 1adc0912..e59afe48 100644 --- a/components/landing-page/popular-content.tsx +++ b/components/landing-page/popular-content.tsx @@ -77,14 +77,21 @@ const PopularContent = () => { {dummyImage.map((image) => ( - - - {image.date} {image.time} | 518{" "} - - - {" "} + + +
+

{image.title}

+

+ {image.date} {image.time} | 518{" "} + + + {" "} +

+
-
{image.title}
 ))} @@ -126,14 +133,21 @@ const PopularContent = () => { {dummyImage.map((image) => ( - -
- {image.date} {image.time} | 518{" "} - - - {" "} -
-
{image.title}
+ + +
+

{image.title}

+

+ {image.date} {image.time} | 518{" "} + + + {" "} +

+
+ ))} diff --git a/components/logo.tsx b/components/logo.tsx index 130e98d1..ae258f42 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -25,12 +25,12 @@ const Logo = () => { if (config.sidebar === "two-column" || !isDesktop) return null; return ( - + {/* {(!config?.collapsed || hovered) && (

D

)} */} - logo + logo ); }; diff --git a/components/partials/footer/index.tsx b/components/partials/footer/index.tsx index 0dafb785..4d54d40f 100644 --- a/components/partials/footer/index.tsx +++ b/components/partials/footer/index.tsx @@ -11,17 +11,9 @@ const DashCodeFooter = async () => {
- COPYRIGHT © {new Date().getFullYear()} DashCode, All rights Reserved
- Hand-crafted & Made by{" "} - - Codeshaper - + COPYRIGHT © {new Date().getFullYear()} Media Hub, All rights Reserved
diff --git a/components/partials/header/locale-switcher.tsx b/components/partials/header/locale-switcher.tsx index daad6afd..b65a1b77 100644 --- a/components/partials/header/locale-switcher.tsx +++ b/components/partials/header/locale-switcher.tsx @@ -64,7 +64,7 @@ export default function LocalSwitcher() { In
- + {/*
Ar
- + */} diff --git a/components/partials/sidebar/common/menu-item.tsx b/components/partials/sidebar/common/menu-item.tsx index 4e34875d..1e04826d 100644 --- a/components/partials/sidebar/common/menu-item.tsx +++ b/components/partials/sidebar/common/menu-item.tsx @@ -137,7 +137,7 @@ const MenuItem = ({ href, label, icon, active, id, collapsed }: MenuItemProps) = > {(!collapsed || hovered) && (

{

- + {/*
Unlimited Access
@@ -22,7 +22,7 @@ const MenuWidget = () => { -
+
*/}
) diff --git a/components/partials/sidebar/menu/menu-classic.tsx b/components/partials/sidebar/menu/menu-classic.tsx index 3ba36747..4fdae2b2 100644 --- a/components/partials/sidebar/menu/menu-classic.tsx +++ b/components/partials/sidebar/menu/menu-classic.tsx @@ -61,7 +61,7 @@ export function MenuClassic({ }) { return ( <> {isDesktop && ( -
+
@@ -71,7 +71,7 @@ export function MenuClassic({ }) { - {isDesktop && ( + {/* {isDesktop && (
- )} + )} */} -