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

[QUDO-140,QUDO-139] feat:fix image iklan, add carousel prev,next banner

This commit is contained in:
Anang Yusman 2025-06-05 01:06:44 +08:00
parent 150bdc339e
commit f574d97523
15 changed files with 1562 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/[locale]/(protected)/admin/settings/iklan/component/table.tsx
View File

@ -36,6 +36,7 @@ import {
Trash2,
TrendingDown,
TrendingUp,
UploadIcon,
UserIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
@ -208,7 +209,15 @@ const AdvertisementsList = () => {
return (
<>
<div>
<TambahIklanModal />
<div className="flex-none">
<Link href={"/admin/settings/iklan/create"}>
<Button color="primary" className="text-white" size="md">
<UploadIcon size={18} className="mr-2" />
Tambah Iklan
</Button>
</Link>
</div>
{/* <TambahIklanModal /> */}
</div>
<div className="flex justify-between ">
<Input

19
app/[locale]/(protected)/admin/settings/iklan/create/page.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Card, CardContent } from "@/components/ui/card";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import FormTask from "@/components/form/task/task-form";
import FormPressConference from "@/components/form/schedule/press-conference-form";
import { CalendarPolriAdd } from "@/components/form/schedule/form-calendar-polri";
import { TambahIklanModal } from "@/components/form/setting/form-add-iklan";
const AdvertisementsCreatePage = () => {
return (
<div>
<SiteBreadcrumb />
<div className="space-y-4">
<TambahIklanModal />
</div>
</div>
);
};
export default AdvertisementsCreatePage;

36
app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx
View File

@ -110,7 +110,7 @@ interface ListItemProps {
interface APIResponse {
error: boolean;
message: any;
data: AgendaSettingsAPIResponse[] | null; // `data` bisa berupa array atau null
data: AgendaSettingsAPIResponse[] | null;
}
const CalendarView = ({ categories }: CalendarViewProps) => {
@ -218,15 +218,21 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
setSelectedCategory(categories?.map((c) => c.value));
}, [categories]);
const filteredEvents = calendarEvents?.filter((event) =>
selectedCategory?.includes(event.extendedProps.calendar)
);
const filteredEvents = calendarEvents?.filter((event) => {
const eventCategories = event.extendedProps.calendar
?.split(",")
.map((val: string) => val.trim()); // agar "1, 2" tetap dianggap benar
return eventCategories?.some((cat: string) =>
selectedCategory?.includes(cat)
);
});
const displayedEvents =
filteredEvents?.length > 1 ? filteredEvents : apiEvents;
useEffect(() => {
setSelectedCategory(categories?.map((c) => c.value));
setSelectedCategory(categories?.map((c: any) => c.value));
}, [categories]);
useEffect(() => {
@ -369,15 +375,15 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
};
const handleClassName = (arg: EventContentArg) => {
if (arg.event.extendedProps.calendar === "mabes") {
if (arg.event.extendedProps.calendar === "1") {
return "bg-yellow-500 border-none";
} else if (arg.event.extendedProps.calendar === "polda") {
} else if (arg.event.extendedProps.calendar === "2") {
return "bg-blue-400 border-none";
} else if (arg.event.extendedProps.calendar === "polres") {
} else if (arg.event.extendedProps.calendar === "3") {
return "bg-slate-400 border-none";
} else if (arg.event.extendedProps.calendar === "satker") {
} else if (arg.event.extendedProps.calendar === "4") {
return "bg-orange-500 border-none";
} else if (arg.event.extendedProps.calendar === "international") {
} else if (arg.event.extendedProps.calendar === "5") {
return "bg-green-400 border-none";
} else {
return "primary";
@ -415,11 +421,11 @@ const CalendarView = ({ categories }: CalendarViewProps) => {
const getEventColor = (type: Event["type"]): string => {
const colors: Record<Event["type"], string> = {
mabes: "bg-yellow-500",
polda: "bg-blue-400",
polres: "bg-slate-400",
satker: "bg-orange-500",
international: "bg-green-400",
1: "bg-yellow-500",
2: "bg-blue-400",
3: "bg-slate-400",
4: "bg-orange-500",
5: "bg-green-400",
};
return colors[type];
};

32
app/[locale]/(protected)/contributor/agenda-setting/data.ts
View File

@ -22,7 +22,7 @@ export const calendarEvents = [
allDay: false,
//className: "warning",
extendedProps: {
calendar: "polda",
calendar: "2",
},
},
{
@ -33,7 +33,7 @@ export const calendarEvents = [
allDay: true,
//className: "success",
extendedProps: {
calendar: "national",
calendar: "1",
},
},
{
@ -44,7 +44,7 @@ export const calendarEvents = [
end: new Date(date.getFullYear(), date.getMonth() + 1, -7),
// className: "info",
extendedProps: {
calendar: "polres",
calendar: "3",
},
},
{
@ -55,7 +55,7 @@ export const calendarEvents = [
allDay: true,
//className: "primary",
extendedProps: {
calendar: "polres",
calendar: "3",
},
},
{
@ -66,7 +66,7 @@ export const calendarEvents = [
allDay: true,
// className: "danger",
extendedProps: {
calendar: "polda",
calendar: "2",
},
},
{
@ -77,7 +77,7 @@ export const calendarEvents = [
allDay: true,
//className: "primary",
extendedProps: {
calendar: "international",
calendar: "5",
},
},
];
@ -85,31 +85,31 @@ export const calendarEvents = [
export const calendarCategories = [
{
label: "Nasional",
value: "mabes",
value: "1",
activeClass: "ring-primary-500 bg-primary-500",
className: "group-hover:border-blue-500",
},
{
label: "Polda",
value: "polda",
value: "2",
activeClass: "ring-success-500 bg-success-500",
className: " group-hover:border-green-500",
},
{
label: "Polres",
value: "polres",
value: "3",
activeClass: "ring-danger-500 bg-danger-500",
className: " group-hover:border-red-500",
},
{
label: "Satker",
value: "satker",
value: "4",
activeClass: "ring-yellow-500 bg-yellow-500",
className: " group-hover:border-red-500",
},
{
label: "Internasional",
value: "international",
value: "5",
activeClass: "ring-info-500 bg-info-500",
className: " group-hover:border-cyan-500",
},
@ -118,31 +118,31 @@ export const calendarCategories = [
export const categories = [
{
label: "Nasional",
value: "mabes",
value: "1",
className:
"data-[state=checked]:bg-yellow-500 data-[state=checked]:ring-yellow-500",
},
{
label: "Polda",
value: "polda",
value: "2",
className:
"data-[state=checked]:bg-blue-400 data-[state=checked]:ring-blue-400",
},
{
label: "Polres",
value: "polres",
value: "3",
className:
"data-[state=checked]:bg-slate-400 data-[state=checked]:ring-slate-400 ",
},
{
label: "Satker",
value: "satker",
value: "4",
className:
"data-[state=checked]:bg-warning data-[state=checked]:ring-warning ",
},
{
label: "Internasional",
value: "international",
value: "5",
className:
"data-[state=checked]:bg-green-500 data-[state=checked]:ring-green-500 ",
},

37
app/[locale]/(protected)/contributor/agenda-setting/page.tsx
View File

@ -1,4 +1,4 @@
"use client"
"use client";
import { getEvents, getCategories } from "./utils";
import { calendarEvents, Category } from "./data";
@ -8,7 +8,6 @@ import { useEffect, useState } from "react";
import { CalendarCategory } from "./data";
const CalenderPage = () => {
const [categories, setCategories] = useState<CalendarCategory[]>([]);
const userLevelNumber = Number(getCookiesDecrypt("ulne")) || 0;
const userLevelId = Number(getCookiesDecrypt("ulie")) || 0;
@ -20,32 +19,32 @@ const CalenderPage = () => {
async function initData() {
const events = await getEvents();
const categories = await getCategories();
let valueShowed : string[] = [];
let valueShowed: string[] = [];
if (userLevelNumber == 1) {
valueShowed = ['mabes', 'polda', 'polres', 'satker', 'international'];
valueShowed = ["1", "2", "3", "4", "5"];
} else if (userLevelNumber == 2 && userLevelId != 761) {
valueShowed = ['polda', 'polres'];
} else if ((userLevelNumber == 2 && userLevelId == 761) || (userLevelNumber == 3 && userParentLevelId == 761)) {
valueShowed = ['satker'];
valueShowed = ["2", "3"];
} else if (
(userLevelNumber == 2 && userLevelId == 761) ||
(userLevelNumber == 3 && userParentLevelId == 761)
) {
valueShowed = ["4"];
} else if (userLevelNumber == 3 && userParentLevelId != 761) {
valueShowed = ['polres'];
valueShowed = ["3"];
}
const formattedCategories = categories.filter((category: Category) => valueShowed.includes(category.value))
.map((category: Category) => ({
...category,
activeClass: "",
}));
const formattedCategories = categories
.filter((category: Category) => valueShowed.includes(category.value))
.map((category: Category) => ({
...category,
activeClass: "",
}));
console.log(formattedCategories);
setCategories(formattedCategories);
}
}, []);
return (
<div>
{categories && <CalendarView categories={categories} />}
</div>
);
return <div>{categories && <CalendarView categories={categories} />}</div>;
};
export default CalenderPage;

2
components/form/content/image-form.tsx
View File

@ -633,7 +633,7 @@ export default function FormImage() {
setIsStartUpload(false);
// hideProgress();
Cookies.remove("idCreate");
successSubmit("in/contributor/content/image/");
successSubmit("/in/contributor/content/image");
}
}

35
components/form/schedule/form-calendar-polri-detail.tsx
View File

@ -103,6 +103,41 @@ export function CalendarPolriAddDetail() {
to: parseISO(details.endDate),
});
}
if (details?.assignedTo) {
const assignedToArray = details.assignedTo.split(",");
const newUnitSelection = { ...unitSelection };
assignedToArray.forEach((val: any) => {
switch (val) {
case "0":
newUnitSelection.semua = true;
break;
case "1":
newUnitSelection.mabes = true;
break;
case "2":
newUnitSelection.polda = true;
break;
case "3":
newUnitSelection.satker = true;
break;
case "4":
newUnitSelection.internasional = true;
break;
default:
break;
}
});
setUnitSelection(newUnitSelection);
}
// 2. Set checkbox wilayah
if (details?.assignedToLevel) {
const levelIds = details.assignedToLevel
.split(",")
.map((id: string) => parseInt(id));
setCheckedLevels(new Set(levelIds));
}
}
}
initState();

683
components/form/schedule/form-calendar-polri-update.tsx
View File

@ -13,7 +13,13 @@ import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { CalendarIcon, ChevronDown, ChevronUp, Plus } from "lucide-react";
import {
CalendarIcon,
ChevronDown,
ChevronUp,
CloudUpload,
Plus,
} from "lucide-react";
import { useTranslations } from "next-intl";
import DatePicker from "react-datepicker";
import { id } from "date-fns/locale";
@ -22,8 +28,8 @@ 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 } from "@/lib/swal";
import { postCalendar } from "@/service/schedule/schedule";
import { error, loading } from "@/lib/swal";
import { detailCalendar, postCalendar } from "@/service/schedule/schedule";
import { DateRange } from "react-day-picker";
import Cookies from "js-cookie";
import withReactContent from "sweetalert2-react-content";
@ -35,18 +41,41 @@ import {
PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { format } from "date-fns";
import { format, parseISO } from "date-fns";
import { cn } from "@/lib/utils";
import { getUserLevelForAssignments } from "@/service/task";
import { Card } from "@/components/ui/card";
import { useDropzone } from "react-dropzone";
import { Icon } from "@/components/ui/icon";
import Image from "next/image";
import FileUploader from "../shared/file-uploader";
import { getCsrfToken } from "@/service/auth";
import { Upload } from "tus-js-client";
import { useParams } from "next/navigation";
const calendarSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
description: z.string().min(1, { message: "Judul diperlukan" }),
});
interface FileWithPreview extends File {
preview: string;
}
interface FileUploaded {
id: number;
url: string;
}
interface Detail {
id: number;
title: string;
description: string;
}
export function CalendarPolriAddUpdate() {
const MySwal = withReactContent(Swal);
const { id } = useParams() as { id: string };
const [open, setOpen] = React.useState(false);
const t = useTranslations("Schedule");
type CalendarSchema = z.infer<typeof calendarSchema>;
@ -55,9 +84,17 @@ export function CalendarPolriAddUpdate() {
const [checkedLevels, setCheckedLevels] = React.useState(new Set());
const [expandedPolda, setExpandedPolda] = React.useState([{}]);
const [isLoading, setIsLoading] = React.useState(false);
const [isImageUploadFinish, setIsImageUploadFinish] = React.useState(false);
const [files, setFiles] = React.useState<FileWithPreview[]>([]);
const [imageUploadedFiles, setImageUploadedFiles] = React.useState<
FileUploaded[]
>([]);
const [detail, setDetail] = React.useState<Detail>();
const [imageFiles, setImageFiles] = React.useState<FileWithPreview[]>([]);
const [date, setDate] = React.useState<DateRange | undefined>({
from: new Date(2025, 0, 1),
});
const [refresh, setRefresh] = React.useState(false);
const [unitSelection, setUnitSelection] = React.useState({
semua: false,
@ -79,6 +116,62 @@ export function CalendarPolriAddUpdate() {
},
});
React.useEffect(() => {
async function initState() {
if (id) {
const response = await detailCalendar(id);
const details = response?.data?.data;
setDetail(details);
if (details) {
setDate({
from: parseISO(details.startDate),
to: parseISO(details.endDate),
});
// 1. Set unit selection
if (details?.assignedTo) {
const assignedToArray = details.assignedTo.split(",");
const newUnitSelection = { ...unitSelection };
assignedToArray.forEach((val: any) => {
switch (val) {
case "0":
newUnitSelection.semua = true;
break;
case "1":
newUnitSelection.mabes = true;
break;
case "2":
newUnitSelection.polda = true;
break;
case "3":
newUnitSelection.satker = true;
break;
case "4":
newUnitSelection.internasional = true;
break;
default:
break;
}
});
setUnitSelection(newUnitSelection);
}
// 2. Set checkbox wilayah
if (details?.assignedToLevel) {
const levelIds = details.assignedToLevel
.split(",")
.map((id: string) => parseInt(id));
setCheckedLevels(new Set(levelIds));
}
}
}
}
initState();
}, [refresh, setValue]);
React.useEffect(() => {
async function fetchPoldaPolres() {
setIsLoading(true);
@ -169,6 +262,7 @@ export function CalendarPolriAddUpdate() {
.map((key) => unitMapping[key as keyof typeof unitMapping])
.join(",");
const requestData = {
id: detail?.id,
title: data.title,
startDate: date?.from ? format(date.from, "yyyy-MM-dd") : null,
endDate: date?.to ? format(date.to, "yyyy-MM-dd") : null,
@ -189,6 +283,89 @@ export function CalendarPolriAddUpdate() {
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(
idx: number,
id: string,
file: any,
fileTypeId: string,
duration: string
) {
console.log(idx, id, file, fileTypeId, duration);
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log("CSRF TOKEN : ", csrfToken);
const headers = {
"X-XSRF-TOKEN": csrfToken,
};
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,
metadata: {
calendarId: id,
filename: file.name,
contentType: file.type,
fileTypeId: fileTypeId,
duration,
},
onBeforeRequest: function (req) {
var xhr = req.getUnderlyingObject();
xhr.withCredentials = true;
},
onError: async (e: any) => {
console.log("Error upload :", e);
error(e);
},
onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any
) => {
// const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// progressInfo[idx].percentage = uploadPersen;
// counterUpdateProgress++;
// console.log(counterUpdateProgress);
// setProgressList(progressInfo);
// setCounterProgress(counterUpdateProgress);
},
onSuccess: async () => {
// uploadPersen = 100;
// progressInfo[idx].percentage = 100;
// counterUpdateProgress++;
// setCounterProgress(counterUpdateProgress);
successTodo();
if (fileTypeId == "1") {
setIsImageUploadFinish(true);
}
},
});
upload.start();
}
React.useEffect(() => {
successTodo();
}, [isImageUploadFinish]);
function successTodo() {
if (isImageUploadFinish) {
successSubmit("/in/contributor/agenda-setting");
}
}
const successSubmit = (redirect: string) => {
MySwal.fire({
title: "Sukses",
text: "Data berhasil disimpan.",
@ -196,7 +373,7 @@ export function CalendarPolriAddUpdate() {
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.reload();
router.push(redirect);
});
};
@ -216,237 +393,291 @@ export function CalendarPolriAddUpdate() {
});
};
const renderFilePreview = (url: string) => {
return (
<Image
width={48}
height={48}
alt={"file preview"}
src={url}
className=" rounded border p-0.5"
/>
);
};
const handleRemoveFile = (id: number) => {};
return (
<div>
<Card className="px-3 py-3">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-4">
<div>
<p className="font-medium mb-1">Tanggal Acara</p>
<div className="flex flex-col space-y-2">
<Popover>
<PopoverTrigger asChild className="px-0">
<Button
size="md"
id="date"
variant={"outline"}
className={cn(
"w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
!date && "text-muted-foreground"
)}
>
<CalendarIcon size={15} className="mr-3" />
{date?.from ? (
date.to ? (
<>
{format(date.from, "LLL dd, y")} -{" "}
{format(date.to, "LLL dd, y")}
</>
) : (
format(date.from, "LLL dd, y")
)
) : (
<span>Pick a date</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
initialFocus
mode="range"
defaultMonth={date?.from}
selected={date}
onSelect={setDate}
numberOfMonths={1}
/>
</PopoverContent>
</Popover>
</div>
</div>
<div>
<p className="font-medium">Publish Area</p>
<div className="flex flex-row">
<div className="flex flex-wrap gap-3 lg:ml-3 ">
{Object.keys(unitSelection).map((key) => (
<div className="flex items-center gap-2" key={key}>
<Checkbox
id={key}
checked={
unitSelection[key as keyof typeof unitSelection]
}
onCheckedChange={(value) =>
handleUnitChange(
key as keyof typeof unitSelection,
value as boolean
)
}
{detail !== undefined ? (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-4">
<div>
<p className="font-medium mb-1">Tanggal Acara</p>
<div className="flex flex-col space-y-2">
<Popover>
<PopoverTrigger asChild className="px-0">
<Button
size="md"
id="date"
variant={"outline"}
className={cn(
"w-[280px] lg:w-[250px] justify-start text-left font-normal border border-slate-300 px-0 md:px-0 lg:px-4",
!date && "text-muted-foreground"
)}
>
<CalendarIcon size={15} className="mr-3" />
{date?.from ? (
date.to ? (
<>
{format(date.from, "LLL dd, y")} -{" "}
{format(date.to, "LLL dd, y")}
</>
) : (
format(date.from, "LLL dd, y")
)
) : (
<span>Pick a date</span>
)}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
initialFocus
mode="range"
defaultMonth={date?.from}
selected={date}
onSelect={setDate}
numberOfMonths={1}
/>
</PopoverContent>
</Popover>
</div>
</div>
<div>
<p className="font-medium">Publish Area</p>
<div className="flex flex-row">
<div className="flex flex-wrap gap-3 lg:ml-3 ">
{Object.keys(unitSelection).map((key) => (
<div className="flex items-center gap-2" key={key}>
<Checkbox
id={key}
checked={
unitSelection[key as keyof typeof unitSelection]
}
onCheckedChange={(value) =>
handleUnitChange(
key as keyof typeof unitSelection,
value as boolean
)
}
/>
<Label htmlFor={key}>
{key.charAt(0).toUpperCase() + key.slice(1)}
</Label>
</div>
))}
</div>
<div className=" lg:pl-3">
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[{t("custom")}]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>
Daftar Wilayah Polda dan Polres
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listDest.map((polda: any) => (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(polda.id)}
onCheckedChange={() =>
handleCheckboxChange(polda.id)
}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
<Label className="block">
<Checkbox
checked={polda?.subDestination?.every(
(polres: any) =>
checkedLevels.has(polres.id)
)}
onCheckedChange={(isChecked) => {
const updatedLevels = new Set(
checkedLevels
);
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(polres.id);
} else {
updatedLevels.delete(polres.id);
}
}
);
setCheckedLevels(updatedLevels);
}}
className="mr-2"
/>
Pilih Semua Polres
</Label>
{polda?.subDestination?.map(
(polres: any) => (
<Label
key={polres.id}
className="block mt-1"
>
<Checkbox
checked={checkedLevels.has(
polres.id
)}
onCheckedChange={() =>
handleCheckboxChange(polres.id)
}
className="mr-2"
/>
{polres.name}
</Label>
)
)}
</div>
)}
</div>
))}
</div>
</DialogContent>
</Dialog>
</div>
</div>
</div>
<div>
<p className="font-medium">Nama Acara</p>
<Controller
control={control}
name="title"
render={({ field }) => (
<Input
size={"md"}
type="text"
defaultValue={detail?.title}
onChange={field.onChange}
placeholder="Masukan Judul"
/>
<Label htmlFor={key}>
{key.charAt(0).toUpperCase() + key.slice(1)}
</Label>
)}
/>
{errors.title?.message && (
<p className="text-red-400 text-sm">
{errors.title.message}
</p>
)}
</div>
<div>
<Label>Foto</Label>
<FileUploader
accept={{
"image/*": [],
}}
maxSize={100}
label="Upload file dengan format .png, .jpg, atau .jpeg."
onDrop={(files) => setImageFiles(files)}
/>
{imageUploadedFiles?.map((file: any, index: number) => (
<div>
<Card className="mt-2">
<img
src={file.url}
alt="Thumbnail Gambar Utama"
className="w-full h-auto rounded-md"
/>
</Card>
<div
key={index}
className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
<div className="flex gap-3 items-center">
<div className="file-preview">
{renderFilePreview(file.url)}
</div>
<div>
<div className=" text-sm text-card-foreground">
{file.fileName}
</div>
</div>
</div>
<Button
size="icon"
color="destructive"
variant="outline"
className=" border-none rounded-full"
onClick={() => handleRemoveFile(file)}
>
<Icon icon="tabler:x" className=" h-5 w-5" />
</Button>
</div>
</div>
))}
</div>
<div className=" lg:pl-3">
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[{t("custom")}]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>
Daftar Wilayah Polda dan Polres
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listDest.map((polda: any) => (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(polda.id)}
onCheckedChange={() =>
handleCheckboxChange(polda.id)
}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
<Label className="block">
<Checkbox
checked={polda?.subDestination?.every(
(polres: any) =>
checkedLevels.has(polres.id)
)}
onCheckedChange={(isChecked) => {
const updatedLevels = new Set(
checkedLevels
);
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(polres.id);
} else {
updatedLevels.delete(polres.id);
}
}
);
setCheckedLevels(updatedLevels);
}}
className="mr-2"
/>
Pilih Semua Polres
</Label>
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={checkedLevels.has(polres.id)}
onCheckedChange={() =>
handleCheckboxChange(polres.id)
}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
))}
</div>
</DialogContent>
</Dialog>
<div>
<p className="font-medium">Deskripsi</p>
<Controller
control={control}
name="description"
render={({ field }) => (
<Textarea
rows={3}
defaultValue={detail?.description}
onChange={field.onChange}
placeholder="Masukan lokasi"
/>
)}
/>
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description?.message}
</p>
)}
</div>
<div className="text-right">
<Button
type="submit"
className="bg-blue-600 text-white hover:bg-blue-700"
>
Submit
</Button>
</div>
</div>
</div>
<div>
<p className="font-medium">Nama Acara</p>
<Controller
control={control}
name="title"
render={({ field }) => (
<Input
size={"md"}
type="text"
value={field.value}
onChange={field.onChange}
placeholder="Masukan Judul"
/>
)}
/>
{errors.title?.message && (
<p className="text-red-400 text-sm">{errors.title.message}</p>
)}
</div>
<div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
<svg
className="w-6 h-6 mb-2 text-blue-500"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
/>
</svg>
<div>
Drag your file(s) or{" "}
<span className="text-blue-500 underline cursor-pointer">
browse
</span>
</div>
<div className="text-xs mt-1">Max 10 MB files are allowed</div>
</div>
<div>
<p className="font-medium">Deskripsi</p>
<Controller
control={control}
name="description"
render={({ field }) => (
<Textarea
rows={3}
value={field.value}
onChange={field.onChange}
placeholder="Masukan lokasi"
/>
)}
/>
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description?.message}
</p>
)}
</div>
<div className="text-right">
<Button
type="submit"
className="bg-blue-600 text-white hover:bg-blue-700"
>
Submit
</Button>
</div>
</form>
</div>
</form>
) : (
""
)}
</Card>
</div>
);

