feat:task planning social media, create task planning
This commit is contained in:
Rama Priyanto
parent
2ec46045f9
commit
56974317ef
|
|
@ -0,0 +1,90 @@
|
|||
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 { 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";
|
||||
|
||||
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: "date",
|
||||
header: "Tanggal Masuk",
|
||||
cell: ({ row }) => <span>{row.getValue("date")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
accessorKey: "duration",
|
||||
header: "Durasi",
|
||||
cell: ({ row }) => <span>{row.getValue("duration")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "crawling",
|
||||
header: "Model Crawling",
|
||||
cell: ({ row }) => <span>{row.getValue("crawling")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Aksi",
|
||||
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"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
Detail
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default columns;
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
PaginationState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Search,
|
||||
SquarePen,
|
||||
Trash2,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||
import { paginationBlog } from "@/service/blog/blog";
|
||||
import { ticketingPagination } from "@/service/ticketing/ticketing";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import columns from "./column";
|
||||
import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
|
||||
import { getMediaTrackingMonitoring } from "@/service/media-tracking/media-tracking";
|
||||
|
||||
const MediaTrackingTable = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
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 [limit, setLimit] = React.useState(10);
|
||||
const [totalPage, setTotalPage] = React.useState(1);
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, limit]);
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await getMediaTrackingMonitoring(page, 10);
|
||||
const data = response.data?.data;
|
||||
const contentData = data?.content;
|
||||
contentData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * limit + index + 1;
|
||||
});
|
||||
|
||||
console.log("contentData : ", data);
|
||||
|
||||
setDataTable(contentData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tasks:", error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Table className="overflow-hidden mt-3">
|
||||
<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 MediaTrackingTable;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import MediaTrackingTable from "./component/table";
|
||||
|
||||
export default function MediaTracking() {
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
<MediaTrackingTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@ import {
|
|||
} from "@/components/ui/popover";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { format } from "date-fns";
|
||||
import JoditEditor from "jodit-react";
|
||||
|
|
@ -30,6 +30,21 @@ import Swal from "sweetalert2";
|
|||
import withReactContent from "sweetalert2-react-content";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { getUserLevelForAssignments } from "@/service/task";
|
||||
import { list } from "postcss";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
|
||||
const FormSchema = z.object({
|
||||
date: z.date({
|
||||
|
|
@ -73,20 +88,22 @@ const items = [
|
|||
|
||||
const units = [
|
||||
{
|
||||
id: "mabes",
|
||||
id: "1",
|
||||
label: "Mabes Polri",
|
||||
},
|
||||
{
|
||||
id: "polda",
|
||||
id: "2",
|
||||
label: "Polda",
|
||||
},
|
||||
{
|
||||
id: "polres",
|
||||
id: "3",
|
||||
label: "Polres",
|
||||
},
|
||||
];
|
||||
export default function CreateMonthly() {
|
||||
export default function CreateDaily() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const [listDest, setListDest] = useState<any>([]);
|
||||
const [destination, setDestination] = useState<string[]>([]);
|
||||
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
|
|
@ -164,10 +181,82 @@ export default function CreateMonthly() {
|
|||
};
|
||||
|
||||
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||
form.setValue(
|
||||
"unit",
|
||||
checked ? [...unit, id] : unit.filter((value) => value !== id)
|
||||
);
|
||||
if (checked) {
|
||||
form.setValue("unit", [...unit, id]);
|
||||
} else {
|
||||
if (id == "2") {
|
||||
const temp = [];
|
||||
for (const element of unit) {
|
||||
if (element == "1") {
|
||||
temp.push("1");
|
||||
}
|
||||
}
|
||||
form.setValue("unit", temp);
|
||||
} else {
|
||||
form.setValue(
|
||||
"unit",
|
||||
unit.filter((value) => value !== id)
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function initState() {
|
||||
const response = await getUserLevelForAssignments();
|
||||
console.log("response", response);
|
||||
setListDest(response.data.data.list);
|
||||
}
|
||||
|
||||
initState();
|
||||
}, []);
|
||||
|
||||
const handleDestination = (e: any) => {
|
||||
let arrayDestination = [];
|
||||
|
||||
for (const element of destination) {
|
||||
arrayDestination.push(element);
|
||||
}
|
||||
|
||||
if (e.target.name == "all") {
|
||||
if (e.target.checked == true) {
|
||||
const count = document.querySelectorAll(".input-all");
|
||||
for (const element of Array.from(count)) {
|
||||
arrayDestination.push((element as HTMLInputElement).value);
|
||||
}
|
||||
} else {
|
||||
arrayDestination = [];
|
||||
}
|
||||
} else if (e.target.name == `subAll${e.target.value}`) {
|
||||
if (e.target.checked == true) {
|
||||
const count = document.getElementsByClassName(
|
||||
`input-suball-${e.target.value}`
|
||||
);
|
||||
arrayDestination.push(e.target.value);
|
||||
for (const element of Array.from(count)) {
|
||||
arrayDestination.push((element as HTMLInputElement).value);
|
||||
}
|
||||
} else {
|
||||
const count = document.getElementsByClassName(
|
||||
`input-suball-${e.target.value}`
|
||||
);
|
||||
|
||||
arrayDestination.splice(destination.indexOf(e.target.value), 1);
|
||||
for (const element of Array.from(count)) {
|
||||
const index = arrayDestination.indexOf(
|
||||
(element as HTMLInputElement).value
|
||||
);
|
||||
if (index > -1) {
|
||||
arrayDestination.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (e.target.checked == true) {
|
||||
arrayDestination.push(e.target.value);
|
||||
} else {
|
||||
arrayDestination.splice(destination.indexOf(e.target.value), 1);
|
||||
}
|
||||
setDestination(arrayDestination);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -226,7 +315,6 @@ export default function CreateMonthly() {
|
|||
<Checkbox
|
||||
id="all"
|
||||
checked={isAllChecked}
|
||||
// indeterminate={isSomeChecked && !isAllChecked}
|
||||
onCheckedChange={(checked) =>
|
||||
handleAllCheckedChange(checked)
|
||||
}
|
||||
|
|
@ -305,8 +393,7 @@ export default function CreateMonthly() {
|
|||
<Checkbox
|
||||
checked={unit?.includes(item.id)}
|
||||
disabled={
|
||||
item.id === "polres" &&
|
||||
!unit.includes("polda")
|
||||
item.id === "3" && !unit.includes("2")
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
handleUnitCheckedChange(item.id, checked)
|
||||
|
|
@ -321,6 +408,108 @@ export default function CreateMonthly() {
|
|||
}}
|
||||
/>
|
||||
))}
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<a className="text-primary cursor-pointer text-sm">
|
||||
{`[Kustom]`}
|
||||
</a>
|
||||
</DialogTrigger>
|
||||
<DialogContent size="md" className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
Daftar Wilayah Polda dan Polres
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="grid grid-cols-2 gap-4 py-4 max-h-[600px] overflow-y-auto custom-scrollbar-table">
|
||||
{listDest?.map((list: any) => (
|
||||
<div key={list.id}>
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="h-fit border-none"
|
||||
>
|
||||
<AccordionItem
|
||||
value={list.name}
|
||||
className="border-none"
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={list.id}
|
||||
name={`all${list.id}`}
|
||||
checked={
|
||||
unit.includes("2")
|
||||
? true
|
||||
: destination
|
||||
? destination.includes(`${list.id}`)
|
||||
: false
|
||||
}
|
||||
onChange={handleDestination}
|
||||
disabled={unit.includes("2")}
|
||||
className="input-all input-polda"
|
||||
/>
|
||||
<label
|
||||
htmlFor={list.name}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{list.name}
|
||||
</label>
|
||||
<AccordionTrigger className="w-fit bg-transparent"></AccordionTrigger>
|
||||
</div>
|
||||
<AccordionContent>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
name={`subAll${list.id}`}
|
||||
onChange={handleDestination}
|
||||
disabled={unit.includes("3")}
|
||||
className="custom-control-input input-suball"
|
||||
/>
|
||||
<label
|
||||
htmlFor="all-polres"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Pilih Semua Polres
|
||||
</label>
|
||||
</div>
|
||||
{list.subDestination.map(
|
||||
(subDes: any) => (
|
||||
<div
|
||||
key={subDes.id}
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Checkbox
|
||||
id={`${list.id}${subDes.id}`}
|
||||
checked={
|
||||
unit.includes("3")
|
||||
? true
|
||||
: destination
|
||||
? destination.includes(
|
||||
`${subDes.id}`
|
||||
)
|
||||
: false
|
||||
}
|
||||
className={`custom-control-input input-all input-suball-${list.id}`}
|
||||
onChange={handleDestination}
|
||||
disabled={unit.includes("3")}
|
||||
/>
|
||||
<label
|
||||
htmlFor={`${list.id}${subDes.id}`}
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{subDes.name}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
|
|
|
|||
|
|
@ -83,7 +83,9 @@ export default function CreateMonthly() {
|
|||
time: "3",
|
||||
description: data.detail,
|
||||
username: "",
|
||||
date: new Date(data.month).getMonth() + 1,
|
||||
date: `${new Date(data.month).getMonth() + 1}/${new Date(
|
||||
data.month
|
||||
).getFullYear()}`,
|
||||
status: "Open",
|
||||
};
|
||||
console.log("req", reqData, data.month);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import {
|
|||
} from "@/components/ui/popover";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { format } from "date-fns";
|
||||
import JoditEditor from "jodit-react";
|
||||
|
|
@ -30,7 +30,18 @@ import Swal from "sweetalert2";
|
|||
import withReactContent from "sweetalert2-react-content";
|
||||
import { error } from "@/config/swal";
|
||||
import { getOnlyDate } from "@/utils/globals";
|
||||
import { savePlanning } from "@/service/agenda-setting/agenda-setting";
|
||||
import {
|
||||
getMonthlyPlanList,
|
||||
savePlanning,
|
||||
} from "@/service/agenda-setting/agenda-setting";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const FormSchema = z.object({
|
||||
week: z.object({
|
||||
|
|
@ -47,6 +58,9 @@ const FormSchema = z.object({
|
|||
detail: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
parentId: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
});
|
||||
export default function CreateMonthly() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
|
@ -57,6 +71,8 @@ export default function CreateMonthly() {
|
|||
detail: "",
|
||||
},
|
||||
});
|
||||
const [monthlyList, setMonthlyList] = useState<any>();
|
||||
|
||||
const editor = useRef(null);
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||
|
|
@ -91,6 +107,7 @@ export default function CreateMonthly() {
|
|||
username: "",
|
||||
date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
|
||||
status: "Open",
|
||||
parentId: Number(data.parentId),
|
||||
};
|
||||
console.log("req", reqData);
|
||||
const response = await savePlanning(reqData);
|
||||
|
|
@ -112,6 +129,24 @@ export default function CreateMonthly() {
|
|||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getMonthlyPlanning();
|
||||
}, []);
|
||||
|
||||
async function getMonthlyPlanning() {
|
||||
const res = await getMonthlyPlanList(new Date().getDate(), 1);
|
||||
|
||||
if (res.data !== null) {
|
||||
const rawUser = res.data?.data;
|
||||
const optionArr = rawUser.map((option: any) => ({
|
||||
id: option.id,
|
||||
label: option.title,
|
||||
value: String(option.id),
|
||||
}));
|
||||
console.log("ssss", optionArr);
|
||||
setMonthlyList(optionArr);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
|
|
@ -198,6 +233,31 @@ export default function CreateMonthly() {
|
|||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="parentId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Perencanaan Bulanan</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{monthlyList?.map((list: any) => (
|
||||
<SelectItem key={list.id} value={list.value}>
|
||||
{list.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="detail"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,75 @@
|
|||
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 { htmlToString } from "@/utils/globals";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Judul Perencanaan",
|
||||
cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "createdByName",
|
||||
header: "Nama Pembuat",
|
||||
cell: ({ row }) => <span>{row.getValue("createdByName")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "description",
|
||||
header: "Deskripsi",
|
||||
cell: ({ row }) => <span>{htmlToString(row.getValue("description"))}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Actions",
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
<Link
|
||||
href={`/curator/task-plan/mediahub/detail/${row.original.id}`}
|
||||
>
|
||||
Detail
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default columns;
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
PaginationState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Search,
|
||||
SquarePen,
|
||||
Trash2,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||
import { paginationBlog } from "@/service/blog/blog";
|
||||
import { ticketingPagination } from "@/service/ticketing/ticketing";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import columns from "./columns";
|
||||
|
||||
const TaskPlanMediahubTable = (props: {
|
||||
data: any;
|
||||
totalPage: number;
|
||||
totalData: number;
|
||||
}) => {
|
||||
const { data, totalPage, totalData } = props;
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||
// const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
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 [limit, setLimit] = React.useState(10);
|
||||
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, limit, data]);
|
||||
|
||||
async function fetchData() {
|
||||
// try {
|
||||
// const res = await ticketingPagination("", limit, page - 1);
|
||||
// const data = res.data?.data;
|
||||
console.log("datgaa", data);
|
||||
const contentData = data;
|
||||
contentData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * limit + index + 1;
|
||||
});
|
||||
|
||||
console.log("contentData : ", contentData);
|
||||
|
||||
setDataTable(contentData);
|
||||
// setTotalData(data?.totalElements);
|
||||
// } catch (error) {
|
||||
// console.error("Error fetching tasks:", error);
|
||||
// }
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Table className="overflow-hidden mt-3">
|
||||
<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 TaskPlanMediahubTable;
|
||||
|
|
@ -0,0 +1,436 @@
|
|||
"use client";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { format } from "date-fns";
|
||||
import JoditEditor from "jodit-react";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
|
||||
const FormSchema = z.object({
|
||||
date: z.date({
|
||||
required_error: "Required",
|
||||
}),
|
||||
title: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
detail: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
output: z.array(z.string()).refine((value) => value.some((item) => item), {
|
||||
message: "Required",
|
||||
}),
|
||||
unit: z.array(z.string()).refine((value) => value.some((item) => item), {
|
||||
message: "Required",
|
||||
}),
|
||||
type: z.enum(["publication", "amplification", "contra"], {
|
||||
required_error: "Required",
|
||||
}),
|
||||
});
|
||||
|
||||
const items = [
|
||||
{
|
||||
id: "video",
|
||||
label: "Audio Visual",
|
||||
},
|
||||
{
|
||||
id: "image",
|
||||
label: "Foto",
|
||||
},
|
||||
{
|
||||
id: "audio",
|
||||
label: "Audio",
|
||||
},
|
||||
{
|
||||
id: "text",
|
||||
label: "Text",
|
||||
},
|
||||
];
|
||||
|
||||
const units = [
|
||||
{
|
||||
id: "mabes",
|
||||
label: "Mabes Polri",
|
||||
},
|
||||
{
|
||||
id: "polda",
|
||||
label: "Polda",
|
||||
},
|
||||
{
|
||||
id: "polres",
|
||||
label: "Polres",
|
||||
},
|
||||
];
|
||||
export default function CreateMonthly() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
unit: [],
|
||||
output: [],
|
||||
detail: "",
|
||||
},
|
||||
});
|
||||
const editor = useRef(null);
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||
console.log("data", data);
|
||||
if (form.getValues("detail") == "") {
|
||||
form.setError("detail", {
|
||||
type: "manual",
|
||||
message: "Required",
|
||||
});
|
||||
} else {
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "Simpan",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
save(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const save = async (data: z.infer<typeof FormSchema>) => {
|
||||
console.log("data", data);
|
||||
};
|
||||
|
||||
const output = form.watch("output");
|
||||
|
||||
const isAllChecked = items.every((item) => output?.includes(item.id));
|
||||
|
||||
const unit = form.watch("unit");
|
||||
|
||||
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
||||
|
||||
const handleAllCheckedChange = (checked: boolean | string) => {
|
||||
if (checked) {
|
||||
form.setValue(
|
||||
"output",
|
||||
items.map((item) => item.id)
|
||||
);
|
||||
} else {
|
||||
form.setValue("output", []);
|
||||
}
|
||||
};
|
||||
|
||||
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
||||
form.setValue(
|
||||
"output",
|
||||
checked ? [...output, id] : output.filter((value) => value !== id)
|
||||
);
|
||||
};
|
||||
|
||||
const handleAllUnitCheckedChange = (checked: boolean | string) => {
|
||||
if (checked) {
|
||||
form.setValue(
|
||||
"unit",
|
||||
units.map((item) => item.id)
|
||||
);
|
||||
} else {
|
||||
form.setValue("unit", []);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||
form.setValue(
|
||||
"unit",
|
||||
checked ? [...unit, id] : unit.filter((value) => value !== id)
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-row justify-center gap-5 mt-10">
|
||||
<Link
|
||||
href="/curator/task-plan/medsos-mediahub/create-monthly"
|
||||
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||
>
|
||||
Bulanan
|
||||
</Link>
|
||||
<Link
|
||||
href="/curator/task-plan/medsos-mediahub/create-weekly"
|
||||
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||
>
|
||||
Mingguan
|
||||
</Link>
|
||||
|
||||
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
|
||||
Harian
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col bg-white gap-2 p-6">
|
||||
<p className="text-lg">Perencanaan MediaHub</p>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Judul Perencanaan</FormLabel>
|
||||
<Input
|
||||
value={field.value}
|
||||
placeholder="Masukkan Judul Perencanaan"
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="output"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<div className="mb-4">
|
||||
<FormLabel className="text-sm">Output Tugas</FormLabel>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 items-center ">
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={isAllChecked}
|
||||
// indeterminate={isSomeChecked && !isAllChecked}
|
||||
onCheckedChange={(checked) =>
|
||||
handleAllCheckedChange(checked)
|
||||
}
|
||||
/>
|
||||
<label htmlFor="all" className="text-sm">
|
||||
Semua
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{items.map((item) => (
|
||||
<FormField
|
||||
key={item.id}
|
||||
control={form.control}
|
||||
name="output"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem
|
||||
key={item.id}
|
||||
className="flex flex-row items-start space-x-3 space-y-0"
|
||||
>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={output?.includes(item.id)}
|
||||
onCheckedChange={(checked) =>
|
||||
handleItemCheckedChange(item.id, checked)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">
|
||||
{item.label}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="unit"
|
||||
render={() => (
|
||||
<FormItem>
|
||||
<div className="mb-4">
|
||||
<FormLabel className="text-sm">Pelaksana Tugas</FormLabel>
|
||||
</div>
|
||||
<div className="flex flex-row gap-3 items-center ">
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={isAllUnitChecked}
|
||||
onCheckedChange={(checked) =>
|
||||
handleAllUnitCheckedChange(checked)
|
||||
}
|
||||
/>
|
||||
<label htmlFor="all" className="text-sm">
|
||||
Semua
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{units.map((item) => (
|
||||
<FormField
|
||||
key={item.id}
|
||||
control={form.control}
|
||||
name="unit"
|
||||
render={({ field }) => {
|
||||
return (
|
||||
<FormItem
|
||||
key={item.id}
|
||||
className="flex flex-row items-start space-x-3 space-y-0"
|
||||
>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={unit?.includes(item.id)}
|
||||
disabled={
|
||||
item.id === "polres" &&
|
||||
!unit.includes("polda")
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
handleUnitCheckedChange(item.id, checked)
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">
|
||||
{item.label}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Jenis Penugasan</FormLabel>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
className="flex flex-row gap-3"
|
||||
>
|
||||
<FormItem className="flex items-center space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="publication" />
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">
|
||||
Publikasi
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
<FormItem className="flex items-center space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="amplification" />
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">
|
||||
Amplifikasi
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
<FormItem className="flex items-center space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<RadioGroupItem value="contra" />
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal">Kontra</FormLabel>
|
||||
</FormItem>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="date"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Pilih Tanggal</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[280px] justify-start text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{field.value ? (
|
||||
format(field.value, "PPP")
|
||||
) : (
|
||||
<span>Masukkan Tanggal</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="detail"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Detail Perencanaan</FormLabel>
|
||||
<JoditEditor
|
||||
ref={editor}
|
||||
value={field.value}
|
||||
className="dark:text-black"
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
|
||||
<Button type="submit" variant="outline" color="destructive">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
"use client";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import React, { useRef, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { format } from "date-fns";
|
||||
import JoditEditor from "jodit-react";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { error } from "@/config/swal";
|
||||
import { savePlanning } from "@/service/agenda-setting/agenda-setting";
|
||||
|
||||
const FormSchema = z.object({
|
||||
month: z.date({
|
||||
required_error: "Required",
|
||||
}),
|
||||
title: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
detail: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
});
|
||||
export default function CreateMonthly() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const router = useRouter();
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
detail: "",
|
||||
},
|
||||
});
|
||||
const editor = useRef(null);
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||
if (form.getValues("detail") == "") {
|
||||
form.setError("detail", {
|
||||
type: "manual",
|
||||
message: "Required",
|
||||
});
|
||||
} else {
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "Simpan",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
save(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const save = async (data: z.infer<typeof FormSchema>) => {
|
||||
const reqData = {
|
||||
planningTypeId: 2,
|
||||
title: data.title,
|
||||
time: "3",
|
||||
description: data.detail,
|
||||
username: "",
|
||||
date: `${new Date(data.month).getMonth() + 1}/${new Date(
|
||||
data.month
|
||||
).getFullYear()}`,
|
||||
status: "Open",
|
||||
};
|
||||
console.log("req", reqData, data.month);
|
||||
const response = await savePlanning(reqData);
|
||||
close();
|
||||
if (response.error) {
|
||||
error(response.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
router.push("/curator/task-plan/medsos-mediahub");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleMonthSelect = (selectedDate: Date | undefined) => {
|
||||
if (!selectedDate) return;
|
||||
const newDate = new Date(
|
||||
selectedDate.getFullYear(),
|
||||
selectedDate.getMonth(),
|
||||
1
|
||||
);
|
||||
form.setValue("month", newDate);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-row justify-center gap-5 mt-10">
|
||||
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
|
||||
Bulanan
|
||||
</div>
|
||||
<Link
|
||||
href="/curator/task-plan/medsos-mediahub/create-weekly"
|
||||
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||
>
|
||||
Mingguan
|
||||
</Link>
|
||||
<Link
|
||||
href="/curator/task-plan/medsos-mediahub/create-daily"
|
||||
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||
>
|
||||
Harian
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col bg-white gap-2 p-6">
|
||||
<p className="text-lg">Perencanaan MediaHub Bulanan</p>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Judul Perencanaan</FormLabel>
|
||||
<Input
|
||||
value={field.value}
|
||||
placeholder="Masukkan Judul Perencanaan"
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="month"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Pilih Bulan</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[280px] justify-start text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{field.value ? (
|
||||
format(field.value, "MMMM yyyy")
|
||||
) : (
|
||||
<span>Masukkan Bulan</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={handleMonthSelect}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="detail"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Detail Perencanaan</FormLabel>
|
||||
<JoditEditor
|
||||
ref={editor}
|
||||
value={field.value}
|
||||
className="dark:text-black"
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
|
||||
<Button type="submit" variant="outline" color="destructive">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
"use client";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Link, useRouter } from "@/i18n/routing";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { format } from "date-fns";
|
||||
import JoditEditor from "jodit-react";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import Swal from "sweetalert2";
|
||||
import withReactContent from "sweetalert2-react-content";
|
||||
import { error } from "@/config/swal";
|
||||
import { getOnlyDate } from "@/utils/globals";
|
||||
import {
|
||||
getMonthlyPlanList,
|
||||
savePlanning,
|
||||
} from "@/service/agenda-setting/agenda-setting";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
const FormSchema = z.object({
|
||||
week: z.object({
|
||||
from: z.date({
|
||||
required_error: "Start date (from) is required",
|
||||
}),
|
||||
to: z.date({
|
||||
required_error: "End date (to) is required",
|
||||
}),
|
||||
}),
|
||||
title: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
detail: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
parentId: z.string({
|
||||
required_error: "Required",
|
||||
}),
|
||||
});
|
||||
export default function CreateMonthly() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
const router = useRouter();
|
||||
const form = useForm<z.infer<typeof FormSchema>>({
|
||||
resolver: zodResolver(FormSchema),
|
||||
defaultValues: {
|
||||
detail: "",
|
||||
},
|
||||
});
|
||||
const [monthlyList, setMonthlyList] = useState<any>();
|
||||
|
||||
const editor = useRef(null);
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||
if (form.getValues("detail") == "") {
|
||||
form.setError("detail", {
|
||||
type: "manual",
|
||||
message: "Required",
|
||||
});
|
||||
} else {
|
||||
MySwal.fire({
|
||||
title: "Simpan Data",
|
||||
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "Simpan",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
save(data);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const save = async (data: z.infer<typeof FormSchema>) => {
|
||||
const reqData = {
|
||||
planningTypeId: 2,
|
||||
title: data.title,
|
||||
time: "2",
|
||||
description: data.detail,
|
||||
username: "",
|
||||
date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
|
||||
status: "Open",
|
||||
parentId: Number(data.parentId),
|
||||
};
|
||||
console.log("req", reqData);
|
||||
const response = await savePlanning(reqData);
|
||||
close();
|
||||
if (response.error) {
|
||||
error(response.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
icon: "success",
|
||||
confirmButtonColor: "#3085d6",
|
||||
confirmButtonText: "OK",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
router.push("/curator/task-plan/medsos-mediahub");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getMonthlyPlanning();
|
||||
}, []);
|
||||
|
||||
async function getMonthlyPlanning() {
|
||||
const res = await getMonthlyPlanList(new Date().getDate(), 2);
|
||||
|
||||
if (res.data !== null) {
|
||||
const rawUser = res.data?.data;
|
||||
const optionArr = rawUser.map((option: any) => ({
|
||||
id: option.id,
|
||||
label: option.title,
|
||||
value: String(option.id),
|
||||
}));
|
||||
console.log("ssss", optionArr);
|
||||
setMonthlyList(optionArr);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SiteBreadcrumb />
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-row justify-center gap-5 mt-10">
|
||||
<Link
|
||||
href="/curator/task-plan/medsos-mediahub/create-monthly"
|
||||
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||
>
|
||||
Bulanan
|
||||
</Link>
|
||||
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
|
||||
Mingguan
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/curator/task-plan/medsos-mediahub/create-daily"
|
||||
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||
>
|
||||
Harian
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col bg-white gap-2 p-6">
|
||||
<p className="text-lg">Perencanaan MediaHub Mingguan</p>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Judul Perencanaan</FormLabel>
|
||||
<Input
|
||||
value={field.value}
|
||||
placeholder="Masukkan Judul Perencanaan"
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="week"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Pilih Tanggal</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
className={cn(
|
||||
"w-[280px] justify-start text-left font-normal",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||
{field.value?.from ? (
|
||||
field.value.to ? (
|
||||
<>
|
||||
{format(field.value.from, "LLL dd, y")} -{" "}
|
||||
{format(field.value.to, "LLL dd, y")}
|
||||
</>
|
||||
) : (
|
||||
format(field.value.from, "LLL dd, y")
|
||||
)
|
||||
) : (
|
||||
<span>Masukkan Tanggal</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="range"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="parentId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Perencanaan Bulanan</FormLabel>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{monthlyList?.map((list: any) => (
|
||||
<SelectItem key={list.id} value={list.value}>
|
||||
{list.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="detail"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Detail Perencanaan</FormLabel>
|
||||
<JoditEditor
|
||||
ref={editor}
|
||||
value={field.value}
|
||||
className="dark:text-black"
|
||||
onChange={field.onChange}
|
||||
/>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
|
||||
<Button type="submit" variant="outline" color="destructive">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" color="primary">
|
||||
Submit
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
"use client";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { getWeeklyPlanList } from "@/service/agenda-setting/agenda-setting";
|
||||
import { getPlanningById } from "@/service/planning/planning";
|
||||
import { useParams } from "next/navigation";
|
||||
import dayjs from "dayjs";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import JoditEditor from "jodit-react";
|
||||
|
||||
export default function DetailTaskPlanMediahub() {
|
||||
const params = useParams();
|
||||
const id = params?.id;
|
||||
const editor = useRef(null);
|
||||
|
||||
const [planningData, setPlanningData] = useState<any>();
|
||||
|
||||
const [type, setType] = useState("");
|
||||
|
||||
const [weeklyList, setWeeklyList] = useState<any>([]);
|
||||
const [weeklySelected, setWeeklySelected] = useState();
|
||||
|
||||
const [taskOutput, setTaskOutput] = useState<any>([]);
|
||||
const [destination, setDestination] = useState<any>([]);
|
||||
const [listDest, setListDest] = useState([]);
|
||||
const [topDestination, setTopDestination] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
initFetch();
|
||||
}, [id]);
|
||||
|
||||
async function initFetch() {
|
||||
if (id != undefined) {
|
||||
loading();
|
||||
const res = await getPlanningById(id);
|
||||
close();
|
||||
|
||||
if (res?.data?.data != undefined) {
|
||||
const data = res?.data?.data;
|
||||
console.log("Data :", data);
|
||||
setPlanningData(data);
|
||||
setAssignedTopLevel(data?.assignedToTopLevel);
|
||||
setArrayDestination(data?.assignedToLevel);
|
||||
setArrayTaskOutput(data?.fileTypeOutput);
|
||||
setType(String(data?.assignmentTypeId));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setArrayDestination(assignedToLevel: any) {
|
||||
if (assignedToLevel?.length > 0) {
|
||||
const arrayDestination = [];
|
||||
const arrayDest = assignedToLevel.split(",");
|
||||
|
||||
for (const element of arrayDest) {
|
||||
arrayDestination.push(element);
|
||||
}
|
||||
|
||||
setDestination(arrayDestination);
|
||||
}
|
||||
}
|
||||
|
||||
function setAssignedTopLevel(assignedToTopLevel: any) {
|
||||
if (assignedToTopLevel?.length > 0) {
|
||||
const arrayTopLevel = [];
|
||||
const arrayTop = assignedToTopLevel.split(",");
|
||||
|
||||
for (const element of arrayTop) {
|
||||
arrayTopLevel.push(Number(element));
|
||||
}
|
||||
|
||||
setTopDestination(arrayTopLevel);
|
||||
}
|
||||
}
|
||||
|
||||
function setArrayTaskOutput(output: any) {
|
||||
if (output?.length > 0) {
|
||||
const arrayOutput = [];
|
||||
const arrOutput = output.split(",");
|
||||
|
||||
for (const element of arrOutput) {
|
||||
arrayOutput.push(Number(element));
|
||||
}
|
||||
|
||||
setTaskOutput(arrayOutput);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getWeeklyPlanning();
|
||||
}, [planningData]);
|
||||
|
||||
async function getWeeklyPlanning() {
|
||||
const TODAY = dayjs().format("YYYY-MM-DD");
|
||||
const res = await getWeeklyPlanList(planningData?.date || TODAY, 1);
|
||||
|
||||
if (res.data !== null) {
|
||||
const rawUser = res.data?.data;
|
||||
const optionArr = rawUser.map((option: any) => ({
|
||||
id: option.id,
|
||||
label: option.title,
|
||||
value: option.id,
|
||||
}));
|
||||
console.log("res", optionArr);
|
||||
|
||||
setWeeklyList(optionArr);
|
||||
}
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<SiteBreadcrumb />
|
||||
<div className="text-black flex flex-col gap-4">
|
||||
<p className="text-lg">Perencanaan Mediahub</p>
|
||||
<p className="text-sm">Judul Perencanaan</p>
|
||||
<Input value={planningData?.title} readOnly />
|
||||
<p className="text-sm">Output Tugas</p>
|
||||
<div className="flex flex-row gap-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={taskOutput ? taskOutput.length == 4 : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={taskOutput ? taskOutput.includes(2) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Audio Visual
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={taskOutput ? taskOutput.includes(4) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Audio
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={taskOutput ? taskOutput.includes(1) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Foto
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={taskOutput ? taskOutput.includes(3) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Text
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm">Pelaksana Tugas</p>
|
||||
<div className="flex flex-row gap-3">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={topDestination ? topDestination.includes(0) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Semua Unit
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={topDestination ? topDestination.includes(1) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Mabes Polri
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={topDestination ? topDestination.includes(2) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Polda
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all"
|
||||
checked={topDestination ? topDestination.includes(3) : false}
|
||||
/>
|
||||
<label
|
||||
htmlFor="all"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Polres
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm">Jenis Penugasan</p>
|
||||
<RadioGroup className="flex flex-row" disabled>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="1" id="1" checked={type === "1"} />
|
||||
<Label htmlFor="1">Publikasi {type}</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="2" id="2" checked={type === "2"} />
|
||||
<Label htmlFor="2">Amplifikasi</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="3" id="3" checked={type === "3"} />
|
||||
<Label htmlFor="3">Kontra</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<p className="text-sm">Tanggal</p>
|
||||
<Input value={planningData?.date} className="w-fit" readOnly />
|
||||
<p className="text-sm">Penugasan Mingguan</p>
|
||||
<Input value={weeklyList[0]?.label} readOnly />
|
||||
<JoditEditor
|
||||
ref={editor}
|
||||
value={planningData?.description}
|
||||
className="dark:text-black"
|
||||
config={{ readonly: true, toolbar: false }}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +1,41 @@
|
|||
"use client";
|
||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||
import ListViewSocialMediaTable from "@/components/table/task-plan/list-view-social-media-table";
|
||||
import SingleViewSocialMediaTable from "@/components/table/task-plan/single-view-social-media-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useRouter } from "@/i18n/routing";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function TaskPlanMedsosMediaHub() {
|
||||
export default function TaskPlanSocialMediaMediaHub() {
|
||||
const router = useRouter();
|
||||
const [view, setView] = useState("single");
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<SiteBreadcrumb />
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex justify-between">
|
||||
<Button
|
||||
onClick={() =>
|
||||
view === "single" ? setView("list") : setView("single")
|
||||
}
|
||||
>
|
||||
{view == "single" ? "List" : "Single"} View
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={() =>
|
||||
router.push("/curator/task-plan/medsos-mediahub/create-monthly")
|
||||
}
|
||||
>
|
||||
Buat Perencaan
|
||||
</Button>
|
||||
</div>
|
||||
{view == "single" ? (
|
||||
<SingleViewSocialMediaTable />
|
||||
) : (
|
||||
<ListViewSocialMediaTable />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
import { SVGProps } from "react";
|
||||
|
||||
type IconSvgProps = SVGProps<SVGSVGElement> & {
|
||||
size?: number;
|
||||
};
|
||||
|
||||
export const FacebookIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
height={size || height}
|
||||
width={size || width}
|
||||
viewBox="0 0 24 24"
|
||||
fill={fill}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<g fill="none">
|
||||
<g clip-path="url(#akarIconsFacebookFill0)">
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M0 12.067C0 18.034 4.333 22.994 10 24v-8.667H7V12h3V9.333c0-3 1.933-4.666 4.667-4.666c.866 0 1.8.133 2.666.266V8H15.8c-1.467 0-1.8.733-1.8 1.667V12h3.2l-.533 3.333H14V24c5.667-1.006 10-5.966 10-11.933C24 5.43 18.6 0 12 0S0 5.43 0 12.067"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="akarIconsFacebookFill0">
|
||||
<path fill="#fff" d="M0 0h24v24H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
export const InstagramIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
height={size || height}
|
||||
width={size || width}
|
||||
viewBox="0 0 24 24"
|
||||
fill={fill}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
export const YoutubeIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
height={size || height}
|
||||
width={size || width}
|
||||
viewBox="0 0 24 24"
|
||||
fill={fill}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<g fill="none">
|
||||
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m0 2c-.825 0-1.674.022-2.5.056l-.978.047l-.939.055l-.882.06l-.808.063a1.8 1.8 0 0 0-1.666 1.623C4.11 9.113 4 10.618 4 12s.11 2.887.227 4.096c.085.872.777 1.55 1.666 1.623l.808.062l.882.06l.939.056l.978.047c.826.034 1.675.056 2.5.056s1.674-.022 2.5-.056l.978-.047l.939-.055l.882-.06l.808-.063a1.8 1.8 0 0 0 1.666-1.623C19.89 14.887 20 13.382 20 12s-.11-2.887-.227-4.096a1.8 1.8 0 0 0-1.666-1.623l-.808-.062l-.882-.06l-.939-.056l-.978-.047A61 61 0 0 0 12 6m-2 3.575a.6.6 0 0 1 .819-.559l.081.04l4.2 2.424a.6.6 0 0 1 .085.98l-.085.06l-4.2 2.425a.6.6 0 0 1-.894-.43l-.006-.09z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const TiktokIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
height={size || height}
|
||||
width={size || width}
|
||||
viewBox="0 0 24 24"
|
||||
fill={fill}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
export const XIcon = ({
|
||||
size,
|
||||
height = 24,
|
||||
width = 24,
|
||||
fill = "currentColor",
|
||||
...props
|
||||
}: IconSvgProps) => (
|
||||
<svg
|
||||
height={size || height}
|
||||
width={size || width}
|
||||
viewBox="0 0 24 24"
|
||||
fill={fill}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="m13.081 10.712l-4.786-6.71a.6.6 0 0 0-.489-.252H5.28a.6.6 0 0 0-.488.948l6.127 8.59m2.162-2.576l6.127 8.59a.6.6 0 0 1-.488.948h-2.526a.6.6 0 0 1-.489-.252l-4.786-6.71m2.162-2.576l5.842-6.962m-8.004 9.538L5.077 20.25"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,133 @@
|
|||
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 { 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";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
// {
|
||||
// accessorKey: "title",
|
||||
// header: "Judul Perencanaan",
|
||||
// cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||
// },
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Judul Perencanaan",
|
||||
cell: ({ row }) => {
|
||||
const datas = row.original.subPlanningList;
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<a className="cursor-pointer">{row.getValue("title")}</a>
|
||||
</DialogTrigger>
|
||||
<DialogContent size="md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Rencanaan Mingguan</DialogTitle>
|
||||
</DialogHeader>
|
||||
<table>
|
||||
<tr>
|
||||
<th className="text-left">Judul Perencanaan</th>
|
||||
<th>Batas Waktu</th>
|
||||
<th>Status</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
{datas?.map((data: any) => (
|
||||
<tr key={data.id}>
|
||||
<th className="text-left font-normal text-sm">
|
||||
{data.title}
|
||||
</th>
|
||||
<th className="font-normal text-sm">{data.date}</th>
|
||||
<th className="font-normal text-sm">{data.status}</th>
|
||||
<th className="flex justify-center text-sm">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
Detail
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</th>
|
||||
</tr>
|
||||
))}
|
||||
</table>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "date",
|
||||
header: "Batas Waktu",
|
||||
cell: ({ row }) => <span>{row.getValue("date")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Actions",
|
||||
enableHiding: false,
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="icon"
|
||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
Detail
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default columns;
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
PaginationState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Search,
|
||||
SquarePen,
|
||||
Trash2,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||
import { paginationBlog } from "@/service/blog/blog";
|
||||
import { ticketingPagination } from "@/service/ticketing/ticketing";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import columns from "./list-view-social-media-column";
|
||||
import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
|
||||
|
||||
const ListViewSocialMediaTable = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
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 [limit, setLimit] = React.useState(10);
|
||||
const [totalPage, setTotalPage] = React.useState(1);
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, limit]);
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
const res = await getPlanningPagination(page - 1, "", 10, 2, 3);
|
||||
const data = res.data?.data;
|
||||
const contentData = data?.content;
|
||||
contentData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * limit + index + 1;
|
||||
});
|
||||
|
||||
console.log("contentData : ", data);
|
||||
|
||||
setDataTable(contentData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tasks:", error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Table className="overflow-hidden mt-3">
|
||||
<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 ListViewSocialMediaTable;
|
||||
|
|
@ -0,0 +1,469 @@
|
|||
"use client";
|
||||
import dayjs from "dayjs";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { close, loading } from "@/config/swal";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/free-mode";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/thumbs";
|
||||
|
||||
import Image from "next/image";
|
||||
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||
import { Swiper as SwiperType } from "swiper/types";
|
||||
import {
|
||||
getMonthlyPlanList,
|
||||
getPlanningDailyByTypeId,
|
||||
getPlanningDailyMedsosByPlatform,
|
||||
getPlanningMonthlyPerSocmed,
|
||||
getWeeklyPlanList,
|
||||
getWeeklyPlanListByParentId,
|
||||
} from "@/service/agenda-setting/agenda-setting";
|
||||
import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table";
|
||||
import weekday from "dayjs/plugin/weekday";
|
||||
import { Icon } from "@iconify/react/dist/iconify.js";
|
||||
import {
|
||||
FacebookIcon,
|
||||
InstagramIcon,
|
||||
TiktokIcon,
|
||||
XIcon,
|
||||
YoutubeIcon,
|
||||
} from "@/components/icon";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import TaskPlanningSocialMediaTable from "./social-media-modal/table";
|
||||
|
||||
const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
|
||||
const TODAY = dayjs().format("YYYY-MM-DD");
|
||||
|
||||
export default function SingleViewSocialMediaTable() {
|
||||
const params = useSearchParams();
|
||||
const [selectedMonthItem, setSelectedMonthItem] = useState<
|
||||
string | undefined
|
||||
>(undefined);
|
||||
const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(
|
||||
undefined
|
||||
);
|
||||
const [selectedDate, setSelectedDate] = useState<number>(
|
||||
new Date(TODAY).getDate()
|
||||
);
|
||||
const [nowDate, setNowDate] = useState<string>(TODAY);
|
||||
|
||||
const INITIAL_YEAR = dayjs().format("YYYY");
|
||||
const INITIAL_MONTH = dayjs().format("M");
|
||||
const size = 20;
|
||||
|
||||
const page: string | undefined | null = params?.get("page");
|
||||
const id: string | undefined | null = params?.get("id");
|
||||
const pages = page ? Number(page) - 1 : 0;
|
||||
const no = (size || 10) * pages;
|
||||
|
||||
const [selectedMonth, setSelectedMonth] = useState<any>(
|
||||
dayjs(new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1))
|
||||
);
|
||||
|
||||
const [selectedMonthTitle, setSelectedMonthTitle] = useState<string>("");
|
||||
const [days, setDays] = useState<any>([]);
|
||||
|
||||
const weekday = require("dayjs/plugin/weekday");
|
||||
const weekOfYear = require("dayjs/plugin/weekOfYear");
|
||||
|
||||
const [planningData, setPlanningData] = useState<any>([]);
|
||||
|
||||
dayjs.extend(utc);
|
||||
dayjs.extend(weekday);
|
||||
dayjs.extend(weekOfYear);
|
||||
|
||||
let currentMonthDays: any;
|
||||
let previousMonthDays: any;
|
||||
let nextMonthDays: any;
|
||||
|
||||
const [monthlyList, setMonthlyList] = useState([]);
|
||||
const [weeklyList, setWeeklyList] = useState([]);
|
||||
const [getData, setGetData] = useState<any>([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedDateNow, setSelectedDateNow] = useState("");
|
||||
const [selectedPlatform, setSelectedPlatform] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
createCalendar("START");
|
||||
}, []);
|
||||
|
||||
function createDaysForCurrentMonth(
|
||||
year: string,
|
||||
month: string,
|
||||
daysInMonth: number
|
||||
) {
|
||||
const days: any = [];
|
||||
for (let day = 1; day <= daysInMonth; day++) {
|
||||
const date = dayjs(
|
||||
new Date(parseInt(year), parseInt(month) - 1, day)
|
||||
).format("YYYY-MM-DD");
|
||||
days.push({
|
||||
date,
|
||||
isCurrentMonth: true,
|
||||
isToday: date === TODAY,
|
||||
});
|
||||
}
|
||||
return days;
|
||||
}
|
||||
|
||||
async function getMonthlyPlanning(dates: number) {
|
||||
const res = await getMonthlyPlanList(dates, 2);
|
||||
setMonthlyList(res.data?.data);
|
||||
}
|
||||
|
||||
async function getWeeklyPlanning(
|
||||
id: string | undefined,
|
||||
date: number | undefined
|
||||
) {
|
||||
if (id) {
|
||||
const res = await getWeeklyPlanListByParentId(id, 2);
|
||||
setWeeklyList(res.data?.data);
|
||||
} else {
|
||||
const res = await getWeeklyPlanList(date, 2, true);
|
||||
setWeeklyList(res.data?.data);
|
||||
}
|
||||
}
|
||||
|
||||
function createCalendar(
|
||||
year: string = INITIAL_YEAR,
|
||||
month: string = INITIAL_MONTH
|
||||
) {
|
||||
year = year === "START" ? INITIAL_YEAR : year;
|
||||
|
||||
fetchData(month, year);
|
||||
|
||||
setSelectedMonthTitle(
|
||||
dayjs(new Date(parseInt(year), parseInt(month) - 1))
|
||||
.utc()
|
||||
.local()
|
||||
.format("MMMM YYYY")
|
||||
);
|
||||
|
||||
currentMonthDays = createDaysForCurrentMonth(
|
||||
year,
|
||||
month,
|
||||
dayjs(`${year}-${month}-01`).daysInMonth()
|
||||
);
|
||||
|
||||
getMonthlyPlanning(year ? currentMonthDays[0]?.date : TODAY);
|
||||
getWeeklyPlanning(undefined, year ? currentMonthDays[0]?.date : TODAY);
|
||||
|
||||
previousMonthDays = createDaysForPreviousMonth(year, month);
|
||||
nextMonthDays = createDaysForNextMonth(year, month);
|
||||
const listDay = [
|
||||
...previousMonthDays,
|
||||
...currentMonthDays,
|
||||
...nextMonthDays,
|
||||
];
|
||||
setDays(listDay);
|
||||
}
|
||||
|
||||
function getWeekday(date: string | undefined) {
|
||||
return dayjs(date).weekday();
|
||||
}
|
||||
|
||||
function createDaysForPreviousMonth(year: string, month: string) {
|
||||
const firstDayOfTheMonthWeekday = getWeekday(currentMonthDays[0]?.date);
|
||||
|
||||
const previousMonth = dayjs(`${year}-${month}-01`).subtract(1, "month");
|
||||
|
||||
// Cover first day of the month being sunday (firstDayOfTheMonthWeekday == 0)
|
||||
const visibleNumberOfDaysFromPreviousMonth = firstDayOfTheMonthWeekday
|
||||
? firstDayOfTheMonthWeekday - 1
|
||||
: 6;
|
||||
|
||||
const previousMonthLastMondayDayOfMonth = dayjs(currentMonthDays[0].date)
|
||||
.subtract(visibleNumberOfDaysFromPreviousMonth, "day")
|
||||
.date();
|
||||
|
||||
return [...new Array(visibleNumberOfDaysFromPreviousMonth)].map(
|
||||
(day, index) => ({
|
||||
date: dayjs(
|
||||
`${previousMonth.year()}-${previousMonth.month() + 1}-${
|
||||
previousMonthLastMondayDayOfMonth + index
|
||||
}`
|
||||
).format("YYYY-MM-DD"),
|
||||
dayOfMonth: previousMonthLastMondayDayOfMonth + index,
|
||||
isCurrentMonth: false,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function createDaysForNextMonth(year: string, month: string) {
|
||||
const lastDayOfTheMonthWeekday = getWeekday(
|
||||
`${year}-${month}-${currentMonthDays.length}`
|
||||
);
|
||||
|
||||
const nextMonth = dayjs(`${year}-${month}-01`).add(1, "month");
|
||||
|
||||
const visibleNumberOfDaysFromNextMonth = lastDayOfTheMonthWeekday
|
||||
? 7 - lastDayOfTheMonthWeekday
|
||||
: lastDayOfTheMonthWeekday;
|
||||
|
||||
return [...new Array(visibleNumberOfDaysFromNextMonth)].map(
|
||||
(day, index) => ({
|
||||
date: dayjs(
|
||||
`${nextMonth.year()}-${nextMonth.month() + 1}-${index + 1}`
|
||||
).format("YYYY-MM-DD"),
|
||||
dayOfMonth: index + 1,
|
||||
isCurrentMonth: false,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
async function fetchData(
|
||||
month: string,
|
||||
year: string,
|
||||
|
||||
parentId?: string | undefined
|
||||
) {
|
||||
loading();
|
||||
const res = await getPlanningMonthlyPerSocmed(month, year, 2, parentId);
|
||||
close();
|
||||
setPlanningData(res.data?.data);
|
||||
}
|
||||
|
||||
function getPrevMonth() {
|
||||
const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month");
|
||||
|
||||
createCalendar(
|
||||
selectedMonthNew.format("YYYY"),
|
||||
selectedMonthNew.format("M")
|
||||
);
|
||||
fetchData("", selectedMonthNew?.format("YYYY-MM-DD"));
|
||||
setSelectedMonth(selectedMonthNew);
|
||||
setSelectedDate(1);
|
||||
}
|
||||
|
||||
function getPresentMonth() {
|
||||
const selectedMonthNew = dayjs(
|
||||
new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)
|
||||
);
|
||||
|
||||
createCalendar(
|
||||
selectedMonthNew.format("YYYY"),
|
||||
selectedMonthNew.format("M")
|
||||
);
|
||||
fetchData("", TODAY);
|
||||
setSelectedDate(Number(dayjs().format("D")));
|
||||
setSelectedMonth(selectedMonthNew);
|
||||
}
|
||||
|
||||
function getNextMonth() {
|
||||
const selectedMonthNew = dayjs(selectedMonth).add(1, "month");
|
||||
|
||||
createCalendar(
|
||||
selectedMonthNew.format("YYYY"),
|
||||
selectedMonthNew.format("M")
|
||||
);
|
||||
fetchData("", selectedMonthNew?.format("YYYY-MM-DD"));
|
||||
setSelectedMonth(selectedMonthNew);
|
||||
setSelectedDate(1);
|
||||
}
|
||||
const onSelectedMonthItem = (id: string | undefined) => {
|
||||
// fetchData(date)
|
||||
setSelectedMonthItem(id);
|
||||
getWeeklyPlanning(id, undefined);
|
||||
};
|
||||
|
||||
const onSelectedWeekly = (id: string | undefined) => {
|
||||
setSelectedWeekly(id);
|
||||
fetchData("", String(id));
|
||||
};
|
||||
|
||||
const removeSelection = () => {
|
||||
setSelectedMonthItem(undefined);
|
||||
setSelectedWeekly(undefined);
|
||||
};
|
||||
|
||||
const onSelectedSocmed = async (date: string, platform: string) => {
|
||||
setSelectedDateNow(date);
|
||||
setSelectedPlatform(platform);
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
const getDataForThisDate = (day: number) => {
|
||||
const todayData = planningData?.find((a: any) => a?.day == day);
|
||||
|
||||
if (todayData) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<a
|
||||
onClick={() =>
|
||||
onSelectedSocmed(todayData.planningList[0].date, "5")
|
||||
}
|
||||
className="flex flex-row gap-5 rounded-sm bg-[#0C0705] text-white px-3 py-1 justify-center"
|
||||
>
|
||||
Total: {todayData.totalTwitter} <XIcon />
|
||||
</a>
|
||||
<a
|
||||
onClick={() =>
|
||||
onSelectedSocmed(todayData.planningList[0].date, "1")
|
||||
}
|
||||
className="flex flex-row gap-5 rounded-sm bg-[#1877F2] text-white px-3 py-1 justify-center"
|
||||
>
|
||||
Total: {todayData.totalFacebook} <FacebookIcon />
|
||||
</a>
|
||||
<a
|
||||
onClick={() =>
|
||||
onSelectedSocmed(todayData.planningList[0].date, "2")
|
||||
}
|
||||
className="flex flex-row gap-5 rounded-sm bg-[#d62976] text-white px-3 py-1 justify-center"
|
||||
>
|
||||
Total: {todayData.totalInstagram} <InstagramIcon />
|
||||
</a>
|
||||
<a
|
||||
onClick={() =>
|
||||
onSelectedSocmed(todayData.planningList[0].date, "3")
|
||||
}
|
||||
className="flex flex-row gap-5 rounded-sm bg-[#FF0000] text-white px-3 py-1 justify-center"
|
||||
>
|
||||
Total: {todayData.totalYoutube} <YoutubeIcon />
|
||||
</a>
|
||||
<a
|
||||
onClick={() =>
|
||||
onSelectedSocmed(todayData.planningList[0].date, "4")
|
||||
}
|
||||
className="flex flex-row gap-5 rounded-sm bg-[#000000] text-white px-3 py-1 justify-center"
|
||||
>
|
||||
Total: {todayData.totalTiktok} <TiktokIcon />
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-2 rounded-sm p-4 flex gap-3 flex-col">
|
||||
<div className="flex justify-between">
|
||||
<div className="flex flex-row gap-2">
|
||||
<a onClick={getPrevMonth} className="cursor-pointer">
|
||||
<ChevronLeft />
|
||||
</a>
|
||||
<a onClick={getPresentMonth} className="cursor-pointer">
|
||||
Today
|
||||
</a>
|
||||
<a onClick={getNextMonth} className="cursor-pointer">
|
||||
<ChevronRight />
|
||||
</a>
|
||||
</div>
|
||||
<p className="text-xl font-semibold">{selectedMonthTitle}</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<a
|
||||
className="border-2 border-primary px-2 py-1 rounded-full text-[10px] text-primary cursor-pointer"
|
||||
onClick={() => removeSelection()}
|
||||
>
|
||||
Hapus Pilihan
|
||||
</a>
|
||||
</div>
|
||||
<div className="px-8 flex flex-col gap-2 text-sm">
|
||||
<p className="font-semibold">Rencana Bulanan</p>
|
||||
{monthlyList?.length > 0 ? (
|
||||
<div className="flex flex-nowrap gap-3 flex-row">
|
||||
{monthlyList?.map((item: any) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`rounded-full px-8 py-3 cursor-pointer ${
|
||||
selectedMonthItem === item.id
|
||||
? "bg-sky-600 text-white "
|
||||
: "bg-sky-300"
|
||||
}`}
|
||||
onClick={() => onSelectedMonthItem(item.id)}
|
||||
>
|
||||
<p>{item.title}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center bg-slate-200 rounded-full py-1">
|
||||
Rencana Bulanan Belum Tersedia
|
||||
</div>
|
||||
)}
|
||||
<p className="font-semibold">Rencana Mingguan</p>
|
||||
{weeklyList?.length > 0 ? (
|
||||
<div className="flex flex-nowrap gap-3 flex-row">
|
||||
{weeklyList?.map((item: any) => (
|
||||
<a
|
||||
key={item.id}
|
||||
className={`bg-sky-300 rounded-full px-8 py-3 cursor-pointer ${
|
||||
selectedWeekly === item.id
|
||||
? "bg-sky-600 text-white "
|
||||
: "bg-sky-300"
|
||||
}`}
|
||||
onClick={() => onSelectedWeekly(item.id)}
|
||||
>
|
||||
<p>{item.title}</p>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center bg-slate-200 rounded-full py-1">
|
||||
Rencana Mingguan Belum Tersedia
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="w-full mb-2">
|
||||
<div className="overflow-auto">
|
||||
<ol
|
||||
id="days-of-week"
|
||||
className="grid grid-cols-7 gap-1 border-y-2 py-3"
|
||||
>
|
||||
{WEEKDAYS.map((weekday, index) => (
|
||||
<li
|
||||
key={`weekday-${index}`}
|
||||
className="mr-1 text-sm font-medium text-end"
|
||||
>
|
||||
{weekday}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<ol id="calendar-days" className="grid grid-cols-7 gap-1">
|
||||
{days?.map((day: any, index: number) => (
|
||||
<li
|
||||
key={`day-${index}`}
|
||||
className={`p-2 text-end min-h-[100px] ${
|
||||
day.isCurrentMonth ? "" : "bg-slate-200 text-slate-400"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`block mb-1 ${
|
||||
day.date == TODAY ? "font-semibold text-xl" : ""
|
||||
}`}
|
||||
>
|
||||
{parseInt(day.date.split("-")[2])}
|
||||
</span>
|
||||
{getDataForThisDate(parseInt(day.date.split("-")[2]))}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent size="lg" className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Perencanaan Medsos Harian</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex items-center space-x-2">
|
||||
<TaskPlanningSocialMediaTable
|
||||
date={selectedDateNow}
|
||||
platform={selectedPlatform}
|
||||
/>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
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 { 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";
|
||||
|
||||
const columns: ColumnDef<any>[] = [
|
||||
{
|
||||
accessorKey: "no",
|
||||
header: "No",
|
||||
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||
},
|
||||
// {
|
||||
// accessorKey: "title",
|
||||
// header: "Judul Perencanaan",
|
||||
// cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||
// },
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Judul Perencanaan",
|
||||
cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "createdByName",
|
||||
header: "Nama Pembuat",
|
||||
cell: ({ row }) => <span>{row.getValue("createdByName")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "createdAt",
|
||||
header: "Dibuat",
|
||||
cell: ({ row }) => <span>{row.getValue("createdAt")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Dibuat",
|
||||
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "platformTypeId",
|
||||
header: "Jenis Platform",
|
||||
cell: ({ row }) => <span>{row.getValue("platformTypeId")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "description",
|
||||
header: "Deskripsi",
|
||||
cell: ({ row }) => <span>{htmlToString(row.getValue("status"))}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
header: "Aksi",
|
||||
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"
|
||||
>
|
||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="p-0" align="end">
|
||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||
Detail
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default columns;
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import {
|
||||
ColumnDef,
|
||||
ColumnFiltersState,
|
||||
PaginationState,
|
||||
SortingState,
|
||||
VisibilityState,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getFilteredRowModel,
|
||||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Eye,
|
||||
MoreVertical,
|
||||
Search,
|
||||
SquarePen,
|
||||
Trash2,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||
import { paginationBlog } from "@/service/blog/blog";
|
||||
import { ticketingPagination } from "@/service/ticketing/ticketing";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import TablePagination from "@/components/table/table-pagination";
|
||||
import columns from "./column";
|
||||
import {
|
||||
getPlanningDailyMedsosByPlatform,
|
||||
getPlanningPagination,
|
||||
} from "@/service/agenda-setting/agenda-setting";
|
||||
|
||||
const TaskPlanningSocialMediaTable = (props: {
|
||||
date: string;
|
||||
platform: string;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||
const [totalData, setTotalData] = React.useState<number>(1);
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
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 [limit, setLimit] = React.useState(10);
|
||||
const [totalPage, setTotalPage] = React.useState(1);
|
||||
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,
|
||||
},
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
const pageFromUrl = searchParams?.get("page");
|
||||
if (pageFromUrl) {
|
||||
setPage(Number(pageFromUrl));
|
||||
}
|
||||
}, [searchParams]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchData();
|
||||
}, [page, limit, props]);
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await getPlanningDailyMedsosByPlatform(
|
||||
"0",
|
||||
20,
|
||||
props.date,
|
||||
props.platform
|
||||
);
|
||||
const data = response.data?.data;
|
||||
const contentData = data?.content;
|
||||
contentData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * limit + index + 1;
|
||||
item.platformTypeId =
|
||||
props.platform === "1"
|
||||
? "Facebook"
|
||||
: props.platform === "2"
|
||||
? "Instagram"
|
||||
: props.platform === "3"
|
||||
? "Youtube"
|
||||
: props.platform === "4"
|
||||
? "Tiktok"
|
||||
: props.platform === "3"
|
||||
? "X"
|
||||
: "";
|
||||
});
|
||||
|
||||
setDataTable(contentData);
|
||||
setTotalData(data?.totalElements);
|
||||
setTotalPage(data?.totalPages);
|
||||
} catch (error) {
|
||||
console.error("Error fetching tasks:", error);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<Table className="overflow-hidden mt-3">
|
||||
<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 TaskPlanningSocialMediaTable;
|
||||
|
|
@ -63,3 +63,23 @@ export async function savePlanning(data: any) {
|
|||
const url = "planning";
|
||||
return postAPIInterceptor(url, data);
|
||||
}
|
||||
|
||||
export async function getPlanningMonthlyPerSocmed(
|
||||
month = "",
|
||||
year = "",
|
||||
typeId: number,
|
||||
parentId = ""
|
||||
) {
|
||||
const url = `planning/socmed/monthly?month=${month}&year=${year}&typeId=${typeId}&parentId=${parentId}`;
|
||||
return getAPIInterceptor(url);
|
||||
}
|
||||
|
||||
export async function getPlanningDailyMedsosByPlatform(
|
||||
page: string,
|
||||
size = 10,
|
||||
date: string,
|
||||
platformTypeId: string
|
||||
) {
|
||||
const url = `planning/pagination/daily?enablePage=1&size=${size}&page=${page}&date=${date}&typeId=2&platformTypeId=${platformTypeId}`;
|
||||
return getAPIInterceptor(url);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import { getAPIInterceptor } from "@/config/api";
|
||||
|
||||
export async function getMediaTrackingMonitoring(page: number, size: number) {
|
||||
const url = `cekmedsos/monitoring/pagination?page=${page}&size=${size}`;
|
||||
return getAPIInterceptor(url);
|
||||
}
|
||||
Loading…
Reference in New Issue