mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:edit detail task plan

This commit is contained in:
Rama Priyanto 2024-12-27 21:14:58 +07:00
parent 56974317ef
commit 4b4c17ed7a
11 changed files with 2708 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx
View File

@ -60,11 +60,21 @@ const columns: ColumnDef<any>[] = [
<DropdownMenuContent className="p-0" align="end"> <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"> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Link <Link
href={`/curator/task-plan/mediahub/detail/${row.original.id}`} href={`/curator/task-plan/mediahub/create-daily/detail/${row.original.id}`}
> >
Detail Detail
</Link> </Link>
</DropdownMenuItem> </DropdownMenuItem>
<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/create-daily/edit/${row.original.id}`}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a className="text-red-600">Delete</a>
</DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
); );

775
app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,775 @@
"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 { 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";
import { close, error, loading } from "@/config/swal";
import { id } from "date-fns/locale";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
getWeeklyPlanList,
savePlanning,
} from "@/service/agenda-setting/agenda-setting";
import { getOnlyDate } from "@/utils/globals";
import { useParams } from "next/navigation";
import { getPlanningById } from "@/service/planning/planning";
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.string({
required_error: "Required",
}),
parentId: z.string({
required_error: "Required",
}),
});
const items = [
{
id: "2",
label: "Audio Visual",
},
{
id: "1",
label: "Foto",
},
{
id: "4",
label: "Audio",
},
{
id: "3",
label: "Text",
},
];
const units = [
{
id: "1",
label: "Mabes Polri",
},
{
id: "2",
label: "Polda",
},
{
id: "3",
label: "Polres",
},
];
export default function DetailDaily() {
const id = useParams()?.id;
const MySwal = withReactContent(Swal);
const [listDest, setListDest] = useState<any>([]);
const router = useRouter();
const [weeklyList, setWeeklyList] = useState<any>();
const [selected, setSelected] = useState<{ [key: string]: boolean }>({});
const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({});
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");
console.log("Data :", data);
form.setValue("title", data.title);
form.setValue("detail", data.description);
form.setValue("date", new Date(data.date));
form.setValue(
"output",
data.fileTypeOutput.split(",")?.length > 1
? data.fileTypeOutput.split(",")
: [data.fileTypeOutput]
);
form.setValue(
"unit",
data.assignedToLevel.split(",")?.length > 1
? data.assignedToLevel.split(",")
: [data.assignedToLevel]
);
form.setValue("type", String(data?.assignmentTypeId));
form.setValue("parentId", String(data?.parentId));
}
}
}
useEffect(() => {
getWeeklyPlanning();
}, []);
async function getWeeklyPlanning() {
const res = await getWeeklyPlanList(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),
}));
setWeeklyList(optionArr);
}
}
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>) => {
const getSelectedString = () => {
return Object.keys(selected)
.filter((key) => selected[key])
.join(", ");
};
console.log("data", data, selected);
loading();
const reqData = {
planningTypeId: 1,
time: "1",
title: data.title,
assignmentTypeId: data.type, //string
description: data.detail,
assignedToLevel: unit?.join(","), //string
assignmentPurpose: getSelectedString(), //string
fileTypeOutput: data.output?.join(","), //string
status: "Open",
date: getOnlyDate(data.date),
// date:
// isPublish || isUpdate
// ? selectedDate?.length > 10
// ? data.date?.toISOString().slice(0, 10)
// : selectedDate
// : data.date?.toISOString().slice(0, 10),
parentId: Number(data.parentId), //number
assignmentMainTypeId: 1,
};
console.log("req =>", reqData);
const response = await savePlanning(reqData);
if (response.error) {
error(response.message);
return false;
}
close();
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/curator/task-plan/mediahub");
}
});
};
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) => {
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();
setListDest(response.data.data.list);
}
initState();
}, []);
const handleParentChange = (listId: string) => {
setSelected((prev) => ({
...prev,
[listId]: !prev[listId],
}));
};
const handleSelectAllPolres = (listId: string, isChecked: boolean) => {
setSelectAll((prev) => ({
...prev,
[listId]: isChecked,
}));
setSelected((prev) => {
const updatedState = { ...prev };
listDest
.find((list: any) => list.id === listId)
?.subDestination.forEach((subDes: any) => {
updatedState[`${listId}${subDes.id}`] = isChecked;
});
return updatedState;
});
};
const handleChildChange = (childId: string) => {
setSelected((prev) => ({
...prev,
[childId]: !prev[childId],
}));
};
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/mediahub/create-monthly"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Bulanan
</Link>
<Link
href="/curator/task-plan/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}
readOnly
/>
<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}
onCheckedChange={(checked) =>
handleAllCheckedChange(checked)
}
disabled
/>
<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)
}
disabled
/>
</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)
}
disabled
/>
<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 === "3" && !unit.includes("2")
// }
onCheckedChange={(checked) =>
handleUnitCheckedChange(item.id, checked)
}
disabled
/>
</FormControl>
<FormLabel className="font-normal">
{item.label}
</FormLabel>
</FormItem>
);
}}
/>
))}
<Dialog>
<DialogTrigger disabled>
<a className="text-primary cursor-pointer text-sm">
{`[Kustom]`}
</a>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>
Daftar Wilayah Polda dan Polres
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-4 py-4 px-2 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
: !!selected[list.id]
}
onCheckedChange={() =>
handleParentChange(list.id)
}
disabled={unit.includes("2")}
/>
<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
checked={
unit.includes("3")
? true
: !!selectAll[list.id]
}
onCheckedChange={(e) =>
handleSelectAllPolres(
list.id,
Boolean(e)
)
}
disabled={unit.includes("3")}
/>
<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
: !!selected[
`${list.id}${subDes.id}`
]
}
onCheckedChange={() =>
handleChildChange(
`${list.id}${subDes.id}`
)
}
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>
)}
/>
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem>
<FormLabel>Jenis Penugasan</FormLabel>
<FormControl>
<RadioGroup
onValueChange={field.onChange}
value={field.value}
className="flex flex-row gap-3"
disabled
>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="1" />
</FormControl>
<FormLabel className="font-normal">
Publikasi
</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="2" />
</FormControl>
<FormLabel className="font-normal">
Amplifikasi
</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="3" />
</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"
)}
disabled
>
<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="parentId"
render={({ field }) => (
<FormItem>
<FormLabel>Perencanaan Mingguan</FormLabel>
<Select
value={field.value}
onValueChange={field.onChange}
disabled
>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{weeklyList?.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}
config={{ readonly: true }}
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>
);
}

777
app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/edit/[id]/page.tsx Normal file
View File

@ -0,0 +1,777 @@
"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 { 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";
import { close, error, loading } from "@/config/swal";
import { id, te } from "date-fns/locale";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
getWeeklyPlanList,
savePlanning,
} from "@/service/agenda-setting/agenda-setting";
import { getOnlyDate } from "@/utils/globals";
import { useParams } from "next/navigation";
import { getPlanningById } from "@/service/planning/planning";
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.string({
required_error: "Required",
}),
parentId: z.string({
required_error: "Required",
}),
});
const items = [
{
id: "2",
label: "Audio Visual",
},
{
id: "1",
label: "Foto",
},
{
id: "4",
label: "Audio",
},
{
id: "3",
label: "Text",
},
];
const units = [
{
id: "1",
label: "Mabes Polri",
},
{
id: "2",
label: "Polda",
},
{
id: "3",
label: "Polres",
},
];
export default function EditDaily() {
const id = useParams()?.id;
const MySwal = withReactContent(Swal);
const [listDest, setListDest] = useState<any>([]);
const router = useRouter();
const [weeklyList, setWeeklyList] = useState<any>();
const [selected, setSelected] = useState<{ [key: string]: boolean }>({});
const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({});
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");
console.log("Data :", data);
form.setValue("title", data.title);
form.setValue("detail", data.description);
form.setValue("date", new Date(data.date));
form.setValue(
"output",
data.fileTypeOutput.split(",")?.length > 1
? data.fileTypeOutput.split(",")
: [data.fileTypeOutput]
);
form.setValue("type", String(data?.assignmentTypeId));
form.setValue("parentId", String(data?.parentId));
mapTopDestination(data?.assignedToLevel);
mapDestination(data?.assignedToTopLevel);
}
}
}
const mapTopDestination = (data: string) => {
const temp: string[] = [];
data.split(",").map((list) => {
if (list.length < 2) {
temp.push(list);
}
});
form.setValue("unit", temp);
};
const mapDestination = (data: string) => {
const temp: { [key: number]: boolean } = {};
data.split(",").forEach((list) => {
temp[Number(list)] = true;
});
setSelected(temp);
};
useEffect(() => {
getWeeklyPlanning();
}, []);
async function getWeeklyPlanning() {
const res = await getWeeklyPlanList(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),
}));
setWeeklyList(optionArr);
}
}
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>) => {
const getSelectedString = () => {
return Object.keys(selected)
.filter((key) => selected[key])
.join(", ");
};
console.log("data", data, selected);
loading();
const reqData = {
id: id,
planningTypeId: 1,
time: "1",
title: data.title,
assignmentTypeId: data.type, //string
description: data.detail,
assignedToLevel: unit?.join(","), //string
assignmentPurpose: getSelectedString(), //string
fileTypeOutput: data.output?.join(","), //string
status: "Open",
date: getOnlyDate(data.date),
// date:
// isPublish || isUpdate
// ? selectedDate?.length > 10
// ? data.date?.toISOString().slice(0, 10)
// : selectedDate
// : data.date?.toISOString().slice(0, 10),
parentId: Number(data.parentId), //number
assignmentMainTypeId: 1,
};
const response = await savePlanning(reqData);
if (response.error) {
error(response.message);
return false;
}
close();
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/curator/task-plan/mediahub");
}
});
};
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) => {
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();
setListDest(response.data.data.list);
}
initState();
}, []);
const handleParentChange = (listId: string) => {
setSelected((prev) => ({
...prev,
[listId]: !prev[listId],
}));
};
const handleSelectAllPolres = (listId: string, isChecked: boolean) => {
setSelectAll((prev) => ({
...prev,
[listId]: isChecked,
}));
setSelected((prev) => {
const updatedState = { ...prev };
listDest
.find((list: any) => list.id === listId)
?.subDestination.forEach((subDes: any) => {
updatedState[`${listId}${subDes.id}`] = isChecked;
});
return updatedState;
});
};
const handleChildChange = (childId: string) => {
setSelected((prev) => ({
...prev,
[childId]: !prev[childId],
}));
};
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/mediahub/create-monthly"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Bulanan
</Link>
<Link
href="/curator/task-plan/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}
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 === "3" && !unit.includes("2")
}
onCheckedChange={(checked) =>
handleUnitCheckedChange(item.id, checked)
}
/>
</FormControl>
<FormLabel className="font-normal">
{item.label}
</FormLabel>
</FormItem>
);
}}
/>
))}
<Dialog>
<DialogTrigger>
<a className="text-primary cursor-pointer text-sm">
{`[Kustom]`}
</a>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>
Daftar Wilayah Polda dan Polres
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-4 py-4 px-2 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
: !!selected[list.id]
}
onCheckedChange={() =>
handleParentChange(list.id)
}
disabled={unit.includes("2")}
/>
<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
checked={
unit.includes("3")
? true
: !!selectAll[list.id]
}
onCheckedChange={(e) =>
handleSelectAllPolres(
list.id,
Boolean(e)
)
}
disabled={unit.includes("3")}
/>
<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
: !!selected[
`${list.id}${subDes.id}`
]
}
onCheckedChange={() =>
handleChildChange(
`${list.id}${subDes.id}`
)
}
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>
)}
/>
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem>
<FormLabel>Jenis Penugasan</FormLabel>
<FormControl>
<RadioGroup
onValueChange={field.onChange}
value={field.value}
className="flex flex-row gap-3"
>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="1" />
</FormControl>
<FormLabel className="font-normal">
Publikasi
</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="2" />
</FormControl>
<FormLabel className="font-normal">
Amplifikasi
</FormLabel>
</FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
<FormControl>
<RadioGroupItem value="3" />
</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="parentId"
render={({ field }) => (
<FormItem>
<FormLabel>Perencanaan Mingguan</FormLabel>
<Select value={field.value} onValueChange={field.onChange}>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{weeklyList?.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>
);
}

244
app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx
View File

@ -8,7 +8,7 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { Link } from "@/i18n/routing"; import { Link, useRouter } from "@/i18n/routing";
import { CalendarIcon } from "lucide-react"; import { CalendarIcon } from "lucide-react";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -45,6 +45,20 @@ import {
AccordionItem, AccordionItem,
AccordionTrigger, AccordionTrigger,
} from "@/components/ui/accordion"; } from "@/components/ui/accordion";
import { close, error, loading } from "@/config/swal";
import { id } from "date-fns/locale";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
getWeeklyPlanList,
savePlanning,
} from "@/service/agenda-setting/agenda-setting";
import { getOnlyDate } from "@/utils/globals";
const FormSchema = z.object({ const FormSchema = z.object({
date: z.date({ date: z.date({
@ -62,26 +76,29 @@ const FormSchema = z.object({
unit: z.array(z.string()).refine((value) => value.some((item) => item), { unit: z.array(z.string()).refine((value) => value.some((item) => item), {
message: "Required", message: "Required",
}), }),
type: z.enum(["publication", "amplification", "contra"], { type: z.string({
required_error: "Required",
}),
parentId: z.string({
required_error: "Required", required_error: "Required",
}), }),
}); });
const items = [ const items = [
{ {
id: "video", id: "2",
label: "Audio Visual", label: "Audio Visual",
}, },
{ {
id: "image", id: "1",
label: "Foto", label: "Foto",
}, },
{ {
id: "audio", id: "4",
label: "Audio", label: "Audio",
}, },
{ {
id: "text", id: "3",
label: "Text", label: "Text",
}, },
]; ];
@ -103,7 +120,28 @@ const units = [
export default function CreateDaily() { export default function CreateDaily() {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const [listDest, setListDest] = useState<any>([]); const [listDest, setListDest] = useState<any>([]);
const [destination, setDestination] = useState<string[]>([]); const router = useRouter();
const [weeklyList, setWeeklyList] = useState<any>();
const [selected, setSelected] = useState<{ [key: string]: boolean }>({});
const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({});
useEffect(() => {
getWeeklyPlanning();
}, []);
async function getWeeklyPlanning() {
const res = await getWeeklyPlanList(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),
}));
setWeeklyList(optionArr);
}
}
const form = useForm<z.infer<typeof FormSchema>>({ const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema), resolver: zodResolver(FormSchema),
@ -140,7 +178,54 @@ export default function CreateDaily() {
}; };
const save = async (data: z.infer<typeof FormSchema>) => { const save = async (data: z.infer<typeof FormSchema>) => {
console.log("data", data); const getSelectedString = () => {
return Object.keys(selected)
.filter((key) => selected[key])
.join(", ");
};
console.log("data", data, selected);
loading();
const reqData = {
planningTypeId: 1,
time: "1",
title: data.title,
assignmentTypeId: data.type, //string
description: data.detail,
assignedToLevel: unit?.join(","), //string
assignmentPurpose: getSelectedString(), //string
fileTypeOutput: data.output?.join(","), //string
status: "Open",
date: getOnlyDate(data.date),
// date:
// isPublish || isUpdate
// ? selectedDate?.length > 10
// ? data.date?.toISOString().slice(0, 10)
// : selectedDate
// : data.date?.toISOString().slice(0, 10),
parentId: Number(data.parentId), //number
assignmentMainTypeId: 1,
};
console.log("req =>", reqData);
const response = await savePlanning(reqData);
if (response.error) {
error(response.message);
return false;
}
close();
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/curator/task-plan/mediahub");
}
});
}; };
const output = form.watch("output"); const output = form.watch("output");
@ -204,59 +289,41 @@ export default function CreateDaily() {
useEffect(() => { useEffect(() => {
async function initState() { async function initState() {
const response = await getUserLevelForAssignments(); const response = await getUserLevelForAssignments();
console.log("response", response);
setListDest(response.data.data.list); setListDest(response.data.data.list);
} }
initState(); initState();
}, []); }, []);
const handleDestination = (e: any) => { const handleParentChange = (listId: string) => {
let arrayDestination = []; setSelected((prev) => ({
...prev,
[listId]: !prev[listId],
}));
};
for (const element of destination) { const handleSelectAllPolres = (listId: string, isChecked: boolean) => {
arrayDestination.push(element); setSelectAll((prev) => ({
} ...prev,
[listId]: isChecked,
}));
if (e.target.name == "all") { setSelected((prev) => {
if (e.target.checked == true) { const updatedState = { ...prev };
const count = document.querySelectorAll(".input-all"); listDest
for (const element of Array.from(count)) { .find((list: any) => list.id === listId)
arrayDestination.push((element as HTMLInputElement).value); ?.subDestination.forEach((subDes: any) => {
} updatedState[`${listId}${subDes.id}`] = isChecked;
} else { });
arrayDestination = []; return updatedState;
} });
} 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); const handleChildChange = (childId: string) => {
for (const element of Array.from(count)) { setSelected((prev) => ({
const index = arrayDestination.indexOf( ...prev,
(element as HTMLInputElement).value [childId]: !prev[childId],
); }));
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 ( return (
@ -414,13 +481,13 @@ export default function CreateDaily() {
{`[Kustom]`} {`[Kustom]`}
</a> </a>
</DialogTrigger> </DialogTrigger>
<DialogContent size="md" className="sm:max-w-[425px]"> <DialogContent size="md">
<DialogHeader> <DialogHeader>
<DialogTitle> <DialogTitle>
Daftar Wilayah Polda dan Polres Daftar Wilayah Polda dan Polres
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="grid grid-cols-2 gap-4 py-4 max-h-[600px] overflow-y-auto custom-scrollbar-table"> <div className="grid grid-cols-2 gap-4 py-4 px-2 max-h-[600px] overflow-y-auto custom-scrollbar-table">
{listDest?.map((list: any) => ( {listDest?.map((list: any) => (
<div key={list.id}> <div key={list.id}>
<Accordion <Accordion
@ -439,13 +506,12 @@ export default function CreateDaily() {
checked={ checked={
unit.includes("2") unit.includes("2")
? true ? true
: destination : !!selected[list.id]
? destination.includes(`${list.id}`) }
: false onCheckedChange={() =>
handleParentChange(list.id)
} }
onChange={handleDestination}
disabled={unit.includes("2")} disabled={unit.includes("2")}
className="input-all input-polda"
/> />
<label <label
htmlFor={list.name} htmlFor={list.name}
@ -459,10 +525,18 @@ export default function CreateDaily() {
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <Checkbox
name={`subAll${list.id}`} checked={
onChange={handleDestination} unit.includes("3")
? true
: !!selectAll[list.id]
}
onCheckedChange={(e) =>
handleSelectAllPolres(
list.id,
Boolean(e)
)
}
disabled={unit.includes("3")} disabled={unit.includes("3")}
className="custom-control-input input-suball"
/> />
<label <label
htmlFor="all-polres" htmlFor="all-polres"
@ -482,14 +556,15 @@ export default function CreateDaily() {
checked={ checked={
unit.includes("3") unit.includes("3")
? true ? true
: destination : !!selected[
? destination.includes( `${list.id}${subDes.id}`
`${subDes.id}` ]
) }
: false onCheckedChange={() =>
handleChildChange(
`${list.id}${subDes.id}`
)
} }
className={`custom-control-input input-all input-suball-${list.id}`}
onChange={handleDestination}
disabled={unit.includes("3")} disabled={unit.includes("3")}
/> />
<label <label
@ -529,7 +604,7 @@ export default function CreateDaily() {
> >
<FormItem className="flex items-center space-x-3 space-y-0"> <FormItem className="flex items-center space-x-3 space-y-0">
<FormControl> <FormControl>
<RadioGroupItem value="publication" /> <RadioGroupItem value="1" />
</FormControl> </FormControl>
<FormLabel className="font-normal"> <FormLabel className="font-normal">
Publikasi Publikasi
@ -537,7 +612,7 @@ export default function CreateDaily() {
</FormItem> </FormItem>
<FormItem className="flex items-center space-x-3 space-y-0"> <FormItem className="flex items-center space-x-3 space-y-0">
<FormControl> <FormControl>
<RadioGroupItem value="amplification" /> <RadioGroupItem value="2" />
</FormControl> </FormControl>
<FormLabel className="font-normal"> <FormLabel className="font-normal">
Amplifikasi Amplifikasi
@ -545,7 +620,7 @@ export default function CreateDaily() {
</FormItem> </FormItem>
<FormItem className="flex items-center space-x-3 space-y-0"> <FormItem className="flex items-center space-x-3 space-y-0">
<FormControl> <FormControl>
<RadioGroupItem value="contra" /> <RadioGroupItem value="3" />
</FormControl> </FormControl>
<FormLabel className="font-normal">Kontra</FormLabel> <FormLabel className="font-normal">Kontra</FormLabel>
</FormItem> </FormItem>
@ -591,6 +666,31 @@ export default function CreateDaily() {
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="parentId"
render={({ field }) => (
<FormItem>
<FormLabel>Perencanaan Mingguan</FormLabel>
<Select value={field.value} onValueChange={field.onChange}>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{weeklyList?.map((list: any) => (
<SelectItem key={list.id} value={list.value}>
{list.label}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="detail" name="detail"

229
app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/detail/[id]/page.tsx Normal file
View File

@ -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 DetailMonthly() {
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: 1,
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/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/mediahub/create-weekly"
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
>
Mingguan
</Link>
<Link
href="/curator/task-plan/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
app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/edit/[id]/page.tsx Normal file
View File

1
app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx
View File

@ -143,7 +143,6 @@ export default function CreateMonthly() {
label: option.title, label: option.title,
value: String(option.id), value: String(option.id),
})); }));
console.log("ssss", optionArr);
setMonthlyList(optionArr); setMonthlyList(optionArr);
} }
} }

475
app/[locale]/(protected)/curator/task-plan/medsos-mediahub/create-daily/page.tsx
View File

@ -8,9 +8,9 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { Link } from "@/i18n/routing"; import { Link, useRouter } from "@/i18n/routing";
import { CalendarIcon } from "lucide-react"; import { CalendarIcon } from "lucide-react";
import React, { useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { format } from "date-fns"; import { format } from "date-fns";
import JoditEditor from "jodit-react"; import JoditEditor from "jodit-react";
@ -30,6 +30,34 @@ import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
getWeeklyPlanList,
savePlanning,
} from "@/service/agenda-setting/agenda-setting";
import { id } from "date-fns/locale";
import { close, error, loading } from "@/config/swal";
import { getOnlyDate } from "@/utils/globals";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import { getUserLevelForAssignments } from "@/service/task";
const FormSchema = z.object({ const FormSchema = z.object({
date: z.date({ date: z.date({
@ -47,46 +75,80 @@ const FormSchema = z.object({
unit: z.array(z.string()).refine((value) => value.some((item) => item), { unit: z.array(z.string()).refine((value) => value.some((item) => item), {
message: "Required", message: "Required",
}), }),
type: z.enum(["publication", "amplification", "contra"], { type: z.string({
required_error: "Required", required_error: "Required",
}), }),
parentId: z.string({
required_error: "Required",
}),
media: z.array(z.string()).refine((value) => value.some((item) => item), {
message: "Required",
}),
}); });
const items = [ const items = [
{ {
id: "video", id: "2",
label: "Audio Visual", label: "Audio Visual",
}, },
{ {
id: "image", id: "1",
label: "Foto", label: "Foto",
}, },
{ {
id: "audio", id: "4",
label: "Audio", label: "Audio",
}, },
{ {
id: "text", id: "3",
label: "Text", label: "Text",
}, },
]; ];
const medias = [
{
id: "5",
label: "X",
},
{
id: "1",
label: "Facebook",
},
{
id: "2",
label: "Instagram",
},
{
id: "3",
label: "Youtube",
},
{
id: "4",
label: "Tiktok",
},
];
const units = [ const units = [
{ {
id: "mabes", id: "1",
label: "Mabes Polri", label: "Mabes Polri",
}, },
{ {
id: "polda", id: "2",
label: "Polda", label: "Polda",
}, },
{ {
id: "polres", id: "3",
label: "Polres", label: "Polres",
}, },
]; ];
export default function CreateMonthly() { export default function CreateMonthly() {
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const [weeklyList, setWeeklyList] = useState<any>();
const router = useRouter();
const [selected, setSelected] = useState<{ [key: string]: boolean }>({});
const [selectAll, setSelectAll] = useState<{ [key: string]: boolean }>({});
const [listDest, setListDest] = useState<any>([]);
const form = useForm<z.infer<typeof FormSchema>>({ const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema), resolver: zodResolver(FormSchema),
@ -94,12 +156,30 @@ export default function CreateMonthly() {
unit: [], unit: [],
output: [], output: [],
detail: "", detail: "",
media: [],
}, },
}); });
const editor = useRef(null); const editor = useRef(null);
useEffect(() => {
getWeeklyPlanning();
}, []);
async function getWeeklyPlanning() {
const res = await getWeeklyPlanList(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),
}));
setWeeklyList(optionArr);
}
}
const onSubmit = async (data: z.infer<typeof FormSchema>) => { const onSubmit = async (data: z.infer<typeof FormSchema>) => {
console.log("data", data);
if (form.getValues("detail") == "") { if (form.getValues("detail") == "") {
form.setError("detail", { form.setError("detail", {
type: "manual", type: "manual",
@ -123,51 +203,96 @@ export default function CreateMonthly() {
}; };
const save = async (data: z.infer<typeof FormSchema>) => { const save = async (data: z.infer<typeof FormSchema>) => {
console.log("data", data); const getSelectedString = () => {
return Object.keys(selected)
.filter((key) => selected[key])
.join(", ");
};
loading();
const reqData = {
planningTypeId: 2,
time: "1",
title: data.title,
assignmentTypeId: data.type, //string
description: data.detail,
assignedToLevel: unit?.join(","), //string
assignmentPurpose: getSelectedString(), //string
fileTypeOutput: data.output?.join(","), //string
status: "Open",
date: getOnlyDate(data.date),
platformType: data.media?.join(","),
parentId: Number(data.parentId), //number
assignmentMainTypeId: 2,
};
console.log("req =>", reqData);
const response = await savePlanning(reqData);
if (response.error) {
error(response.message);
return false;
}
close();
MySwal.fire({
title: "Sukses",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then((result) => {
if (result.isConfirmed) {
router.push("/curator/task-plan/medsos-mediahub");
}
});
}; };
const output = form.watch("output"); const output = form.watch("output");
const media = form.watch("media");
const isAllChecked = items.every((item) => output?.includes(item.id));
const unit = form.watch("unit"); const unit = form.watch("unit");
const isAllChecked = items.every((item) => output?.includes(item.id));
const isAllMediaChecked = medias.every((item) => media?.includes(item.id));
const isAllUnitChecked = units.every((item) => unit?.includes(item.id)); const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
const handleAllCheckedChange = (checked: boolean | string) => { useEffect(() => {
if (checked) { async function initState() {
form.setValue( const response = await getUserLevelForAssignments();
"output", setListDest(response.data.data.list);
items.map((item) => item.id)
);
} else {
form.setValue("output", []);
} }
initState();
}, []);
const handleParentChange = (listId: string) => {
setSelected((prev) => ({
...prev,
[listId]: !prev[listId],
}));
}; };
const handleItemCheckedChange = (id: string, checked: boolean | string) => { const handleSelectAllPolres = (listId: string, isChecked: boolean) => {
form.setValue( setSelectAll((prev) => ({
"output", ...prev,
checked ? [...output, id] : output.filter((value) => value !== id) [listId]: isChecked,
); }));
setSelected((prev) => {
const updatedState = { ...prev };
listDest
.find((list: any) => list.id === listId)
?.subDestination.forEach((subDes: any) => {
updatedState[`${listId}${subDes.id}`] = isChecked;
});
return updatedState;
});
}; };
const handleAllUnitCheckedChange = (checked: boolean | string) => { const handleChildChange = (childId: string) => {
if (checked) { setSelected((prev) => ({
form.setValue( ...prev,
"unit", [childId]: !prev[childId],
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 ( return (
@ -226,10 +351,16 @@ export default function CreateMonthly() {
<Checkbox <Checkbox
id="all" id="all"
checked={isAllChecked} checked={isAllChecked}
// indeterminate={isSomeChecked && !isAllChecked} onCheckedChange={(checked) => {
onCheckedChange={(checked) => if (checked) {
handleAllCheckedChange(checked) form.setValue(
} "output",
items.map((item) => item.id)
);
} else {
form.setValue("output", []);
}
}}
/> />
<label htmlFor="all" className="text-sm"> <label htmlFor="all" className="text-sm">
Semua Semua
@ -250,9 +381,16 @@ export default function CreateMonthly() {
<FormControl> <FormControl>
<Checkbox <Checkbox
checked={output?.includes(item.id)} checked={output?.includes(item.id)}
onCheckedChange={(checked) => onCheckedChange={(checked) => {
handleItemCheckedChange(item.id, checked) form.setValue(
} "output",
checked
? [...output, item.id]
: output.filter(
(value) => value !== item.id
)
);
}}
/> />
</FormControl> </FormControl>
<FormLabel className="font-normal"> <FormLabel className="font-normal">
@ -281,9 +419,16 @@ export default function CreateMonthly() {
<Checkbox <Checkbox
id="all" id="all"
checked={isAllUnitChecked} checked={isAllUnitChecked}
onCheckedChange={(checked) => onCheckedChange={(checked) => {
handleAllUnitCheckedChange(checked) if (checked) {
} form.setValue(
"unit",
units.map((item) => item.id)
);
} else {
form.setValue("unit", []);
}
}}
/> />
<label htmlFor="all" className="text-sm"> <label htmlFor="all" className="text-sm">
Semua Semua
@ -308,9 +453,194 @@ export default function CreateMonthly() {
item.id === "polres" && item.id === "polres" &&
!unit.includes("polda") !unit.includes("polda")
} }
onCheckedChange={(checked) => onCheckedChange={(checked) => {
handleUnitCheckedChange(item.id, checked) form.setValue(
} "unit",
checked
? [...unit, item.id]
: unit.filter(
(value) => value !== item.id
)
);
}}
/>
</FormControl>
<FormLabel className="font-normal">
{item.label}
</FormLabel>
</FormItem>
);
}}
/>
))}
<Dialog>
<DialogTrigger asChild>
<a className="text-primary cursor-pointer text-sm">
{`[Kustom]`}
</a>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>
Daftar Wilayah Polda dan Polres
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-4 py-4 px-2 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
: !!selected[list.id]
}
onCheckedChange={() =>
handleParentChange(list.id)
}
disabled={unit.includes("2")}
/>
<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
checked={
unit.includes("3")
? true
: !!selectAll[list.id]
}
onCheckedChange={(e) =>
handleSelectAllPolres(
list.id,
Boolean(e)
)
}
disabled={unit.includes("3")}
/>
<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
: !!selected[
`${list.id}${subDes.id}`
]
}
onCheckedChange={() =>
handleChildChange(
`${list.id}${subDes.id}`
)
}
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>
)}
/>
<FormField
control={form.control}
name="media"
render={() => (
<FormItem>
<div className="mb-4">
<FormLabel className="text-sm">Jenis Platform</FormLabel>
</div>
<div className="flex flex-row gap-3 items-center ">
<div className="flex items-center gap-3">
<Checkbox
id="all"
checked={isAllMediaChecked}
onCheckedChange={(checked) => {
if (checked) {
form.setValue(
"media",
medias.map((item) => item.id)
);
} else {
form.setValue("media", []);
}
}}
/>
<label htmlFor="all" className="text-sm">
Semua
</label>
</div>
{medias.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={media?.includes(item.id)}
onCheckedChange={(checked) => {
form.setValue(
"media",
checked
? [...media, item.id]
: media.filter(
(value) => value !== item.id
)
);
}}
/> />
</FormControl> </FormControl>
<FormLabel className="font-normal"> <FormLabel className="font-normal">
@ -340,7 +670,7 @@ export default function CreateMonthly() {
> >
<FormItem className="flex items-center space-x-3 space-y-0"> <FormItem className="flex items-center space-x-3 space-y-0">
<FormControl> <FormControl>
<RadioGroupItem value="publication" /> <RadioGroupItem value="1" />
</FormControl> </FormControl>
<FormLabel className="font-normal"> <FormLabel className="font-normal">
Publikasi Publikasi
@ -348,7 +678,7 @@ export default function CreateMonthly() {
</FormItem> </FormItem>
<FormItem className="flex items-center space-x-3 space-y-0"> <FormItem className="flex items-center space-x-3 space-y-0">
<FormControl> <FormControl>
<RadioGroupItem value="amplification" /> <RadioGroupItem value="2" />
</FormControl> </FormControl>
<FormLabel className="font-normal"> <FormLabel className="font-normal">
Amplifikasi Amplifikasi
@ -356,7 +686,7 @@ export default function CreateMonthly() {
</FormItem> </FormItem>
<FormItem className="flex items-center space-x-3 space-y-0"> <FormItem className="flex items-center space-x-3 space-y-0">
<FormControl> <FormControl>
<RadioGroupItem value="contra" /> <RadioGroupItem value="3" />
</FormControl> </FormControl>
<FormLabel className="font-normal">Kontra</FormLabel> <FormLabel className="font-normal">Kontra</FormLabel>
</FormItem> </FormItem>
@ -366,6 +696,31 @@ export default function CreateMonthly() {
</FormItem> </FormItem>
)} )}
/> />
<FormField
control={form.control}
name="parentId"
render={({ field }) => (
<FormItem>
<FormLabel>Perencanaan Mingguan</FormLabel>
<Select value={field.value} onValueChange={field.onChange}>
<FormControl>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{weeklyList?.map((list: any) => (
<SelectItem key={list.id} value={list.value}>
{list.label}
</SelectItem>
))}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
<FormField <FormField
control={form.control} control={form.control}
name="date" name="date"

32
components/table/task-plan/list-view-column.tsx
View File

@ -78,7 +78,21 @@ const columns: ColumnDef<any>[] = [
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end"> <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"> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
Detail <Link
href={`/curator/task-plan/mediahub/create-weekly/detail/${data.id}`}
>
Detail
</Link>
</DropdownMenuItem>
<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/create-weekly/detail/${data.id}`}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a className="text-red-600">Delete</a>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
@ -121,7 +135,21 @@ const columns: ColumnDef<any>[] = [
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end"> <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"> <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
Detail <Link
href={`/curator/task-plan/mediahub/create-monthly/detail/${row.original.id}`}
>
Detail
</Link>
</DropdownMenuItem>
<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/create-monthly/edit/${row.original.id}`}
>
Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<a className="text-red-600">Delete</a>
</DropdownMenuItem> </DropdownMenuItem>
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>

13
components/table/task-plan/single-view-social-media-table.tsx
View File

@ -302,7 +302,7 @@ export default function SingleViewSocialMediaTable() {
onClick={() => onClick={() =>
onSelectedSocmed(todayData.planningList[0].date, "5") onSelectedSocmed(todayData.planningList[0].date, "5")
} }
className="flex flex-row gap-5 rounded-sm bg-[#0C0705] text-white px-3 py-1 justify-center" className="flex flex-row gap-5 rounded-sm bg-[#0C0705] text-white px-3 py-1 justify-center cursor-pointer"
> >
Total: {todayData.totalTwitter} <XIcon /> Total: {todayData.totalTwitter} <XIcon />
</a> </a>
@ -310,7 +310,7 @@ export default function SingleViewSocialMediaTable() {
onClick={() => onClick={() =>
onSelectedSocmed(todayData.planningList[0].date, "1") onSelectedSocmed(todayData.planningList[0].date, "1")
} }
className="flex flex-row gap-5 rounded-sm bg-[#1877F2] text-white px-3 py-1 justify-center" className="flex flex-row gap-5 rounded-sm bg-[#1877F2] text-white px-3 py-1 justify-center cursor-pointer"
> >
Total: {todayData.totalFacebook} <FacebookIcon /> Total: {todayData.totalFacebook} <FacebookIcon />
</a> </a>
@ -318,7 +318,7 @@ export default function SingleViewSocialMediaTable() {
onClick={() => onClick={() =>
onSelectedSocmed(todayData.planningList[0].date, "2") onSelectedSocmed(todayData.planningList[0].date, "2")
} }
className="flex flex-row gap-5 rounded-sm bg-[#d62976] text-white px-3 py-1 justify-center" className="flex flex-row gap-5 rounded-sm bg-[#d62976] text-white px-3 py-1 justify-center cursor-pointer"
> >
Total: {todayData.totalInstagram} <InstagramIcon /> Total: {todayData.totalInstagram} <InstagramIcon />
</a> </a>
@ -326,7 +326,7 @@ export default function SingleViewSocialMediaTable() {
onClick={() => onClick={() =>
onSelectedSocmed(todayData.planningList[0].date, "3") onSelectedSocmed(todayData.planningList[0].date, "3")
} }
className="flex flex-row gap-5 rounded-sm bg-[#FF0000] text-white px-3 py-1 justify-center" className="flex flex-row gap-5 rounded-sm bg-[#FF0000] text-white px-3 py-1 justify-center cursor-pointer"
> >
Total: {todayData.totalYoutube} <YoutubeIcon /> Total: {todayData.totalYoutube} <YoutubeIcon />
</a> </a>
@ -334,7 +334,7 @@ export default function SingleViewSocialMediaTable() {
onClick={() => onClick={() =>
onSelectedSocmed(todayData.planningList[0].date, "4") onSelectedSocmed(todayData.planningList[0].date, "4")
} }
className="flex flex-row gap-5 rounded-sm bg-[#000000] text-white px-3 py-1 justify-center" className="flex flex-row gap-5 rounded-sm bg-[#000000] text-white px-3 py-1 justify-center cursor-pointer"
> >
Total: {todayData.totalTiktok} <TiktokIcon /> Total: {todayData.totalTiktok} <TiktokIcon />
</a> </a>
@ -444,7 +444,8 @@ export default function SingleViewSocialMediaTable() {
> >
{parseInt(day.date.split("-")[2])} {parseInt(day.date.split("-")[2])}
</span> </span>
{getDataForThisDate(parseInt(day.date.split("-")[2]))} {day.isCurrentMonth &&
getDataForThisDate(parseInt(day.date.split("-")[2]))}
</li> </li>
))} ))}
</ol> </ol>

585
lib/menus.ts
View File

@ -31,7 +31,6 @@ export type Group = {
}; };
export function getMenuList(pathname: string, t: any): Group[] { export function getMenuList(pathname: string, t: any): Group[] {
const roleId = getCookiesDecrypt("urie"); const roleId = getCookiesDecrypt("urie");
const levelNumber = getCookiesDecrypt("ulne"); const levelNumber = getCookiesDecrypt("ulne");
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
@ -1383,300 +1382,300 @@ export function getMenuList(pathname: string, t: any): Group[] {
if (Number(roleId) == 9) { if (Number(roleId) == 9) {
menusSelected = [ menusSelected = [
{ {
groupLabel: t("apps"), groupLabel: t("apps"),
id: "dashboard", id: "dashboard",
menus: [ menus: [
{ {
id: "dashboard", id: "dashboard",
href: "/dashboard", href: "/dashboard",
label: t("dashboard"), label: t("dashboard"),
active: pathname.includes("/dashboard"), active: pathname.includes("/dashboard"),
icon: "material-symbols:dashboard", icon: "material-symbols:dashboard",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "ticketing", id: "ticketing",
menus: [ menus: [
{ {
id: "ticketing", id: "ticketing",
href: "/supervisor/ticketing", href: "/supervisor/ticketing",
label: t("ticketing"), label: t("ticketing"),
active: pathname.includes("/ticketing"), active: pathname.includes("/ticketing"),
icon: "mdi:ticket-outline", icon: "mdi:ticket-outline",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "knowledge-base", id: "knowledge-base",
menus: [ menus: [
{ {
id: "knowledge-base", id: "knowledge-base",
href: "/supervisor/knowledge-base", href: "/supervisor/knowledge-base",
label: t("knowledge-base"), label: t("knowledge-base"),
active: pathname.includes("/knowledge-base"), active: pathname.includes("/knowledge-base"),
icon: "hugeicons:knowledge-02", icon: "hugeicons:knowledge-02",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "faq", id: "faq",
menus: [ menus: [
{ {
id: "faq", id: "faq",
href: "/supervisor/faq", href: "/supervisor/faq",
label: t("faq"), label: t("faq"),
active: pathname.includes("/frequently-asked-question"), active: pathname.includes("/frequently-asked-question"),
icon: "wpf:faq", icon: "wpf:faq",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "communication", id: "communication",
menus: [ menus: [
{ {
id: "communication", id: "communication",
href: "/supervisor/communications", href: "/supervisor/communications",
label: t("communication"), label: t("communication"),
active: pathname.includes("/communications"), active: pathname.includes("/communications"),
icon: "icon-park-outline:communication", icon: "icon-park-outline:communication",
submenus: [ submenus: [
{ {
href: "/supervisor/communications/questions", href: "/supervisor/communications/questions",
label: t("questions"), label: t("questions"),
active: pathname.includes("/communications/questions"), active: pathname.includes("/communications/questions"),
icon: "solar:inbox-line-outline", icon: "solar:inbox-line-outline",
children: [], children: [],
}, },
{ {
href: "/supervisor/communications/internal", href: "/supervisor/communications/internal",
label: t("internal"), label: t("internal"),
active: pathname.includes("/communications/internal"), active: pathname.includes("/communications/internal"),
icon: "ri:chat-private-line", icon: "ri:chat-private-line",
children: [], children: [],
}, },
{ {
href: "/supervisor/communications/forward", href: "/supervisor/communications/forward",
label: t("forward"), label: t("forward"),
active: pathname.includes("/communications/forward"), active: pathname.includes("/communications/forward"),
icon: "ri:share-forward-2-fill", icon: "ri:share-forward-2-fill",
children: [], children: [],
}, },
{ {
href: "/supervisor/communications/collaboration", href: "/supervisor/communications/collaboration",
label: t("collaboration"), label: t("collaboration"),
active: pathname.includes("/communications/collaboration"), active: pathname.includes("/communications/collaboration"),
icon: "clarity:employee-group-line", icon: "clarity:employee-group-line",
children: [], children: [],
}, },
{ {
href: "/supervisor/communications/account-report", href: "/supervisor/communications/account-report",
label: t("account-report"), label: t("account-report"),
active: pathname.includes("/communications/account-report"), active: pathname.includes("/communications/account-report"),
icon: "uiw:user-delete", icon: "uiw:user-delete",
children: [], children: [],
}, },
], ],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "settings", id: "settings",
menus: [ menus: [
{ {
id: "settings", id: "settings",
href: "/supervisor/settings", href: "/supervisor/settings",
label: t("settings"), label: t("settings"),
active: pathname.includes("/settings"), active: pathname.includes("/settings"),
icon: "uil:setting", icon: "uil:setting",
submenus: [ submenus: [
{ {
href: "/settings/feedback", href: "/settings/feedback",
label: t("feedback"), label: t("feedback"),
active: pathname.includes("/settings/feedback"), active: pathname.includes("/settings/feedback"),
icon: "clarity:employee-group-line", icon: "clarity:employee-group-line",
children: [], children: [],
}, },
{ {
href: "/settings/social-media", href: "/settings/social-media",
label: t("social-media"), label: t("social-media"),
active: pathname.includes("/settings/social-media"), active: pathname.includes("/settings/social-media"),
icon: "clarity:employee-group-line", icon: "clarity:employee-group-line",
children: [], children: [],
}, },
], ],
}, },
], ],
} },
] ];
} else if (Number(roleId) == 11) { } else if (Number(roleId) == 11) {
menusSelected = [ menusSelected = [
{ {
groupLabel: t("apps"), groupLabel: t("apps"),
id: "dashboard", id: "dashboard",
menus: [ menus: [
{ {
id: "dashboard", id: "dashboard",
href: "/dashboard", href: "/dashboard",
label: t("dashboard"), label: t("dashboard"),
active: pathname.includes("/dashboard"), active: pathname.includes("/dashboard"),
icon: "material-symbols:dashboard", icon: "material-symbols:dashboard",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "content-production", id: "content-production",
menus: [ menus: [
{ {
id: "content-production", id: "content-production",
href: "/curator/content-production", href: "/curator/content-production",
label: t("content-production"), label: t("content-production"),
active: pathname.includes("/content-production"), active: pathname.includes("/content-production"),
icon: "fluent:content-view-gallery-16-regular", icon: "fluent:content-view-gallery-16-regular",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "pattern-relation", id: "pattern-relation",
menus: [ menus: [
{ {
id: "pattern-relation", id: "pattern-relation",
href: "/curator/pattern-relation", href: "/curator/pattern-relation",
label: t("pattern-relation"), label: t("pattern-relation"),
active: pathname.includes("/pattern-relation"), active: pathname.includes("/pattern-relation"),
icon: "oui:app-index-pattern", icon: "oui:app-index-pattern",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "agenda-setting", id: "agenda-setting",
menus: [ menus: [
{ {
id: "agenda-setting", id: "agenda-setting",
href: "/curator/agenda-setting", href: "/contributor/agenda-setting",
label: t("agenda-setting"), label: t("agenda-setting"),
active: pathname.includes("/agenda-setting"), active: pathname.includes("/agenda-setting"),
icon: "iconoir:journal-page", icon: "iconoir:journal-page",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "task-plan", id: "task-plan",
menus: [ menus: [
{ {
id: "task-plan", id: "task-plan",
href: "/curator/task-plan", href: "/curator/task-plan",
label: t("task-plan"), label: t("task-plan"),
active: pathname.includes("/task-plan"), active: pathname.includes("/task-plan"),
icon: "pajamas:planning", icon: "pajamas:planning",
submenus: [ submenus: [
{ {
href: "/curator/task-plan/mediahub", href: "/curator/task-plan/mediahub",
label: "mediaHub", label: "mediaHub",
active: pathname === "/task-plan/mediahub", active: pathname === "/task-plan/mediahub",
icon: "heroicons:arrow-trending-up", icon: "heroicons:arrow-trending-up",
children: [], children: [],
}, },
{ {
href: "/curator/task-plan/medsos-mediahub", href: "/curator/task-plan/medsos-mediahub",
label: "medsos mediahub", label: "medsos mediahub",
active: pathname === "/task-plan/medsos-mediahub", active: pathname === "/task-plan/medsos-mediahub",
icon: "heroicons:shopping-cart", icon: "heroicons:shopping-cart",
children: [], children: [],
}, },
], ],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "curatedcontent", id: "curatedcontent",
menus: [ menus: [
{ {
id: "curatedcontent", id: "curatedcontent",
href: "/shared/curated-content", href: "/shared/curated-content",
label: t("curated-content"), label: t("curated-content"),
active: pathname.includes("/curated-content"), active: pathname.includes("/curated-content"),
icon: "pixelarticons:calendar-text", icon: "pixelarticons:calendar-text",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "media-tracking", id: "media-tracking",
menus: [ menus: [
{ {
id: "media-tracking", id: "media-tracking",
href: "/curator/media-tracking", href: "/curator/media-tracking",
label: t("media-tracking"), label: t("media-tracking"),
active: pathname.includes("/media-tracking"), active: pathname.includes("/media-tracking"),
icon: "material-symbols:map-search-outline", icon: "material-symbols:map-search-outline",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "communication", id: "communication",
menus: [ menus: [
{ {
id: "communication", id: "communication",
href: "/shared/communication", href: "/shared/communication",
label: t("communication"), label: t("communication"),
active: pathname.includes("/communication"), active: pathname.includes("/communication"),
icon: "token:chat", icon: "token:chat",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "contest", id: "contest",
menus: [ menus: [
{ {
id: "contest", id: "contest",
href: "/shared/contest", href: "/shared/contest",
label: t("contest"), label: t("contest"),
active: pathname.includes("/contest"), active: pathname.includes("/contest"),
icon: "ic:outline-emoji-events", icon: "ic:outline-emoji-events",
submenus: [], submenus: [],
}, },
], ],
}, },
{ {
groupLabel: "", groupLabel: "",
id: "feedback", id: "feedback",
menus: [ menus: [
{ {
id: "feedback", id: "feedback",
href: "/curator/feedback", href: "/curator/feedback",
label: t("feedback"), label: t("feedback"),
active: pathname.includes("/feedback"), active: pathname.includes("/feedback"),
icon: "mdi:feedback-outline", icon: "mdi:feedback-outline",
submenus: [], submenus: [],
}, },
], ],
} },
] ];
} }
return menusSelected; return menusSelected;