feat:fix table task,indeks,perencanaan,image

This commit is contained in:
Anang Yusman 2024-12-05 00:28:40 +07:00
parent 831d044011
commit d424eff71a
25 changed files with 1713 additions and 408 deletions

View File

@ -46,17 +46,33 @@ import {
} from "@/components/ui/dropdown-menu";
export type CompanyData = {
no: number;
title: string;
category: string;
date: string;
tag: string;
status: string;
createdAt: string;
tags: string;
statusName: string;
};
import { data } from "./data";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { listTask } from "@/service/ppid-categories-services";
import { paginationBlog } from "@/service/blog/blog";
export const columns: ColumnDef<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",
@ -71,33 +87,33 @@ export const columns: ColumnDef<CompanyData>[] = [
),
},
{
accessorKey: "category",
accessorKey: "categoryName",
header: "Kategori ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("category")}</span>
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
),
},
{
accessorKey: "date",
accessorKey: "createdAt",
header: "Tanggal Unggah ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("date")}</span>
<span className="whitespace-nowrap">{row.getValue("createdAt")}</span>
),
},
{
accessorKey: "tag",
accessorKey: "tags",
header: "Tag ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("tag")}</span>
<span className="whitespace-nowrap">{row.getValue("tags")}</span>
),
},
{
accessorKey: "status",
accessorKey: "statusName",
header: "Status",
cell: ({ row }) => {
return (
<span className="whitespace-nowrap text-blue-600">
{row.getValue("status")}
{row.getValue("statusName")}
</span>
);
},
@ -140,6 +156,7 @@ export const columns: ColumnDef<CompanyData>[] = [
];
const BlogTable = () => {
const [blogTable, setBlogTable] = React.useState<CompanyData[]>([]);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
@ -148,12 +165,15 @@ const BlogTable = () => {
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: 6,
pageIndex: 0, // Halaman pertama
pageSize: 10, // Jumlah baris per halaman
});
const [page, setPage] = React.useState(1); // Halaman aktif
const [totalPage, setTotalPage] = React.useState(1); // Total halaman
const [limit, setLimit] = React.useState(10);
const table = useReactTable({
data,
data: blogTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
@ -173,6 +193,30 @@ const BlogTable = () => {
},
});
React.useEffect(() => {
initState();
}, [page, limit]);
async function initState() {
try {
const res = await paginationBlog(limit, page);
const data = res.data.data.content.map((item: any, index: number) => ({
no: (page - 1) * limit + index + 1, // Hitung nomor urut
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); // Total halaman
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full overflow-x-auto">
<div className="flex justify-between items-center py-4 px-5">

View File

@ -0,0 +1,17 @@
import { Card, CardContent } from "@/components/ui/card";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormTask from "@/components/form/task/task-form";
import FormImage from "@/components/form/content/create-form";
const ImageCreatePage = async () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<FormImage />
</div>
</div>
);
};
export default ImageCreatePage;

View File

@ -5,6 +5,7 @@ import TableImage from "./table-image";
import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Icon } from "@iconify/react/dist/iconify.js";
import { Link } from "@/components/navigation";
const ReactTableImagePage = () => {
return (
@ -54,10 +55,12 @@ const ReactTableImagePage = () => {
Konten Foto
</div>
<div>
<Button color="primary" className="text-white">
<UploadIcon />
Unggah Foto
</Button>
<Link href={"/content/image/create"}>
<Button color="primary" className="text-white">
<UploadIcon />
Unggah Foto
</Button>
</Link>
<Button color="primary" className="text-white ml-3">
<UploadIcon />
Unggah Foto Dengan AI

View File

@ -2,7 +2,9 @@
import * as React from "react";
import {
ColumnDef,
ColumnFiltersState,
PaginationState,
SortingState,
VisibilityState,
flexRender,
@ -12,7 +14,6 @@ import {
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table";
import { columns } from "./columns";
import { Input } from "@/components/ui/input";
import {
@ -26,8 +27,177 @@ import {
import { data } from "./data";
import TablePagination from "./table-pagination";
import { Button } from "@/components/ui/button";
import { format } from "date-fns";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
ChevronLeft,
ChevronRight,
Eye,
MoreVertical,
Trash2,
} from "lucide-react";
import { title } from "process";
import { getCookiesDecrypt } from "@/lib/utils";
import { listDataImage } from "@/service/content/content-image";
export type CompanyData = {
no: number;
title: string;
categoryName: string;
createdAt: string;
creatorGroup: string;
publishedOn: string;
isPublish: any;
isPublishOnPolda: any;
isDone: string;
};
export const columns: ColumnDef<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: "categoryName",
header: "Kategori",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
),
},
{
accessorKey: "createdAt",
header: "Tanggal Unggah",
cell: ({ row }) => {
const createdAt = row.getValue("createdAt") as
| string
| number
| undefined;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
accessorKey: "creatorGroup",
header: "Sumber ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("creatorGroup")}</span>
),
},
{
accessorKey: "publishedOn",
header: "Penempatan File",
cell: ({ row }) => {
const isPublish = row.original.isPublish;
const isPublishOnPolda = row.original.isPublishOnPolda;
let displayText = "-";
if (isPublish && !isPublishOnPolda) {
displayText = "Mabes";
} else if (isPublish && isPublishOnPolda) {
displayText = "Mabes & Polda";
} else if (!isPublish && isPublishOnPolda) {
displayText = "Polda";
}
return (
<div className="text-center whitespace-nowrap" title={displayText}>
{displayText}
</div>
);
},
},
{
accessorKey: "isDone",
header: "Status",
cell: ({ row }) => {
const isDone = row.getValue<boolean>("isDone");
return (
<div>
<Button
size="sm"
color="success"
variant="outline"
className={` btn btn-sm ${
isDone ? "btn-outline-success" : "btn-outline-primary"
} pill-btn ml-1`}
>
{isDone ? "Selesai" : "Aktif"}
</Button>
</div>
);
},
},
{
id: "actions",
accessorKey: "action",
header: "Actions",
enableHiding: false,
cell: ({ row }) => {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="icon"
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
>
<span className="sr-only">Open menu</span>
<MoreVertical className="h-4 w-4 text-default-800" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
<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 TableImage = () => {
const [imageTable, setImageTable] = React.useState<CompanyData[]>([]);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
@ -35,9 +205,29 @@ const TableImage = () => {
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, // Halaman pertama
pageSize: 10, // Jumlah baris per halaman
});
const [page, setPage] = React.useState(1); // Halaman aktif
const [totalPage, setTotalPage] = React.useState(1); // Total halaman
const [limit, setLimit] = React.useState(10); // Jumlah baris per halaman
const [search, setSearch] = React.useState(title);
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const [categories, setCategories] = React.useState();
const [categoryFilter, setCategoryFilter] = React.useState([]);
const [statusFilter, setStatusFilter] = React.useState([]);
const [startDateString, setStartDateString] = React.useState("");
const [endDateString, setEndDateString] = React.useState("");
const [filterByCreator, setFilterByCreator] = React.useState("");
const [filterBySource, setFilterBySource] = React.useState("");
const roleId = getCookiesDecrypt("urie");
const table = useReactTable({
data,
data: imageTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
@ -55,6 +245,48 @@ const TableImage = () => {
},
});
React.useEffect(() => {
initState();
}, [page, limit]);
async function initState() {
try {
const isForSelf = Number(roleId) == 4;
const res = await listDataImage(
limit,
page,
isForSelf,
!isForSelf,
categoryFilter?.sort().join(","),
statusFilter?.sort().join(",").includes("1")
? "1,2"
: statusFilter?.sort().join(","),
statusFilter?.sort().join(",").includes("1") ? userLevelId : "",
filterByCreator,
filterBySource,
startDateString,
endDateString
);
const data = res.data.data.content.map((item: any, index: number) => ({
no: (page - 1) * limit + index + 1, // Hitung nomor urut
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,
}));
setImageTable(data);
setTotalPage(res.data.totalPages); // Total halaman
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full">
<div className="flex items-center py-4 px-5">
@ -72,22 +304,20 @@ const TableImage = () => {
</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 +327,7 @@ const TableImage = () => {
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
className="h-[75px]"
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
@ -114,7 +345,41 @@ const TableImage = () => {
)}
</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>
);
};

View File

@ -46,15 +46,32 @@ import {
} from "@/components/ui/dropdown-menu";
export type CompanyData = {
no: number;
title: string;
date: string;
status: string;
isActive: boolean;
};
import { data } from "./data";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { listTask } from "@/service/ppid-categories-services";
import page from "../page";
import { getPlanningSentPagination } from "@/service/planning/planning";
export const columns: ColumnDef<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",
@ -69,20 +86,26 @@ export const columns: ColumnDef<CompanyData>[] = [
),
},
{
accessorKey: "date",
accessorKey: "createdAt",
header: "Tanggal Unggah ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("date")}</span>
<span className="whitespace-nowrap">{row.getValue("createdAt")}</span>
),
},
{
accessorKey: "status",
accessorKey: "isActive",
header: "Status",
cell: ({ row }) => {
const isActive = row.getValue<boolean>("isActive");
console.log("isActive value:", isActive); // TypeScript type is inferred correctly
return (
<span className="whitespace-nowrap text-blue-600">
{row.getValue("status")}
</span>
<div>
{isActive ? (
<b className="text-info">Terkirim</b>
) : (
<b className="text-danger">Belum Terkirim</b>
)}
</div>
);
},
},
@ -124,6 +147,7 @@ export const columns: ColumnDef<CompanyData>[] = [
];
const MediahubTable = () => {
const [mediahubTable, setMediahubTable] = React.useState<CompanyData[]>([]);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
@ -132,12 +156,16 @@ const MediahubTable = () => {
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: 6,
pageIndex: 0, // Halaman pertama
pageSize: 10, // Jumlah baris per halaman
});
const [page, setPage] = React.useState(1); // Halaman aktif
const [totalPage, setTotalPage] = React.useState(1); // Total halaman
const [limit, setLimit] = React.useState(10); // Jumlah baris per halaman
// const [search, setSearch] = React.useState(title);
const table = useReactTable({
data,
data: mediahubTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
@ -157,6 +185,27 @@ const MediahubTable = () => {
},
});
React.useEffect(() => {
initState();
}, [page, limit]);
async function initState() {
try {
const res = await getPlanningSentPagination(limit, page, 1);
const data = res.data.data.content.map((item: any, index: number) => ({
no: (page - 1) * limit + index + 1, // Hitung nomor urut
title: item.title,
createdAt: item.createdAt,
isActive: item.isActive === true,
}));
setMediahubTable(data);
setTotalPage(res.data.totalPages); // Total halaman
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full overflow-x-auto">
<div className="flex justify-between items-center py-4 px-5">

View File

@ -46,15 +46,32 @@ import {
} from "@/components/ui/dropdown-menu";
export type CompanyData = {
no: number;
title: string;
date: string;
status: string;
isActive: boolean;
};
import { data } from "./data";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { listTask } from "@/service/ppid-categories-services";
import page from "../page";
import { getPlanningSentPagination } from "@/service/planning/planning";
export const columns: ColumnDef<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",
@ -69,20 +86,26 @@ export const columns: ColumnDef<CompanyData>[] = [
),
},
{
accessorKey: "date",
accessorKey: "createdAt",
header: "Tanggal Unggah ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("date")}</span>
<span className="whitespace-nowrap">{row.getValue("createdAt")}</span>
),
},
{
accessorKey: "status",
accessorKey: "isActive",
header: "Status",
cell: ({ row }) => {
const isActive = row.getValue<boolean>("isActive");
console.log("isActive value:", isActive); // TypeScript type is inferred correctly
return (
<span className="whitespace-nowrap text-blue-600">
{row.getValue("status")}
</span>
<div>
{isActive ? (
<b className="text-info">Terkirim</b>
) : (
<b className="text-danger">Belum Terkirim</b>
)}
</div>
);
},
},
@ -124,6 +147,7 @@ export const columns: ColumnDef<CompanyData>[] = [
];
const MedsosTable = () => {
const [mediahubTable, setMediahubTable] = React.useState<CompanyData[]>([]);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
@ -132,12 +156,16 @@ const MedsosTable = () => {
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: 6,
pageIndex: 0, // Halaman pertama
pageSize: 10, // Jumlah baris per halaman
});
const [page, setPage] = React.useState(1); // Halaman aktif
const [totalPage, setTotalPage] = React.useState(1); // Total halaman
const [limit, setLimit] = React.useState(10); // Jumlah baris per halaman
// const [search, setSearch] = React.useState(title);
const table = useReactTable({
data,
data: mediahubTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
@ -157,6 +185,27 @@ const MedsosTable = () => {
},
});
React.useEffect(() => {
initState();
}, [page, limit]);
async function initState() {
try {
const res = await getPlanningSentPagination(limit, page, 2);
const data = res.data.data.content.map((item: any, index: number) => ({
no: (page - 1) * limit + index + 1, // Hitung nomor urut
title: item.title,
createdAt: item.createdAt,
isActive: item.isActive === true,
}));
setMediahubTable(data);
setTotalPage(res.data.totalPages); // Total halaman
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full overflow-x-auto">
<div className="flex justify-between items-center py-4 px-5">

View File

@ -1,106 +0,0 @@
export const data = [
{
title: "Giat Pimpinan",
code: "PNMH-1287",
status: "paid",
date: "$231.26",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Liputan Kegiatan",
code: "PNMH-1287",
status: "due",
date: "$432.81",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Giat Pimpinan",
code: "PNMH-1287",
status: "due",
date: "$437.65",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Pers Rilis",
code: "PNMH-1287",
status: "canceled",
date: "$387.55",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Giat Pimpinan",
code: "PNMH-1287",
status: "canceled",
date: "$489.80",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Liputan Kegiatan",
code: "PNMH-1287",
status: "canceled",
date: "$421.45",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Pers Rilis",
code: "PNMH-1287",
status: "canceled",
date: "$207.61",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Giat Pimpinan",
code: "PNMH-1287",
status: "paid",
date: "$392.86",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Pers Rilis",
code: "PNMH-1287",
status: "paid",
date: "$162.87",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Giat Pimpinan",
code: "PNMH-1287",
status: "paid",
date: "$268.58",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Liputan Kegiatan",
code: "PNMH-1287",
status: "paid",
date: "$369.19",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Liputan Kegiatan",
code: "PNMH-1287",
status: "paid",
date: "$420.87",
category: "amplifikasi",
typeTask: "Mediahub",
},
{
title: "Giat Pimpinan",
code: "PNMH-1287",
status: "paid",
date: "$420.26",
category: "amplifikasi",
typeTask: "Mediahub",
},
];

View File

@ -37,7 +37,6 @@ import {
TrendingDown,
TrendingUp,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
DropdownMenu,
DropdownMenuContent,
@ -45,20 +44,38 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export type CompanyData = {
title: string;
code: string;
typeTask: string;
category: string;
date: string;
status: string;
};
import { data } from "./data";
import { Input } from "@/components/ui/input";
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { Link } from "@/components/navigation";
import { listTask } from "@/service/ppid-categories-services";
import { title } from "process";
import search from "../../app/chat/components/search";
import { format } from "date-fns";
export type CompanyData = {
no: number;
title: string;
uniqueCode: string;
assignmentMainType: string;
assignmentType: string;
createdAt: string;
isDone: 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",
@ -73,47 +90,65 @@ export const columns: ColumnDef<CompanyData>[] = [
),
},
{
accessorKey: "code",
accessorKey: "uniqueCode",
header: "Kode ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("code")}</span>
<span className="whitespace-nowrap">{row.getValue("uniqueCode")}</span>
),
},
{
accessorKey: "typeTask",
header: "Kode ",
accessorKey: "assignmentMainType",
header: "Tipe Tugas ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("typeTask")}</span>
<span className="whitespace-nowrap">
{row.getValue("assignmentMainType")}
</span>
),
},
{
accessorKey: "category",
accessorKey: "assignmentType",
header: "Jenis Tugas ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("category")}</span>
<span className="whitespace-nowrap">
{row.getValue("assignmentType")}
</span>
),
},
{
accessorKey: "date",
header: "Tanggal Unggah ",
cell: ({ row }) => (
<span className="whitespace-nowrap">{row.getValue("date")}</span>
),
accessorKey: "createdAt",
header: "Tanggal Unggah",
cell: ({ row }) => {
const createdAt = row.getValue("createdAt") as
| string
| number
| undefined;
const formattedDate =
createdAt && !isNaN(new Date(createdAt).getTime())
? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
: "-";
return <span className="whitespace-nowrap">{formattedDate}</span>;
},
},
{
accessorKey: "status",
accessorKey: "isDone",
header: "Status",
cell: ({ row }) => {
const statusColors: Record<CompanyData["status"], string> = {
paid: "bg-success/20 text-success",
due: "bg-warning/20 text-warning",
canceled: "bg-destructive/20 text-destructive",
};
const status = row.getValue<CompanyData["status"]>("status");
const isDone = row.getValue<boolean>("isDone");
return (
<Badge className={cn("rounded-full px-5", statusColors[status])}>
{status}
</Badge>
<div>
<Button
size="sm"
color="success"
variant="outline"
className={` btn btn-sm ${
isDone ? "btn-outline-success" : "btn-outline-primary"
} pill-btn ml-1`}
>
{isDone ? "Selesai" : "Aktif"}
</Button>
</div>
);
},
},
@ -154,6 +189,7 @@ export const columns: ColumnDef<CompanyData>[] = [
const TaskTable = () => {
const [sorting, setSorting] = React.useState<SortingState>([]);
const [taskTable, setTaskTable] = React.useState<CompanyData[]>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
[]
);
@ -161,31 +197,55 @@ const TaskTable = () => {
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: 6,
pageIndex: 0, // Halaman pertama
pageSize: 10, // Jumlah baris per halaman
});
const [page, setPage] = React.useState(1); // Halaman aktif
const [totalPage, setTotalPage] = React.useState(1); // Total halaman
const [limit, setLimit] = React.useState(10); // Jumlah baris per halaman
const [search, setSearch] = React.useState(title);
const table = useReactTable({
data,
data: taskTable,
columns,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onPaginationChange: setPagination,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
onPaginationChange: setPagination,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
pagination,
},
});
React.useEffect(() => {
initState();
}, [page, limit]);
async function initState() {
try {
const res = await listTask(limit, page);
const data = res.data.data.content.map((item: any, index: number) => ({
no: (page - 1) * limit + index + 1, // Hitung nomor urut
title: item.title,
uniqueCode: item.uniqueCode || "-",
assignmentMainType: item.assignmentMainType?.name || "-",
assignmentType: item.assignmentType?.name || "-",
createdAt: item.createdAt,
isDone: item.isDone,
}));
setTaskTable(data);
setTotalPage(res.data.totalPages); // Total halaman
} catch (error) {
console.error("Error fetching tasks:", error);
}
}
return (
<div className="w-full overflow-x-auto">
<div className="flex justify-between items-center py-4 px-5">

View File

@ -0,0 +1,381 @@
"use client";
import React, { ChangeEvent, 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";
const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
naration: z.string().min(2, {
message: "Narasi Penugasan harus lebih dari 2 karakter.",
}),
creator: z.string().min(1, { message: "Judul diperlukan" }),
tags: z.string().min(1, { message: "Judul diperlukan" }),
});
export default function FormImage() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const editor = useRef(null);
type TaskSchema = z.infer<typeof taskSchema>;
const [tags, setTags] = useState<string[]>([]);
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
// State for various form fields
const [output, setOutput] = useState({
all: false,
video: false,
audio: false,
image: false,
text: false,
});
const [assignmentType, setAssignmentType] = useState("mediahub");
const [assignmentCategory, setAssignmentCategory] = useState("publication");
const [selectedTarget, setSelectedTarget] = useState("all");
const [unitSelection, setUnitSelection] = useState({
allUnit: false,
mabes: false,
polda: false,
polres: false,
});
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));
};
const save = async (data: TaskSchema) => {
const requestData = {
...data,
output,
assignmentType,
assignmentCategory,
target: selectedTarget,
unitSelection,
};
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/image");
});
};
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 Foto</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>Kategory</Label>
<Select onValueChange={setSelectedTarget}>
<SelectTrigger size="md">
<SelectValue placeholder="Pilih" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">Mediapool</SelectItem>
<SelectItem value="contributor">
Liputan Kegiatan
</SelectItem>
<SelectItem value="approver">Press Tour</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="py-3">
<Label>Deskripsi</Label>
<Controller
control={control}
name="naration"
render={({ field: { onChange, value } }) => (
<JoditEditor
ref={editor}
value={value}
onChange={onChange}
className="dark:text-black"
/>
)}
/>
{errors.naration?.message && (
<p className="text-red-400 text-sm">
{errors.naration.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="creator"
render={({ field }) => (
<Input
size="md"
type="text"
value={field.value}
onChange={field.onChange}
placeholder="Enter Title"
/>
)}
/>
{errors.creator?.message && (
<p className="text-red-400 text-sm">
{errors.creator.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>
);
}

View File

@ -124,22 +124,24 @@ export async function getAPIInterceptor(url: any) {
};
}
export async function postAPIInterceptor(url: any, data: any) {
// Fungsi postAPIInterceptor
export async function postAPIInterceptor(url: string, data: any) {
const response = await axiosInterceptor
.post(url, data)
.catch((error) => error.response);
if (response?.status == 401) {
if (response?.status === 401) {
Object.keys(Cookies.get()).forEach((cookieName) => {
Cookies.remove(cookieName);
});
window.location.href = "/";
} else if (response?.status > 300 && response?.status != 401) {
} else if (response?.status > 300 && response?.status !== 401) {
return {
error: true,
message: response?.data?.message,
data: null,
};
} else if (response?.data.success) {
} else if (response?.data?.success) {
return {
error: false,
message: "success",
@ -149,11 +151,17 @@ export async function postAPIInterceptor(url: any, data: any) {
return {
error: true,
message: response?.data.message,
message: response?.data?.message,
data: null,
};
}
// Fungsi createTask
export async function createTask(data: any) {
const url = "assignment";
return postAPIInterceptor(url, data); // Perbaikan: Memisahkan parameter url dan data
}
export async function deleteAPIInterceptor(url: any, data: any) {
const response = await axiosInterceptor
.delete(url, { data })

View File

@ -36,7 +36,7 @@ export function getMenuList(pathname: string, t: any): Group[] {
menus: [
{
id: "dashboard",
href: "/dashboard/tabs",
href: "/dashboard",
label: t("dashboard"),
active: pathname.includes("/dashboard"),
icon: "material-symbols:dashboard",

View File

@ -1,8 +1,10 @@
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import Cookies from "js-cookie";
import CryptoJS from "crypto-js";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
return twMerge(clsx(inputs));
}
export const hexToRGB = (hex: any, alpha?: number): any => {
@ -15,4 +17,51 @@ export const hexToRGB = (hex: any, alpha?: number): any => {
} else {
return `rgb(${r}, ${g}, ${b})`;
}
};
};
export function checkAuthorization(page: any) {
const roleId = getCookiesDecrypt("urie");
const levelNumber = getCookiesDecrypt("ulne");
if (
(Number(roleId) !== 3 &&
Number(roleId) !== 4 &&
Number(roleId) !== 11 &&
Number(roleId) !== 12 &&
Number(roleId) !== 2) ||
roleId == undefined
) {
console.log("Wrong Authentication");
window.location.href = "/";
} else if (page == "admin" && Number(levelNumber) !== 1) {
console.log("Wrong Authentication Admin");
window.location.href = "/";
}
}
export function checkLoginSession() {
const userId = getCookiesDecrypt("uie");
const jwt = Cookies.get("access_token");
const data = {
userId,
jwt,
};
// doCheckSession(data);
}
export function getCookiesDecrypt(param: any) {
const cookiesEncrypt = Cookies.get(param);
try {
if (cookiesEncrypt != undefined) {
const output = CryptoJS.AES.decrypt(
cookiesEncrypt.toString(),
`${param}_EncryptKey@mediahub`
).toString(CryptoJS.enc.Utf8);
if (output.startsWith('"')) {
return output.slice(1, -1);
}
return output;
}
} catch (e) {
console.log("Error", cookiesEncrypt);
}
}

252
package-lock.json generated
View File

@ -54,6 +54,7 @@
"@south-paw/react-vector-maps": "^3.2.0",
"@tanstack/react-table": "^8.19.2",
"@types/cleave.js": "^1.4.12",
"@types/crypto-js": "^4.2.2",
"@types/js-cookie": "^3.0.6",
"@types/qs": "^6.9.17",
"@types/react-syntax-highlighter": "^15.5.13",
@ -66,6 +67,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.0.0",
"cookie": "^1.0.2",
"crypto-js": "^4.2.0",
"date-fns": "^3.6.0",
"dayjs": "^1.11.11",
"embla-carousel-autoplay": "^8.1.3",
@ -1082,6 +1084,126 @@
"glob": "10.3.10"
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
"integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
"integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
"integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
"integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
"integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
"integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
"integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
"integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-x64-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz",
@ -2780,6 +2902,11 @@
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="
},
"node_modules/@types/crypto-js": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.2.2.tgz",
"integrity": "sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ=="
},
"node_modules/@types/d3-array": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
@ -4022,6 +4149,11 @@
"node": ">= 8"
}
},
"node_modules/crypto-js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
"integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="
},
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@ -13382,126 +13514,6 @@
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/@next/swc-darwin-arm64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz",
"integrity": "sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-darwin-x64": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz",
"integrity": "sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz",
"integrity": "sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-arm64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz",
"integrity": "sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-gnu": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz",
"integrity": "sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-linux-x64-musl": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz",
"integrity": "sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==",
"cpu": [
"x64"
],
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-arm64-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz",
"integrity": "sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==",
"cpu": [
"arm64"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
},
"node_modules/@next/swc-win32-ia32-msvc": {
"version": "14.2.3",
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz",
"integrity": "sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==",
"cpu": [
"ia32"
],
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10"
}
}
}
}

View File

@ -55,6 +55,7 @@
"@south-paw/react-vector-maps": "^3.2.0",
"@tanstack/react-table": "^8.19.2",
"@types/cleave.js": "^1.4.12",
"@types/crypto-js": "^4.2.2",
"@types/js-cookie": "^3.0.6",
"@types/qs": "^6.9.17",
"@types/react-syntax-highlighter": "^15.5.13",
@ -67,6 +68,7 @@
"clsx": "^2.1.1",
"cmdk": "^1.0.0",
"cookie": "^1.0.2",
"crypto-js": "^4.2.0",
"date-fns": "^3.6.0",
"dayjs": "^1.11.11",
"embla-carousel-autoplay": "^8.1.3",

8
service/blog/blog.ts Normal file
View File

@ -0,0 +1,8 @@
import { title } from "process";
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
export async function paginationBlog(size: number, page: number) {
return await httpGetInterceptor(
`blog/pagination?enablePage=1&page=${page}&size=${size}`
);
}

View File

@ -0,0 +1,19 @@
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
export async function listDataImage(
page: any,
limit: any,
isForSelf: any,
isApproval: any,
categoryFilter: any,
statusFilter: any,
needApprovalFromLevel: any,
creator: any,
source: any,
startDate: any,
endDate: any
) {
return await httpGetInterceptor(
`media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}`
);
}

View File

@ -0,0 +1,12 @@
import axios from "axios";
const baseURL = "https://netidhub.com/api/";
const axiosBaseInstance = axios.create({
baseURL,
headers: {
"content-type": "application/json",
},
});
export default axiosBaseInstance;

View File

@ -0,0 +1,56 @@
import axios from "axios";
import Cookies from "js-cookie";
import { login } from "../login-services";
const baseURL = "https://netidhub.com/api/";
const refreshToken = Cookies.get("refresh_token");
const axiosInterceptorInstance = axios.create({
baseURL,
headers: {
"content-type": "application/json",
},
});
// Request interceptor
axiosInterceptorInstance.interceptors.request.use(
(config) => {
console.log("Config interceptor : ", config);
const accessToken = Cookies.get("access_token");
if (accessToken) {
if (config.headers)
config.headers.Authorization = "Bearer " + accessToken;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// Response interceptor
axiosInterceptorInstance.interceptors.response.use(
(response) => {
return response;
},
async function (error) {
const originalRequest = error.config;
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const data = {
refreshToken: refreshToken,
};
const res = await login(data);
if (res.data?.data?.access_token) {
Cookies.set("access_token", res.data.data.access_token);
Cookies.set("refresh_token", res.data.data.refresh_token);
return axiosInterceptorInstance(originalRequest);
}
}
return Promise.reject(error);
}
);
export default axiosInterceptorInstance;

View File

@ -0,0 +1,70 @@
import axiosBaseInstance from "./axios-base-instance";
export async function httpPost(pathUrl: any, headers: any, data?: any) {
const response = await axiosBaseInstance
.post(pathUrl, data, { headers })
.catch(function (error: any) {
console.log(error);
return error.response;
});
console.log("Response base svc : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
export async function httpGet(pathUrl: any, headers: any) {
const response = await axiosBaseInstance
.get(pathUrl, { headers })
.catch(function (error: any) {
console.log(error);
return error.response;
});
console.log("Response base svc : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
export async function httpPut(pathUrl: any, headers: any, data?: any) {
const response = await axiosBaseInstance
.put(pathUrl, data, { headers })
.catch(function (error: any) {
console.log(error);
return error.response;
});
console.log("Response base svc : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}

View File

@ -0,0 +1,129 @@
import { useRouter } from "next/navigation";
import axiosInterceptorInstance from "./axios-interceptor-instance";
import Cookies from "js-cookie";
export async function httpGetInterceptor(pathUrl: any) {
const response = await axiosInterceptorInstance
.get(pathUrl)
.catch((error) => error.response);
console.log("Response interceptor : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else if (response?.status == 401) {
Cookies.set("is_logout", "true");
window.location.href = "/";
return {
error: true,
};
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
export async function httpPostInterceptor(
pathUrl: any,
data: any,
headers?: any
) {
const response = await axiosInterceptorInstance
.post(pathUrl, data)
.catch((error) => error.response);
console.log("Response interceptor : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else if (response?.status == 401) {
Cookies.set("is_logout", "true");
window.location.href = "/";
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
export async function httpPutInterceptor(
pathUrl: any,
data: any,
headers?: any
) {
const response = await axiosInterceptorInstance
.put(pathUrl, data, { headers })
.catch((error) => error.response);
console.log("Response interceptor : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else if (response?.status == 401) {
Cookies.set("is_logout", "true");
window.location.href = "/";
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
export async function httpDeleteInterceptor(pathUrl: any) {
const response = await axiosInterceptorInstance
.delete(pathUrl)
.catch((error) => error.response);
console.log("Response interceptor : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else if (response?.status == 401) {
Cookies.set("is_logout", "true");
window.location.href = "/";
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}
export async function httpGetInterceptorWithToken(pathUrl: any, headers?: any) {
const response = await axiosInterceptorInstance
.get(pathUrl, headers)
.catch((error) => error.response);
console.log("Response interceptor : ", response);
if (response?.status == 200 || response?.status == 201) {
return {
error: false,
message: "success",
data: response?.data,
};
} else if (response?.status == 401) {
Cookies.set("is_logout", "true");
window.location.href = "/";
} else {
return {
error: true,
message: response?.data?.message || response?.data || null,
data: null,
};
}
}

17
service/login-services.ts Normal file
View File

@ -0,0 +1,17 @@
import { httpGet, httpPost } from "./http-config/http-base-service";
import { httpGetInterceptor, httpGetInterceptorWithToken } from "./http-config/http-interceptor-service";
export async function login(data: any) {
const pathUrl = `users/login`;
const headers = {
"content-type": "application/json",
};
return await httpPost(pathUrl, headers, data);
}
export async function userInfo(token: any) {
const pathUrl = `users/info`;
return await httpGetInterceptorWithToken(pathUrl, token);
}

View File

@ -1,77 +0,0 @@
import {
deleteAPIInterceptor,
getAPI,
getAPIInterceptor,
postAPIInterceptor,
} from "../config/api";
export async function listDataMedia(
page: any,
limit: any,
search: any,
categoryFilter: any,
statusFilter: any
) {
const name = search || "";
const url = `media/list?isForAdmin=true&title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&categoryId=${categoryFilter}&statusId=${statusFilter}`;
return getAPIInterceptor({ url });
}
export async function listDataVideo(
isForSelf: any,
isApproval: any,
page: any,
limit: any,
search: any,
categoryFilter: any,
statusFilter: any,
needApprovalFromLevel: any,
creator: any,
source: any,
startDate: any,
endDate: any
) {
const name = search || "";
const url = `media/list?title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=2&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}`;
return getAPIInterceptor({ url });
}
export async function listDataImage(
isForSelf: any,
isApproval: any,
page: any,
limit: any,
search: any,
categoryFilter: any,
statusFilter: any,
needApprovalFromLevel: any,
creator: any,
source: any,
startDate: any,
endDate: any
) {
const name = search || "";
const url = `media/list?title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}`;
return getAPIInterceptor({ url });
}
export async function listDataAll(
isForSelf: any,
isApproval: any,
page: any,
limit: any,
search: any,
fileTypeFilter: any,
statusFilter: any,
startDate: any,
endDate: any,
needApprovalFromLevel: any
) {
const name = search || "";
const url = `media/list?title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&isForSelf=${isForSelf}&isApproval=${isApproval}&typeId=${fileTypeFilter}&statusId=${statusFilter}&startDate=${
startDate == undefined ? "" : startDate
}&endDate=${
endDate == undefined ? "" : endDate
}&needApprovalFromLevel=${needApprovalFromLevel}`;
return getAPIInterceptor({ url });
}

View File

@ -0,0 +1,11 @@
import { httpGetInterceptor } from "../http-config/http-interceptor-service";
export async function getPlanningSentPagination(
size: number,
page: number,
typeId: number
) {
return await httpGetInterceptor(
`planning/pagination/sent?enablePage=1&size=${size}&page=${page}&typeId=${typeId}`
);
}

View File

@ -0,0 +1,147 @@
import { httpGet, httpPost } from "./http-config/http-base-service";
import {
httpDeleteInterceptor,
httpGetInterceptor,
httpPostInterceptor,
httpPutInterceptor,
} from "./http-config/http-interceptor-service";
export async function getPublicListPpidData(categoryId: number) {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/ppid-datas?categoryId=${categoryId}`, headers);
}
export async function getListCategories(size: number, page: number) {
return await httpGetInterceptor(
`/ppid-data-categories?page=${page}&size=${size}&isOnlyTop=true`
);
}
export async function listTask(size: number, page: number) {
return await httpGetInterceptor(`assignment/list?size=${size}&page=${page}`);
}
export async function updateCategoryPosition(category: any) {
const pathUrl = `/ppid-data-categories/position`;
return await httpPostInterceptor(pathUrl, category);
}
export async function getListSubCategories(
size: number,
page: number,
parentId: number
) {
const headers = {
"content-type": "application/json",
};
return await httpGetInterceptor(
`/ppid-data-categories?page=${page}&size=${size}&parentId=${parentId}`
);
}
export async function getPublicListCategoriesByParentId(
id: any,
limit: number,
levelGroup?: string
) {
const headers = {
"content-type": "application/json",
};
return await httpGet(
`/ppid-data-categories?parentId=${id}&isPpidDataIncluded=true&sort=asc&sortBy=position&limit=${limit}${
levelGroup ? `&levelGroup=${levelGroup}` : ""
}`,
headers
);
}
export async function getListCategoriesByParentId(
id: any,
limit: number,
levelGroup?: string
) {
const headers = {
"content-type": "application/json",
};
return await httpGetInterceptor(
`/ppid-data-categories?parentId=${id}&isPpidDataIncluded=true&sort=asc&sortBy=position&limit=${limit}${
levelGroup ? `&levelGroup=${levelGroup}` : ""
}`
);
}
export async function getListCategoriesById(id: any) {
const headers = {
"content-type": "application/json",
};
return await httpGetInterceptor(`/ppid-data-categories/${id}`);
}
export async function getListCategoriesBySlug(slug: any) {
const headers = {
"content-type": "application/json",
};
return await httpGetInterceptor(`/ppid-data-categories/slug/${slug}`);
}
export async function getPublicListCategoriesBySlug(slug: any) {
const headers = {
"content-type": "application/json",
};
return await httpGet(`/ppid-data-categories/slug/${slug}`, headers);
}
export async function getList(categoryId: number) {
const headers = {
"content-type": "application/json",
};
return await httpGetInterceptor(`/ppid-datas?categoryId=1`);
}
export async function createArticle(data: any) {
const pathUrl = `/articles`;
return await httpPostInterceptor(pathUrl, data);
}
export async function createPublicCategory(request: any) {
const pathUrl = `/ppid-data-categories`;
return await httpPostInterceptor(pathUrl, request);
}
export async function uploadPublicThumbnail(id: number, data: any) {
const headers = {
"Content-Type": "multipart/form-data",
};
const pathUrl = `ppid-data-categories/thumbnail/${id}`;
return await httpPost(pathUrl, headers, data);
}
export async function getPublicCategoryById(id: any) {
const headers = {
"content-type": "application/json",
};
return await httpGetInterceptor(`/ppid-data-categories/${id}`);
}
export async function updatePublicCategory(id: any, request: any) {
const headers = {
"content-type": "application/json",
};
return await httpPutInterceptor(`/ppid-data-categories/${id}`, request);
}
export async function deletePublicCategory(id: any) {
const headers = {
"content-type": "application/json",
};
return await httpDeleteInterceptor(`/ppid-data-categories/${id}`);
}
export async function getParentCategories() {
const headers = {
"content-type": "application/json",
};
return await httpGet(`ppid-data-categories?isOnlyTop=true`, headers);
}

80
service/task.ts Normal file
View File

@ -0,0 +1,80 @@
import {
deleteAPIInterceptor,
getAPIInterceptor,
postAPIInterceptor,
} from "../config/api";
export async function listTask(page: any, limit: any) {
const url = `assignment/list?enablePage=1&size=${limit}&page=${page}`;
return getAPIInterceptor({ url });
}
export async function getTask(id: any) {
const url = `/assignment?id=${id}`;
return getAPIInterceptor({ url });
}
export async function createTask(data: any) {
const url = "assignment";
return postAPIInterceptor(url, data); // Perbaikan: Memisahkan parameter url dan data
}
export async function forwardTask(data: any) {
const url = "assignment/forward";
return postAPIInterceptor(url, data);
}
export async function finishTask(id: any) {
const url = `assignment/finish?id=${id}`;
return postAPIInterceptor(url, id);
}
export async function deleteTask(id: any) {
const url = `assignment?id=${id}`;
return deleteAPIInterceptor(url, id);
}
export async function getUserLevelForAssignments() {
const url = "/users/user-levels/assignment";
return getAPIInterceptor({ url });
}
export async function getAssignmentResponseList(id: any) {
const url = `assignment/response?assignmentId=${id}`;
return getAPIInterceptor({ url });
}
export async function createAssignmentResponse(data: any) {
const url = "assignment/response";
return postAPIInterceptor(url, data);
}
export async function deleteAssignmentResponse(id: any) {
const url = `assignment/response?id=${id}`;
return deleteAPIInterceptor(url, id);
}
export async function getAcceptance(id: any, isAccept: any) {
const url = `assignment/acceptance?id=${id}&isAccept=${isAccept}`;
return getAPIInterceptor({ url });
}
export async function acceptAssignment(id: any, isAccept: any) {
const url = `assignment/acceptance?id=${id}`;
return postAPIInterceptor(url, id);
}
export async function postFinishAcceptance(id: any) {
const url = `assignment/finish-acceptance?id=${id}`;
return postAPIInterceptor(url, id);
}
export async function getAcceptanceAssignmentStatus(id: any) {
const url = `assignment/acceptance/status?id=${id}`;
return getAPIInterceptor({ url });
}
export async function getListAttachment(assignmentId: any, isForCreator: any) {
const url = `media/list?&enablePage=0&assignmentId=${assignmentId}&isForAdmin=${isForCreator}`;
return getAPIInterceptor({ url });
}