[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 { 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/bundle";
|
||||||
import "swiper/css/navigation";
|
import "swiper/css/navigation";
|
||||||
import { getHeroData, listStaticBanner } from "@/service/landing/landing";
|
import { getHeroData, listStaticBanner } from "@/service/landing/landing";
|
||||||
|
|
@ -37,11 +37,12 @@ import {
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "../ui/dialog";
|
} from "../ui/dialog";
|
||||||
import { Autoplay, Pagination } from "swiper/modules";
|
import { Autoplay, Navigation, Pagination } from "swiper/modules";
|
||||||
import { Swiper, SwiperSlide } from "swiper/react";
|
import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
|
||||||
import "swiper/css";
|
import "swiper/css";
|
||||||
|
import "swiper/css/navigation";
|
||||||
import "swiper/css/pagination";
|
import "swiper/css/pagination";
|
||||||
import FormSurvey from "./survey";
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
type HeroModalProps = {
|
type HeroModalProps = {
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
|
|
@ -59,6 +60,7 @@ const HeroModal = ({
|
||||||
const [heroData, setHeroData] = useState<any>();
|
const [heroData, setHeroData] = useState<any>();
|
||||||
const params = useParams();
|
const params = useParams();
|
||||||
const locale = params?.locale;
|
const locale = params?.locale;
|
||||||
|
const swiperRef = useRef<SwiperClass | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function fetchCategories() {
|
async function fetchCategories() {
|
||||||
|
|
@ -116,9 +118,27 @@ const HeroModal = ({
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 flex items-center justify-center backdrop-brightness-50 z-50 ">
|
<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">
|
<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
|
<Swiper
|
||||||
pagination={{ dynamicBullets: true }}
|
pagination={{ dynamicBullets: true }}
|
||||||
modules={[Pagination, Autoplay]}
|
modules={[Pagination, Autoplay]}
|
||||||
|
onSwiper={(swiper) => (swiperRef.current = swiper)}
|
||||||
|
autoplay={{ delay: 3000 }}
|
||||||
className="mySwiper w-full"
|
className="mySwiper w-full"
|
||||||
>
|
>
|
||||||
{heroData?.map((list: any, index: number) => (
|
{heroData?.map((list: any, index: number) => (
|
||||||
|
|
@ -336,115 +356,109 @@ const HeroNew = (props: { group?: string }) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Carousel className="lg:w-full lg:h-full ">
|
<div className="relative w-full h-full">
|
||||||
<CarouselContent>
|
<Carousel className="lg:w-full lg:h-full">
|
||||||
{content?.map((list: any) => (
|
<CarouselContent>
|
||||||
<CarouselItem key={list?.id}>
|
{content?.map((list: any) => (
|
||||||
<div className="relative h-[310px] lg:h-[700px] mt-1">
|
<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
|
<Image
|
||||||
src={list?.thumbnailLink}
|
|
||||||
alt="gambar-utama"
|
|
||||||
width={1920}
|
|
||||||
height={1080}
|
|
||||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
placeholder={`data:image/svg+xml;base64,${toBase64(
|
||||||
shimmer(700, 475)
|
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
|
<Link
|
||||||
href={
|
href={
|
||||||
Number(list?.fileTypeId) == 1
|
Number(item?.fileTypeId) == 1
|
||||||
? `${locale}/image/detail/${list?.slug}`
|
? `${locale}/image/detail/${item?.slug}`
|
||||||
: Number(list?.fileTypeId) == 2
|
: Number(item?.fileTypeId) == 2
|
||||||
? `${locale}/video/detail/${list?.slug}`
|
? `${locale}/video/detail/${item?.slug}`
|
||||||
: Number(list?.fileTypeId) == 3
|
: Number(item?.fileTypeId) == 3
|
||||||
? `${locale}/document/detail/${list?.slug}`
|
? `${locale}/document/detail/${item?.slug}`
|
||||||
: `${locale}/audio/detail/${list?.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="py-1 rounded-lg flex text-red-600 font-bold uppercase w-fit">
|
||||||
<span className="absolute top-0 left-0 mb-4 mx-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
|
{item?.categoryName}
|
||||||
{list?.categoryName || "Liputan Kegiatan"}
|
</span>
|
||||||
</span>
|
<h3 className="text-base text-white font-bold h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||||
|
{item?.title}
|
||||||
<h2 className="text-xl font-bold leading-tight">
|
</h3>
|
||||||
{list?.title}
|
<p className="text-[10px] flex flex-row items-center gap-1 text-white mt-1">
|
||||||
</h2>
|
{formatDateToIndonesian(new Date(item?.createdAt))}{" "}
|
||||||
|
{item?.timezone || "WIB"} |{" "}
|
||||||
<p className="text-base flex items-center gap-1 mt-2 opacity-80">
|
<svg
|
||||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
|
width="1.2em"
|
||||||
</p>
|
height="1.2em"
|
||||||
</div>
|
viewBox="0 0 24 24"
|
||||||
</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"
|
|
||||||
>
|
>
|
||||||
<div className="flex-shrink-0 w-32 rounded-lg">
|
<path
|
||||||
<Image
|
fill="currentColor"
|
||||||
placeholder={`data:image/svg+xml;base64,${toBase64(
|
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"
|
||||||
shimmer(700, 475)
|
/>
|
||||||
)}`}
|
</svg>{" "}
|
||||||
width={720}
|
{item?.clickCount}
|
||||||
height={480}
|
</p>
|
||||||
src={item?.thumbnailLink}
|
</Link>
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</CarouselItem>
|
</li>
|
||||||
))}
|
))}
|
||||||
</CarouselContent>
|
</div>
|
||||||
</Carousel>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -39,12 +39,12 @@ const SearchSection = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const t = useTranslations("LandingPage");
|
const t = useTranslations("LandingPage");
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full h-full bg-gray-100 dark:bg-zinc-800">
|
<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-8">
|
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
|
||||||
<LeftBanner />
|
<LeftBanner />
|
||||||
</div>
|
</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 />
|
<ScrollableContent />
|
||||||
<NewContent group="mabes" type="latest" />
|
<NewContent group="mabes" type="latest" />
|
||||||
<NewContent group="mabes" type="popular" />
|
<NewContent group="mabes" type="popular" />
|
||||||
|
|
@ -54,7 +54,7 @@ const SearchSection = () => {
|
||||||
<UserSurveyBox />
|
<UserSurveyBox />
|
||||||
</div>
|
</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 />
|
<RightBanner />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -96,11 +96,21 @@ const LoginForm = () => {
|
||||||
mode: "all",
|
mode: "all",
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleTypeOTP = (event: any) => {
|
const handleTypeOTP = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
const { form } = event.target;
|
const { key } = event;
|
||||||
const index = [...form].indexOf(event.target);
|
const target = event.currentTarget;
|
||||||
form.elements[index + 1].focus();
|
|
||||||
event.preventDefault();
|
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) => {
|
const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
|
||||||
|
|
@ -384,227 +394,260 @@ const LoginForm = () => {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit(onSubmit)} className="mt-5 2xl:mt-7 space-y-4">
|
<>
|
||||||
{step === 1 ? (
|
{step !== 3 && (
|
||||||
<>
|
<form
|
||||||
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
<h4 className="font-semibold text-3xl text-left">
|
className="mt-5 2xl:mt-7 space-y-4"
|
||||||
{t("logInPlease")}
|
>
|
||||||
</h4>
|
{step === 1 && (
|
||||||
<div className="text-default-500 text-base">
|
<>
|
||||||
{t("acc")}
|
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
||||||
<Dialog>
|
<h4 className="font-semibold text-3xl text-left">
|
||||||
<DialogTrigger asChild>
|
{t("logInPlease")}
|
||||||
<span className="w-full lg:w-fit px-2 h-8 text-red-500 hover:cursor-pointer">
|
</h4>
|
||||||
{t("register")}
|
<div className="text-default-500 text-base">
|
||||||
</span>
|
{t("acc")}
|
||||||
</DialogTrigger>
|
<Dialog>
|
||||||
<DialogContent size="sm" className="sm:max-w-[425px]">
|
<DialogTrigger asChild>
|
||||||
<div className="flex flex-col w-full gap-1">
|
<span className="w-full lg:w-fit px-2 h-8 text-red-500 hover:cursor-pointer">
|
||||||
<p className="text-lg font-semibold text-center">
|
{t("register")}
|
||||||
{t("categoryReg")}
|
</span>
|
||||||
</p>
|
</DialogTrigger>
|
||||||
<p className="text-base text-center">{t("selectOne")}</p>
|
<DialogContent size="sm" className="sm:max-w-[425px]">
|
||||||
</div>
|
<div className="flex flex-col w-full gap-1">
|
||||||
<div>
|
<p className="text-lg font-semibold text-center">
|
||||||
{role?.map((row: any) => (
|
{t("categoryReg")}
|
||||||
<div key={row.id}>
|
</p>
|
||||||
<input
|
<p className="text-base text-center">
|
||||||
type="radio"
|
{t("selectOne")}
|
||||||
id={`category${row.id}`}
|
</p>
|
||||||
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>
|
||||||
</div>
|
{role?.map((row: any) => (
|
||||||
<div className="border-b-2 border-black"></div>
|
<div key={row.id}>
|
||||||
<DialogFooter>
|
<input
|
||||||
<Link
|
type="radio"
|
||||||
href={`/auth/registration?category=${category}`}
|
id={`category${row.id}`}
|
||||||
className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white"
|
name="category"
|
||||||
type="submit"
|
className=""
|
||||||
>
|
value={row.id}
|
||||||
{t("next")}{" "}
|
checked={category == `${row.id}`}
|
||||||
</Link>
|
onChange={(event) =>
|
||||||
</DialogFooter>
|
setCategory(event.target.value)
|
||||||
</DialogContent>
|
}
|
||||||
</Dialog>
|
/>
|
||||||
</div>
|
<label
|
||||||
</div>
|
className="ml-2"
|
||||||
<div className="space-y-2">
|
htmlFor={`category${row.id}`}
|
||||||
<Label htmlFor="username" className="font-medium text-default-600">
|
>
|
||||||
Username
|
{row.name}
|
||||||
</Label>
|
</label>
|
||||||
<Input
|
</div>
|
||||||
size="lg"
|
))}
|
||||||
disabled={isPending}
|
</div>
|
||||||
{...register("username")}
|
<div className="border-b-2 border-black"></div>
|
||||||
id="username"
|
<DialogFooter>
|
||||||
type="text"
|
<Link
|
||||||
className={cn("", {
|
href={`/auth/registration?category=${category}`}
|
||||||
"border-destructive": errors.username,
|
className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white"
|
||||||
})}
|
type="submit"
|
||||||
/>
|
>
|
||||||
{errors.username?.message && (
|
{t("next")}{" "}
|
||||||
<div className="text-destructive mt-2 text-sm">
|
</Link>
|
||||||
{errors.username.message}
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3.5 space-y-2">
|
<div className="space-y-2">
|
||||||
<Label htmlFor="password" className="font-medium text-default-600">
|
<Label
|
||||||
{t("password")}
|
htmlFor="username"
|
||||||
</Label>
|
className="font-medium text-default-600"
|
||||||
<div className="relative">
|
>
|
||||||
<Input
|
Username
|
||||||
size="lg"
|
</Label>
|
||||||
disabled={isPending}
|
<Input
|
||||||
{...register("password")}
|
size="lg"
|
||||||
id="password"
|
disabled={isPending}
|
||||||
type={showPassword ? "text" : "password"}
|
{...register("username")}
|
||||||
className="peer pr-10"
|
id="username"
|
||||||
/>
|
type="text"
|
||||||
<button
|
className={cn("", {
|
||||||
type="button"
|
"border-destructive": errors.username,
|
||||||
onClick={() => setShowPassword(!showPassword)}
|
})}
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
|
/>
|
||||||
tabIndex={-1}
|
{errors.username?.message && (
|
||||||
>
|
<div className="text-destructive mt-2 text-sm">
|
||||||
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
{errors.username.message}
|
||||||
</button>
|
</div>
|
||||||
</div>
|
)}
|
||||||
{errors.password?.message && (
|
|
||||||
<div className="text-destructive mt-2 text-sm">
|
|
||||||
{errors.password.message}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
<div className="mt-3.5 space-y-2">
|
||||||
<div className="flex justify-between">
|
<Label
|
||||||
<div className="flex gap-2 items-center">
|
htmlFor="password"
|
||||||
<Checkbox id="checkbox" defaultChecked />
|
className="font-medium text-default-600"
|
||||||
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
|
>
|
||||||
</div>
|
{t("password")}
|
||||||
<Link
|
</Label>
|
||||||
href="/auth/forgot-password"
|
<div className="relative">
|
||||||
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
|
<Input
|
||||||
>
|
size="lg"
|
||||||
{t("forgotPass")}
|
disabled={isPending}
|
||||||
</Link>
|
{...register("password")}
|
||||||
</div>
|
id="password"
|
||||||
<Button
|
type={showPassword ? "text" : "password"}
|
||||||
type="button"
|
className="peer pr-10"
|
||||||
fullWidth
|
/>
|
||||||
onClick={handleEmailValidation}
|
<button
|
||||||
disabled={isPending}
|
type="button"
|
||||||
>
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
Selanjutnya
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-default-500 hover:text-default-700"
|
||||||
</Button>
|
tabIndex={-1}
|
||||||
</>
|
>
|
||||||
) : step === 2 ? (
|
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
||||||
<>
|
</button>
|
||||||
<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>
|
||||||
)}
|
{errors.password?.message && (
|
||||||
</div>
|
<div className="text-destructive mt-2 text-sm">
|
||||||
<div className="space-y-2">
|
{errors.password.message}
|
||||||
<Label
|
</div>
|
||||||
htmlFor="username"
|
)}
|
||||||
className="font-medium text-default-600"
|
</div>
|
||||||
>
|
|
||||||
Email Baru <span className="text-red-500">*</span>
|
<div className="flex justify-between">
|
||||||
</Label>
|
<div className="flex gap-2 items-center">
|
||||||
<Input
|
<Checkbox id="checkbox" defaultChecked />
|
||||||
size="lg"
|
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
|
||||||
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>
|
||||||
)}
|
<Link
|
||||||
</div>
|
href="/auth/forgot-password"
|
||||||
</div>
|
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
|
||||||
<Button
|
>
|
||||||
fullWidth
|
{t("forgotPass")}
|
||||||
className="bg-red-500"
|
</Link>
|
||||||
onClick={handleSetupEmail}
|
</div>
|
||||||
type="button"
|
|
||||||
>
|
<Button
|
||||||
Simpan
|
type="button"
|
||||||
</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">
|
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
||||||
<h4 className="font-semibold text-3xl text-left">
|
<h4 className="font-semibold text-3xl text-left">
|
||||||
{t("pleaseEnterOtp")}
|
{t("pleaseEnterOtp")}
|
||||||
</h4>
|
</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-center mb-6">
|
<div className="flex justify-center mb-6">
|
||||||
<InputOTP
|
<InputOTP
|
||||||
maxLength={6}
|
maxLength={6}
|
||||||
onChange={(val: string) => setOtpValue(val)}
|
onChange={(val: string) => setOtpValue(val)}
|
||||||
>
|
>
|
||||||
<InputOTPGroup>
|
<InputOTPGroup>
|
||||||
<InputOTPSlot index={0} onKeyUp={handleTypeOTP} />
|
<InputOTPSlot index={0} onKeyDown={handleTypeOTP} />
|
||||||
<InputOTPSlot index={1} onKeyUp={handleTypeOTP} />
|
<InputOTPSlot index={1} onKeyDown={handleTypeOTP} />
|
||||||
</InputOTPGroup>
|
</InputOTPGroup>
|
||||||
<InputOTPSeparator />
|
<InputOTPSeparator />
|
||||||
<InputOTPGroup>
|
<InputOTPGroup>
|
||||||
<InputOTPSlot index={2} onKeyUp={handleTypeOTP} />
|
<InputOTPSlot index={2} onKeyDown={handleTypeOTP} />
|
||||||
<InputOTPSlot index={3} onKeyUp={handleTypeOTP} />
|
<InputOTPSlot index={3} onKeyDown={handleTypeOTP} />
|
||||||
</InputOTPGroup>
|
</InputOTPGroup>
|
||||||
<InputOTPSeparator />
|
<InputOTPSeparator />
|
||||||
<InputOTPGroup>
|
<InputOTPGroup>
|
||||||
<InputOTPSlot index={4} onKeyUp={handleTypeOTP} />
|
<InputOTPSlot index={4} onKeyDown={handleTypeOTP} />
|
||||||
<InputOTPSlot index={5} onKeyUp={handleTypeOTP} />
|
<InputOTPSlot index={5} onKeyDown={handleTypeOTP} />
|
||||||
</InputOTPGroup>
|
</InputOTPGroup>
|
||||||
</InputOTP>
|
</InputOTP>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{otpValidate && (
|
||||||
<p className="invalid-feedback-custom text-center">
|
<p className="invalid-feedback-custom text-center">
|
||||||
<b>{otpValidate}</b>
|
<b>{otpValidate}</b>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
fullWidth
|
fullWidth
|
||||||
className="bg-red-500"
|
className="bg-red-500"
|
||||||
|
|
@ -614,9 +657,9 @@ const LoginForm = () => {
|
||||||
>
|
>
|
||||||
{t("signIn")}
|
{t("signIn")}
|
||||||
</Button>
|
</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",
|
icon: "material-symbols:map-search-outline",
|
||||||
submenus: [
|
submenus: [
|
||||||
{
|
{
|
||||||
href: "/admin/media-tracking",
|
href: "/admin/media-tracking/tracking-berita",
|
||||||
label: "Tracking Beritra Hari Ini",
|
label: "Tracking Beritra",
|
||||||
active: pathname === "/admin/media-tracking",
|
active: pathname === "/admin/media-tracking/tracking-berita",
|
||||||
icon: "heroicons:arrow-trending-up",
|
icon: "heroicons:arrow-trending-up",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: "/admin/media-tracking/media-online",
|
href: "/admin/media-tracking/results",
|
||||||
label: "Media Online",
|
label: "Hasil",
|
||||||
active: pathname === "/admin/media-tracking/media-online",
|
active: pathname === "/admin/media-tracking/results",
|
||||||
icon: "heroicons:arrow-trending-up",
|
icon: "heroicons:arrow-trending-up",
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
|
|
@ -3266,47 +3266,54 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
||||||
children: [],
|
children: [],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
href: "/admin/settings/tag",
|
href: "/admin/settings/setting-tracking",
|
||||||
label: "Tag",
|
label: t("setting-tracking"),
|
||||||
active: pathname === "/admin/settings/tag",
|
active: pathname === "/admin/settings/setting-tracking",
|
||||||
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",
|
icon: "heroicons:arrow-trending-up",
|
||||||
children: [],
|
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",
|
"privacy": "Privacy Policy",
|
||||||
"contact": "Contact",
|
"contact": "Contact",
|
||||||
"ptt": "PTT",
|
"ptt": "PTT",
|
||||||
"web-chat": "Web-Chat"
|
"web-chat": "Web-Chat",
|
||||||
|
"setting-tracking": "Media Tracking"
|
||||||
},
|
},
|
||||||
"Changelog": {
|
"Changelog": {
|
||||||
"version": "Version's",
|
"version": "Version's",
|
||||||
|
|
|
||||||
|
|
@ -342,7 +342,8 @@
|
||||||
"privacy": "Kebijakan Privacy",
|
"privacy": "Kebijakan Privacy",
|
||||||
"contact": "kontak",
|
"contact": "kontak",
|
||||||
"ptt": "PTT",
|
"ptt": "PTT",
|
||||||
"web-chat": "Web-Chat"
|
"web-chat": "Web-Chat",
|
||||||
|
"setting-tracking": "Media Tracking"
|
||||||
},
|
},
|
||||||
"Changelog": {
|
"Changelog": {
|
||||||
"version": "Version's",
|
"version": "Version's",
|
||||||
|
|
|
||||||
|
|
@ -44,9 +44,9 @@ export async function getMediaTrackingResult(data: any) {
|
||||||
return httpGetInterceptor(url);
|
return httpGetInterceptor(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function listData5Data() {
|
export async function listDataTracking(size: any, page: any) {
|
||||||
return await httpGetInterceptor(
|
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