[QUDO-108,QUDO-109,QUDO-110,QUDO-111,QUDO-112]feat:add menu media tracking,fix otp,fix banner and popup
This commit is contained in:
parent
a2cee179d5
commit
6a3bb288c9
|
|
@ -0,0 +1,93 @@
|
|||
import * as React from "react";
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
|
||||
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
formatDateToIndonesian,
|
||||
getOnlyDate,
|
||||
htmlToString,
|
||||
} from "@/utils/globals";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Judul",
|
||||
cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "link",
|
||||
header: "Jumlah Amplifikasi",
|
||||
cell: ({ row }) => <span>{row.getValue("link")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "date",
|
||||
header: "Tanggal Penarikan",
|
||||
cell: ({ row }) => <span>{row.getValue("date")}</span>,
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Action",
|
||||
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">
|
||||
<Link href={`/contributor/content/audio/detail/${row.original.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>
|
||||
</Link>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default columns;
|
||||
|
|
@ -0,0 +1,382 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
PaginationState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Search,
|
||||
SquarePen,
|
||||
Trash2,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
UserIcon,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import columns from "./column";
|
||||
import { listEnableCategory } from "@/service/content/content";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { link } from "fs";
|
||||
import { listDataAll } from "@/service/landing/landing";
|
||||
import SearchImageComponent from "@/components/form/media-tracking/search-image-card";
|
||||
import SearchVideoComponent from "@/components/form/media-tracking/search-video-card";
|
||||
import SearchDocumentComponent from "@/components/form/media-tracking/search-document-card";
|
||||
import SearchAudioComponent from "@/components/form/media-tracking/search-audio-card";
|
||||
import { getMediaTracking } from "@/service/media-tracking/media-tracking";
|
||||
import { group } from "console";
|
||||
import router from "next/router";
|
||||
import { title } from "process";
|
||||
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
const ResultTable = () => {
|
||||
const router = useRouter();
|
||||
const asPath = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const [showData, setShowData] = React.useState("10");
|
||||
const [categories, setCategories] = React.useState<any>();
|
||||
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||
[]
|
||||
);
|
||||
const [showTable, setShowTable] = React.useState(false);
|
||||
const [onSearch, setOnSearch] = React.useState("");
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: Number(showData),
|
||||
});
|
||||
const [categoryFilter, setCategoryFilter] = React.useState<any>([]);
|
||||
const [searchTitle, setSearchTitle] = React.useState<string>("");
|
||||
const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [imageData, setImageData] = React.useState<any>();
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [totalPage, setTotalPage] = React.useState(1);
|
||||
const [contentAll, setContentAll] = React.useState([]);
|
||||
const [formatFilter, setFormatFilter] = React.useState<any>([]);
|
||||
const [totalContent, setTotalContent] = React.useState();
|
||||
const [search, setSearch] = React.useState<string>("");
|
||||
const group = searchParams?.get("group");
|
||||
const title = searchParams?.get("title");
|
||||
const categorie = searchParams?.get("category");
|
||||
const table = useReactTable({
|
||||
data: dataTable,
|
||||
columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: setPagination,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
pagination,
|
||||
},
|
||||
});
|
||||
|
||||
let typingTimer: any;
|
||||
const doneTypingInterval = 1500;
|
||||
|
||||
// async function doneTyping() {
|
||||
// fetchData();
|
||||
// }
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
React.useEffect(() => {
|
||||
getCategories();
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
getDataTable();
|
||||
}, [page, showData, search]);
|
||||
|
||||
const getDataTable = async () => {
|
||||
const res = await getMediaTracking(page - 1, search, showData);
|
||||
|
||||
const data = res?.data?.data;
|
||||
const newData = data?.content;
|
||||
|
||||
newData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * Number(showData) + index + 1;
|
||||
});
|
||||
|
||||
setDataTable(newData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
setTotalContent(data.totalElements);
|
||||
};
|
||||
|
||||
async function getCategories() {
|
||||
const category = await listEnableCategory("");
|
||||
const resCategory = category?.data?.data?.content;
|
||||
setCategories(resCategory);
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (categorie) {
|
||||
setCategoryFilter(
|
||||
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
|
||||
);
|
||||
console.log(
|
||||
"Kategori",
|
||||
categorie,
|
||||
categorie?.split("&")?.length > 1 ? categorie?.split("&") : [categorie]
|
||||
);
|
||||
}
|
||||
}, [categorie]);
|
||||
|
||||
const handleCategoryFilter = (e: boolean, id: string) => {
|
||||
let filter = [...categoryFilter];
|
||||
|
||||
if (e) {
|
||||
filter = [...categoryFilter, String(id)];
|
||||
} else {
|
||||
filter.splice(categoryFilter.indexOf(id), 1);
|
||||
}
|
||||
console.log("checkbox filter", filter);
|
||||
setCategoryFilter(filter);
|
||||
router.push(`?category=${filter.join("&")}`);
|
||||
};
|
||||
|
||||
const cleanCheckbox = () => {
|
||||
setCategoryFilter([]);
|
||||
setFormatFilter([]);
|
||||
router.push(`?category=&title=`);
|
||||
};
|
||||
|
||||
// async function getData() {
|
||||
// if (asPath?.includes("/polda/") == true) {
|
||||
// if (asPath?.split("/")[2] !== "[polda_name]") {
|
||||
// const filter =
|
||||
// categoryFilter?.length > 0
|
||||
// ? categoryFilter?.sort().join(",")
|
||||
// : categorie || "";
|
||||
|
||||
// const name = title == undefined ? "" : title;
|
||||
// const format = formatFilter == undefined ? "" : formatFilter?.join(",");
|
||||
// const filterGroup = group == undefined ? asPath.split("/")[2] : group;
|
||||
// loading();
|
||||
// const response = await listDataAll("", name, filter, "");
|
||||
// close();
|
||||
// // setGetTotalPage(response?.data?.data?.totalPages);
|
||||
// // setContentImage(response?.data?.data?.content);
|
||||
// // setTotalContent(response?.data?.data?.totalElements);
|
||||
// const data = response?.data?.data;
|
||||
// const contentData = data?.content;
|
||||
// setImageData(contentData);
|
||||
// setTotalData(data?.totalElements);
|
||||
// setContentAll(response?.data?.data?.content);
|
||||
// setTotalPage(data?.totalPages);
|
||||
// setTotalContent(response?.data?.data?.totalElements);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
table.getColumn("judul")?.setFilterValue(e.target.value);
|
||||
};
|
||||
|
||||
const handleKeyUp = () => {
|
||||
clearTimeout(typingTimer);
|
||||
typingTimer = setTimeout(doneTyping, doneTypingInterval);
|
||||
};
|
||||
|
||||
async function doneTyping() {
|
||||
if (searchTitle == "" || searchTitle == undefined) {
|
||||
router.push("?title=");
|
||||
} else {
|
||||
router.push(`?title=${searchTitle}`);
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyDown = () => {
|
||||
clearTimeout(typingTimer);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3 border ">
|
||||
<div className="flex flex-col sm:flex-row lg:flex-row justify-end sm:items-center md:items-center lg:items-center">
|
||||
<div className=" flex flex-row justify-end items-center gap-3">
|
||||
<div className="flex items-center">
|
||||
<div className="mx-3">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button size="md" variant="outline">
|
||||
1 - {showData} Data
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56 text-sm">
|
||||
<DropdownMenuRadioGroup
|
||||
value={showData}
|
||||
onValueChange={setShowData}
|
||||
>
|
||||
<DropdownMenuRadioItem value="10">
|
||||
1 - 10 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="50">
|
||||
1 - 50 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="100">
|
||||
1 - 100 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="250">
|
||||
1 - 250 Data
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center py-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className="ml-auto" size="md">
|
||||
Columns <ChevronDown />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{table
|
||||
.getAllColumns()
|
||||
.filter((column) => column.getCanHide())
|
||||
.map((column) => {
|
||||
return (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={column.id}
|
||||
className="capitalize"
|
||||
checked={column.getIsVisible()}
|
||||
onCheckedChange={(value) =>
|
||||
column.toggleVisibility(!!value)
|
||||
}
|
||||
>
|
||||
{column.id}
|
||||
</DropdownMenuCheckboxItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Table className="overflow-hidden">
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<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>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow key={row.id} className="h-[75px]">
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<TablePagination
|
||||
table={table}
|
||||
totalData={totalData}
|
||||
totalPage={totalPage}
|
||||
/>
|
||||
{/* <div className="flex justify-end mt-4">
|
||||
<Button
|
||||
color="primary"
|
||||
size="md"
|
||||
className="text-sm mr-3"
|
||||
onClick={() => setShowTable(false)}
|
||||
>
|
||||
Tracking Berita Baru
|
||||
</Button>
|
||||
</div> */}
|
||||
{/* </>
|
||||
)} */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResultTable;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import ResultTable from "./component/table";
|
||||
|
||||
export default function AdminResult() {
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
<ResultTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import * as React from "react";
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
|
||||
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
formatDateToIndonesian,
|
||||
getOnlyDate,
|
||||
htmlToString,
|
||||
} from "@/utils/globals";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Nama Media Online",
|
||||
cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "link",
|
||||
header: "Link",
|
||||
cell: ({ row }) => <span>{row.getValue("categoryName")}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
export default columns;
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import {
|
||||
listDataAllNonPagination,
|
||||
listDataTracking,
|
||||
mediaTrackingSave,
|
||||
} from "@/service/media-tracking/media-tracking";
|
||||
import { error, loading } from "@/lib/swal";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { PaginationState } from "@tanstack/react-table";
|
||||
import page from "../page";
|
||||
|
||||
export default function TrackingBeritaCard() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [content, setContent] = useState<any[]>([]);
|
||||
const [selectedItems, setSelectedItems] = useState<number[]>([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [showData, setShowData] = React.useState("10");
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: Number(showData),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
initFecth();
|
||||
}, [showData]);
|
||||
|
||||
const initFecth = async () => {
|
||||
const response = await listDataTracking(showData, page - 1);
|
||||
const data = response?.data?.data;
|
||||
const newData = data?.content;
|
||||
newData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * Number(showData) + index + 1;
|
||||
});
|
||||
setContent(response?.data?.data?.content || []);
|
||||
};
|
||||
|
||||
const fecthAll = async (keyword: string) => {
|
||||
const response = await listDataAllNonPagination(keyword);
|
||||
setContent(response?.data?.data?.content || []);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setSearch(value);
|
||||
|
||||
if (value.trim() === "") {
|
||||
initFecth();
|
||||
} else {
|
||||
fecthAll(value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelect = (id: number) => {
|
||||
setSelectedItems((prev) =>
|
||||
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
||||
);
|
||||
};
|
||||
|
||||
const doSave = async () => {
|
||||
if (selectedItems.length === 0) {
|
||||
toast("Pilih minimal 1 berita untuk disimpan.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const promises = selectedItems.map((id) =>
|
||||
mediaTrackingSave({
|
||||
mediaUploadId: id,
|
||||
duration: 24,
|
||||
scrapingPeriod: 3,
|
||||
})
|
||||
);
|
||||
await Promise.all(promises);
|
||||
|
||||
toast("Berhasil Menambahkan", {
|
||||
description: "",
|
||||
});
|
||||
setSelectedItems([]);
|
||||
initFecth();
|
||||
} catch (err: any) {
|
||||
error(err?.message || "Gagal menyimpan data.");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<Input
|
||||
placeholder="Pencarian"
|
||||
value={search}
|
||||
onChange={handleInputChange}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
<div className="mx-3">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button size="md" variant="outline">
|
||||
1 - {showData} Data
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56 text-sm">
|
||||
<DropdownMenuRadioGroup
|
||||
value={showData}
|
||||
onValueChange={setShowData}
|
||||
>
|
||||
<DropdownMenuRadioItem value="10">
|
||||
1 - 10 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="50">
|
||||
1 - 50 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="100">
|
||||
1 - 100 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="250">
|
||||
1 - 250 Data
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedItems.length > 0 && (
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-sm text-blue-600 font-medium">
|
||||
{selectedItems.length} Item Terpilih{" "}
|
||||
<span className="text-black">
|
||||
/ Tracking Berita tersisa {29 - selectedItems.length}
|
||||
</span>
|
||||
</div>
|
||||
<Button className="bg-blue-600 text-white" onClick={doSave}>
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
{content.map((item: any) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
|
||||
onClick={() => handleSelect(item.id)}
|
||||
>
|
||||
<img
|
||||
src={item.thumbnailLink}
|
||||
alt={item.title}
|
||||
className="w-full h-[300px] object-cover"
|
||||
/>
|
||||
<div className="absolute top-2 left-2">
|
||||
<div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
|
||||
{selectedItems.includes(item.id) && (
|
||||
<div className="w-3 h-3 bg-blue-600 rounded-sm" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="p-2 text-sm font-medium text-gray-800 truncate">
|
||||
{item.title}
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-center gap-2 mt-4">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((p) => p - 1)}
|
||||
>
|
||||
<ChevronLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
<div className="px-3 py-1 rounded-full border">{currentPage}</div>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
onClick={() => setCurrentPage((p) => p + 1)}
|
||||
>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import TrackingBeritaCard from "./component/table";
|
||||
|
||||
export default function AdminTrackingBerita() {
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
<TrackingBeritaCard />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,146 @@
|
|||
import * as React from "react";
|
||||
import { ColumnDef } from "@tanstack/react-table";
|
||||
|
||||
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuItem,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import { error } from "@/config/swal";
|
||||
import { deleteCategory } from "@/service/settings/settings";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Menubar,
|
||||
MenubarContent,
|
||||
MenubarMenu,
|
||||
MenubarTrigger,
|
||||
} from "@/components/ui/menubar";
|
||||
import EditCategoryModal from "../../category/component/edit";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { deleteMedia } from "@/service/content/content";
|
||||
import Swal from "sweetalert2";
|
||||
import { useTranslations } from "next-intl";
|
||||
import DetailSettingTracking from "./detail";
|
||||
import UpdateSettingTracking from "./update";
|
||||
|
||||
const useTableColumns = () => {
|
||||
const t = useTranslations("Table"); // Panggil di dalam hook
|
||||
const MySwal = withReactContent(Swal);
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Wilayah",
|
||||
cell: ({ row }) => (
|
||||
<span className="normal-case">{row.getValue("name")}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "mediaTypesString",
|
||||
header: "Jumlah Tracking Berita Harian",
|
||||
cell: ({ row }) => (
|
||||
<span className="normal-case">{row.getValue("mediaTypesString")}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: t("action"),
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
||||
async function doDelete(id: any) {
|
||||
// loading();
|
||||
const data = {
|
||||
id,
|
||||
};
|
||||
|
||||
const response = await deleteMedia(data);
|
||||
|
||||
if (response?.error) {
|
||||
error(response.message);
|
||||
return false;
|
||||
}
|
||||
success();
|
||||
}
|
||||
|
||||
function success() {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleDeleteMedia = (id: any) => {
|
||||
MySwal.fire({
|
||||
title: "Hapus Data",
|
||||
text: "",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#3085d6",
|
||||
confirmButtonColor: "#d33",
|
||||
confirmButtonText: "Hapus",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
doDelete(id);
|
||||
}
|
||||
});
|
||||
};
|
||||
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">
|
||||
<DetailSettingTracking id={row.original.id} isDetail={true} />
|
||||
|
||||
<UpdateSettingTracking id={row.original.id} isUpdate={true} />
|
||||
|
||||
<DropdownMenuItem
|
||||
onClick={() => handleDeleteMedia(row.original.id)}
|
||||
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>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return columns;
|
||||
};
|
||||
|
||||
export default useTableColumns;
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { getUserRoles, postCategory } from "@/service/settings/settings";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { close, error, loading } from "@/config/swal";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { stringify } from "querystring";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { CloudUpload } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import Cookies from "js-cookie";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const wilayahList = [
|
||||
{ id: "mabes", label: "Mabes" },
|
||||
{ id: "polda", label: "Polda" },
|
||||
{ id: "satker", label: "Satker" },
|
||||
];
|
||||
|
||||
const jumlahList = [5, 10, 15, 20, 25, 30];
|
||||
|
||||
export default function CreateSettingTracking() {
|
||||
const t = useTranslations("Menu");
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
wilayah: [] as string[],
|
||||
jumlah: [] as number[],
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (values: any) => {
|
||||
console.log("Submitted values:", values);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={() => setIsOpen(true)}>Tambah Setting Tracking</Button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
{/* Wilayah */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="wilayah"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Wilayah</FormLabel>
|
||||
<div className="flex gap-4">
|
||||
{wilayahList.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={field.value.includes(item.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
const updated = checked
|
||||
? [...field.value, item.id]
|
||||
: field.value.filter((val) => val !== item.id);
|
||||
field.onChange(updated);
|
||||
}}
|
||||
/>
|
||||
<label className="text-sm">{item.label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="jumlah"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Jumlah Tracking Berita Harian</FormLabel>
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
{jumlahList.map((num) => (
|
||||
<div key={num} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={field.value.includes(num)}
|
||||
onCheckedChange={(checked) => {
|
||||
const updated = checked
|
||||
? [...field.value, num]
|
||||
: field.value.filter((val) => val !== num);
|
||||
field.onChange(updated);
|
||||
}}
|
||||
/>
|
||||
<label className="text-sm">{num}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="submit">Tambah Setting</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { getUserRoles, postCategory } from "@/service/settings/settings";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { close, error, loading } from "@/config/swal";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { stringify } from "querystring";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { CloudUpload, EyeIcon, SquarePen } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import Cookies from "js-cookie";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const wilayahList = [
|
||||
{ id: "mabes", label: "Mabes" },
|
||||
{ id: "polda", label: "Polda" },
|
||||
{ id: "satker", label: "Satker" },
|
||||
];
|
||||
|
||||
const jumlahList = [5, 10, 15, 20, 25, 30];
|
||||
|
||||
export default function DetailSettingTracking(props: {
|
||||
id: string;
|
||||
isDetail?: boolean;
|
||||
}) {
|
||||
const { id, isDetail } = props;
|
||||
const t = useTranslations("Menu");
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
wilayah: [] as string[],
|
||||
jumlah: [] as number[],
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (values: any) => {
|
||||
console.log("Submitted values:", values);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<a
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="flex flex-row items-center border-b p-2 hover:cursor-pointer hover:bg-black hover:text-white"
|
||||
>
|
||||
<EyeIcon className="w-4 h-4 me-1.5" />
|
||||
Detail
|
||||
</a>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
{/* Wilayah */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="wilayah"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Wilayah</FormLabel>
|
||||
<div className="flex gap-4">
|
||||
{wilayahList.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={field.value.includes(item.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
const updated = checked
|
||||
? [...field.value, item.id]
|
||||
: field.value.filter((val) => val !== item.id);
|
||||
field.onChange(updated);
|
||||
}}
|
||||
/>
|
||||
<label className="text-sm">{item.label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="jumlah"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Jumlah Tracking Berita Harian</FormLabel>
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
{jumlahList.map((num) => (
|
||||
<div key={num} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={field.value.includes(num)}
|
||||
onCheckedChange={(checked) => {
|
||||
const updated = checked
|
||||
? [...field.value, num]
|
||||
: field.value.filter((val) => val !== num);
|
||||
field.onChange(updated);
|
||||
}}
|
||||
/>
|
||||
<label className="text-sm">{num}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="submit">Tambah Setting</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
PaginationState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import columns from "./column";
|
||||
|
||||
import { listEnableCategory } from "@/service/content/content";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import { NewCampaignIcon } from "@/components/icon";
|
||||
import { getCategories } from "@/service/settings/settings";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import CreateSettingTracking from "./create";
|
||||
import useTableColumns from "./column";
|
||||
|
||||
const AdminSettingTrackingTable = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const t = useTranslations("Menu");
|
||||
const dataChange = searchParams?.get("dataChange");
|
||||
const [openModal, setOpenModal] = React.useState(false);
|
||||
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
const [region, setRegion] = React.useState<any>();
|
||||
const [regionFilter, setRegionFilter] = React.useState<string[]>([]);
|
||||
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
|
||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||
[]
|
||||
);
|
||||
const [columnVisibility, setColumnVisibility] =
|
||||
React.useState<VisibilityState>({});
|
||||
const [rowSelection, setRowSelection] = React.useState({});
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [totalPage, setTotalPage] = React.useState(1);
|
||||
const columns = useTableColumns();
|
||||
const table = useReactTable({
|
||||
data: dataTable,
|
||||
columns,
|
||||
onSortingChange: setSorting,
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onRowSelectionChange: setRowSelection,
|
||||
onPaginationChange: setPagination,
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
columnVisibility,
|
||||
rowSelection,
|
||||
pagination,
|
||||
},
|
||||
});
|
||||
|
||||
const manualRegions = [
|
||||
{ id: "semua", label: "Semua" },
|
||||
{ id: "mabes", label: "Mabes" },
|
||||
{ id: "polda", label: "Polda" },
|
||||
{ id: "satker", label: "Satker" },
|
||||
{ id: "internasional", label: "Internasional" },
|
||||
];
|
||||
|
||||
React.useEffect(() => {
|
||||
if (dataChange) {
|
||||
router.push("/admin/settings/category");
|
||||
}
|
||||
fetchData();
|
||||
}, [dataChange]);
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, regionFilter]);
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
loading();
|
||||
|
||||
const regionQuery = regionFilter.length
|
||||
? `&publishedLocation=${regionFilter.join(",")}`
|
||||
: "";
|
||||
|
||||
const statusQuery = statusFilter.length
|
||||
? `&isPublish=${statusFilter.join(",")}`
|
||||
: "";
|
||||
|
||||
const response = await getCategories(
|
||||
page - 1,
|
||||
`${regionQuery}${statusQuery}`
|
||||
);
|
||||
|
||||
const data = response?.data?.data;
|
||||
const contentData = data?.content;
|
||||
|
||||
contentData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * 10 + index + 1;
|
||||
});
|
||||
|
||||
setDataTable(contentData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
close();
|
||||
} catch (error) {
|
||||
console.error("Error fetching categories:", error);
|
||||
}
|
||||
}
|
||||
|
||||
const handleChange = (type: string, id: string, checked: boolean) => {
|
||||
if (type === "region") {
|
||||
if (id === "semua") {
|
||||
if (checked) {
|
||||
// Pilih semua (kecuali 'semua' itu sendiri)
|
||||
setRegionFilter(["mabes", "polda", "satker", "internasional"]);
|
||||
} else {
|
||||
setRegionFilter([]);
|
||||
}
|
||||
} else {
|
||||
let updated = checked
|
||||
? [...regionFilter, id]
|
||||
: regionFilter.filter((val) => val !== id);
|
||||
|
||||
// Jika semua sudah tercentang, maka otomatis centang "semua"
|
||||
const allIds = ["mabes", "polda", "satker", "internasional"];
|
||||
const allSelected = allIds.every((val) => updated.includes(val));
|
||||
|
||||
setRegionFilter(allSelected ? allIds : updated);
|
||||
}
|
||||
} else {
|
||||
if (checked) {
|
||||
setStatusFilter([...statusFilter, id]);
|
||||
} else {
|
||||
setStatusFilter(statusFilter.filter((val: any) => val !== id));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-x-auto bg-white p-4 rounded-sm space-y-3">
|
||||
<div className="flex items-end justify-between">
|
||||
<CreateSettingTracking />
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button size="md" variant="outline">
|
||||
Filter
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-80 ">
|
||||
<div className="flex flex-col gap-2 px-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<p>Filter</p>
|
||||
<a
|
||||
onClick={() => fetchData()}
|
||||
className="cursor-pointer text-primary"
|
||||
>
|
||||
Simpan
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 overflow-auto max-h-[300px] text-xs custom-scrollbar-table">
|
||||
<p>Wilayah</p>
|
||||
{manualRegions.map((region) => (
|
||||
<div key={region.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={region.id}
|
||||
checked={
|
||||
region.id === "semua"
|
||||
? ["mabes", "polda", "satker", "internasional"].every(
|
||||
(val) => regionFilter.includes(val)
|
||||
)
|
||||
: regionFilter.includes(region.id)
|
||||
}
|
||||
onCheckedChange={(e) =>
|
||||
handleChange("region", region.id, Boolean(e))
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor={region.id}
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{region.label}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
<p className="mt-3">Status</p>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="aktif"
|
||||
checked={statusFilter.includes("true")}
|
||||
onCheckedChange={(e) =>
|
||||
handleChange("status", "true", Boolean(e))
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="aktif"
|
||||
className="text-xs font-medium leading-none"
|
||||
>
|
||||
Aktif
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="nonaktif"
|
||||
checked={statusFilter.includes("false")}
|
||||
onCheckedChange={(e) =>
|
||||
handleChange("status", "false", Boolean(e))
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="nonaktif"
|
||||
className="text-xs font-medium leading-none"
|
||||
>
|
||||
Non Aktif
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<Table className="overflow-hidden">
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<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>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
className="h-[75px]"
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<TablePagination
|
||||
table={table}
|
||||
totalData={totalData}
|
||||
totalPage={totalPage}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdminSettingTrackingTable;
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
"use client";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { getUserRoles, postCategory } from "@/service/settings/settings";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { close, error, loading } from "@/config/swal";
|
||||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { stringify } from "querystring";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { CloudUpload, SquareEqual, SquarePen } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { getCookiesDecrypt } from "@/lib/utils";
|
||||
import Cookies from "js-cookie";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
const wilayahList = [
|
||||
{ id: "mabes", label: "Mabes" },
|
||||
{ id: "polda", label: "Polda" },
|
||||
{ id: "satker", label: "Satker" },
|
||||
];
|
||||
|
||||
const jumlahList = [5, 10, 15, 20, 25, 30];
|
||||
|
||||
export default function UpdateSettingTracking(props: {
|
||||
id: string;
|
||||
isUpdate?: boolean;
|
||||
}) {
|
||||
const { id, isUpdate } = props;
|
||||
const t = useTranslations("Menu");
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const form = useForm({
|
||||
defaultValues: {
|
||||
wilayah: [] as string[],
|
||||
jumlah: [] as number[],
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (values: any) => {
|
||||
console.log("Submitted values:", values);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<a
|
||||
onClick={() => setIsOpen(true)}
|
||||
className="flex flex-row items-center border-b p-2 hover:cursor-pointer hover:bg-black hover:text-white"
|
||||
>
|
||||
<SquarePen className="w-4 h-4 me-1.5" />
|
||||
Edit
|
||||
</a>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Setting Tracking Berita Harian</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
{/* Wilayah */}
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="wilayah"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Wilayah</FormLabel>
|
||||
<div className="flex gap-4">
|
||||
{wilayahList.map((item) => (
|
||||
<div key={item.id} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={field.value.includes(item.id)}
|
||||
onCheckedChange={(checked) => {
|
||||
const updated = checked
|
||||
? [...field.value, item.id]
|
||||
: field.value.filter((val) => val !== item.id);
|
||||
field.onChange(updated);
|
||||
}}
|
||||
/>
|
||||
<label className="text-sm">{item.label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="jumlah"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Jumlah Tracking Berita Harian</FormLabel>
|
||||
<div className="flex gap-4 flex-wrap">
|
||||
{jumlahList.map((num) => (
|
||||
<div key={num} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
checked={field.value.includes(num)}
|
||||
onCheckedChange={(checked) => {
|
||||
const updated = checked
|
||||
? [...field.value, num]
|
||||
: field.value.filter((val) => val !== num);
|
||||
field.onChange(updated);
|
||||
}}
|
||||
/>
|
||||
<label className="text-sm">{num}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="submit">Tambah Setting</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
"use client";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import AdminSettingTrackingTable from "./component/table";
|
||||
|
||||
export default function AdminSettingTracking() {
|
||||
return (
|
||||
<>
|
||||
<SiteBreadcrumb />
|
||||
<AdminSettingTrackingTable />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { formatDateToIndonesian, shimmer, toBase64 } from "@/utils/globals";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import "swiper/css/bundle";
|
||||
import "swiper/css/navigation";
|
||||
import { getHeroData, listStaticBanner } from "@/service/landing/landing";
|
||||
|
|
@ -37,11 +37,12 @@ import {
|
|||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "../ui/dialog";
|
||||
import { Autoplay, Pagination } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
||||
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import FormSurvey from "./survey";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
|
||||
type HeroModalProps = {
|
||||
onClose: () => void;
|
||||
|
|
@ -59,6 +60,7 @@ const HeroModal = ({
|
|||
const [heroData, setHeroData] = useState<any>();
|
||||
const params = useParams();
|
||||
const locale = params?.locale;
|
||||
const swiperRef = useRef<SwiperClass | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCategories() {
|
||||
|
|
@ -116,9 +118,27 @@ const HeroModal = ({
|
|||
return (
|
||||
<div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
|
||||
<div className="relative dark:bg-gray-900 rounded-lg w-[90%] md:w-[600px] p-4 shadow-none">
|
||||
{heroData?.length > 0 && (
|
||||
<>
|
||||
<button
|
||||
className="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
|
||||
onClick={() => swiperRef.current?.slidePrev()}
|
||||
>
|
||||
<ChevronLeft />
|
||||
</button>
|
||||
<button
|
||||
className="absolute right-3 top-1/2 z-10 -translate-y-1/2 text-white text-3xl"
|
||||
onClick={() => swiperRef.current?.slideNext()}
|
||||
>
|
||||
<ChevronRight />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<Swiper
|
||||
pagination={{ dynamicBullets: true }}
|
||||
modules={[Pagination, Autoplay]}
|
||||
onSwiper={(swiper) => (swiperRef.current = swiper)}
|
||||
autoplay={{ delay: 3000 }}
|
||||
className="mySwiper w-full"
|
||||
>
|
||||
{heroData?.map((list: any, index: number) => (
|
||||
|
|
@ -336,115 +356,109 @@ const HeroNew = (props: { group?: string }) => {
|
|||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Carousel className="lg:w-full lg:h-full ">
|
||||
<CarouselContent>
|
||||
{content?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[700px] mt-1">
|
||||
<div className="relative w-full h-full">
|
||||
<Carousel className="lg:w-full lg:h-full">
|
||||
<CarouselContent>
|
||||
{content?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[700px] mt-1">
|
||||
<Image
|
||||
src={list?.thumbnailLink}
|
||||
alt="gambar-utama"
|
||||
width={1920}
|
||||
height={1080}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
className="w-full h-[320px] lg:h-[700px] object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40" />
|
||||
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) == 1
|
||||
? `${locale}/image/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 2
|
||||
? `${locale}/video/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 3
|
||||
? `${locale}/document/detail/${list?.slug}`
|
||||
: `${locale}/audio/detail/${list?.slug}`
|
||||
}
|
||||
>
|
||||
<div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
|
||||
<span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
|
||||
{list?.categoryName || "Liputan Kegiatan"}
|
||||
</span>
|
||||
<h2 className="text-xl font-bold leading-tight">
|
||||
{list?.title}
|
||||
</h2>
|
||||
<p className="text-base flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
|
||||
<div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40 p-4 rounded-lg z-10">
|
||||
{heroData?.slice(0, 3).map((item: any) => (
|
||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full mx-2">
|
||||
<div className="flex-shrink-0 w-32 rounded-lg">
|
||||
<Image
|
||||
src={list?.thumbnailLink}
|
||||
alt="gambar-utama"
|
||||
width={1920}
|
||||
height={1080}
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
className="w-full h-[320px] lg:h-[700px] object-cover"
|
||||
width={720}
|
||||
height={480}
|
||||
src={item?.thumbnailLink}
|
||||
alt={item?.title}
|
||||
className="w-full h-[100px] object-cover rounded-lg"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40" />
|
||||
|
||||
</div>
|
||||
<div className="w-[280px] lg:w-[200px]">
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) == 1
|
||||
? `${locale}/image/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 2
|
||||
? `${locale}/video/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 3
|
||||
? `${locale}/document/detail/${list?.slug}`
|
||||
: `${locale}/audio/detail/${list?.slug}`
|
||||
Number(item?.fileTypeId) == 1
|
||||
? `${locale}/image/detail/${item?.slug}`
|
||||
: Number(item?.fileTypeId) == 2
|
||||
? `${locale}/video/detail/${item?.slug}`
|
||||
: Number(item?.fileTypeId) == 3
|
||||
? `${locale}/document/detail/${item?.slug}`
|
||||
: `${locale}/audio/detail/${item?.slug}`
|
||||
}
|
||||
>
|
||||
<div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
|
||||
<span className="absolute top-0 left-0 mb-4 mx-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
|
||||
{list?.categoryName || "Liputan Kegiatan"}
|
||||
</span>
|
||||
|
||||
<h2 className="text-xl font-bold leading-tight">
|
||||
{list?.title}
|
||||
</h2>
|
||||
|
||||
<p className="text-base flex items-center gap-1 mt-2 opacity-80">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="hidden lg:flex flex-col gap-3 absolute bottom-4 right-4 w-[520px] bg-black/40 p-4 rounded-lg z-50">
|
||||
{heroData?.slice(0, 3).map((item: any) => (
|
||||
<li
|
||||
key={item?.id}
|
||||
className="flex gap-4 flex-row lg:w-full mx-2"
|
||||
<span className="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">
|
||||
{item?.categoryName}
|
||||
</span>
|
||||
<h3 className="text-base text-white font-bold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
{item?.title}
|
||||
</h3>
|
||||
<p className="text-[10px] flex flex-row items-center gap-1 text-white mt-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))}{" "}
|
||||
{item?.timezone || "WIB"} |{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.2em"
|
||||
height="1.2em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<div className="flex-shrink-0 w-32 rounded-lg">
|
||||
<Image
|
||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||
shimmer(700, 475)
|
||||
)}`}
|
||||
width={720}
|
||||
height={480}
|
||||
src={item?.thumbnailLink}
|
||||
alt={item?.title}
|
||||
className="w-full h-[100px] object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[280px] lg:w-[200px]">
|
||||
<Link
|
||||
href={
|
||||
Number(list?.fileTypeId) == 1
|
||||
? `${locale}/image/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 2
|
||||
? `${locale}/video/detail/${list?.slug}`
|
||||
: Number(list?.fileTypeId) == 3
|
||||
? `${locale}/document/detail/${list?.slug}`
|
||||
: `${locale}/audio/detail/${list?.slug}`
|
||||
}
|
||||
>
|
||||
<span className=" py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">
|
||||
{item?.categoryName}
|
||||
</span>
|
||||
|
||||
<h3 className="text-base text-white font-bold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
{item?.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-[10px] flex flex-row items-center gap-1 text-white mt-1">
|
||||
{formatDateToIndonesian(
|
||||
new Date(item?.createdAt)
|
||||
)}{" "}
|
||||
{item?.timezone ? item?.timezone : "WIB"} |{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.2em"
|
||||
height="1.2em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</li>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -39,12 +39,12 @@ const SearchSection = () => {
|
|||
const router = useRouter();
|
||||
const t = useTranslations("LandingPage");
|
||||
return (
|
||||
<div className="flex w-full h-full bg-gray-100 dark:bg-zinc-800">
|
||||
<div className="hidden xl:block w-[15%] pr-4 py-8">
|
||||
<div className="flex w-full min-h-screen bg-gray-100 dark:bg-zinc-800">
|
||||
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
|
||||
<LeftBanner />
|
||||
</div>
|
||||
|
||||
<div className="w-full xl:w-[70%] h-full overflow-y-auto px-4 py-8">
|
||||
<div className="w-full xl:w-[70%] px-4 py-8">
|
||||
<ScrollableContent />
|
||||
<NewContent group="mabes" type="latest" />
|
||||
<NewContent group="mabes" type="popular" />
|
||||
|
|
@ -54,7 +54,7 @@ const SearchSection = () => {
|
|||
<UserSurveyBox />
|
||||
</div>
|
||||
|
||||
<div className="hidden xl:block w-[15%] pl-4 py-8">
|
||||
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
|
||||
<RightBanner />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -96,11 +96,21 @@ const LoginForm = () => {
|
|||
mode: "all",
|
||||
});
|
||||
|
||||
const handleTypeOTP = (event: any) => {
|
||||
const { form } = event.target;
|
||||
const index = [...form].indexOf(event.target);
|
||||
form.elements[index + 1].focus();
|
||||
event.preventDefault();
|
||||
const handleTypeOTP = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
const { key } = event;
|
||||
const target = event.currentTarget;
|
||||
|
||||
if (key === "Enter") {
|
||||
event.preventDefault();
|
||||
|
||||
const inputs = Array.from(target.form?.querySelectorAll("input") || []);
|
||||
const currentIndex = inputs.indexOf(target);
|
||||
const nextInput = inputs[currentIndex + 1] as HTMLElement | undefined;
|
||||
|
||||
if (nextInput) {
|
||||
nextInput.focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
|
||||
|
|
@ -384,227 +394,260 @@ const LoginForm = () => {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="mt-5 2xl:mt-7 space-y-4">
|
||||
{step === 1 ? (
|
||||
<>
|
||||
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
||||
<h4 className="font-semibold text-3xl text-left">
|
||||
{t("logInPlease")}
|
||||
</h4>
|
||||
<div className="text-default-500 text-base">
|
||||
{t("acc")}
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<span className="w-full lg:w-fit px-2 h-8 text-red-500 hover:cursor-pointer">
|
||||
{t("register")}
|
||||
</span>
|
||||
</DialogTrigger>
|
||||
<DialogContent size="sm" className="sm:max-w-[425px]">
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<p className="text-lg font-semibold text-center">
|
||||
{t("categoryReg")}
|
||||
</p>
|
||||
<p className="text-base text-center">{t("selectOne")}</p>
|
||||
</div>
|
||||
<div>
|
||||
{role?.map((row: any) => (
|
||||
<div key={row.id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={`category${row.id}`}
|
||||
name="category"
|
||||
className=""
|
||||
value={row.id}
|
||||
checked={category == `${row.id}`}
|
||||
onChange={(event) => setCategory(event.target.value)}
|
||||
/>
|
||||
<label className="ml-2" htmlFor={`category${row.id}`}>
|
||||
{row.name}
|
||||
</label>
|
||||
<>
|
||||
{step !== 3 && (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="mt-5 2xl:mt-7 space-y-4"
|
||||
>
|
||||
{step === 1 && (
|
||||
<>
|
||||
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
||||
<h4 className="font-semibold text-3xl text-left">
|
||||
{t("logInPlease")}
|
||||
</h4>
|
||||
<div className="text-default-500 text-base">
|
||||
{t("acc")}
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<span className="w-full lg:w-fit px-2 h-8 text-red-500 hover:cursor-pointer">
|
||||
{t("register")}
|
||||
</span>
|
||||
</DialogTrigger>
|
||||
<DialogContent size="sm" className="sm:max-w-[425px]">
|
||||
<div className="flex flex-col w-full gap-1">
|
||||
<p className="text-lg font-semibold text-center">
|
||||
{t("categoryReg")}
|
||||
</p>
|
||||
<p className="text-base text-center">
|
||||
{t("selectOne")}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-b-2 border-black"></div>
|
||||
<DialogFooter>
|
||||
<Link
|
||||
href={`/auth/registration?category=${category}`}
|
||||
className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white"
|
||||
type="submit"
|
||||
>
|
||||
{t("next")}{" "}
|
||||
</Link>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username" className="font-medium text-default-600">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("username")}
|
||||
id="username"
|
||||
type="text"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
<div>
|
||||
{role?.map((row: any) => (
|
||||
<div key={row.id}>
|
||||
<input
|
||||
type="radio"
|
||||
id={`category${row.id}`}
|
||||
name="category"
|
||||
className=""
|
||||
value={row.id}
|
||||
checked={category == `${row.id}`}
|
||||
onChange={(event) =>
|
||||
setCategory(event.target.value)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="ml-2"
|
||||
htmlFor={`category${row.id}`}
|
||||
>
|
||||
{row.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-b-2 border-black"></div>
|
||||
<DialogFooter>
|
||||
<Link
|
||||
href={`/auth/registration?category=${category}`}
|
||||
className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white"
|
||||
type="submit"
|
||||
>
|
||||
{t("next")}{" "}
|
||||
</Link>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3.5 space-y-2">
|
||||
<Label htmlFor="password" className="font-medium text-default-600">
|
||||
{t("password")}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("password")}
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
className="peer pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.password.message}
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="username"
|
||||
className="font-medium text-default-600"
|
||||
>
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("username")}
|
||||
id="username"
|
||||
type="text"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="checkbox" defaultChecked />
|
||||
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
|
||||
</div>
|
||||
<Link
|
||||
href="/auth/forgot-password"
|
||||
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
|
||||
>
|
||||
{t("forgotPass")}
|
||||
</Link>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
fullWidth
|
||||
onClick={handleEmailValidation}
|
||||
disabled={isPending}
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</>
|
||||
) : step === 2 ? (
|
||||
<>
|
||||
<div className="text-left 2xl:mb-10 mb-4">
|
||||
<h4 className="font-semibold text-3xl text-left">
|
||||
Anda perlu memasukkan email baru untuk bisa Login.
|
||||
</h4>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center mb-6">
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="username"
|
||||
className="font-medium text-default-600"
|
||||
>
|
||||
Email Lama <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
onChange={(e) => checkEmail("old", e.target.value)}
|
||||
id="oldEmail"
|
||||
type="email"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
<p className="invalid-feedback-custom">{oldEmailValidate}</p>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
|
||||
<div className="mt-3.5 space-y-2">
|
||||
<Label
|
||||
htmlFor="password"
|
||||
className="font-medium text-default-600"
|
||||
>
|
||||
{t("password")}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("password")}
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
className="peer pr-10"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="username"
|
||||
className="font-medium text-default-600"
|
||||
>
|
||||
Email Baru <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
onChange={(e) => checkEmail("new", e.target.value)}
|
||||
id="newEmail"
|
||||
type="email"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
<p className="invalid-feedback-custom">{newEmailValidate}</p>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
{errors.password?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="checkbox" defaultChecked />
|
||||
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
fullWidth
|
||||
className="bg-red-500"
|
||||
onClick={handleSetupEmail}
|
||||
type="button"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
href="/auth/forgot-password"
|
||||
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
|
||||
>
|
||||
{t("forgotPass")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
fullWidth
|
||||
onClick={handleEmailValidation}
|
||||
disabled={isPending}
|
||||
>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<>
|
||||
<div className="text-left 2xl:mb-10 mb-4">
|
||||
<h4 className="font-semibold text-3xl text-left">
|
||||
Anda perlu memasukkan email baru untuk bisa Login.
|
||||
</h4>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center mb-6">
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="username"
|
||||
className="font-medium text-default-600"
|
||||
>
|
||||
Email Lama <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
onChange={(e) => checkEmail("old", e.target.value)}
|
||||
id="oldEmail"
|
||||
type="email"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
<p className="invalid-feedback-custom">{oldEmailValidate}</p>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label
|
||||
htmlFor="username"
|
||||
className="font-medium text-default-600"
|
||||
>
|
||||
Email Baru <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
onChange={(e) => checkEmail("new", e.target.value)}
|
||||
id="newEmail"
|
||||
type="email"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
<p className="invalid-feedback-custom">{newEmailValidate}</p>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
fullWidth
|
||||
className="bg-red-500"
|
||||
onClick={handleSetupEmail}
|
||||
type="button"
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
|
||||
{step === 3 && (
|
||||
<div className="mt-10 space-y-6">
|
||||
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
||||
<h4 className="font-semibold text-3xl text-left">
|
||||
{t("pleaseEnterOtp")}
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mb-6">
|
||||
<InputOTP
|
||||
maxLength={6}
|
||||
onChange={(val: string) => setOtpValue(val)}
|
||||
>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={0} onKeyUp={handleTypeOTP} />
|
||||
<InputOTPSlot index={1} onKeyUp={handleTypeOTP} />
|
||||
<InputOTPSlot index={0} onKeyDown={handleTypeOTP} />
|
||||
<InputOTPSlot index={1} onKeyDown={handleTypeOTP} />
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={2} onKeyUp={handleTypeOTP} />
|
||||
<InputOTPSlot index={3} onKeyUp={handleTypeOTP} />
|
||||
<InputOTPSlot index={2} onKeyDown={handleTypeOTP} />
|
||||
<InputOTPSlot index={3} onKeyDown={handleTypeOTP} />
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot index={4} onKeyUp={handleTypeOTP} />
|
||||
<InputOTPSlot index={5} onKeyUp={handleTypeOTP} />
|
||||
<InputOTPSlot index={4} onKeyDown={handleTypeOTP} />
|
||||
<InputOTPSlot index={5} onKeyDown={handleTypeOTP} />
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
|
||||
{otpValidate && (
|
||||
<p className="invalid-feedback-custom text-center">
|
||||
<b>{otpValidate}</b>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
className="bg-red-500"
|
||||
|
|
@ -614,9 +657,9 @@ const LoginForm = () => {
|
|||
>
|
||||
{t("signIn")}
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
95
lib/menus.ts
95
lib/menus.ts
|
|
@ -3146,16 +3146,16 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
|||
icon: "material-symbols:map-search-outline",
|
||||
submenus: [
|
||||
{
|
||||
href: "/admin/media-tracking",
|
||||
label: "Tracking Beritra Hari Ini",
|
||||
active: pathname === "/admin/media-tracking",
|
||||
href: "/admin/media-tracking/tracking-berita",
|
||||
label: "Tracking Beritra",
|
||||
active: pathname === "/admin/media-tracking/tracking-berita",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/media-tracking/media-online",
|
||||
label: "Media Online",
|
||||
active: pathname === "/admin/media-tracking/media-online",
|
||||
href: "/admin/media-tracking/results",
|
||||
label: "Hasil",
|
||||
active: pathname === "/admin/media-tracking/results",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
|
|
@ -3266,47 +3266,54 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
|||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/tag",
|
||||
label: "Tag",
|
||||
active: pathname === "/admin/settings/tag",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/banner",
|
||||
label: "Banner",
|
||||
active: pathname === "/admin/settings/banner",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/feedback",
|
||||
label: "Feedback",
|
||||
active: pathname === "/admin/settings/feedback",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/faq",
|
||||
label: "FAQ",
|
||||
active: pathname === "/admin/settings/faq",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "https://nat-mediahub.polri.go.id/",
|
||||
label: "Mediahub 2022",
|
||||
active: pathname === "/admin/settings/mediahub-2022",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/privacy",
|
||||
label: t("privacy"),
|
||||
active: pathname === "/admin/settings/privacy",
|
||||
href: "/admin/settings/setting-tracking",
|
||||
label: t("setting-tracking"),
|
||||
active: pathname === "/admin/settings/setting-tracking",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
// {
|
||||
// href: "/admin/settings/tag",
|
||||
// label: "Tag",
|
||||
// active: pathname === "/admin/settings/tag",
|
||||
// icon: "heroicons:arrow-trending-up",
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// href: "/admin/settings/banner",
|
||||
// label: "Banner",
|
||||
// active: pathname === "/admin/settings/banner",
|
||||
// icon: "heroicons:arrow-trending-up",
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// href: "/admin/settings/feedback",
|
||||
// label: "Feedback",
|
||||
// active: pathname === "/admin/settings/feedback",
|
||||
// icon: "heroicons:arrow-trending-up",
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// href: "/admin/settings/faq",
|
||||
// label: "FAQ",
|
||||
// active: pathname === "/admin/settings/faq",
|
||||
// icon: "heroicons:arrow-trending-up",
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// href: "https://nat-mediahub.polri.go.id/",
|
||||
// label: "Mediahub 2022",
|
||||
// active: pathname === "/admin/settings/mediahub-2022",
|
||||
// icon: "heroicons:arrow-trending-up",
|
||||
// children: [],
|
||||
// },
|
||||
// {
|
||||
// href: "/admin/settings/privacy",
|
||||
// label: t("privacy"),
|
||||
// active: pathname === "/admin/settings/privacy",
|
||||
// icon: "heroicons:arrow-trending-up",
|
||||
// children: [],
|
||||
// },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -341,7 +341,8 @@
|
|||
"privacy": "Privacy Policy",
|
||||
"contact": "Contact",
|
||||
"ptt": "PTT",
|
||||
"web-chat": "Web-Chat"
|
||||
"web-chat": "Web-Chat",
|
||||
"setting-tracking": "Media Tracking"
|
||||
},
|
||||
"Changelog": {
|
||||
"version": "Version's",
|
||||
|
|
|
|||
|
|
@ -342,7 +342,8 @@
|
|||
"privacy": "Kebijakan Privacy",
|
||||
"contact": "kontak",
|
||||
"ptt": "PTT",
|
||||
"web-chat": "Web-Chat"
|
||||
"web-chat": "Web-Chat",
|
||||
"setting-tracking": "Media Tracking"
|
||||
},
|
||||
"Changelog": {
|
||||
"version": "Version's",
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@ export async function getMediaTrackingResult(data: any) {
|
|||
return httpGetInterceptor(url);
|
||||
}
|
||||
|
||||
export async function listData5Data() {
|
||||
export async function listDataTracking(size: any, page: any) {
|
||||
return await httpGetInterceptor(
|
||||
`media/public/list?enablePage=1&sort=desc&size=5`
|
||||
`media/public/list?enablePage=1&sort=desc&size=${size}&page=${page}`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue