feat:form image, form video, add table Nulis Ai
This commit is contained in:
parent
ed18ce7cd6
commit
537a341d60
|
|
@ -53,7 +53,6 @@ export type CompanyData = {
|
|||
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";
|
||||
|
|
@ -96,7 +95,14 @@ export const columns: ColumnDef<CompanyData>[] = [
|
|||
accessorKey: "createdAt",
|
||||
header: "Tanggal Unggah ",
|
||||
cell: ({ row }) => (
|
||||
<span className="whitespace-nowrap">{row.getValue("createdAt")}</span>
|
||||
<span className="whitespace-nowrap">
|
||||
{" "}
|
||||
{`${new Date(row.getValue("createdAt")).getDate()}/${
|
||||
new Date(row.getValue("createdAt")).getMonth() + 1
|
||||
}/${new Date(row.getValue("createdAt")).getFullYear()} ${new Date(
|
||||
row.getValue("createdAt")
|
||||
).getHours()}:${new Date(row.getValue("createdAt")).getMinutes()}`}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
|
|
@ -199,15 +205,20 @@ const BlogTable = () => {
|
|||
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,
|
||||
}));
|
||||
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,
|
||||
}))
|
||||
.sort(
|
||||
(a: CompanyData, b: CompanyData) =>
|
||||
new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
|
||||
); // Mengurutkan dari terbaru ke terlama berdasarkan `createdAt`
|
||||
|
||||
setBlogTable(data);
|
||||
setTotalPage(res.data.totalPages);
|
||||
|
|
@ -285,46 +296,40 @@ const BlogTable = () => {
|
|||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div className="flex items-center justify-end py-4 px-10">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
||||
{table.getFilteredRowModel().rows.length} row(s) selected.
|
||||
</div>
|
||||
<div className="flex items-center justify-center py-4 gap-2 flex-none">
|
||||
<div className="flex items-center justify-center py-4 gap-2 flex-none">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className="w-8 h-8"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
{table.getPageOptions().map((page, pageIndex) => (
|
||||
<Button
|
||||
variant="outline"
|
||||
key={`basic-data-table-${pageIndex}`}
|
||||
onClick={() => table.setPageIndex(pageIndex)}
|
||||
size="icon"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className="w-8 h-8"
|
||||
variant={
|
||||
table.getState().pagination.pageIndex === pageIndex
|
||||
? "default"
|
||||
: "outline"
|
||||
}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
{page + 1}
|
||||
</Button>
|
||||
{table.getPageOptions().map((page, pageIndex) => (
|
||||
<Button
|
||||
key={`basic-data-table-${pageIndex}`}
|
||||
onClick={() => table.setPageIndex(pageIndex)}
|
||||
size="icon"
|
||||
className="w-8 h-8"
|
||||
variant={
|
||||
table.getState().pagination.pageIndex === pageIndex
|
||||
? "default"
|
||||
: "outline"
|
||||
}
|
||||
>
|
||||
{page + 1}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className="w-8 h-8"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className="w-8 h-8"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
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",
|
||||
},
|
||||
];
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
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<any>;
|
||||
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<number>(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 (
|
||||
<div className="flex items-center justify-end py-4 px-10">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
||||
{totalData} row(s) selected.
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-none">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(1)}
|
||||
disabled={currentPageIndex === 1}
|
||||
className='w-8 h-8'
|
||||
>
|
||||
<ChevronLeft className='w-4 h-4' />
|
||||
</Button>
|
||||
{Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index).map((pageIndex) => (
|
||||
<Button
|
||||
key={`page-${pageIndex}`}
|
||||
onClick={() => handlePageChange(pageIndex)}
|
||||
size="icon"
|
||||
className="w-8 h-8"
|
||||
variant={currentPageIndex === pageIndex ? 'default' : 'outline'}
|
||||
>
|
||||
{pageIndex}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => handlePageChange(totalPage)}
|
||||
disabled={currentPageIndex === totalPage}
|
||||
className='w-8 h-8'
|
||||
>
|
||||
<ChevronRight className='w-4 h-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TablePagination;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import FormVideo from "@/components/form/content/video-form";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
|
||||
const VideoCreatePage = async () => {
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
<div className="space-y-4">
|
||||
<FormVideo />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoCreatePage;
|
||||
|
|
@ -2,10 +2,11 @@
|
|||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import TableImage from "./table-video";
|
||||
import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
|
||||
import { UploadIcon } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import TableVideo from "./table-video";
|
||||
import { Link } from "@/components/navigation";
|
||||
|
||||
const ReactTableVideoPage = () => {
|
||||
return (
|
||||
|
|
@ -55,10 +56,12 @@ const ReactTableVideoPage = () => {
|
|||
Konten Video
|
||||
</div>
|
||||
<div>
|
||||
<Button color="primary" className="text-white">
|
||||
<UploadIcon />
|
||||
Unggah Video
|
||||
</Button>
|
||||
<Link href={"/content/audio-visual/create"}>
|
||||
<Button color="primary" className="text-white">
|
||||
<UploadIcon />
|
||||
Unggah Video
|
||||
</Button>
|
||||
</Link>
|
||||
<Button color="primary" className="text-white ml-3">
|
||||
<UploadIcon />
|
||||
Unggah Video Dengan AI
|
||||
|
|
|
|||
|
|
@ -1,180 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
export type DataProps = {
|
||||
id: string | number;
|
||||
order: string;
|
||||
customer: {
|
||||
name: string;
|
||||
};
|
||||
date: string;
|
||||
quantity: number;
|
||||
amount: string;
|
||||
status: "paid" | "due" | "canceled";
|
||||
action: React.ReactNode;
|
||||
};
|
||||
export const columns: ColumnDef<DataProps>[] = [
|
||||
// {
|
||||
// id: "select",
|
||||
// header: ({ table }) => (
|
||||
// <Checkbox
|
||||
// checked={
|
||||
// table.getIsAllPageRowsSelected() ||
|
||||
// (table.getIsSomePageRowsSelected() && "indeterminate")
|
||||
// }
|
||||
// onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
// aria-label="Select all"
|
||||
// />
|
||||
// ),
|
||||
// cell: ({ row }) => (
|
||||
// <div className="xl:w-16">
|
||||
// <Checkbox
|
||||
// checked={row.getIsSelected()}
|
||||
// onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
// aria-label="Select row"
|
||||
// />
|
||||
// </div>
|
||||
// ),
|
||||
// enableSorting: false,
|
||||
// enableHiding: false,
|
||||
// },
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("id")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "order",
|
||||
header: "Judul",
|
||||
cell: ({ row }) => (
|
||||
<div className="w-52">
|
||||
<span>{row.getValue("order")}</span>,
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "customer",
|
||||
header: "Kategory",
|
||||
cell: ({ row }) => {
|
||||
const user = row.original.customer;
|
||||
return (
|
||||
<div className="font-medium text-card-foreground/80">
|
||||
<div className="flex gap-3 items-center">
|
||||
<span className="text-sm text-default-600 whitespace-nowrap">
|
||||
{user?.name ?? "Unknown User"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "date",
|
||||
header: "Tanggal unggah",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("date")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "quantity",
|
||||
header: "Kreator",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("quantity")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Sumber",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Penempatan File",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => {
|
||||
const statusColors: Record<string, string> = {
|
||||
paid: "bg-success/20 text-success",
|
||||
due: "bg-warning/20 text-warning",
|
||||
canceled: "bg-destructive/20 text-destructive",
|
||||
};
|
||||
const status = row.getValue<string>("status");
|
||||
const statusStyles = statusColors[status] || "default";
|
||||
return (
|
||||
<Badge className={cn("rounded-full px-5", statusStyles)}>
|
||||
{status}{" "}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Kurasi Konten",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Saran",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Actions",
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||
>
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Eye className="w-4 h-4 me-1.5" />
|
||||
View
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<SquarePen className="w-4 h-4 me-1.5" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
||||
<Trash2 className="w-4 h-4 me-1.5" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
import { DataProps } from "./columns";
|
||||
|
||||
export const data: DataProps[] = [
|
||||
{
|
||||
id: 1,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "3/26/2022",
|
||||
quantity: 13,
|
||||
amount: "$1779.53",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "2/6/2022",
|
||||
quantity: 13,
|
||||
amount: "$2215.78",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "9/6/2021",
|
||||
quantity: 1,
|
||||
amount: "$3183.60",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "11/7/2021",
|
||||
quantity: 13,
|
||||
amount: "$2587.86",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Rachel Brown",
|
||||
},
|
||||
date: "5/6/2022",
|
||||
quantity: 12,
|
||||
amount: "$3840.73",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Megan Taylor",
|
||||
},
|
||||
date: "2/14/2022",
|
||||
quantity: 12,
|
||||
amount: "$4764.18",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Sophie Clark",
|
||||
},
|
||||
date: "7/30/2022",
|
||||
quantity: 6,
|
||||
amount: "$2875.05",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Natalie Martin",
|
||||
},
|
||||
date: "6/30/2022",
|
||||
quantity: 9,
|
||||
amount: "$2491.02",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Hannah Lewis",
|
||||
},
|
||||
date: "8/9/2022",
|
||||
quantity: 8,
|
||||
amount: "$3006.95",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Lisa White",
|
||||
},
|
||||
date: "8/4/2022",
|
||||
quantity: 12,
|
||||
amount: "$2160.32",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Emma Walker",
|
||||
},
|
||||
date: "4/5/2022",
|
||||
quantity: 8,
|
||||
amount: "$1272.66",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "8/9/2022",
|
||||
quantity: 2,
|
||||
amount: "$4327.86",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "2/10/2022",
|
||||
quantity: 11,
|
||||
amount: "$3671.81",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "2/10/2022",
|
||||
quantity: 2,
|
||||
amount: "$3401.82",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "5/20/2022",
|
||||
quantity: 4,
|
||||
amount: "$2387.49",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
];
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
|
|
@ -24,9 +23,6 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import { data } from "./data";
|
||||
import TablePagination from "./table-pagination";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { format } from "date-fns";
|
||||
import {
|
||||
|
|
@ -45,7 +41,7 @@ import {
|
|||
import { title } from "process";
|
||||
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { listDataImage, listDataVideo } from "@/service/content/content";
|
||||
import { listDataVideo } from "@/service/content/content";
|
||||
|
||||
export type CompanyData = {
|
||||
no: number;
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { Table } from '@tanstack/react-table';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface DataTablePaginationProps {
|
||||
table: Table<any>;
|
||||
}
|
||||
|
||||
const TablePagination = ({ table }: DataTablePaginationProps) => {
|
||||
return (
|
||||
<div className="flex items-center justify-end py-4 px-10">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
||||
{table.getFilteredRowModel().rows.length} row(s) selected.
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-none">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className='w-8 h-8'
|
||||
>
|
||||
<ChevronLeft className='w-4 h-4' />
|
||||
</Button>
|
||||
{table.getPageOptions().map((page, pageIndex) => (
|
||||
<Button
|
||||
key={`basic-data-table-${pageIndex}`}
|
||||
onClick={() => table.setPageIndex(pageIndex)}
|
||||
size="icon"
|
||||
className="w-8 h-8"
|
||||
variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
|
||||
>
|
||||
{page + 1}
|
||||
</Button>
|
||||
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className='w-8 h-8'
|
||||
>
|
||||
<ChevronRight className='w-4 h-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TablePagination;
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
"use client";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import TableImage from "./table-audio";
|
||||
import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
|
||||
import { UploadIcon } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import TableAudio from "./table-audio";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
|
|
@ -24,9 +23,6 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import { data } from "./data";
|
||||
import TablePagination from "./table-pagination";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { format } from "date-fns";
|
||||
import {
|
||||
|
|
@ -45,11 +41,7 @@ import {
|
|||
import { title } from "process";
|
||||
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import {
|
||||
listDataAudio,
|
||||
listDataImage,
|
||||
listDataVideo,
|
||||
} from "@/service/content/content";
|
||||
import { listDataAudio } from "@/service/content/content";
|
||||
|
||||
export type CompanyData = {
|
||||
no: number;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import FormTask from "@/components/form/task/task-form";
|
||||
import FormImage from "@/components/form/content/create-form";
|
||||
import FormImage from "@/components/form/content/image-form";
|
||||
|
||||
const ImageCreatePage = async () => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import TableImage from "./table-image";
|
||||
import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
|
||||
import { UploadIcon } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Link } from "@/components/navigation";
|
||||
|
|
|
|||
|
|
@ -1,180 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
export type DataProps = {
|
||||
id: string | number;
|
||||
order: string;
|
||||
customer: {
|
||||
name: string;
|
||||
};
|
||||
date: string;
|
||||
quantity: number;
|
||||
amount: string;
|
||||
status: "paid" | "due" | "canceled";
|
||||
action: React.ReactNode;
|
||||
};
|
||||
export const columns: ColumnDef<DataProps>[] = [
|
||||
// {
|
||||
// id: "select",
|
||||
// header: ({ table }) => (
|
||||
// <Checkbox
|
||||
// checked={
|
||||
// table.getIsAllPageRowsSelected() ||
|
||||
// (table.getIsSomePageRowsSelected() && "indeterminate")
|
||||
// }
|
||||
// onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
|
||||
// aria-label="Select all"
|
||||
// />
|
||||
// ),
|
||||
// cell: ({ row }) => (
|
||||
// <div className="xl:w-16">
|
||||
// <Checkbox
|
||||
// checked={row.getIsSelected()}
|
||||
// onCheckedChange={(value) => row.toggleSelected(!!value)}
|
||||
// aria-label="Select row"
|
||||
// />
|
||||
// </div>
|
||||
// ),
|
||||
// enableSorting: false,
|
||||
// enableHiding: false,
|
||||
// },
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("id")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "order",
|
||||
header: "Judul",
|
||||
cell: ({ row }) => (
|
||||
<div className="w-52">
|
||||
<span>{row.getValue("order")}</span>,
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "customer",
|
||||
header: "Kategory",
|
||||
cell: ({ row }) => {
|
||||
const user = row.original.customer;
|
||||
return (
|
||||
<div className="font-medium text-card-foreground/80">
|
||||
<div className="flex gap-3 items-center">
|
||||
<span className="text-sm text-default-600 whitespace-nowrap">
|
||||
{user?.name ?? "Unknown User"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "date",
|
||||
header: "Tanggal unggah",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("date")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "quantity",
|
||||
header: "Kreator",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("quantity")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Sumber",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Penempatan File",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => {
|
||||
const statusColors: Record<string, string> = {
|
||||
paid: "bg-success/20 text-success",
|
||||
due: "bg-warning/20 text-warning",
|
||||
canceled: "bg-destructive/20 text-destructive",
|
||||
};
|
||||
const status = row.getValue<string>("status");
|
||||
const statusStyles = statusColors[status] || "default";
|
||||
return (
|
||||
<Badge className={cn("rounded-full px-5", statusStyles)}>
|
||||
{status}{" "}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Kurasi Konten",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "Saran",
|
||||
cell: ({ row }) => {
|
||||
return <span>{row.getValue("amount")}</span>;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Actions",
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||
>
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Eye className="w-4 h-4 me-1.5" />
|
||||
View
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<SquarePen className="w-4 h-4 me-1.5" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
||||
<Trash2 className="w-4 h-4 me-1.5" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
import { DataProps } from "./columns";
|
||||
|
||||
export const data: DataProps[] = [
|
||||
{
|
||||
id: 1,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "3/26/2022",
|
||||
quantity: 13,
|
||||
amount: "$1779.53",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "2/6/2022",
|
||||
quantity: 13,
|
||||
amount: "$2215.78",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "9/6/2021",
|
||||
quantity: 1,
|
||||
amount: "$3183.60",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Liputan Kegiatan",
|
||||
},
|
||||
date: "11/7/2021",
|
||||
quantity: 13,
|
||||
amount: "$2587.86",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Rachel Brown",
|
||||
},
|
||||
date: "5/6/2022",
|
||||
quantity: 12,
|
||||
amount: "$3840.73",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Megan Taylor",
|
||||
},
|
||||
date: "2/14/2022",
|
||||
quantity: 12,
|
||||
amount: "$4764.18",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Sophie Clark",
|
||||
},
|
||||
date: "7/30/2022",
|
||||
quantity: 6,
|
||||
amount: "$2875.05",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Natalie Martin",
|
||||
},
|
||||
date: "6/30/2022",
|
||||
quantity: 9,
|
||||
amount: "$2491.02",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Hannah Lewis",
|
||||
},
|
||||
date: "8/9/2022",
|
||||
quantity: 8,
|
||||
amount: "$3006.95",
|
||||
status: "due",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Lisa White",
|
||||
},
|
||||
date: "8/4/2022",
|
||||
quantity: 12,
|
||||
amount: "$2160.32",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Emma Walker",
|
||||
},
|
||||
date: "4/5/2022",
|
||||
quantity: 8,
|
||||
amount: "$1272.66",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "8/9/2022",
|
||||
quantity: 2,
|
||||
amount: "$4327.86",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "2/10/2022",
|
||||
quantity: 11,
|
||||
amount: "$3671.81",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "2/10/2022",
|
||||
quantity: 2,
|
||||
amount: "$3401.82",
|
||||
status: "paid",
|
||||
action: null,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
|
||||
customer: {
|
||||
name: "Jenny Wilson",
|
||||
},
|
||||
date: "5/20/2022",
|
||||
quantity: 4,
|
||||
amount: "$2387.49",
|
||||
status: "canceled",
|
||||
action: null,
|
||||
},
|
||||
];
|
||||
|
|
@ -24,9 +24,6 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import { data } from "./data";
|
||||
import TablePagination from "./table-pagination";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { format } from "date-fns";
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -1,52 +0,0 @@
|
|||
import { Button } from '@/components/ui/button';
|
||||
import { Table } from '@tanstack/react-table';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
interface DataTablePaginationProps {
|
||||
table: Table<any>;
|
||||
}
|
||||
|
||||
const TablePagination = ({ table }: DataTablePaginationProps) => {
|
||||
return (
|
||||
<div className="flex items-center justify-end py-4 px-10">
|
||||
<div className="flex-1 text-sm text-muted-foreground">
|
||||
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
||||
{table.getFilteredRowModel().rows.length} row(s) selected.
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-none">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className='w-8 h-8'
|
||||
>
|
||||
<ChevronLeft className='w-4 h-4' />
|
||||
</Button>
|
||||
{table.getPageOptions().map((page, pageIndex) => (
|
||||
<Button
|
||||
key={`basic-data-table-${pageIndex}`}
|
||||
onClick={() => table.setPageIndex(pageIndex)}
|
||||
size="icon"
|
||||
className="w-8 h-8"
|
||||
variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
|
||||
>
|
||||
{page + 1}
|
||||
</Button>
|
||||
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className='w-8 h-8'
|
||||
>
|
||||
<ChevronRight className='w-4 h-4' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TablePagination;
|
||||
|
|
@ -52,16 +52,12 @@ const ReactTableNulisPage = () => {
|
|||
<Card className="py-4 px-3">
|
||||
<div className="flex flex-row justify-between items-center">
|
||||
<div className="flex-1 text-xl font-medium text-default-900">
|
||||
Konten Foto
|
||||
Konten Nulis Ai
|
||||
</div>
|
||||
<div>
|
||||
<Button color="primary" className="text-white">
|
||||
<UploadIcon />
|
||||
Unggah Foto
|
||||
</Button>
|
||||
<Button color="primary" className="text-white ml-3">
|
||||
<UploadIcon />
|
||||
Unggah Foto Dengan AI
|
||||
Unggah Nulis AI
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
PaginationState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
|
|
@ -12,7 +14,6 @@ import {
|
|||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { columns } from "./columns";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
import {
|
||||
|
|
@ -26,6 +27,117 @@ import {
|
|||
|
||||
import { data } from "./data";
|
||||
import TablePagination from "./table-pagination";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { format } from "date-fns";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { title } from "process";
|
||||
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import { listDataImage, listNulisAI } from "@/service/content/content";
|
||||
import page from "../page";
|
||||
|
||||
export type CompanyData = {
|
||||
no: number;
|
||||
title: string;
|
||||
description: string;
|
||||
tags: string;
|
||||
category: string;
|
||||
};
|
||||
|
||||
export const columns: ColumnDef<CompanyData>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="flex-1 text-start">
|
||||
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
|
||||
{row.getValue("no")}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Judul",
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="flex-1 text-start">
|
||||
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
|
||||
{row.getValue("title")}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "description",
|
||||
header: "Deskripsi",
|
||||
cell: ({ row }) => (
|
||||
<span className="whitespace-nowrap">{row.getValue("description")}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "tags",
|
||||
header: "Tag",
|
||||
cell: ({ row }) => (
|
||||
<span className="whitespace-nowrap">{row.getValue("tags")}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "category",
|
||||
header: "Kategori",
|
||||
cell: ({ row }) => (
|
||||
<span className="whitespace-nowrap">{row.getValue("category")}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Actions",
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||
>
|
||||
<span className="sr-only">Open menu</span>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<a href="/en/task/detail/[id]">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Eye className="w-4 h-4 me-1.5" />
|
||||
View
|
||||
</DropdownMenuItem>
|
||||
</a>
|
||||
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
||||
<Trash2 className="w-4 h-4 me-1.5" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const TableNulis = () => {
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
|
|
@ -35,9 +147,29 @@ const TableNulis = () => {
|
|||
const [columnVisibility, setColumnVisibility] =
|
||||
React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [nulisTable, setNulisTable] = React.useState<CompanyData[]>([]);
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0, // Halaman pertama
|
||||
pageSize: 10, // Jumlah baris per halaman
|
||||
});
|
||||
const [totalPage, setTotalPage] = React.useState<number>(10);
|
||||
const [limit, setLimit] = React.useState<number>(10); // Jumlah baris per halaman
|
||||
const [search, setSearch] = React.useState<string>("");
|
||||
const userId = getCookiesDecrypt("uie");
|
||||
const userLevelId = getCookiesDecrypt("ulie");
|
||||
|
||||
const [categories, setCategories] = React.useState();
|
||||
const [categoryFilter, setCategoryFilter] = React.useState([]);
|
||||
const [statusFilter, setStatusFilter] = React.useState([]);
|
||||
const [startDateString, setStartDateString] = React.useState("");
|
||||
const [endDateString, setEndDateString] = React.useState("");
|
||||
const [filterByCreator, setFilterByCreator] = React.useState("");
|
||||
const [filterBySource, setFilterBySource] = React.useState("");
|
||||
|
||||
const roleId = getCookiesDecrypt("urie");
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
data: nulisTable,
|
||||
columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
|
|
@ -55,6 +187,48 @@ const TableNulis = () => {
|
|||
},
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
initState();
|
||||
}, [limit]);
|
||||
|
||||
async function initState() {
|
||||
try {
|
||||
const isForSelf = Number(roleId) === 4;
|
||||
const res = await listNulisAI(
|
||||
pagination.pageSize,
|
||||
pagination.pageIndex + 1
|
||||
);
|
||||
|
||||
setupData(res.data?.data);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tasks:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function setupData(rawData: {
|
||||
content: any[];
|
||||
totalPages: number;
|
||||
totalElements: number;
|
||||
}) {
|
||||
if (rawData?.content) {
|
||||
const data: CompanyData[] = rawData.content.map((item, index) => ({
|
||||
no: pagination.pageIndex * pagination.pageSize + index + 1,
|
||||
title: item.title,
|
||||
description: item.description,
|
||||
tags: item.tags,
|
||||
category: item.category.name,
|
||||
isDone: item.isDone,
|
||||
publishedOn: item.publishedOn,
|
||||
isPublish: item.isPublish,
|
||||
isPublishOnPolda: item.isPublishOnPolda,
|
||||
}));
|
||||
|
||||
setNulisTable(data);
|
||||
setTotalPage(rawData.totalPages);
|
||||
console.log(data, "dataImage");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex items-center py-4 px-5">
|
||||
|
|
@ -72,22 +246,20 @@ const TableNulis = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<Table className="overflow-hidden">
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
return (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
<TableRow key={headerGroup.id} className="bg-default-200">
|
||||
{headerGroup.headers.map((header) => (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
|
|
@ -97,6 +269,7 @@ const TableNulis = () => {
|
|||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
className="h-[75px]"
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
|
|
@ -114,7 +287,41 @@ const TableNulis = () => {
|
|||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<TablePagination table={table} />
|
||||
<div className="flex items-center justify-center py-4 gap-2 flex-none">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
className="w-8 h-8"
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
{table.getPageOptions().map((page, pageIndex) => (
|
||||
<Button
|
||||
key={`basic-data-table-${pageIndex}`}
|
||||
onClick={() => table.setPageIndex(pageIndex)}
|
||||
size="icon"
|
||||
className="w-8 h-8"
|
||||
variant={
|
||||
table.getState().pagination.pageIndex === pageIndex
|
||||
? "default"
|
||||
: "outline"
|
||||
}
|
||||
>
|
||||
{page + 1}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
className="w-8 h-8"
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -251,46 +251,46 @@ const TableSPIT = () => {
|
|||
},
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
initState();
|
||||
}, [page, limit]);
|
||||
// React.useEffect(() => {
|
||||
// initState();
|
||||
// }, [page, limit]);
|
||||
|
||||
async function initState() {
|
||||
try {
|
||||
const isForSelf = Number(roleId) == 4;
|
||||
// async function initState() {
|
||||
// try {
|
||||
// const isForSelf = Number(roleId) == 4;
|
||||
|
||||
let isPublish;
|
||||
if (statusFilter.length > 1) {
|
||||
isPublish = "";
|
||||
} else if (statusFilter.length === 1) {
|
||||
if (statusFilter.includes(1)) {
|
||||
isPublish = false;
|
||||
} else {
|
||||
isPublish = true;
|
||||
}
|
||||
} else {
|
||||
isPublish = undefined;
|
||||
}
|
||||
const res = await listSPIT(pages, limit, search, isPublish);
|
||||
const data = res.data.data.content.map((item: any, index: number) => ({
|
||||
no: (page - 1) * limit + index + 1,
|
||||
title: item.title,
|
||||
categoryName: item.categoryName,
|
||||
creatorGroup: item.creatorGroup,
|
||||
assignmentType: item.assignmentType?.name || "-",
|
||||
createdAt: item.createdAt,
|
||||
isDone: item.isDone,
|
||||
publishedOn: item.publishedOn,
|
||||
isPublish: item.isPublish,
|
||||
isPublishOnPolda: item.isPublishOnPolda,
|
||||
}));
|
||||
// let isPublish;
|
||||
// if (statusFilter.length > 1) {
|
||||
// isPublish = "";
|
||||
// } else if (statusFilter.length === 1) {
|
||||
// if (statusFilter.includes(1)) {
|
||||
// isPublish = false;
|
||||
// } else {
|
||||
// isPublish = true;
|
||||
// }
|
||||
// } else {
|
||||
// isPublish = undefined;
|
||||
// }
|
||||
// const res = await listSPIT(pages, limit, search, isPublish);
|
||||
// const data = res.data.data.content.map((item: any, index: number) => ({
|
||||
// no: (page - 1) * limit + index + 1,
|
||||
// title: item.title,
|
||||
// categoryName: item.categoryName,
|
||||
// creatorGroup: item.creatorGroup,
|
||||
// assignmentType: item.assignmentType?.name || "-",
|
||||
// createdAt: item.createdAt,
|
||||
// isDone: item.isDone,
|
||||
// publishedOn: item.publishedOn,
|
||||
// isPublish: item.isPublish,
|
||||
// isPublishOnPolda: item.isPublishOnPolda,
|
||||
// }));
|
||||
|
||||
setSpitTable(data);
|
||||
setTotalPage(res.data.totalPages);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tasks:", error);
|
||||
}
|
||||
}
|
||||
// setSpitTable(data);
|
||||
// setTotalPage(res.data.totalPages);
|
||||
// } catch (error) {
|
||||
// console.error("Error fetching tasks:", error);
|
||||
// }
|
||||
// }
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default function FormImage() {
|
|||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
const [tags, setTags] = useState<any[]>([]);
|
||||
|
||||
const [selectedTarget, setSelectedTarget] = useState("all");
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [unitSelection, setUnitSelection] = useState({
|
||||
allUnit: false,
|
||||
mabes: false,
|
||||
|
|
@ -67,7 +67,7 @@ export default function FormImage() {
|
|||
polres: false,
|
||||
});
|
||||
|
||||
let fileTypeId = "";
|
||||
let fileTypeId = "1";
|
||||
|
||||
const {
|
||||
control,
|
||||
|
|
@ -218,13 +218,19 @@ export default function FormImage() {
|
|||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<Select onValueChange={setSelectedTarget}>
|
||||
<Select
|
||||
value={selectedTarget} // Ensure selectedTarget is updated correctly
|
||||
onValueChange={(value) => {
|
||||
console.log("Selected Category ID:", value);
|
||||
setSelectedTarget(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((category: any) => (
|
||||
<SelectItem key={category.id} value={category.id}>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category.id} value={category.name}>
|
||||
{category.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
|
|
@ -0,0 +1,440 @@
|
|||
"use client";
|
||||
import React, { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import JoditEditor from "jodit-react";
|
||||
import { register } from "module";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import Cookies from "js-cookie";
|
||||
import { createTask } from "@/config/api";
|
||||
import {
|
||||
createMedia,
|
||||
getTagsBySubCategoryId,
|
||||
listEnableCategory,
|
||||
} from "@/service/content/content";
|
||||
|
||||
const taskSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
description: z
|
||||
.string()
|
||||
.min(2, { message: "Narasi Penugasan harus lebih dari 2 karakter." }),
|
||||
creatorName: z.string().min(1, { message: "Creator diperlukan" }),
|
||||
// tags: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
});
|
||||
|
||||
type Category = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export default function FormVideo() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const router = useRouter();
|
||||
const editor = useRef(null);
|
||||
type TaskSchema = z.infer<typeof taskSchema>;
|
||||
|
||||
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
|
||||
const taskId = Cookies.get("taskId");
|
||||
const scheduleId = Cookies.get("scheduleId");
|
||||
const scheduleType = Cookies.get("scheduleType");
|
||||
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategory, setSelectedCategory] = useState<any>();
|
||||
const [tags, setTags] = useState<any[]>([]);
|
||||
|
||||
const [selectedTarget, setSelectedTarget] = useState("");
|
||||
const [unitSelection, setUnitSelection] = useState({
|
||||
allUnit: false,
|
||||
mabes: false,
|
||||
polda: false,
|
||||
polres: false,
|
||||
});
|
||||
|
||||
let fileTypeId = "2";
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<TaskSchema>({
|
||||
resolver: zodResolver(taskSchema),
|
||||
});
|
||||
|
||||
// const handleKeyDown = (e: any) => {
|
||||
// const newTag = e.target.value.trim(); // Ambil nilai input
|
||||
// if (e.key === "Enter" && newTag) {
|
||||
// e.preventDefault(); // Hentikan submit form
|
||||
// if (!tags.includes(newTag)) {
|
||||
// setTags((prevTags) => [...prevTags, newTag]); // Tambah tag baru
|
||||
// setValue("tags", ""); // Kosongkan input
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
const handleRemoveTag = (index: any) => {
|
||||
setTags((prevTags) => prevTags.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files) {
|
||||
const files = Array.from(event.target.files);
|
||||
setSelectedFiles((prevImages: any) => [...prevImages, ...files]);
|
||||
console.log("DATAFILE::", selectedFiles);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveImage = (index: number) => {
|
||||
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
getCategories();
|
||||
// setVideoActive(fileTypeId == '2');
|
||||
// getRoles();
|
||||
}
|
||||
|
||||
initState();
|
||||
}, []);
|
||||
|
||||
const getCategories = async () => {
|
||||
try {
|
||||
const category = await listEnableCategory(fileTypeId);
|
||||
const resCategory: Category[] = category.data.data.content;
|
||||
|
||||
setCategories(resCategory);
|
||||
console.log("data category", resCategory);
|
||||
|
||||
if (scheduleId && scheduleType === "3") {
|
||||
const findCategory = resCategory.find((o) =>
|
||||
o.name.toLowerCase().includes("pers rilis")
|
||||
);
|
||||
|
||||
if (findCategory) {
|
||||
// setValue("categoryId", findCategory.id);
|
||||
setSelectedCategory(findCategory.id); // Set the selected category
|
||||
const response = await getTagsBySubCategoryId(findCategory.id);
|
||||
setTags(response?.data.data);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch categories:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const save = async (data: TaskSchema) => {
|
||||
const requestData = {
|
||||
...data,
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
htmlDescription: data.description,
|
||||
fileTypeId,
|
||||
categoryId: selectedTarget,
|
||||
subCategoryId: selectedTarget,
|
||||
uploadedBy: "2b7c8d83-d298-4b19-9f74-b07924506b58",
|
||||
statusId: "1",
|
||||
publishedFor: 1,
|
||||
creatorName: data.creatorName,
|
||||
tags: "siap",
|
||||
isYoutube: false,
|
||||
isInternationalMedia: false,
|
||||
};
|
||||
|
||||
const response = await createMedia(requestData);
|
||||
console.log("Form Data Submitted:", requestData);
|
||||
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
text: "Data berhasil disimpan.",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then(() => {
|
||||
router.push("/en/content/audio-visual");
|
||||
});
|
||||
};
|
||||
|
||||
const onSubmit = (data: TaskSchema) => {
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "Simpan",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
save(data);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex lg:flex-row gap-10">
|
||||
<Card className="w-full lg:w-8/12">
|
||||
<div className="px-6 py-6">
|
||||
<p className="text-lg font-semibold mb-3">Form Konten Video</p>
|
||||
<div className="gap-5 mb-5">
|
||||
{/* Input Title */}
|
||||
<div className="space-y-2 py-3">
|
||||
<Label>Judul</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.title?.message && (
|
||||
<p className="text-red-400 text-sm">{errors.title.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="py-3 w-full">
|
||||
<Label>Kategori</Label>
|
||||
<Select
|
||||
value={selectedTarget} // Ensure selectedTarget is updated correctly
|
||||
onValueChange={(value) => {
|
||||
console.log("Selected Category ID:", value);
|
||||
setSelectedTarget(value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger size="md">
|
||||
<SelectValue placeholder="Pilih" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{categories.map((category) => (
|
||||
<SelectItem key={category.id} value={category.name}>
|
||||
{category.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Deskripsi</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="description"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<JoditEditor
|
||||
ref={editor}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
className="dark:text-black"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.description?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.description.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="py-3">
|
||||
<Label>Attachment</Label>
|
||||
<div className="flex items-center justify-center w-full pt-2">
|
||||
<label
|
||||
htmlFor="dropzone-file"
|
||||
className="flex flex-col items-center justify-center w-full h-[155px] border-2 border-black border-dashed rounded-lg cursor-pointer dark:bg-black dark:hover:bg-bray-800 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center pt-5 pb-6 ">
|
||||
<svg
|
||||
className="w-10 h-10 mb-3 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
{/* or{" "} */}
|
||||
<span className="font-semibold underline text-amber-800">
|
||||
Click to upload
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<input
|
||||
id="dropzone-file"
|
||||
type="file"
|
||||
className="hidden"
|
||||
onChange={handleImageChange}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-3 py-3">
|
||||
<Label>Gunakan Watermark</Label>
|
||||
<div className="flex items-center gap-3">
|
||||
<Switch defaultChecked color="primary" id="c2" />
|
||||
</div>
|
||||
</div>
|
||||
{selectedFiles?.length > 0 ? (
|
||||
<div className="pt-2">
|
||||
<div className="flex gap-3">
|
||||
{selectedFiles.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex flex-row items-center justify-between gap-1"
|
||||
>
|
||||
<img
|
||||
src={URL.createObjectURL(image)}
|
||||
alt="Pratinjau Gambar"
|
||||
style={{ maxWidth: "200px", maxHeight: "200px" }}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<button
|
||||
className="text-blue-600 hover:text-blue-800 focus:outline-none"
|
||||
onClick={() => handleRemoveImage(index)}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
</div>
|
||||
</Card>
|
||||
<div className="w-4/12">
|
||||
<Card className=" h-[500px]">
|
||||
<div className="px-3 py-3">
|
||||
<div className="space-y-2">
|
||||
<Label>Kreator</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="creatorName"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.creatorName?.message && (
|
||||
<p className="text-red-400 text-sm">
|
||||
{errors.creatorName.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<Label>Tags</Label>
|
||||
{/* <Controller
|
||||
control={control}
|
||||
name="tags"
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
size="md"
|
||||
type="text"
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
placeholder="Enter Title"
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
)}
|
||||
/> */}
|
||||
<div className="text-sm text-red-500">
|
||||
{tags.length === 0 && "Please add at least one tag."}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 border border-gray-300 mt-2 rounded-md p-2 items-center">
|
||||
{tags.map((tag, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-1 bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-medium"
|
||||
>
|
||||
<span>{tag}</span>
|
||||
<button
|
||||
className="text-blue-600 hover:text-blue-800 focus:outline-none"
|
||||
onClick={() => handleRemoveTag(index)}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-3">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Label>Target Publish</Label>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="all" />
|
||||
<Label htmlFor="all">SEMUA</Label>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="umum" />
|
||||
<Label htmlFor="umum">UMUM</Label>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="journalist" />
|
||||
<Label htmlFor="journalist">JOURNALIS</Label>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="polri" />
|
||||
<Label htmlFor="polri">POLRI</Label>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="ksp" />
|
||||
<Label htmlFor="ksp">KSP</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-row justify-end gap-3">
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button type="submit" color="primary" variant="outline">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,13 +1,5 @@
|
|||
import {
|
||||
getAPI,
|
||||
getAPIInterceptor,
|
||||
postAPI,
|
||||
postAPIInterceptor,
|
||||
} from "@/config/api";
|
||||
import {
|
||||
httpGetInterceptor,
|
||||
httpGetInterceptorWithToken,
|
||||
} from "../http-config/http-interceptor-service";
|
||||
import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
|
||||
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
|
||||
|
||||
export async function listDataImage(
|
||||
page: any,
|
||||
|
|
@ -88,7 +80,13 @@ export async function listSPIT(
|
|||
isPublish: any
|
||||
) {
|
||||
return await httpGetInterceptor(
|
||||
`media/spit/pagination?enablePage=1&page=${page}&size=${limit}&sort=desc&sortBy=contentTitleId&title=${title}&isPublish=${isPublish}`
|
||||
`media/spit/pagination?enablePage=0&page=${page}&size=${limit}&sort=desc&sortBy=contentTitleId&title=${title}&isPublish=${isPublish}`
|
||||
);
|
||||
}
|
||||
|
||||
export async function listNulisAI(page: any, limit: any) {
|
||||
return await getAPIInterceptor(
|
||||
`media/nulis-ai/pagination?enablePage=0&page=${page}&size=${limit}`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -109,6 +107,6 @@ export async function getTags() {
|
|||
}
|
||||
|
||||
export async function createMedia(data: any) {
|
||||
const url = "media";
|
||||
return postAPIInterceptor(url, data);
|
||||
const pathUrl = "media";
|
||||
return postAPIInterceptor(pathUrl, data);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue