pull main

This commit is contained in:
Sabda Yagra 2025-06-07 20:30:50 +07:00
commit 87aa6c3e34
20 changed files with 855 additions and 630 deletions

View File

@ -230,11 +230,13 @@ export default function AddExpertForm() {
};
const handleAddRow = () => {
setPlacementRows((prevRows: any) => [
if (placementRows.length < 2) {
setPlacementRows((prevRows) => [
...prevRows,
{ index: incrementId, roleId: "", userLevelId: 0 },
]);
setIncrementId((prevId) => prevId + 1);
}
};
return (
@ -424,7 +426,7 @@ export default function AddExpertForm() {
))}
</SelectContent>
</Select>
<Select
{/* <Select
onValueChange={(e) =>
handleSelectionChange(row.index, "userLevelId", e)
}
@ -441,6 +443,20 @@ export default function AddExpertForm() {
</SelectItem>
))}
</SelectContent>
</Select> */}
<Select
onValueChange={(e) =>
handleSelectionChange(row.index, "userLevelId", e)
}
>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Pilih User Level" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="216">MABES POLRI</SelectItem>
</SelectContent>
</Select>
{placementRows.length > 1 && (
<Button
@ -454,7 +470,12 @@ export default function AddExpertForm() {
)}
</div>
))}
<Button type="button" size="md" onClick={() => handleAddRow()}>
<Button
type="button"
size="md"
onClick={handleAddRow}
disabled={placementRows.length >= 2} // optional: disable button if already 1 row added
>
Tambah
</Button>
</div>

View File

@ -154,8 +154,6 @@ const AdvertisementsList = () => {
page - 1,
showData,
"",
categoryFilter?.sort().join(","),
statusFilter?.sort().join(",")
);
const data = res?.data?.data;
const contentData = data?.content;

View File