199
components/form/schedule/form-calendar-polri.tsx
View File

@ -13,7 +13,13 @@ import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { CalendarIcon, ChevronDown, ChevronUp, Plus } from "lucide-react";
import {
CalendarIcon,
ChevronDown,
ChevronUp,
CloudUpload,
Plus,
} from "lucide-react";
import { useTranslations } from "next-intl";
import DatePicker from "react-datepicker";
import { id } from "date-fns/locale";
@ -22,7 +28,7 @@ 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 } from "@/lib/swal";
import { error, loading } from "@/lib/swal";
import { postCalendar } from "@/service/schedule/schedule";
import { DateRange } from "react-day-picker";
import Cookies from "js-cookie";
@ -39,12 +45,27 @@ import { format } from "date-fns";
import { cn } from "@/lib/utils";
import { getUserLevelForAssignments } from "@/service/task";
import { Card } from "@/components/ui/card";
import { useDropzone } from "react-dropzone";
import { Icon } from "@/components/ui/icon";
import Image from "next/image";
import FileUploader from "../shared/file-uploader";
import { getCsrfToken } from "@/service/auth";
import { Upload } from "tus-js-client";
const calendarSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
description: z.string().min(1, { message: "Judul diperlukan" }),
});
interface FileWithPreview extends File {
preview: string;
}
interface FileUploaded {
id: number;
url: string;
}
export function CalendarPolriAdd() {
const MySwal = withReactContent(Swal);
const [open, setOpen] = React.useState(false);
@ -55,6 +76,12 @@ export function CalendarPolriAdd() {
const [checkedLevels, setCheckedLevels] = React.useState(new Set());
const [expandedPolda, setExpandedPolda] = React.useState([{}]);
const [isLoading, setIsLoading] = React.useState(false);
const [isImageUploadFinish, setIsImageUploadFinish] = React.useState(false);
const [files, setFiles] = React.useState<FileWithPreview[]>([]);
const [imageUploadedFiles, setImageUploadedFiles] = React.useState<
FileUploaded[]
>([]);
const [imageFiles, setImageFiles] = React.useState<FileWithPreview[]>([]);
const [date, setDate] = React.useState<DateRange | undefined>({
from: new Date(2025, 0, 1),
});
@ -189,6 +216,89 @@ export function CalendarPolriAdd() {
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(
idx: number,
id: string,
file: any,
fileTypeId: string,
duration: string
) {
console.log(idx, id, file, fileTypeId, duration);
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log("CSRF TOKEN : ", csrfToken);
const headers = {
"X-XSRF-TOKEN": csrfToken,
};
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/agenda-settings/file/upload`,
headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,
metadata: {
calendarId: id,
filename: file.name,
contentType: file.type,
fileTypeId: fileTypeId,
duration,
},
onBeforeRequest: function (req) {
var xhr = req.getUnderlyingObject();
xhr.withCredentials = true;
},
onError: async (e: any) => {
console.log("Error upload :", e);
error(e);
},
onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any
) => {
// const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// progressInfo[idx].percentage = uploadPersen;
// counterUpdateProgress++;
// console.log(counterUpdateProgress);
// setProgressList(progressInfo);
// setCounterProgress(counterUpdateProgress);
},
onSuccess: async () => {
// uploadPersen = 100;
// progressInfo[idx].percentage = 100;
// counterUpdateProgress++;
// setCounterProgress(counterUpdateProgress);
successTodo();
if (fileTypeId == "1") {
setIsImageUploadFinish(true);
}
},
});
upload.start();
}
React.useEffect(() => {
successTodo();
}, [isImageUploadFinish]);
function successTodo() {
if (isImageUploadFinish) {
successSubmit("/in/contributor/schedule/calendar-polri");
}
}
const successSubmit = (redirect: string) => {
MySwal.fire({
title: "Sukses",
text: "Data berhasil disimpan.",
@ -196,7 +306,7 @@ export function CalendarPolriAdd() {
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.reload();
router.push(redirect);
});
};
@ -216,6 +326,20 @@ export function CalendarPolriAdd() {
});
};
const renderFilePreview = (url: string) => {
return (
<Image
width={48}
height={48}
alt={"file preview"}
src={url}
className=" rounded border p-0.5"
/>
);
};
const handleRemoveFile = (id: number) => {};
return (
<div>
<Card className="px-3 py-3">
@ -393,27 +517,52 @@ export function CalendarPolriAdd() {
)}
</div>
<div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
<svg
className="w-6 h-6 mb-2 text-blue-500"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
/>
</svg>
<div>
Drag your file(s) or{" "}
<span className="text-blue-500 underline cursor-pointer">
browse
</span>
</div>
<div className="text-xs mt-1">Max 10 MB files are allowed</div>
<div>
<Label>Foto</Label>
<FileUploader
accept={{
"image/*": [],
}}
maxSize={100}
label="Upload file dengan format .png, .jpg, atau .jpeg."
onDrop={(files) => setImageFiles(files)}
/>
{imageUploadedFiles?.map((file: any, index: number) => (
<div>
<Card className="mt-2">
<img
src={file.url}
alt="Thumbnail Gambar Utama"
className="w-full h-auto rounded-md"
/>
</Card>
<div
key={index}
className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
<div className="flex gap-3 items-center">
<div className="file-preview">
{renderFilePreview(file.url)}
</div>
<div>
<div className=" text-sm text-card-foreground">
{file.fileName}
</div>
</div>
</div>
<Button
size="icon"
color="destructive"
variant="outline"
className=" border-none rounded-full"
onClick={() => handleRemoveFile(file)}
>
<Icon icon="tabler:x" className=" h-5 w-5" />
</Button>
</div>
</div>
))}
</div>
<div>
@ -426,7 +575,7 @@ export function CalendarPolriAdd() {
rows={3}
value={field.value}
onChange={field.onChange}
placeholder="Masukan lokasi"
placeholder="Masukan Description"
/>
)}
/>

108
components/form/setting/form-add-iklan-detail.tsx Normal file
View File

@ -0,0 +1,108 @@
// components/TambahIklanModal.tsx
"use client";
import * as React from "react";
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Plus } from "lucide-react";
export function TambahIklanModalDetail() {
const [open, setOpen] = React.useState(false);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button onClick={() => setOpen(true)} color="primary" size="md">
<Plus className="mr-2 h-4 w-4" />
Tambah Iklan
</Button>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Tambah Iklan</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div>
<p className="font-medium">Target Area</p>
<div className="flex flex-wrap gap-4 mt-2">
{["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
(label) => (
<label key={label} className="flex items-center gap-2">
<Checkbox id={label} />
<span>{label}</span>
</label>
)
)}
</div>
</div>
<div>
<p className="font-medium">Publish Area</p>
<div className="flex flex-wrap gap-4 mt-2">
{["Semua", "Nasional", "Polda", "Satker", "International"].map(
(label) => (
<label key={label} className="flex items-center gap-2">
<Checkbox id={label} />
<span>{label}</span>
</label>
)
)}
</div>
</div>
<div>
<p className="font-medium">Nama Iklan</p>
<Input placeholder="Masukkan nama iklan" />
</div>
<div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
<svg
className="w-6 h-6 mb-2 text-blue-500"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
/>
</svg>
<div>
Drag your file(s) or{" "}
<span className="text-blue-500 underline cursor-pointer">
browse
</span>
</div>
<div className="text-xs mt-1">Max 10 MB files are allowed</div>
</div>
<div>
<p className="font-medium">Deskripsi</p>
<Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
</div>
<div className="text-right">
<Button
type="submit"
className="bg-blue-600 text-white hover:bg-blue-700"
>
Tambah Iklan
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}

108
components/form/setting/form-add-iklan-update.tsx Normal file
View File

@ -0,0 +1,108 @@
// components/TambahIklanModal.tsx
"use client";
import * as React from "react";
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Plus } from "lucide-react";
export function TambahIklanModalUpdate() {
const [open, setOpen] = React.useState(false);
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button onClick={() => setOpen(true)} color="primary" size="md">
<Plus className="mr-2 h-4 w-4" />
Tambah Iklan
</Button>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Tambah Iklan</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div>
<p className="font-medium">Target Area</p>
<div className="flex flex-wrap gap-4 mt-2">
{["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
(label) => (
<label key={label} className="flex items-center gap-2">
<Checkbox id={label} />
<span>{label}</span>
</label>
)
)}
</div>
</div>
<div>
<p className="font-medium">Publish Area</p>
<div className="flex flex-wrap gap-4 mt-2">
{["Semua", "Nasional", "Polda", "Satker", "International"].map(
(label) => (
<label key={label} className="flex items-center gap-2">
<Checkbox id={label} />
<span>{label}</span>
</label>
)
)}
</div>
</div>
<div>
<p className="font-medium">Nama Iklan</p>
<Input placeholder="Masukkan nama iklan" />
</div>
<div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
<svg
className="w-6 h-6 mb-2 text-blue-500"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
/>
</svg>
<div>
Drag your file(s) or{" "}
<span className="text-blue-500 underline cursor-pointer">
browse
</span>
</div>
<div className="text-xs mt-1">Max 10 MB files are allowed</div>
</div>
<div>
<p className="font-medium">Deskripsi</p>
<Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
</div>
<div className="text-right">
<Button
type="submit"
className="bg-blue-600 text-white hover:bg-blue-700"
>
Tambah Iklan
</Button>
</div>
</div>
</DialogContent>
</Dialog>
);
}

624
components/form/setting/form-add-iklan.tsx
View File

@ -13,96 +13,558 @@ import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Plus } from "lucide-react";
import { ChevronDown, ChevronUp, Plus } from "lucide-react";
import { Card } from "@/components/ui/card";
import Image from "next/image";
import { Upload } from "tus-js-client";
import { getCsrfToken } from "@/service/auth";
import { error, loading } from "@/lib/swal";
import { format } from "date-fns";
import { getUserLevelForAssignments } from "@/service/task";
import { zodResolver } from "@hookform/resolvers/zod";
import { Controller, useForm } from "react-hook-form";
import withReactContent from "sweetalert2-react-content";
import { useTranslations } from "next-intl";
import Swal from "sweetalert2";
import { z } from "zod";
import { DateRange } from "react-day-picker";
import { postCalendar } from "@/service/schedule/schedule";
import { id } from "date-fns/locale";
import router from "next/router";
import { postAdvertisements } from "@/service/settings/settings";
import Cookies from "js-cookie";
import { Label } from "@/components/ui/label";
import FileUploader from "../shared/file-uploader";
import { Icon } from "@/components/ui/icon";
const calendarSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }),
description: z.string().min(1, { message: "Judul diperlukan" }),
});
interface FileWithPreview extends File {
preview: string;
}
interface FileUploaded {
id: number;
url: string;
}
export function TambahIklanModal() {
const [open, setOpen] = React.useState(false);
const MySwal = withReactContent(Swal);
const t = useTranslations("Schedule");
type CalendarSchema = z.infer<typeof calendarSchema>;
const [eventDate, setEventDate] = React.useState<Date | null>(new Date());
const [listDest, setListDest] = React.useState([]);
const [checkedLevels, setCheckedLevels] = React.useState(new Set());
const [expandedPolda, setExpandedPolda] = React.useState([{}]);
const [isLoading, setIsLoading] = React.useState(false);
const [isImageUploadFinish, setIsImageUploadFinish] = React.useState(false);
const [files, setFiles] = React.useState<FileWithPreview[]>([]);
const [selectedPlacement, setSelectedPlacement] = React.useState<string>("");
const [imageUploadedFiles, setImageUploadedFiles] = React.useState<
FileUploaded[]
>([]);
const [imageFiles, setImageFiles] = React.useState<FileWithPreview[]>([]);
const [date, setDate] = React.useState<DateRange | undefined>({
from: new Date(2025, 0, 1),
});
const [unitSelection, setUnitSelection] = React.useState({
semua: false,
mabes: false,
polda: false,
satker: false,
internasional: false,
});
const {
control,
handleSubmit,
setValue,
formState: { errors },
} = useForm<CalendarSchema>({
resolver: zodResolver(calendarSchema),
defaultValues: {
description: "",
},
});
const handlePlacementSelect = (value: string) => {
setSelectedPlacement(value);
};
React.useEffect(() => {
async function fetchPoldaPolres() {
setIsLoading(true);
try {
const response = await getUserLevelForAssignments();
setListDest(response?.data?.data.list);
console.log("polda", response?.data?.data?.list);
const initialExpandedState = response?.data?.data.list.reduce(
(acc: any, polda: any) => {
acc[polda.id] = false;
return acc;
},
{}
);
setExpandedPolda(initialExpandedState);
console.log("polres", initialExpandedState);
} catch (error) {
console.error("Error fetching Polda/Polres data:", error);
} finally {
setIsLoading(false);
}
}
fetchPoldaPolres();
}, []);
const handleCheckboxChange = (levelId: number) => {
setCheckedLevels((prev) => {
const updatedLevels = new Set(prev);
if (updatedLevels.has(levelId)) {
updatedLevels.delete(levelId);
} else {
updatedLevels.add(levelId);
}
return updatedLevels;
});
};
const handlePoldaPolresChange = () => {
return Array.from(checkedLevels).join(","); // Mengonversi Set ke string
};
const handleUnitChange = (
key: keyof typeof unitSelection,
value: boolean
) => {
if (key === "semua") {
const newState = {
semua: value,
mabes: value,
polda: value,
satker: value,
internasional: value,
};
setUnitSelection(newState);
} else {
const updatedSelection = {
...unitSelection,
[key]: value,
};
const allChecked = ["mabes", "polda", "satker", "internasional"].every(
(k) => updatedSelection[k as keyof typeof unitSelection]
);
updatedSelection.semua = allChecked;
setUnitSelection(updatedSelection);
}
};
const toggleExpand = (poldaId: any) => {
setExpandedPolda((prev: any) => ({
...prev,
[poldaId]: !prev[poldaId],
}));
};
const save = async (data: CalendarSchema) => {
const unitMapping = {
allUnit: "0",
mabes: "1",
polda: "2",
satker: "4",
internasional: "5",
};
const assignmentToString = Object.keys(unitSelection)
.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);
if (response?.error) {
error(response?.message);
return false;
}
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(
idx: number,
id: string,
file: any,
fileTypeId: string,
duration: string
) {
console.log(idx, id, file, fileTypeId, duration);
const resCsrf = await getCsrfToken();
const csrfToken = resCsrf?.data?.token;
console.log("CSRF TOKEN : ", csrfToken);
const headers = {
"X-XSRF-TOKEN": csrfToken,
};
const upload = new Upload(file, {
endpoint: `${process.env.NEXT_PUBLIC_API}/advertisment/file/upload`,
headers: headers,
retryDelays: [0, 3000, 6000, 12_000, 24_000],
chunkSize: 20_000,
metadata: {
advertisementsId: id,
filename: file.name,
contentType: file.type,
fileTypeId: fileTypeId,
duration,
},
onBeforeRequest: function (req) {
var xhr = req.getUnderlyingObject();
xhr.withCredentials = true;
},
onError: async (e: any) => {
console.log("Error upload :", e);
error(e);
},
onChunkComplete: (
chunkSize: any,
bytesAccepted: any,
bytesTotal: any
) => {
// const uploadPersen = Math.floor((bytesAccepted / bytesTotal) * 100);
// progressInfo[idx].percentage = uploadPersen;
// counterUpdateProgress++;
// console.log(counterUpdateProgress);
// setProgressList(progressInfo);
// setCounterProgress(counterUpdateProgress);
},
onSuccess: async () => {
// uploadPersen = 100;
// progressInfo[idx].percentage = 100;
// counterUpdateProgress++;
// setCounterProgress(counterUpdateProgress);
successTodo();
if (fileTypeId == "1") {
setIsImageUploadFinish(true);
}
},
});
upload.start();
}
React.useEffect(() => {
successTodo();
}, [isImageUploadFinish]);
function successTodo() {
if (isImageUploadFinish) {
successSubmit("/in/admin/settings/iklan");
}
}
const successSubmit = (redirect: string) => {
MySwal.fire({
title: "Sukses",
text: "Data berhasil disimpan.",
icon: "success",
confirmButtonColor: "#3085d6",
confirmButtonText: "OK",
}).then(() => {
router.push(redirect);
});
};
const onSubmit = (data: CalendarSchema) => {
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 renderFilePreview = (url: string) => {
return (
<Image
width={48}
height={48}
alt={"file preview"}
src={url}
className=" rounded border p-0.5"
/>
);
};
const handleRemoveFile = (id: number) => {};
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button onClick={() => setOpen(true)} color="primary" size="md">
<Plus className="mr-2 h-4 w-4" />
Tambah Iklan
</Button>
</DialogTrigger>
<DialogContent size="md">
<DialogHeader>
<DialogTitle>Tambah Iklan</DialogTitle>
</DialogHeader>
<div className="space-y-4">
<div>
<p className="font-medium">Target Area</p>
<div className="flex flex-wrap gap-4 mt-2">
{["Kiri - 1", "Kiri - 2", "Kanan - 1", "Kanan - 2"].map(
(label) => (
<label key={label} className="flex items-center gap-2">
<Checkbox id={label} />
<span>{label}</span>
</label>
)
)}
</div>
</div>
<div>
<p className="font-medium">Publish Area</p>
<div className="flex flex-wrap gap-4 mt-2">
{["Semua", "Nasional", "Polda", "Satker", "International"].map(
(label) => (
<label key={label} className="flex items-center gap-2">
<Checkbox id={label} />
<span>{label}</span>
</label>
)
)}
</div>
</div>
<div>
<p className="font-medium">Nama Iklan</p>
<Input placeholder="Masukkan nama iklan" />
</div>
<div className="border-2 border-dashed rounded-md p-4 flex flex-col items-center justify-center text-center text-sm text-muted-foreground">
<svg
className="w-6 h-6 mb-2 text-blue-500"
fill="none"
stroke="currentColor"
strokeWidth="2"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12v9m0-9l3 3m-3-3l-3 3m6-11a4 4 0 00-8 0v1H4a2 2 0 00-2 2v4h20v-4a2 2 0 00-2-2h-4v-1z"
/>
</svg>
<div>
<Card className="px-3 py-3">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-4">
<div>
Drag your file(s) or{" "}
<span className="text-blue-500 underline cursor-pointer">
browse
</span>
<p className="font-medium">Target Area</p>
<div className="flex flex-wrap gap-4 mt-2">
{[
{ label: "Kiri - 1", value: "left-top" },
{ label: "Kiri - 2", value: "left-bottom" },
{ label: "Kanan - 1", value: "right-top" },
{ label: "Kanan - 2", value: "right-bottom" },
].map(({ label, value }) => (
<label key={value} className="flex items-center gap-2">
<Checkbox
id={value}
checked={selectedPlacement === value}
onCheckedChange={() => handlePlacementSelect(value)}
/>
<span>{label}</span>
</label>
))}
</div>
</div>
<div className="text-xs mt-1">Max 10 MB files are allowed</div>
</div>
<div>
<p className="font-medium">Deskripsi</p>
<Textarea placeholder="Masukkan deskripsi iklan" rows={4} />
</div>
<div>
<p className="font-medium">Publish Area</p>
<div className="flex flex-row">
<div className="flex flex-wrap gap-3 lg:ml-3 ">
{Object.keys(unitSelection).map((key) => (
<div className="flex items-center gap-2" key={key}>
<Checkbox
id={key}
checked={
unitSelection[key as keyof typeof unitSelection]
}
onCheckedChange={(value) =>
handleUnitChange(
key as keyof typeof unitSelection,
value as boolean
)
}
/>
<Label htmlFor={key}>
{key.charAt(0).toUpperCase() + key.slice(1)}
</Label>
</div>
))}
</div>
<div className=" lg:pl-3">
<Dialog>
<DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary">
[{t("custom")}]
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
<DialogHeader>
<DialogTitle>
Daftar Wilayah Polda dan Polres
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-2 gap-2 max-h-[400px] overflow-y-auto">
{listDest.map((polda: any) => (
<div key={polda.id} className="border p-2">
<Label className="flex items-center">
<Checkbox
checked={checkedLevels.has(polda.id)}
onCheckedChange={() =>
handleCheckboxChange(polda.id)
}
className="mr-3"
/>
{polda.name}
<button
onClick={() => toggleExpand(polda.id)}
className="ml-2 focus:outline-none"
>
{expandedPolda[polda.id] ? (
<ChevronUp size={16} />
) : (
<ChevronDown size={16} />
)}
</button>
</Label>
{expandedPolda[polda.id] && (
<div className="ml-6 mt-2">
<Label className="block">
<Checkbox
checked={polda?.subDestination?.every(
(polres: any) =>
checkedLevels.has(polres.id)
)}
onCheckedChange={(isChecked) => {
const updatedLevels = new Set(
checkedLevels
);
polda?.subDestination?.forEach(
(polres: any) => {
if (isChecked) {
updatedLevels.add(polres.id);
} else {
updatedLevels.delete(polres.id);
}
}
);
setCheckedLevels(updatedLevels);
}}
className="mr-2"
/>
Pilih Semua Polres
</Label>
{polda?.subDestination?.map((polres: any) => (
<Label key={polres.id} className="block mt-1">
<Checkbox
checked={checkedLevels.has(polres.id)}
onCheckedChange={() =>
handleCheckboxChange(polres.id)
}
className="mr-2"
/>
{polres.name}
</Label>
))}
</div>
)}
</div>
))}
</div>
</DialogContent>
</Dialog>
</div>
</div>
</div>
<div className="text-right">
<Button
type="submit"
className="bg-blue-600 text-white hover:bg-blue-700"
>
Tambah Iklan
</Button>
<div>
<p className="font-medium">Nama Iklan</p>
<Controller
control={control}
name="title"
render={({ field }) => (
<Input
size={"md"}
type="text"
value={field.value}
onChange={field.onChange}
placeholder="Masukan Nama Iklan"
/>
)}
/>
{errors.title?.message && (
<p className="text-red-400 text-sm">{errors.title.message}</p>
)}
</div>
<div>
<Label>Foto</Label>
<FileUploader
accept={{
"image/*": [],
}}
maxSize={100}
label="Upload file dengan format .png, .jpg, atau .jpeg."
onDrop={(files) => setImageFiles(files)}
/>
{imageUploadedFiles?.map((file: any, index: number) => (
<div>
<Card className="mt-2">
<img
src={file.url}
alt="Thumbnail Gambar Utama"
className="w-full h-auto rounded-md"
/>
</Card>
<div
key={index}
className=" flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
<div className="flex gap-3 items-center">
<div className="file-preview">
{renderFilePreview(file.url)}
</div>
<div>
<div className=" text-sm text-card-foreground">
{file.fileName}
</div>
</div>
</div>
<Button
size="icon"
color="destructive"
variant="outline"
className=" border-none rounded-full"
onClick={() => handleRemoveFile(file)}
>
<Icon icon="tabler:x" className=" h-5 w-5" />
</Button>
</div>
</div>
))}
</div>
<div>
<p className="font-medium">Deskripsi</p>
<Controller
control={control}
name="description"
render={({ field }) => (
<Textarea
rows={3}
value={field.value}
onChange={field.onChange}
placeholder="Masukan Description"
/>
)}
/>
{errors.description?.message && (
<p className="text-red-400 text-sm">
{errors.description?.message}
</p>
)}
</div>
<div className="text-right">
<Button
type="submit"
className="bg-blue-600 text-white hover:bg-blue-700"
>
Tambah Iklan
</Button>
</div>
</div>
</div>
</DialogContent>
</Dialog>
</form>
</Card>
</div>
);
}

62
components/landing-page/hero-new.tsx
View File

@ -357,47 +357,41 @@ const HeroNew = (props: { group?: string }) => {
</div>
) : (
<div className="relative w-full h-full">
<Carousel className="lg:w-full lg:h-full">
<Carousel className="relative w-full">
<CarouselContent>
{content?.map((list: any) => (
<CarouselItem key={list?.id}>
<div className="relative h-[310px] lg:h-[700px] mt-1">
<div className="relative h-[310px] lg:h-[700px]">
{/* Gambar */}
<Image
src={list?.thumbnailLink}
alt="gambar-utama"
width={1920}
height={1080}
placeholder={`data:image/svg+xml;base64,${toBase64(
shimmer(700, 475)
)}`}
className="w-full h-[320px] lg:h-[700px] object-cover"
alt="gambar"
fill
className="object-cover w-full h-full"
/>
<div className="absolute inset-0 bg-black bg-opacity-40" />
<Link
href={
Number(list?.fileTypeId) == 1
? `${locale}/image/detail/${list?.slug}`
: Number(list?.fileTypeId) == 2
? `${locale}/video/detail/${list?.slug}`
: Number(list?.fileTypeId) == 3
? `${locale}/document/detail/${list?.slug}`
: `${locale}/audio/detail/${list?.slug}`
}
>
<div className="absolute bottom-20 left-32 w-[60%] lg:w-[45%] text-white px-4 pt-10 pb-4">
<span className="absolute top-0 left-3 text-red-600 text-lg font-bold uppercase px-1 py-2 rounded">
{list?.categoryName || "Liputan Kegiatan"}
</span>
<h2 className="text-xl font-bold leading-tight">
{list?.title}
</h2>
<p className="text-base flex items-center gap-1 mt-2 opacity-80">
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
</p>
</div>
</Link>
{/* Overlay hitam transparan */}
<div className="absolute inset-0 bg-black/40 z-10" />
{/* Konten judul, dll */}
<div className="absolute bottom-20 left-8 lg:left-32 z-20 text-white w-[85%] lg:w-[45%]">
<span className="text-red-600 text-lg font-bold uppercase">
{list?.categoryName}
</span>
<h2 className="text-xl font-bold">{list?.title}</h2>
<p className="text-sm mt-2">
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
{list?.timezone || "WIB"} | 👁 {list?.clickCount}
</p>
</div>
{/* Tombol navigasi di atas gambar */}
<CarouselPrevious className="absolute left-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
<ChevronLeft className="w-5 h-5" />
</CarouselPrevious>
<CarouselNext className="absolute right-6 top-[45%] z-30 -translate-y-1/2 hover:bg-black/70 text-white p-2 rounded-full">
<ChevronRight className="w-5 h-5" />
</CarouselNext>
</div>
</CarouselItem>
))}

28
components/landing-page/search-section.tsx
View File

@ -1,5 +1,12 @@
import search from "@/app/[locale]/(protected)/app/chat/components/search";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "@radix-ui/react-select";
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectGroup,
SelectItem,
} from "@radix-ui/react-select";
import { Icon } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
@ -14,16 +21,16 @@ 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 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" />
<img src="/images/all-img/kanan1.png" alt="Banner Kanan 2" />
<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>
);
@ -33,8 +40,11 @@ const SearchSection = () => {
const router = useRouter();
const t = useTranslations("LandingPage");
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">
<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-[130px] space-y-4 self-start">
<LeftBanner />
</div>
@ -48,7 +58,7 @@ const SearchSection = () => {
<UserSurveyBox />
</div>
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
<div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[130px] space-y-4 self-start">
<RightBanner />
</div>
</div>

5
service/settings/settings.ts
View File

@ -129,3 +129,8 @@ export async function getTagsByParentId(parentId: string | number) {
const url = `media/tags/list?categoryId=${parentId}`;
return httpGetInterceptor(url);
}
export async function postAdvertisements(data: any) {
const url = "advertisements";
return httpPostInterceptor(url, data);
}