@ -44,7 +44,7 @@ import { useRouter, useSearchParams } from "next/navigation";
import TablePagination from "@/components/table/table-pagination";
import columns from "./columns";
import {
paginationCalendar,
getCalendarPagination,
paginationSchedule,
} from "@/service/schedule/schedule";
import { CardHeader, CardTitle } from "@/components/ui/card";
@ -120,10 +120,9 @@ const CalendarPolriTable = () => {
async function fetchData() {
try {
const res = await paginationCalendar(
const res = await getCalendarPagination(
showData,
page - 1,
1,
search,
statusFilter
);

View File

@ -159,7 +159,7 @@ const useTableColumns = () => {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end">
{roleId == 11 && (
{(roleId == 11 || roleId == 12) && (
<Link href={`/contributor/task-ta/detail/${row.original.id}`}>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
<Eye className="w-4 h-4 me-1.5" />

View File

@ -73,7 +73,7 @@ const TaskTaTable = () => {
const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [showData, setShowData] = React.useState("10");
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),

View File

@ -55,6 +55,7 @@ import dynamic from "next/dynamic";
import { error } from "@/lib/swal";
import { useTranslations } from "next-intl";
import { contextType } from "cleave.js/react";
import { Form } from "@/components/ui/form";
const imageSchema = z.object({
contentTitle: z.string().min(1, { message: "Judul diperlukan" }),
@ -182,13 +183,31 @@ export default function FormConvertSPIT() {
let fileTypeId = "1";
const {
control,
handleSubmit,
setValue,
formState: { errors },
} = useForm<ImageSchema>({
// const {
// control,
// handleSubmit,
// setValue,
// formState: { errors },
// } = useForm<ImageSchema>({
// resolver: zodResolver(imageSchema),
// defaultValues: {
// contentTitle: detail?.contentTitle || "",
// contentDescription: detail?.contentDescription || "",
// contentCreator: detail?.contentCreator || "",
// contentRewriteDescription: detail?.contentRewriteDescription || "",
// // dll
// },
// });
const form = useForm<z.infer<typeof imageSchema>>({
resolver: zodResolver(imageSchema),
defaultValues: {
contentTitle: detail?.contentTitle || "",
contentDescription: detail?.contentDescription || "",
contentCreator: detail?.contentCreator || "",
contentRewriteDescription: detail?.contentRewriteDescription || "",
// dll
},
});
const handleRemoveTag = (index: any) => {
@ -207,11 +226,10 @@ export default function FormConvertSPIT() {
setSelectedFiles((prevImages) => prevImages.filter((_, i) => i !== index));
};
// const handleCheckboxChange = (id: number) => {
// setSelectedPublishers((prev) =>
// prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
// );
// };
const handleDirectSave = () => {
const values = form.getValues(); // ambil semua nilai tanpa validasi
onSubmit(values); // langsung submit
};
useEffect(() => {
async function initState() {
@ -318,6 +336,13 @@ export default function FormConvertSPIT() {
setDetail(details);
setFiles(details?.contentList);
setupPlacementCheck(details?.contentList?.length);
form.setValue("contentTitle", details?.contentTitle || "");
form.setValue("contentDescription", details?.contentDescription || "");
form.setValue("contentCreator", details?.contentCreator || "");
form.setValue(
"contentRewriteDescription",
details?.contentRewriteDescription || ""
);
const filesData = details.contentList || [];
const fileUrls = filesData.map((file: { contentFile: string }) =>
@ -337,7 +362,7 @@ export default function FormConvertSPIT() {
}
}
initState();
}, [refresh, setValue]);
}, [refresh]);
const [tempFile, setTempFile] = useState(
detailThumb.map((data: any) => ({
@ -472,7 +497,13 @@ export default function FormConvertSPIT() {
});
};
const onSubmit = (data: ImageSchema) => {
const onSubmit = async (data: z.infer<typeof imageSchema>) => {
if (form.getValues("contentTitle") == "") {
form.setError("contentTitle", {
type: "manual",
message: "Required",
});
} else {
MySwal.fire({
title: "Simpan Data",
text: "Apakah Anda yakin ingin menyimpan data ini?",
@ -486,6 +517,7 @@ export default function FormConvertSPIT() {
save(data);
}
});
}
};
const [showRewriteEditor, setShowRewriteEditor] = useState(false);
@ -561,6 +593,7 @@ export default function FormConvertSPIT() {
setArticleBody(cleanArticleBody || "");
setDetailData(articleData);
setSelectedArticleId(id);
// setArticleImages(articleImagesData || []);
} catch (error) {
console.error("Error fetching article details:", error);
@ -613,7 +646,9 @@ export default function FormConvertSPIT() {
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
{detail !== undefined ? (
<div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12">
@ -624,23 +659,18 @@ export default function FormConvertSPIT() {
<div className="space-y-2 py-3">
<Label>{t("title")}</Label>
<Controller
control={control}
control={form.control}
name="contentTitle"
render={({ field }) => (
<Input
size="md"
type="text"
defaultValue={detail?.contentTitle}
value={field.value}
onChange={field.onChange}
placeholder="Enter contentTitle"
/>
)}
/>
{errors.contentTitle?.message && (
<p className="text-red-400 text-sm">
{errors.contentTitle.message}
</p>
)}
</div>
<div className="flex items-center">
<div className="py-3 w-full space-y-2">
@ -683,7 +713,7 @@ export default function FormConvertSPIT() {
<div className="py-3 space-y-2">
<Label>{t("description")}</Label>
<Controller
control={control}
control={form.control}
name="contentDescription"
render={({ field: { onChange, value } }) => (
// <JoditEditor
@ -698,13 +728,9 @@ export default function FormConvertSPIT() {
/>
)}
/>
{errors.contentDescription?.message && (
<p className="text-red-400 text-sm">
{errors.contentDescription.message}
</p>
)}
</div>
<div className="space-y-2 py-3 w-4/12">
<p className="text-sm font-semibold">Content Rewrite</p>
<div className="space-y-2 pb-3 w-4/12">
<Label>{t("writing-style")}</Label>
<Select
value={selectedWritingStyle}
@ -729,6 +755,7 @@ export default function FormConvertSPIT() {
<div className="my-2">
<Button
size="sm"
type="button"
onClick={handleRewriteClick}
className="bg-blue-500 text-white py-2 px-4 rounded"
>
@ -740,22 +767,26 @@ export default function FormConvertSPIT() {
{isGeneratedArticle && (
<div className="mt-3 pb-0 flex flex-row ">
{articleIds.map((id: string, index: number) => (
<button
<Button
type="button"
key={index}
className={`mr-3 px-3 py-2 rounded-md ${
selectedArticleId === id
? "bg-green-500 text-white"
: "border-2 border-green-500 text-green-500"
: "border-2 border-green-500 bg-white text-green-500 hover:bg-green-500 hover:text-white hover:border-green-500"
}`}
onClick={() => handleArticleIdClick(id)}
>
{"Narasi " + (index + 1)}
</button>
</Button>
))}
</div>
)}
<div className="flex items-center space-x-2 mt-3">
<RadioGroupItem value="rewrite" id="rewrite-file" />
<RadioGroupItem
value="rewrite"
id="rewrite-file"
/>
<Label htmlFor="rewrite-file">
Select File Rewrite
</Label>
@ -763,7 +794,7 @@ export default function FormConvertSPIT() {
<div className="py-3 space-y-2">
<Label>{t("file-rewrite")}</Label>
<Controller
control={control}
control={form.control}
name="contentRewriteDescription"
render={({ field: { onChange, value } }) =>
isLoadingData ? (
@ -780,11 +811,6 @@ export default function FormConvertSPIT() {
)
}
/>
{errors.contentRewriteDescription?.message && (
<p className="text-red-400 text-sm">
{errors.contentRewriteDescription.message}
</p>
)}
</div>
</div>
)}
@ -929,7 +955,9 @@ export default function FormConvertSPIT() {
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes("mabes")}
checked={filePlacements[index]?.includes(
"mabes"
)}
onCheckedChange={(e) =>
setupPlacement(index, "mabes", Boolean(e))
}
@ -944,7 +972,9 @@ export default function FormConvertSPIT() {
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes("polda")}
checked={filePlacements[index]?.includes(
"polda"
)}
onCheckedChange={(e) =>
setupPlacement(index, "polda", Boolean(e))
}
@ -964,7 +994,11 @@ export default function FormConvertSPIT() {
"international"
)}
onCheckedChange={(e) =>
setupPlacement(index, "international", Boolean(e))
setupPlacement(
index,
"international",
Boolean(e)
)
}
/>
<label
@ -987,7 +1021,7 @@ export default function FormConvertSPIT() {
<div className="space-y-2">
<Label>{t("creator")}</Label>
<Controller
control={control}
control={form.control}
name="contentCreator"
render={({ field }) => (
<Input
@ -999,11 +1033,6 @@ export default function FormConvertSPIT() {
/>
)}
/>
{errors.contentCreator?.message && (
<p className="text-red-400 text-sm">
{errors.contentCreator.message}
</p>
)}
</div>
</div>
<div className="mt-3 px-3">
@ -1037,7 +1066,10 @@ export default function FormConvertSPIT() {
<div className="flex flex-col gap-3 space-y-2">
<Label>{t("publish-target")}</Label>
{options.map((option) => (
<div key={option.id} className="flex gap-2 items-center">
<div
key={option.id}
className="flex gap-2 items-center"
>
<Checkbox
id={option.id}
checked={
@ -1047,21 +1079,15 @@ export default function FormConvertSPIT() {
.length
: publishedFor.includes(option.id)
}
onCheckedChange={() => handleCheckboxChange(option.id)}
onCheckedChange={() =>
handleCheckboxChange(option.id)
}
/>
<Label htmlFor={option.id}>{option.label}</Label>
</div>
))}
</div>
</div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon />
<p className="">{t("suggestion-box")} (0)</p>
</div>
<div className="px-3 py-3">
<p>{t("information")}:</p>
{/* <p>{detail?.status}</p> */}
</div>
</Card>
<div className="flex flex-row justify-end gap-3">
<div className="mt-4">
@ -1085,5 +1111,7 @@ export default function FormConvertSPIT() {
""
)}
</form>
</Form>
</>
);
}

View File

@ -25,7 +25,6 @@ import DatePicker from "react-datepicker";
import { id } from "date-fns/locale";
import "react-datepicker/dist/react-datepicker.css";
import { zodResolver } from "@hookform/resolvers/zod";
import router from "next/router";
import { Controller, useForm } from "react-hook-form";
import { date, z } from "zod";
import { error, loading } from "@/lib/swal";
@ -51,6 +50,7 @@ import Image from "next/image";
import FileUploader from "../shared/file-uploader";
import { getCsrfToken } from "@/service/auth";
import { Upload } from "tus-js-client";
import { useRouter } from "next/navigation";
const calendarSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
@ -68,6 +68,7 @@ interface FileUploaded {
export function CalendarPolriAdd() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const [open, setOpen] = React.useState(false);
const t = useTranslations("Schedule");
type CalendarSchema = z.infer<typeof calendarSchema>;
@ -212,9 +213,7 @@ export function CalendarPolriAdd() {
return false;
}
Cookies.set("scheduleId", response?.data?.data.id, {
expires: 1,
});
const id = response?.data?.data?.id;
loading();
if (imageFiles?.length === 0) {
@ -242,7 +241,7 @@ export function CalendarPolriAdd() {
};
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
endpoint: `${process.env.NEXT_PUBLIC_API}/calendars/file/upload`,
headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,

View File

@ -134,7 +134,7 @@ export function TambahIklanModal() {
};
const handlePoldaPolresChange = () => {
return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
return Array.from(checkedLevels).join(",");
};
const handleUnitChange = (
@ -185,34 +185,30 @@ export function TambahIklanModal() {
.filter((key) => unitSelection[key as keyof typeof unitSelection])
.map((key) => unitMapping[key as keyof typeof unitMapping])
.join(",");
const requestData = {
title: data.title,
placements: selectedPlacement,
description: data.description,
redirectLink: "https://new.netidhub.com",
createdBy: assignmentToString,
assignedToLevel: handlePoldaPolresChange(),
};
console.log("Form Data Submitted:", requestData);
const response = await postAdvertisements(requestData);
const formMedia = new FormData();
formMedia.append("title", data.title);
formMedia.append("placements", selectedPlacement);
formMedia.append("description", data.description);
formMedia.append("redirectLink", "https://new.netidhub.com");
formMedia.append("assignedToLevel", handlePoldaPolresChange());
formMedia.append("file", imageFiles[0]);
console.log("Form Data Submitted:", formMedia);
loading();
const response = await postAdvertisements(formMedia);
if (response?.error) {
error(response?.message);
return false;
}
close();
Cookies.set("scheduleId", response?.data?.data.id, {
expires: 1,
});
loading();
if (imageFiles?.length === 0) {
setIsImageUploadFinish(true);
}
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
};
async function uploadResumableFile(
@ -232,7 +228,7 @@ export function TambahIklanModal() {
};
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/advertisment/file/upload`,
endpoint: `${process.env.NEXT_PUBLIC_API}/advertisements/file/upload`,
headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,

View File

@ -907,7 +907,7 @@ export default function FormTaskTaDetail() {
<div className="px-6 py-6">
<div className="flex flex-col sm:flex-row lg:flex-row justify-between">
<p className="text-lg font-semibold mb-3">{t("detail-task")}</p>
<div
{/* <div
className="flex gap-3"
style={
detail?.createdBy?.id === Number(userId)
@ -950,7 +950,7 @@ export default function FormTaskTaDetail() {
</DialogContent>
</Dialog>
</div>
</div>
</div> */}
</div>
<form>
@ -1320,7 +1320,7 @@ export default function FormTaskTaDetail() {
</div>
</div>
<div className="flex flex-wrap lg:flex-row justify-between gap-3 my-3">
<div className="lg:px-1">
{/* <div className="lg:px-1">
{detail?.isDone !== true &&
(Number(userLevelNumber) !== 3 ||
Number(userLevelNumber) == 2) ? (
@ -1336,9 +1336,9 @@ export default function FormTaskTaDetail() {
) : (
""
)}
</div>
</div> */}
<div className="flex flex-wrap gap-2">
<div className="">
{/* <div className="">
<Button
type="button"
color="primary"
@ -1347,8 +1347,8 @@ export default function FormTaskTaDetail() {
>
Beri Tanggapan
</Button>
</div>
<div className="">
</div> */}
{/* <div className="">
<Button
type="button"
className="btn btn-primary lg:mx-3"
@ -1364,9 +1364,9 @@ export default function FormTaskTaDetail() {
>
Terima Tugas
</Button>
</div>
</div> */}
<div
className="task-response w-100 lg:px-3 "
className="task-response w-100 lg:px-3"
// style={
// Number(detail?.createdBy?.id) == Number(userId)
// ? {}
@ -1384,7 +1384,7 @@ export default function FormTaskTaDetail() {
if (!isTableResult) fetchAllData(); // Panggil API saat tombol diklik
}}
>
Hasil Upload {Number(userId)}
Hasil Upload
</Button>
</div>
</div>
@ -1406,7 +1406,7 @@ export default function FormTaskTaDetail() {
/>
</InputGroup>
</div>
<Dialog>
{/* <Dialog>
<DialogTrigger asChild>
<Button variant="outline" size="md" color="primary">
Filter Polda/Polres
@ -1486,7 +1486,7 @@ export default function FormTaskTaDetail() {
))}
</div>
</DialogContent>
</Dialog>
</Dialog> */}
</div>
<div className="overflow-x-auto">
<table className="min-w-full border-collapse border border-gray-300">

View File

@ -157,7 +157,7 @@ export default function FormTaskTa() {
const [isAudioUploadFinish, setIsAudioUploadFinish] = useState(false);
const [voiceNoteLink, setVoiceNoteLink] = useState("");
const [date, setDate] = React.useState<DateRange | undefined>({
from: new Date(2024, 0, 1),
from: new Date(),
});
const [platformTypeVisible, setPlatformTypeVisible] = useState(false);
@ -400,7 +400,7 @@ export default function FormTaskTa() {
fileTypeId: string,
duration: string
) {
console.log(idx, id, file, fileTypeId, duration);
console.log("Tus Upload : ", idx, id, file, fileTypeId, duration);
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
@ -631,7 +631,10 @@ export default function FormTaskTa() {
}
className="mr-3"
/>
{expert.fullname}
<div className="flex flex-col gap-2">
<div className="font-bold">{expert.fullname}</div>
<div className="italic">({expert.username})</div>
</div>
</Label>
</div>
))}
@ -639,6 +642,36 @@ export default function FormTaskTa() {
</DialogContent>
</Dialog>
</div>
{checkedLevels.size > 0 && (
<div className="mt-3">
<Label className="text-sm text-gray-600 mb-2 block">
Tenaga Ahli Terpilih ({checkedLevels.size})
</Label>
<div className="flex flex-wrap gap-2">
{Array.from(checkedLevels).map((expertId) => {
const expert = listExpert?.find((exp: any) => exp.id === expertId);
return expert ? (
<div
key={expert.id}
className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1.5 rounded-full border border-blue-200"
>
<span>{expert.fullname}</span>
<button
type="button"
onClick={() => handleCheckboxChange(expert.id)}
className="ml-1 text-blue-600 hover:text-blue-800 hover:bg-blue-200 rounded-full p-0.5 transition-colors"
title="Remove expert"
>
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</button>
</div>
) : null;
})}
</div>
</div>
)}
</div>
<div className="mt-5 space-y-2">
<Label>{t("description")}</Label>

View File

@ -31,34 +31,25 @@ interface Advertisement {
// };
// }
const LeftBanner = () => {
const AdvertisementPlacements = (props: { placement?: string }) => {
const [ads, setAds] = useState<Advertisement[]>([]);
const [loading, setLoading] = useState<boolean>(false);
const [showData, setShowData] = React.useState("10");
const [categories, setCategories] = React.useState<any>();
const [dataTable, setDataTable] = React.useState<any[]>([]);
const [totalData, setTotalData] = React.useState<number>(1);
const [categoryFilter, setCategoryFilter] = React.useState<number[]>([]);
const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
const [page, setPage] = React.useState(1);
const fetchData = async () => {
try {
setLoading(true);
const res = await listDataAdvertisements( page - 1,
showData,
"",
categoryFilter?.sort().join(","),
statusFilter?.sort().join(","));
const res = await listDataAdvertisements(
0,
"4",
""
);
const data = res?.data?.data;
const contentData = data?.content;
contentData.forEach((item: Advertisement, index: number) => {
item.no = index + 1;
});
setAds(contentData);
if (props.placement == "left") {
setAds(contentData.slice(0,2));
} else {
setAds(contentData.slice(2));
}
} catch (error) {
console.error("Error fetching advertisements:", error);
} finally {
@ -71,13 +62,13 @@ const LeftBanner = () => {
}, []);
return (
<div className="sticky top-0 space-y-4 ml-14">
<div className={`sticky top-0 space-y-4 ${props.placement == "left" ? "ml-14" : "mr-14"}`}>
{loading && <p className="text-sm text-gray-500">Loading...</p>}
{ads.map((ad) => (
<img key={ad.id} src={ad.imageUrl} alt={`Banner ${ad.id}`} width={180} />
{ads?.map((ad) => (
<img key={ad.id} src={ad.contentFileUrl} alt={`Banner ${ad.id}`} className="w-full" />
))}
</div>
);
};
export default LeftBanner;
export default AdvertisementPlacements;

View File

@ -1,86 +1,285 @@
import React from "react";
import { getCalendarPagination } from "@/service/schedule/schedule";
import React, { useEffect, useState } from "react";
interface CalendarItem {
id: number;
title: string;
description: string;
assignedTo: string;
assignedToLevel: string;
startDate: string;
endDate: string;
isActive: boolean;
createdById: number;
createdByName: string;
thumbnailUrl: string;
createdAt: string;
updatedAt: string;
}
const EventCalender = () => {
// Get current date
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();
const currentDate = today.getDate();
const [events, setEvents] = useState<CalendarItem[]>([]);
const [selectedEvent, setSelectedEvent] = useState<CalendarItem | null>(null);
// Month names in Indonesian
const monthNames = [
"Januari", "Februari", "Maret", "April", "Mei", "Juni",
"Juli", "Agustus", "September", "Oktober", "November", "Desember"
];
const fetchData = async () => {
try {
const res = await getCalendarPagination(100, 0);
const data = res?.data?.data;
const contentData = data?.content;
setEvents(contentData || []);
// Set first event as selected by default
if (contentData && contentData.length > 0) {
setSelectedEvent(contentData[0]);
}
} catch (error) {
console.error("Error fetching calendar events:", error);
}
};
useEffect(() => {
fetchData();
}, []);
// Get first day of the month and number of days
const firstDayOfMonth = new Date(currentYear, currentMonth, 1);
const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
const daysInMonth = lastDayOfMonth.getDate();
const startingDayOfWeek = firstDayOfMonth.getDay();
// Convert Sunday (0) to 7 for Monday-first week
const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;
// Generate calendar days
const generateCalendarDays = () => {
const days = [];
// Empty cells for days before the first day of month
for (let i = 0; i < adjustedStartingDay; i++) {
days.push(null);
}
// Days of the month
for (let day = 1; day <= daysInMonth; day++) {
days.push(day);
}
// Fill remaining cells to complete the grid (6 rows × 7 days = 42 cells)
while (days.length < 42) {
days.push(null);
}
return days;
};
const calendarDays = generateCalendarDays();
// Helper function to extract day from date string
const getDateFromString = (dateString: string) => {
try {
const date = new Date(dateString);
if (date.getMonth() === currentMonth && date.getFullYear() === currentYear) {
return date.getDate();
}
return null;
} catch {
return null;
}
};
// Helper function to format date range
const formatDateRange = (startDate: string, endDate: string) => {
try {
const start = new Date(startDate);
const end = new Date(endDate);
const startDay = start.getDate();
const endDay = end.getDate();
const startMonth = monthNames[start.getMonth()];
const endMonth = monthNames[end.getMonth()];
if (startDay === endDay && startMonth === endMonth) {
return `${startDay} ${startMonth}`;
} else {
return `${startDay} ${startMonth} - ${endDay} ${endMonth}`;
}
} catch {
return "Tanggal tidak valid";
}
};
// Helper function to format time range
const formatTimeRange = (startDate: string, endDate: string) => {
try {
const start = new Date(startDate);
const end = new Date(endDate);
const startTime = start.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
timeZone: 'Asia/Jakarta'
});
const endTime = end.toLocaleTimeString('id-ID', {
hour: '2-digit',
minute: '2-digit',
timeZone: 'Asia/Jakarta'
});
return `${startTime} - ${endTime} WIB`;
} catch {
return "Waktu tidak tersedia";
}
};
// Get event dates for highlighting calendar
const eventDates = events
.map(event => getDateFromString(event.startDate))
.filter(date => date !== null);
return (
<div className="mt-8 rounded-lg bg-white dark:bg-zinc-900 p-4 shadow">
<h2 className="text-lg font-bold text-red-600 border-b border-red-600 mb-4 pb-2">
KALENDER ACARA
</h2>
<div className="flex flex-col md:flex-row gap-4">
<div className="w-full md:w-1/2">
<div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md ">
<div className="text-center font-semibold mb-2">Mei 2025</div>
<div className="flex flex-col lg:flex-row gap-6">
{/* Left Side - Calendar and Event List */}
<div className="w-full lg:w-1/2">
{/* Mini Calendar */}
<div className="bg-gray-100 dark:bg-zinc-800 p-4 rounded-md mb-4">
<div className="text-center font-semibold mb-2">
{monthNames[currentMonth]} {currentYear}
</div>
<div className="grid grid-cols-7 gap-1 text-sm text-center">
{["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => (
<div key={d} className="font-medium">
<div key={d} className="font-medium p-1">
{d}
</div>
))}
{[...Array(35)].map((_, i) => (
{calendarDays?.map((day, index) => (
<div
key={i}
className={`p-1 rounded ${
[6, 7, 15].includes(i) ? "bg-red-600 text-white" : ""
key={index}
className={`p-1 rounded min-h-[24px] flex items-center justify-center text-xs ${
day === null
? ""
: eventDates.includes(day)
? "bg-red-600 text-white font-semibold"
: day === currentDate
? "bg-blue-500 text-white font-semibold"
: "hover:bg-gray-200 dark:hover:bg-zinc-700"
}`}
>
{i >= 2 && i - 1}
{day}
</div>
))}
</div>
</div>
<div className="space-y-4 mt-3">
<div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
{/* Event List */}
<div className="space-y-3 max-h-[230px] overflow-y-auto pr-5">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">
Daftar Acara
</h3>
{events?.length === 0 ? (
<div className="text-center text-gray-500 dark:text-gray-400 py-8">
Tidak ada acara yang tersedia
</div>
) : (
events.map((event) => (
<div
key={event.id}
onClick={() => setSelectedEvent(event)}
className={`flex items-center rounded-xl shadow-sm p-3 cursor-pointer transition-all duration-200 hover:shadow-md ${
selectedEvent?.id === event.id
? "bg-red-100 dark:bg-red-900/20 border-2 border-red-500"
: "bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700"
}`}
>
<img
src="/images/all-img/calendar1.png"
alt="HUT Polwan"
className="w-24 h-20 object-cover rounded"
src={event.thumbnailUrl || "/images/default-event.png"}
alt={event.title}
className="w-16 h-12 object-cover rounded flex-shrink-0"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = "/images/default-event.png";
}}
/>
<div className="flex justify-between items-center w-full ml-3">
<div className="text-sm font-semibold line-clamp-2">
HUT Polwan ke-76, Kapolri...
<div className="ml-3 flex-1 min-w-0">
<div className="text-sm font-semibold text-gray-800 dark:text-gray-200 line-clamp-2">
{event.title}
</div>
<div className="text-sm font-semibold whitespace-nowrap ml-3">
16 Mei - 16 Mei
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
{formatDateRange(event.startDate, event.endDate)}
</div>
</div>
<div className="ml-2 flex-shrink-0">
<div className={`w-2 h-2 rounded-full ${event.isActive ? 'bg-green-500' : 'bg-red-500'}`}></div>
</div>
</div>
))
)}
</div>
</div>
<div className="flex items-center bg-gray-200 rounded-xl shadow-sm p-2">
{/* Right Side - Event Detail */}
<div className="w-full lg:w-1/2">
<div className="bg-gray-100 dark:bg-zinc-800 rounded-lg p-4 sticky top-4">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
Detail Acara
</h3>
{selectedEvent ? (
<div className="space-y-4">
<img
src="/images/all-img/calendar2.png"
alt="Olahraga"
className="w-24 h-20 object-cover rounded"
src={selectedEvent.thumbnailUrl || "/images/default-event.png"}
alt={selectedEvent.title}
className="w-full h-48 object-cover rounded-lg"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = "/images/default-event.png";
}}
/>
<div className="flex justify-between items-center w-full ml-3">
<div className="text-sm font-semibold line-clamp-2 uppercase">
Olahraga Bersama Pad...
</div>
<div className="text-sm font-semibold whitespace-nowrap ml-3">
22 Mei - 22 Mei
</div>
</div>
<div>
<h4 className="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">
{selectedEvent.title}
</h4>
<div className="grid grid-cols-1 gap-3 mb-4">
<div className="flex items-start text-sm text-gray-600 dark:text-gray-400">
<span className="w-20 font-semibold flex-shrink-0">Tanggal:</span>
<span>{formatDateRange(selectedEvent.startDate, selectedEvent.endDate)}</span>
</div>
<div className="mb-4">
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">
{selectedEvent.description || "Tidak ada deskripsi tersedia."}
</p>
</div>
</div>
{/* Detail Acara */}
<div className="w-full md:w-1/2 space-y-4">
<div className="bg-gray-100 dark:bg-zinc-800 rounded-md p-2 mt-4">
<img
src="/images/all-img/calendar1.png"
alt="Detail Event"
className="rounded mb-2"
/>
<p className="text-sm font-semibold mb-1">
HUT Polwan ke-76, Kapolri Apresiasi Prestasi yang Diberikan
</p>
<p className="text-xs text-gray-500 mb-1">
Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi
kepada polisi wanita yang berprestasi...
</p>
<a href="#" className="text-xs text-blue-500">
Lihat Selengkapnya
</a>
<div className="flex gap-2">
<button className="px-4 py-2 bg-gray-300 dark:bg-zinc-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-400 dark:hover:bg-zinc-600 transition-colors">
Bagikan
</button>
</div>
</div>
</div>
) : (
<div className="text-center text-gray-500 dark:text-gray-400 py-8">
Pilih acara untuk melihat detail
</div>
)}
</div>
</div>
</div>

View File

@ -12,20 +12,7 @@ import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
import ScrollableContentPolda from "./scrollable-content-polda";
const LeftBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" />
<img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" />
</div>
);
const RightBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" />
<img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
</div>
);
import AdvertisementPlacements from "./advertisement-placements";
const SearchSectionPolda = () => {
const [contentType, setContentType] = useState("all");
@ -35,7 +22,7 @@ const SearchSectionPolda = () => {
return (
<div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
<LeftBanner />
<AdvertisementPlacements placement="left"/>
</div>
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@ -49,7 +36,7 @@ const SearchSectionPolda = () => {
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
<RightBanner />
<AdvertisementPlacements placement="right"/>
</div>
</div>
);

View File

@ -13,20 +13,7 @@ import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
import ScrollableContentPolda from "./scrollable-content-polda";
import ScrollableContentSatker from "./scrollable-content-satker";
const LeftBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" />
<img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" />
</div>
);
const RightBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" />
<img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
</div>
);
import AdvertisementPlacements from "./advertisement-placements";
const SearchSectionSatker = () => {
const [contentType, setContentType] = useState("all");
@ -36,7 +23,7 @@ const SearchSectionSatker = () => {
return (
<div className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat" style={{ backgroundImage: "url('/assets/background.png')" }}>
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
<LeftBanner />
<AdvertisementPlacements placement="left"/>
</div>
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@ -50,7 +37,7 @@ const SearchSectionSatker = () => {
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
<RightBanner />
<AdvertisementPlacements placement="right"/>
</div>
</div>
);

View File

@ -18,20 +18,7 @@ import ContentCategory from "./content-category";
import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
const LeftBanner = () => (
<div className="sticky top-0 space-y-4 ml-14">
<img src="/images/all-img/kiri1.png" alt="Banner Kiri 1" width={180} />
<img src="/images/all-img/kiri2.png" alt="Banner Kiri 2" width={180} />
</div>
);
const RightBanner = () => (
<div className="sticky top-0 space-y-4">
<img src="/images/all-img/kanan2.png" alt="Banner Kanan 1" width={180} />
<img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" width={180} />
</div>
);
import AdvertisementPlacements from "./advertisement-placements";
const SearchSection = () => {
const [contentType, setContentType] = useState("all");
@ -44,7 +31,7 @@ const SearchSection = () => {
style={{ backgroundImage: "url('/assets/background.png')" }}
>
<div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[130px] space-y-4 self-start">
<LeftBanner />
<AdvertisementPlacements placement="left"/>
</div>
<div className="w-full xl:w-[70%] px-4 py-8 bg-white">
@ -58,7 +45,7 @@ const SearchSection = () => {
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
<RightBanner />
<AdvertisementPlacements placement="right" />
</div>
</div>
);

View File

@ -690,7 +690,7 @@
"type-task": "Tipe Penugasan",
"category-task": "Kategori Penugasan",
"areas-expertise": "Bidang Keahlian",
"choose-expert": "Pilih Tenaga Ahli",
"choose-expert": "Tenaga Ahli",
"code": "Kode",
"start-date": "Tanggal Mulai",
"end-date": "Tanggal Selesai",

View File

@ -20,11 +20,9 @@ export async function listDataAdvertisements(
page: number,
limit: string,
search: string,
categoryFilter: string,
statusFilter: string
) {
const name = search || "";
const url = `advertisements/pagination?title=${name}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&categoryId=${categoryFilter}&statusId=${statusFilter}`;
const url = `advertisements/pagination?title=${search}&enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}`;
return httpGetInterceptor(url);
}

View File

@ -20,17 +20,16 @@ export async function paginationSchedule(
);
}
export async function paginationCalendar(
export async function getCalendarPagination(
size: any,
page: number,
type: any,
title: string = "",
statusFilter: number[] = []
) {
const statusQuery =
statusFilter.length > 0 ? `&statusId=${statusFilter.join(",")}` : "";
return await httpGetInterceptor(
`calendars/pagination?enablePage=1&scheduleTypeId=${type}&page=${page}&size=${size}&title=${title}${statusQuery}`
`calendars/pagination?enablePage=1&page=${page}&size=${size}&title=${title}${statusQuery}`
);
}

View File

@ -132,5 +132,8 @@ export async function getTagsByParentId(parentId: string | number) {
export async function postAdvertisements(data: any) {
const url = "advertisements";
return httpPostInterceptor(url, data);
const headers = {
"Content-Type": "multipart/form-data",
};
return httpPostInterceptor(url, data, headers);
}

View File

@ -146,7 +146,7 @@ export async function listTaskTa(
}
return httpGetInterceptor(
`assignment-expert/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&taskType=${taskType}&uniqueCode=${code}&createdAt=${createdAt}${statusQuery}`
`assignment-expert/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&assignmentType=${taskType}&uniqueCode=${code}&createdAt=${createdAt}${statusQuery}`
);
}