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

fix: responsive page

This commit is contained in:
sabdayagra 2025-01-31 19:51:04 +07:00
parent c858a460c0
commit 2f8225ded6
23 changed files with 544 additions and 460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

310
app/[locale]/(public)/audio/detail/[slug]/page.tsx
View File

@ -48,8 +48,6 @@ const DetailAudio = () => {
const [downloadProgress, setDownloadProgress] = useState(0); const [downloadProgress, setDownloadProgress] = useState(0);
const [isFromSPIT, setIsFromSPIT] = useState(false); const [isFromSPIT, setIsFromSPIT] = useState(false);
const [main, setMain] = useState<any>(); const [main, setMain] = useState<any>();
const [resolutionSelected, setResolutionSelected] = useState("720");
const [imageSizeSelected, setImageSizeSelected] = useState("l");
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const [emailShareList, setEmailShareList] = useState<any>(); const [emailShareList, setEmailShareList] = useState<any>();
const [emailShareInput, setEmailShareInput] = useState<any>(); const [emailShareInput, setEmailShareInput] = useState<any>();
@ -67,7 +65,7 @@ const DetailAudio = () => {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>(); const [listSuggestion, setListSuggestion] = useState<any>();
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const [visibleInput, setVisibleInput] = useState<string | null>(null);
let typeString = "audio"; let typeString = "audio";
useEffect(() => { useEffect(() => {
@ -317,63 +315,111 @@ const DetailAudio = () => {
return false; return false;
}; };
// useEffect(() => {
// function initState() {
// if (typeString == "audio" && main?.url != undefined) {
// const init = async () => {
// const { default: WaveSurfer } = await import("wavesurfer.js");
// setPlaying(false);
// const formatTime = function (time: any) {
// return [
// Math.floor((time % 3600) / 60),
// // minutes
// `00${Math.floor(time % 60)}`.slice(-2), // seconds
// ].join(":");
// };
// console.log("AUDIO", main?.url);
// const options = formWaveSurferOptions(waveformRef.current);
// wavesurfer.current = WaveSurfer.create(options);
// wavesurfer.current.load(main?.url);
// wavesurfer.current.on("ready", () => {
// // https://wavesurfer-js.org/docs/methods.html
// // wavesurfer.current.playPause();
// // setPlaying(true);
// setAudioLoaded(true);
// // make sure object stillavailable when file loaded
// if (wavesurfer.current) {
// wavesurfer.current.setVolume(volume);
// let volumeNow = volume;
// setVolume(volumeNow);
// }
// $(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
// });
// // Show current time
// wavesurfer.current.on("audioprocess", () => {
// $(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
// });
// wavesurfer.current.on("finish", () => {
// setPlaying(false);
// });
// };
// init();
// // Removes events, elements and disconnects Web Audio nodes.
// // when component unmount
// return () => wavesurfer?.current?.destroy();
// }
// }
// initState();
// }, [main?.url]);
useEffect(() => { useEffect(() => {
function initState() { if (typeString === "audio" && main?.url) {
if (typeString == "audio" && main?.url != undefined) { const init = async () => {
const init = async () => { const { default: WaveSurfer } = await import("wavesurfer.js");
const { default: WaveSurfer } = await import("wavesurfer.js");
setPlaying(false); if (wavesurfer.current) {
wavesurfer.current.destroy(); // 🔥 Hapus instance lama sebelum membuat yang baru
}
const formatTime = function (time: any) { setPlaying(false);
return [
Math.floor((time % 3600) / 60),
// minutes
`00${Math.floor(time % 60)}`.slice(-2), // seconds
].join(":");
};
console.log("AUDIO", main?.url);
const options = formWaveSurferOptions(waveformRef.current); const formatTime = function (time: any) {
return [
wavesurfer.current = WaveSurfer.create(options); Math.floor((time % 3600) / 60),
// minutes
wavesurfer.current.load(main?.url); `00${Math.floor(time % 60)}`.slice(-2), // seconds
].join(":");
wavesurfer.current.on("ready", () => {
// https://wavesurfer-js.org/docs/methods.html
// wavesurfer.current.playPause();
// setPlaying(true);
setAudioLoaded(true);
// make sure object stillavailable when file loaded
if (wavesurfer.current) {
wavesurfer.current.setVolume(volume);
let volumeNow = volume;
setVolume(volumeNow);
}
$(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
});
// Show current time
wavesurfer.current.on("audioprocess", () => {
$(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
});
wavesurfer.current.on("finish", () => {
setPlaying(false);
});
}; };
init(); const options = formWaveSurferOptions(waveformRef.current);
// Removes events, elements and disconnects Web Audio nodes. wavesurfer.current = WaveSurfer.create(options);
// when component unmount wavesurfer.current.load(main?.url);
return () => wavesurfer?.current?.destroy(); wavesurfer.current.on("ready", () => {
} setAudioLoaded(true);
wavesurfer.current.setVolume(volume);
$(".waveform__duration").text(formatTime(wavesurfer.current.getDuration()));
});
wavesurfer.current.on("audioprocess", () => {
$(".waveform__counter").text(formatTime(wavesurfer.current.getCurrentTime()));
});
wavesurfer.current.on("finish", () => {
setPlaying(false);
});
};
init();
return () => {
if (wavesurfer.current) {
wavesurfer.current.destroy(); // 🔥 Hapus saat unmount
}
};
} }
initState();
}, [main?.url]); }, [main?.url]);
const onVolumeChange = (e: any) => { const onVolumeChange = (e: any) => {
@ -438,8 +484,10 @@ const DetailAudio = () => {
}; };
const showInput = (e: any) => { const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList); console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden"); document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
}; };
function addDefaultProfile(ev: any) { function addDefaultProfile(ev: any) {
ev.target.src = "/assets/avatar-profile.png"; ev.target.src = "/assets/avatar-profile.png";
} }
@ -513,7 +561,6 @@ const DetailAudio = () => {
<img src={`/assets/${playing ? "stop-icon.png" : "play-icon.png"}`} /> <img src={`/assets/${playing ? "stop-icon.png" : "play-icon.png"}`} />
</button> </button>
<div <div
className="flex items-center "
style={ style={
audioLoaded audioLoaded
? { ? {
@ -522,9 +569,9 @@ const DetailAudio = () => {
: {} : {}
} }
> >
<BarWave color="#ffc831" width="60px" height="25px" duration="2s " /> <BarWave color="#ffc831" width="60px" height="25px" duration="2s" className="flex ml-5 mt-[50px] lg:ml-[200px]" />
</div> </div>
<div id="waveform" ref={waveformRef} className="w-[700px] ml-12" /> <div id="waveform" ref={waveformRef} className="w-[350px] lg:w-[700px] ml-6 lg:ml-12"></div>
</div> </div>
<div <div
className="flex flex-row mt-2" className="flex flex-row mt-2"
@ -538,32 +585,29 @@ const DetailAudio = () => {
> >
<Icon icon="fa:volume-up" /> <Icon icon="fa:volume-up" />
{/* <Slider onChange={onVolumeChange} defaultValue={volume} /> */} {/* <Slider onChange={onVolumeChange} defaultValue={volume} /> */}
<input <input type="range" id="volume" name="volume" min="0.01" max="1" step=".025" onChange={onVolumeChange} defaultValue={volume} />
type="range"
id="volume"
name="volume"
min="0.01"
max="1"
step=".025"
onChange={onVolumeChange}
defaultValue={volume}
/>
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<p className="flex flex-row items-center"> <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB&nbsp;|&nbsp; <p className="text-xs lg:text-sm">
<Icon icon="formkit:eye" width="15" height="15" /> oleh&nbsp;<span className="font-semibold text-black">{detailDataAudio?.uploadedBy?.userLevel?.name}</span>
&nbsp; </p>
{detailDataAudio?.clickCount} <p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataAudio?.updatedAt} WIB &nbsp;|&nbsp;</p>
</p> <p className="text-xs lg:text-sm flex justify-center items-center">
<p>Kreator: {detailDataAudio?.creatorName}</p> <Icon icon="formkit:eye" width="15" height="15" />
&nbsp; {detailDataAudio?.clickCount} &nbsp;
</p>
</div>
<div className="mt-3">
<p className="flex text-end text-xs lg:text-sm font-semibold">Kreator: {detailDataAudio?.creatorName}</p>
</div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-full"> <div className="w-full">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{detailDataAudio?.title}</h1> <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataAudio?.title}</h1>
<div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} /> <div className="font-light text-justify mb-5 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataAudio?.htmlDescription }} />
</div> </div>
</div> </div>
@ -671,10 +715,10 @@ const DetailAudio = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full py-8" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"> <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
Kirim Kirim
</button> </button>
@ -682,17 +726,17 @@ const DetailAudio = () => {
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div> <div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
<div className="overflow-y-auto"> <div>
{listSuggestion?.map((data: any) => ( {listSuggestion?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))} {getPublicLocaleTimestamp(new Date(data.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{data?.message}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<div> <div>
<a <a
style={ style={
@ -705,11 +749,11 @@ const DetailAudio = () => {
onClick={() => showInput(`comment-id-${data.id}`)} onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2" className="mr-2"
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? ( {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}> <a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
) : ( ) : (
"" ""
@ -717,29 +761,32 @@ const DetailAudio = () => {
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${data.id}`} className="px-4 lg:px-28 mt-2"> {visibleInput === `comment-id-${data.id}` && (
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<div className="flex flex-row gap-3"> <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a onClick={() => postDataChild(data.id)}> <div className="flex flex-row gap-3">
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 mt-2 cursor-pointer">Kirim</small> <a onClick={() => postDataChild(data.id)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
<a onClick={() => showInput(`comment-id-${data.id}`)}> </a>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <a onClick={() => showInput(`comment-id-${data.id}`)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{data.children.length > 0 {data.children.length > 0
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-16 w-16 mr-2" /> <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "} <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))} {getPublicLocaleTimestamp(new Date(child1.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child1?.message))}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div> <div>
<a <a
style={ style={
@ -751,7 +798,7 @@ const DetailAudio = () => {
} }
onClick={() => showInput(`comment-id-${child1.id}`)} onClick={() => showInput(`comment-id-${child1.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -763,29 +810,33 @@ const DetailAudio = () => {
} }
onClick={() => deleteData(child1.id)} onClick={() => deleteData(child1.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-40">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" /> {visibleInput === `comment-id-${child1.id}` && (
<div className="flex flex-row mt-2 gap-3"> <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<a onClick={() => postDataChild(child1.id)}> <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <div className="flex flex-row mt-2 gap-3">
</a> <a onClick={() => postDataChild(child1.id)}>
<a onClick={() => showInput(`comment-id-${child1.id}`)}> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> </a>
</a> <a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{child1.children.length > 0 {child1.children.length > 0
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className=""> <div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "} <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))} {getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -802,7 +853,7 @@ const DetailAudio = () => {
} }
onClick={() => showInput(`comment-id-${child2.id}`)} onClick={() => showInput(`comment-id-${child2.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -814,23 +865,24 @@ const DetailAudio = () => {
} }
onClick={() => deleteData(child2.id)} onClick={() => deleteData(child2.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52"> <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" /> <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}> <a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a> </a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}> <a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a> </a>
</div>
</div> </div>
</div> )}
</div> </div>
)) ))
: ""} : ""}

6
app/[locale]/(public)/content-management/download/page.tsx
View File

@ -275,9 +275,9 @@ const Galery = (props: any) => {
return ( return (
<> <>
<HeaderManagement /> <HeaderManagement />
<div className="flex flex-row"> <div className="flex flex-col lg:flex-row">
<SidebarManagement /> <SidebarManagement />
<div className="w-2/3 p-12"> <div className="w-full lg:w-2/3 p-8 lg:p-12">
<div> <div>
<h1 className="text-2xl font-semibold mb-3">Galeri Saya</h1> <h1 className="text-2xl font-semibold mb-3">Galeri Saya</h1>
</div> </div>
@ -318,7 +318,7 @@ const Galery = (props: any) => {
<div className=""> <div className="">
{selectedTab == "video" ? ( {selectedTab == "video" ? (
contentVideo?.length > 0 ? ( contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{contentVideo?.map((video: any) => ( {contentVideo?.map((video: any) => (
<Card key={video?.id}> <Card key={video?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0"> <CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">

6
app/[locale]/(public)/content-management/galery/page.tsx
View File

@ -281,9 +281,9 @@ const Galery = (props: any) => {
return ( return (
<> <>
<HeaderManagement /> <HeaderManagement />
<div className="flex flex-row"> <div className="flex flex-col lg:flex-row">
<SidebarManagement /> <SidebarManagement />
<div className="w-2/3 p-12"> <div className="w-full lg:w-2/3 p-8 lg:p-12">
<div> <div>
<h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1> <h1 className="text-2xl font-semibold">Galeri {profile?.institute?.name}</h1>
</div> </div>
@ -324,7 +324,7 @@ const Galery = (props: any) => {
<div className="px-2"> <div className="px-2">
{selectedTab == "video" ? ( {selectedTab == "video" ? (
contentVideo?.length > 0 ? ( contentVideo?.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{contentVideo?.map((video: any) => ( {contentVideo?.map((video: any) => (
<Card key={video?.id}> <Card key={video?.id}>
<CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0"> <CardContent className="flex flex-col bg-black dark:bg-white w-full rounded-lg p-0">

21
app/[locale]/(public)/content-management/rewrite/create/[id]/page.tsx
View File

@ -289,21 +289,20 @@ const page = (props: any) => {
return ( return (
<> <>
<HeaderManagement /> <HeaderManagement />
<div className="flex flex-col lg:flex-row">
<div className="flex flex-row">
<SidebarManagement /> <SidebarManagement />
<div className="w-2/3 p-12"> <div className="w-full lg:w-2/3 p-8 lg:p-12">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="text-xl font-bold mb-5">Content Rewrite</div> <div className="text-xl font-bold mb-5">Content Rewrite</div>
<div className="p-8 border border-black rounded-lg"> <div className="p-8 border border-black rounded-lg">
<form method="POST" onSubmit={handleSubmit(onSubmit)}> <form method="POST" onSubmit={handleSubmit(onSubmit)}>
{content && ( {content && (
<div className="flex flex-col gap-2 "> <div className="flex flex-col gap-2 ">
<div className="flex flex-row gap-2"> <div className="flex flex-col lg:flex-row gap-2">
<div className="gap-1 flex flex-col mb-3"> <div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Bahasa</p> <p className="font-semibold">Bahasa</p>
<Select value={selectedLanguage} onValueChange={setSelectedLanguage}> <Select value={selectedLanguage} onValueChange={setSelectedLanguage}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Pilih Bahasa" /> <SelectValue placeholder="Pilih Bahasa" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -318,7 +317,7 @@ const page = (props: any) => {
<div className="gap-1 flex flex-col mb-3"> <div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Context Type</p> <p className="font-semibold">Context Type</p>
<Select value={selectedContextType} onValueChange={setSelectedContextType}> <Select value={selectedContextType} onValueChange={setSelectedContextType}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Select Context" /> <SelectValue placeholder="Select Context" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -335,7 +334,7 @@ const page = (props: any) => {
<div className="gap-1 flex flex-col mb-3"> <div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Writing Style</p> <p className="font-semibold">Writing Style</p>
<Select value={selectedWritingStyle} onValueChange={setSelectedWritingStyle}> <Select value={selectedWritingStyle} onValueChange={setSelectedWritingStyle}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Select Writing" /> <SelectValue placeholder="Select Writing" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -353,7 +352,7 @@ const page = (props: any) => {
<div className="gap-1 flex flex-col mb-3"> <div className="gap-1 flex flex-col mb-3">
<p className="font-semibold">Article Size</p> <p className="font-semibold">Article Size</p>
<Select value={selectedSize} onValueChange={setSelectedSize}> <Select value={selectedSize} onValueChange={setSelectedSize}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full lg:w-[180px]">
<SelectValue placeholder="Select Size" /> <SelectValue placeholder="Select Size" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -396,7 +395,7 @@ const page = (props: any) => {
/> />
</div> </div>
<div className="mb-4"> <div className="mb-4">
<a onClick={handleGenerateArtikel} className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2"> <a onClick={handleGenerateArtikel} className="text-blue-500 cursor-pointer hover:bg-blue-700 hover:text-white border border-blue-500 rounded-md p-2 text-sm lg:text-base">
Generate Artikel Generate Artikel
</a> </a>
{isGeneratedArticle && ( {isGeneratedArticle && (
@ -441,11 +440,11 @@ const page = (props: any) => {
onClick={() => { onClick={() => {
router.back(); router.back();
}} }}
className="border border-blue-400 hover:bg-blue-400 hover:text-white text-blue-400" className="border border-blue-400 hover:bg-blue-400 hover:text-white text-blue-400 text-sm lg:text-base"
> >
Kembali Kembali
</Button> </Button>
<Button type="submit" className="border border-blue-500 bg-blue-500 text-white"> <Button type="submit" className="border border-blue-500 bg-blue-500 text-sm lg:text-base text-white">
Simpan Simpan
</Button> </Button>
</div> </div>

16
app/[locale]/(public)/content-management/rewrite/detail/[id]/page.tsx
View File

@ -194,9 +194,9 @@ const page = () => {
return ( return (
<> <>
<HeaderManagement /> <HeaderManagement />
<div className="flex flex-row"> <div className="flex flex-col lg:flex-row">
<SidebarManagement /> <SidebarManagement />
<div className="w-2/3 p-12"> <div className="w-full lg:w-2/3 p-8 lg:p-12">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="text-xl font-bold mb-5">Detail Content Rewrite</div> <div className="text-xl font-bold mb-5">Detail Content Rewrite</div>
<div className="p-8 border border-black rounded-lg"> <div className="p-8 border border-black rounded-lg">
@ -218,8 +218,8 @@ const page = () => {
// onChange={(e) => setSelectedTitle(e.target.value)} // onChange={(e) => setSelectedTitle(e.target.value)}
/> />
</div> </div>
<div className="flex justify-between gap-3 lg:flex-row"> <div className="flex flex-col justify-between gap-3 lg:flex-row">
<div className="w-1/2"> <div className="w-full lg:w-1/2">
<div className="mb-1"> <div className="mb-1">
<p className="font-semibold">Main Keyword</p> <p className="font-semibold">Main Keyword</p>
</div> </div>
@ -227,7 +227,7 @@ const page = () => {
<Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} /> <Input type="text" className="border mb-3 w-full rounded-md p-2 border-black" id="mainKeyword" name="mainKeyword" placeholder="Masukan Main Keyword disini!" defaultValue={content?.mainKeyword} />
</div> </div>
</div> </div>
<div className="w-1/2"> <div className="w-full lg:w-1/2">
<div className="mb-1"> <div className="mb-1">
<label htmlFor="title" className="font-semibold"> <label htmlFor="title" className="font-semibold">
Additional Keyword{" "} Additional Keyword{" "}
@ -247,8 +247,8 @@ const page = () => {
</div> </div>
</div> </div>
<div className="flex gap-3 justify-between lg:flex-row"> <div className="flex gap-3 justify-between flex-col lg:flex-row">
<div className="w-1/2"> <div className="w-full lg:w-1/2">
<div className="font-semibold mb-1"> <div className="font-semibold mb-1">
<label htmlFor="metaTitle">Meta Title</label> <label htmlFor="metaTitle">Meta Title</label>
</div> </div>
@ -264,7 +264,7 @@ const page = () => {
defaultValue={content?.metaTitle} defaultValue={content?.metaTitle}
/> />
</div> </div>
<div className="w-1/2"> <div className="w-full lg:w-1/2">
<div className="font-semibold mb-1"> <div className="font-semibold mb-1">
<label htmlFor="metaDescription">Meta Description</label> <label htmlFor="metaDescription">Meta Description</label>
</div> </div>

6
app/[locale]/(public)/content-management/rewrite/page.tsx
View File

@ -197,9 +197,9 @@ const page = () => {
return ( return (
<> <>
<HeaderManagement /> <HeaderManagement />
<div className="flex flex-row"> <div className="flex flex-col lg:flex-row">
<SidebarManagement /> <SidebarManagement />
<div className="w-2/3 p-12"> <div className="w-full lg:w-2/3 p-8 lg:p-12">
<div> <div>
<h1 className="text-2xl font-semibold mb-4">Galeri Content Rewrite</h1> <h1 className="text-2xl font-semibold mb-4">Galeri Content Rewrite</h1>
</div> </div>
@ -213,7 +213,7 @@ const page = () => {
<Link href={`/content-management/rewrite/detail/${image.id}`}> <Link href={`/content-management/rewrite/detail/${image.id}`}>
{/* <img src={image?.thumbnailUrl} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */} {/* <img src={image?.thumbnailUrl} className="h-40 object-cover items-center justify-center cursor-pointer rounded-lg place-self-center" /> */}
<div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg"> <div className="img-container h-60 bg-[#e9e9e9] cursor-pointer rounded-lg">
<ImageBlurry src={image?.thumbnailUrl} alt={image?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} /> <ImageBlurry src={image?.thumbnailUrl} alt={image?.title} style={{ objectFit: "contain", width: "100%", height: "100%" }} />
</div> </div>
</Link> </Link>
<div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.title}</div> <div className="font-semibold p-4 text-white text-xs lg:text-sm dark:text-black truncate w-full">{image?.title}</div>

2
app/[locale]/(public)/content-management/users/page.tsx
View File

@ -114,7 +114,7 @@ const page = () => {
return ( return (
<> <>
<HeaderManagement /> <HeaderManagement />
<div className="flex flex-row"> <div className="flex flex-col lg:flex-row">
<SidebarManagement /> <SidebarManagement />
<div className="w-2/3 p-12"> <div className="w-2/3 p-12">
<div className="flex flex-col"> <div className="flex flex-col">

137
app/[locale]/(public)/document/detail/[slug]/page.tsx
View File

@ -49,6 +49,7 @@ const DetailDocument = () => {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>(); const [listSuggestion, setListSuggestion] = useState<any>();
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
const [visibleInput, setVisibleInput] = useState<string | null>(null);
let typeString = "document"; let typeString = "document";
@ -346,8 +347,10 @@ const DetailDocument = () => {
}; };
const showInput = (e: any) => { const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList); console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden"); document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
}; };
function addDefaultProfile(ev: any) { function addDefaultProfile(ev: any) {
ev.target.src = "/assets/avatar-profile.png"; ev.target.src = "/assets/avatar-profile.png";
} }
@ -420,19 +423,29 @@ const DetailDocument = () => {
<div className="absolute top-4 left-4"></div> <div className="absolute top-4 left-4"></div>
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
<p className="flex flex-row items-center mt-3"> {/* <p className="flex flex-row items-center mt-3">
oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp; oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB&nbsp;|&nbsp;
<Icon icon="formkit:eye" width="15" height="15" /> <Icon icon="formkit:eye" width="15" height="15" />
&nbsp; &nbsp;
{detailDataDocument?.clickCount} {detailDataDocument?.clickCount}
</p> </p>
<p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> <p className="mt-3">Kreator: {detailDataDocument?.creatorName}</p> */}
<div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
<p className="text-xs lg:text-sm">
oleh&nbsp;<span className="font-semibold text-black">{detailDataDocument?.uploadedBy?.userLevel?.name}</span>
</p>
<p className="text-xs lg:text-sm">&nbsp;|&nbsp;Diupdate pada {detailDataDocument?.updatedAt} WIB &nbsp;|&nbsp;</p>
<p className="text-xs lg:text-sm flex justify-center items-center">
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp; {detailDataDocument?.clickCount} &nbsp;
</p>
</div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className=""> <div className="">
<h1 className="flex flex-row font-bold text-2xl my-8 text-justify">{detailDataDocument?.title}</h1> <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8 text-justify">{detailDataDocument?.title}</h1>
<div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} /> <div dangerouslySetInnerHTML={{ __html: detailDataDocument?.htmlDescription }} />
</div> </div>
</div> </div>
@ -539,10 +552,10 @@ const DetailDocument = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full py-8" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
<button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1"> <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
Kirim Kirim
</button> </button>
@ -550,17 +563,17 @@ const DetailDocument = () => {
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div> <div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
<div className="overflow-y-auto"> <div>
{listSuggestion?.map((data: any) => ( {listSuggestion?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))} {getPublicLocaleTimestamp(new Date(data.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{data?.message}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<div> <div>
<a <a
style={ style={
@ -573,11 +586,11 @@ const DetailDocument = () => {
onClick={() => showInput(`comment-id-${data.id}`)} onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2" className="mr-2"
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? ( {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}> <a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
) : ( ) : (
"" ""
@ -585,29 +598,32 @@ const DetailDocument = () => {
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${data.id}`} className="px-4 lg:px-28 mt-2"> {visibleInput === `comment-id-${data.id}` && (
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<div className="flex flex-row gap-3"> <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a onClick={() => postDataChild(data.id)}> <div className="flex flex-row gap-3">
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 mt-2 cursor-pointer">Kirim</small> <a onClick={() => postDataChild(data.id)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
<a onClick={() => showInput(`comment-id-${data.id}`)}> </a>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <a onClick={() => showInput(`comment-id-${data.id}`)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{data.children.length > 0 {data.children.length > 0
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-16 w-16 mr-2" /> <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "} <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))} {getPublicLocaleTimestamp(new Date(child1.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child1?.message))}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div> <div>
<a <a
style={ style={
@ -619,7 +635,7 @@ const DetailDocument = () => {
} }
onClick={() => showInput(`comment-id-${child1.id}`)} onClick={() => showInput(`comment-id-${child1.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -631,29 +647,33 @@ const DetailDocument = () => {
} }
onClick={() => deleteData(child1.id)} onClick={() => deleteData(child1.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-40">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" /> {visibleInput === `comment-id-${child1.id}` && (
<div className="flex flex-row mt-2 gap-3"> <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<a onClick={() => postDataChild(child1.id)}> <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <div className="flex flex-row mt-2 gap-3">
</a> <a onClick={() => postDataChild(child1.id)}>
<a onClick={() => showInput(`comment-id-${child1.id}`)}> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> </a>
</a> <a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{child1.children.length > 0 {child1.children.length > 0
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className=""> <div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "} <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))} {getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -670,7 +690,7 @@ const DetailDocument = () => {
} }
onClick={() => showInput(`comment-id-${child2.id}`)} onClick={() => showInput(`comment-id-${child2.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -682,23 +702,24 @@ const DetailDocument = () => {
} }
onClick={() => deleteData(child2.id)} onClick={() => deleteData(child2.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52"> <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" /> <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}> <a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a> </a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}> <a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a> </a>
</div>
</div> </div>
</div> )}
</div> </div>
)) ))
: ""} : ""}

3
app/[locale]/(public)/feedback/page.tsx
View File

@ -62,7 +62,6 @@ const FeedbackForm: React.FC = () => {
const listData = [...userFeedbacks]; const listData = [...userFeedbacks];
const dataIdx = userFeedbacks.findIndex((o) => o.feedbackId === id); const dataIdx = userFeedbacks.findIndex((o) => o.feedbackId === id);
console.log("idx :", dataIdx); console.log("idx :", dataIdx);
console.log("Before :", listData); console.log("Before :", listData);
@ -126,7 +125,7 @@ const FeedbackForm: React.FC = () => {
<Rating label="Silakan berikan rating Anda terkait dengan tampilan website MediaHUB Polri" onRate={(rating) => handleRatingChange("appearance", rating)} /> <Rating label="Silakan berikan rating Anda terkait dengan tampilan website MediaHUB Polri" onRate={(rating) => handleRatingChange("appearance", rating)} />
<Rating label="Silakan berikan rating Anda terkait dengan konten MediaHUB Polri" onRate={(rating) => handleRatingChange("content", rating)} /> <Rating label="Silakan berikan rating Anda terkait dengan konten MediaHUB Polri" onRate={(rating) => handleRatingChange("content", rating)} />
<div className="flex justify-center"> <div className="flex justify-center">
<button onClick={handleSubmit} className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition"> <button onClick={handleSubmit} className="w-fit lg:w-32 bg-[#2F80ED] text-white py-2 px-4 gap-4 rounded-md hover:bg-blue-600 transition text-sm lg:text-base">
Kirim Kirim
</button> </button>
</div> </div>

119
app/[locale]/(public)/image/detail/[slug]/page.tsx
View File

@ -50,7 +50,7 @@ const DetailInfo = () => {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>(); const [listSuggestion, setListSuggestion] = useState<any>();
const [isLoading, setIsLoading] = useState<any>(true); const [isLoading, setIsLoading] = useState<any>(true);
const [visibleInput, setVisibleInput] = useState(null);
let typeString = "image"; let typeString = "image";
useEffect(() => { useEffect(() => {
@ -312,7 +312,8 @@ const DetailInfo = () => {
const showInput = (e: any) => { const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList); console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden"); document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
}; };
const getInputValue = (e: any) => { const getInputValue = (e: any) => {
@ -482,7 +483,7 @@ const DetailInfo = () => {
{/* Keterangan */} {/* Keterangan */}
<div className="w-full"> <div className="w-full">
<h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1> <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataImage?.title}</h1>
<div className="font-light text-justify mb-5 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} /> <div className="font-light text-justify mb-5 lg:mb-0" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
</div> </div>
</div> </div>
@ -590,7 +591,7 @@ const DetailInfo = () => {
<div className="w-full mb-8"> <div className="w-full mb-8">
{/* Comment */} {/* Comment */}
<div className="flex flex-col my-16 p-10 bg-[#f7f7f7]"> <div className="flex flex-col my-16 p-4 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-14"> <div className="gap-5 flex flex-col px-4 lg:px-14">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} /> <Textarea placeholder="Type your comments here." className="flex w-full pb-12" onChange={getInputValue} />
@ -601,17 +602,17 @@ const DetailInfo = () => {
<div className="border-b-2 border-slate-300 mt-4 w-auto"></div> <div className="border-b-2 border-slate-300 mt-4 w-auto"></div>
<div className="overflow-y-auto"> <div>
{listSuggestion?.map((data: any) => ( {listSuggestion?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img src={data?.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={data?.suggestionFrom?.profilePictureUrl} className="h-12 lg:h-16 w-12 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname} {Number(data.suggestionFrom?.roleId) == 2 || Number(data.suggestionFrom?.roleId) == 3 || Number(data.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : data.suggestionFrom?.fullname}
{getPublicLocaleTimestamp(new Date(data.createdAt))} {getPublicLocaleTimestamp(new Date(data.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{data?.message}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{data?.message}</p>
<div> <div>
<a <a
style={ style={
@ -624,11 +625,11 @@ const DetailInfo = () => {
onClick={() => showInput(`comment-id-${data.id}`)} onClick={() => showInput(`comment-id-${data.id}`)}
className="mr-2" className="mr-2"
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
{Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? ( {Number(data.suggestionFrom?.id) == Number(userId) || Number(userRoleId) == 2 ? (
<a onClick={() => deleteData(data.id)}> <a onClick={() => deleteData(data.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
) : ( ) : (
"" ""
@ -636,29 +637,32 @@ const DetailInfo = () => {
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${data.id}`} className="px-4 lg:px-28 mt-2"> {visibleInput === `comment-id-${data.id}` && (
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<div className="flex flex-row gap-3"> <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a onClick={() => postDataChild(data.id)}> <div className="flex flex-row gap-3">
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 mt-2 cursor-pointer">Kirim</small> <a onClick={() => postDataChild(data.id)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
<a onClick={() => showInput(`comment-id-${data.id}`)}> </a>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <a onClick={() => showInput(`comment-id-${data.id}`)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{data.children.length > 0 {data.children.length > 0
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-16 lg:pl-32">
<img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-16 w-16 mr-2" /> <img src={child1.suggestionFrom?.profilePictureUrl} onError={addDefaultProfile} alt="" className="h-10 lg:h-16 w-10 lg:w-16 mr-2" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "} <b>{Number(child1.suggestionFrom?.roleId) == 2 || Number(child1.suggestionFrom?.roleId) == 3 || Number(child1.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child1.createdAt))} {getPublicLocaleTimestamp(new Date(child1.createdAt))}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{parse(String(child1?.message))}</p> <p className="text-slate-500 text-[13px] lg:text-sm mb-4">{parse(String(child1?.message))}</p>
<div> <div>
<a <a
style={ style={
@ -670,7 +674,7 @@ const DetailInfo = () => {
} }
onClick={() => showInput(`comment-id-${child1.id}`)} onClick={() => showInput(`comment-id-${child1.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -682,29 +686,33 @@ const DetailInfo = () => {
} }
onClick={() => deleteData(child1.id)} onClick={() => deleteData(child1.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-40">
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" /> {visibleInput === `comment-id-${child1.id}` && (
<div className="flex flex-row mt-2 gap-3"> <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<a onClick={() => postDataChild(child1.id)}> <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <div className="flex flex-row mt-2 gap-3">
</a> <a onClick={() => postDataChild(child1.id)}>
<a onClick={() => showInput(`comment-id-${child1.id}`)}> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> </a>
</a> <a onClick={() => showInput(`comment-id-${child1.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{child1.children.length > 0 {child1.children.length > 0
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className=""> <div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "} <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))} {getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -721,7 +729,7 @@ const DetailInfo = () => {
} }
onClick={() => showInput(`comment-id-${child2.id}`)} onClick={() => showInput(`comment-id-${child2.id}`)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Balas</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Balas</small>
</a> </a>
<a <a
style={ style={
@ -733,23 +741,24 @@ const DetailInfo = () => {
} }
onClick={() => deleteData(child2.id)} onClick={() => deleteData(child2.id)}
> >
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Hapus</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Hapus</small>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52"> <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" /> <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}> <a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Kirim</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a> </a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}> <a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1 cursor-pointer">Batal</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a> </a>
</div>
</div> </div>
</div> )}
</div> </div>
)) ))
: ""} : ""}

17
app/[locale]/(public)/image/filter/page.tsx
View File

@ -497,19 +497,14 @@ const FilterPage = () => {
{isLoading ? ( {isLoading ? (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3"> <div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" /> <Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" /> <Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" /> <Skeleton className="h-[200px] w-[350px] rounded-xl" />
</div> </div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3"> <div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" /> <Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" /> <Skeleton className="h-[200px] w-[350px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" /> <Skeleton className="h-[200px] w-[350px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
<Skeleton className="h-[200px] w-[300px] rounded-xl" />
</div> </div>
</div> </div>
) : ( ) : (

66
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -154,33 +154,35 @@ const IndeksDetail = () => {
<div className="p-4 lg:px-60 lg:p-12"> <div className="p-4 lg:px-60 lg:p-12">
{/* Judul */} {/* Judul */}
<div className="flex flex-col mb-5"> <div className="flex flex-col mb-5">
<h1 className="text-lg mb-2">Indeks / Detail</h1> <h1 className="text-base lg:text-lg mb-2">Indeks / Detail</h1>
<h1 className="flex flex-row font-bold text-center text-2xl">{indeksData?.title}</h1> <h1 className="flex flex-row font-bold text-center text-lg lg:text-2xl">{indeksData?.title}</h1>
</div> </div>
{/* Gambar Utama */} {/* Gambar Utama */}
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<img src={indeksData?.thumbnailLink} alt="Main" className="h-[550px] w-full rounded-lg" /> <img src={indeksData?.thumbnailLink} alt="Main" className="h-fit lg:h-[550px] w-full rounded-lg" />
</div> </div>
{/* Footer Informasi */} {/* Footer Informasi */}
<div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4"> <div className="text-gray-500 flex border-t mt-4">
<div className="flex flex-row items-center mt-3 justify-between"> <div className="flex mt-2">
oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp; <p className="text-sm lg:text-base mb-2">
oleh&nbsp;<span className="font-semibold text-black">{indeksData?.uploaderName}</span>&nbsp; | &nbsp;Diupdate pada {indeksData?.createdAt} WIB &nbsp;
</p>
</div> </div>
</div> </div>
{/* Keterangan */} {/* Keterangan */}
<div className="w-auto"> <div className="w-auto">
<p className="font-light text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} /> <p className="font-light text-base lg:text-lg text-justify" dangerouslySetInnerHTML={{ __html: indeksData?.description }} />
</div> </div>
</div> </div>
{/* Comment */} {/* Comment */}
<div className="w-full"> <div className="w-full">
<div className="flex flex-col py-5 p-10 bg-[#f7f7f7]"> <div className="flex flex-col py-5 p-0 lg:p-10 bg-[#f7f7f7]">
<div className="gap-5 flex flex-col px-4 lg:px-16"> <div className="gap-5 flex flex-col px-4 lg:px-16">
<p className="flex items-start text-lg">Berikan Komentar</p> <p className="flex items-start text-bases lg:text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} value={message} /> <Textarea placeholder="Type your comments here." className="flex w-full" onChange={getInputValue} value={message} />
<button className="flex items-start bg-[#bb3523] text-white rounded-lg w-fit px-4 py-1" onClick={() => postData()}> <button className="flex items-start bg-[#bb3523] text-white rounded-lg text-sm lg:text-base w-fit px-3 lg:px-4 py-1" onClick={() => postData()}>
Kirim Kirim
</button> </button>
</div> </div>
@ -191,15 +193,15 @@ const IndeksDetail = () => {
{listComments?.map((data: any) => ( {listComments?.map((data: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-14"> <div className="flex flex-row mt-2 px-4 lg:px-14">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-sm text-slate-500 lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b> <b>{Number(data.commentFrom?.roleId) == 2 || Number(data.commentFrom?.roleId) == 3 || Number(data.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : data.commentFrom?.fullname}</b>
{`${new Date(data.createdAt).getDate()}/${new Date(data.createdAt).getMonth() + 1}/${new Date(data.createdAt).getFullYear()} ${new Date(data.createdAt).getHours()}:${new Date(data.createdAt).getMinutes()}`} {`${new Date(data.createdAt).getDate()}/${new Date(data.createdAt).getMonth() + 1}/${new Date(data.createdAt).getFullYear()} ${new Date(data.createdAt).getHours()}:${new Date(data.createdAt).getMinutes()}`}
</p> </p>
<p className="text-slate-500 text-sm mb-4">{data.message}</p> <p className="text-slate-500 text-sm lg:text-base mb-4">{data.message}</p>
<div className="gap-3"> <div className="gap-3">
<a href="javascript:void(0)" className="text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${data.id}`)}> <a href="javascript:void(0)" className="text-xs lg:text-sm mr-2 bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${data.id}`)}>
Balas Balas
</a> </a>
<a <a
@ -211,7 +213,7 @@ const IndeksDetail = () => {
display: "none", display: "none",
} }
} }
className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md" className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
onClick={() => deleteData(data.id)} onClick={() => deleteData(data.id)}
> >
Hapus Hapus
@ -219,19 +221,19 @@ const IndeksDetail = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-row px-4 lg:px-28 mt-2" id={`comment-id-${data.id}`}> <div className="flex flex-row px-4 pl-[55px] lg:px-14 lg:pl-[135px] mt-2" id={`comment-id-${data.id}`}>
<Input type="text" id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <Input type="text" id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(data.id)}> <a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white text-sm lg:text-base" onClick={() => postDataChild(data.id)}>
Send Send
</a> </a>
</div> </div>
{data.children.length > 0 {data.children.length > 0
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-32"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-12 lg:pl-32">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-1">
<p className="flex justify-between text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b> <b>{Number(child1.commentFrom?.roleId) == 2 || Number(child1.commentFrom?.roleId) == 3 || Number(child1.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child1.commentFrom?.fullname}</b>
{`${new Date(child1.createdAt).getDate()}/${new Date(child1.createdAt).getMonth() + 1}/${new Date(child1.createdAt).getFullYear()} ${new Date(child1.createdAt).getHours()}:${new Date( {`${new Date(child1.createdAt).getDate()}/${new Date(child1.createdAt).getMonth() + 1}/${new Date(child1.createdAt).getFullYear()} ${new Date(child1.createdAt).getHours()}:${new Date(
child1.createdAt child1.createdAt
@ -239,12 +241,12 @@ const IndeksDetail = () => {
</p> </p>
<p className="text-slate-500 text-sm mb-4">{child1.message}</p> <p className="text-slate-500 text-sm mb-4">{child1.message}</p>
<div className="gap-3"> <div className="gap-3">
<a href="javascript:void(0)" className="mr-2 text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${child1.id}`)}> <a href="javascript:void(0)" className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput(`comment-id-${child1.id}`)}>
Balas Balas
</a> </a>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md" className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={ style={
Number(child1.commentFrom?.id) == Number(userId) Number(child1.commentFrom?.id) == Number(userId)
? {} ? {}
@ -259,19 +261,19 @@ const IndeksDetail = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-row justify-center px-4 lg:px-44 mt-2" id={`comment-id-${child1.id}`}> <div className="flex flex-row justify-center px-4 pl-[87px] lg:px-14 lg:pl-[205px] mt-2" id={`comment-id-${child1.id}`}>
<Input type="text" id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <Input type="text" id={`input-comment-${child1.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}> <a href="javascript:void(0)" className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
Send Send
</a> </a>
</div> </div>
{child1.children.length > 0 {child1.children.length > 0
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row mt-2 px-4 lg:px-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-20 lg:pl-48">
<img className="h-10 w-10" src="/assets/img/user-avatar-yellow.svg" alt="#" /> <img className="h-10 lg:h-20 w-10 lg:w-20" src="/assets/img/user-avatar-yellow.svg" alt="#" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-4 bg-white gap-2">
<p className="flex justify-between text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="flex justify-between text-slate-500 text-xs lg:text-base border-b-2 border-slate-200 mb-2">
<b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b> <b>{Number(child2.commentFrom?.roleId) == 2 || Number(child2.commentFrom?.roleId) == 3 || Number(child2.commentFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.commentFrom?.fullname}</b>
{`${new Date(child2.createdAt).getDate()}/${new Date(child2.createdAt).getMonth() + 1}/${new Date(child2.createdAt).getFullYear()} ${new Date(child2.createdAt).getHours()}:${new Date( {`${new Date(child2.createdAt).getDate()}/${new Date(child2.createdAt).getMonth() + 1}/${new Date(child2.createdAt).getFullYear()} ${new Date(child2.createdAt).getHours()}:${new Date(
child2.createdAt child2.createdAt
@ -279,12 +281,12 @@ const IndeksDetail = () => {
</p> </p>
<p className="text-slate-500 text-sm mb-4">{child2.message}</p> <p className="text-slate-500 text-sm mb-4">{child2.message}</p>
<div> <div>
<a href="javascript:void(0)" className="mr-2 text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput("comment-id-" + child2.id)}> <a href="javascript:void(0)" className="mr-2 text-xs lg:text-sm bg-blue-500 text-white py-1 px-2 hover:bg-blue-300 hover:text-black rounded-md" onClick={() => showInput("comment-id-" + child2.id)}>
Balas Balas
</a> </a>
<a <a
href="javascript:void(0)" href="javascript:void(0)"
className="text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md" className="text-xs lg:text-sm bg-red-500 text-white py-1 px-2 hover:bg-red-300 hover:text-black rounded-md"
style={ style={
Number(child2.commentFrom?.id) == Number(userId) Number(child2.commentFrom?.id) == Number(userId)
? {} ? {}
@ -299,9 +301,9 @@ const IndeksDetail = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="flex flex-row px-4 lg:px-56 mt-2" id={`comment-id-${child2.id}`}> <div className="flex flex-row px-4 pl-[120px] lg:px-14 lg:pl-[270px] mt-2" id={`comment-id-${child2.id}`}>
<Input type="text" id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <Input type="text" id={`comment-id-${child2.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a href="javascript:void(0)" className="flex py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}> <a href="javascript:void(0)" className="flex text-sm lg:text-base py-1 px-2 rounded-md items-center ml-2 bg-[#f7b357] text-white" onClick={() => postDataChild(child1.id)}>
Send Send
</a> </a>
</div> </div>

16
app/[locale]/(public)/indeks/page.tsx
View File

@ -81,8 +81,8 @@ const Indeks: React.FC = () => {
{isLoading ? ( {isLoading ? (
<> <>
<div className="flex flex-col space-y-3 w-full justify-center items-center gap-3"> <div className="flex flex-col space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[200px] w-[400px] rounded-xl" /> <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-[400px] rounded-xl" /> <Skeleton className="h-[200px] w-full lg:w-[400px] rounded-xl" />
</div> </div>
</> </>
) : ( ) : (
@ -120,22 +120,22 @@ const Indeks: React.FC = () => {
<div className="px-4 lg:px-7 py-4"> <div className="px-4 lg:px-7 py-4">
{isLoading ? ( {isLoading ? (
<div className="flex flex-col space-y-3 w-full gap-10"> <div className="flex flex-col space-y-3 w-full gap-10">
<div className="flex flex-row gap-5"> <div className="flex flex-col lg:flex-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" /> <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[200px]" />
</div> </div>
</div> </div>
<div className="flex flex-row gap-5"> <div className="flex flex-col lg:flex-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" /> <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[200px]" />
</div> </div>
</div> </div>
<div className="flex flex-row gap-5"> <div className="flex flex-col lg:flex-row gap-5">
<Skeleton className="h-[300px] w-[500px] rounded-lg" /> <Skeleton className="h-[300px] w-full lg:w-[500px] rounded-lg" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[200px]" />

83
app/[locale]/(public)/video/detail/[slug]/page.tsx
View File

@ -47,6 +47,7 @@ const DetailVideo = () => {
const userRoleId = getCookiesDecrypt("urie"); const userRoleId = getCookiesDecrypt("urie");
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const [listSuggestion, setListSuggestion] = useState<any>(); const [listSuggestion, setListSuggestion] = useState<any>();
const [visibleInput, setVisibleInput] = useState(null);
const MySwal = withReactContent(Swal); const MySwal = withReactContent(Swal);
let typeString = "video"; let typeString = "video";
@ -346,7 +347,8 @@ const DetailVideo = () => {
}; };
const showInput = (e: any) => { const showInput = (e: any) => {
console.log(document.querySelector(`#${e}`)?.classList); console.log(document.querySelector(`#${e}`)?.classList);
document.querySelector(`#${e}`)?.classList.toggle("hidden"); document.querySelector(`#${e}`)?.classList.toggle("none");
setVisibleInput(visibleInput === e ? null : e);
}; };
function addDefaultProfile(ev: any) { function addDefaultProfile(ev: any) {
ev.target.src = "/assets/avatar-profile.png"; ev.target.src = "/assets/avatar-profile.png";
@ -449,7 +451,7 @@ const DetailVideo = () => {
{/* Keterangan */} {/* Keterangan */}
<div className="w-full"> <div className="w-full">
<h1 className="flex flex-row font-bold text-2xl my-8">{detailDataVideo?.title}</h1> <h1 className="flex flex-row font-bold text-lg lg:text-2xl my-8">{detailDataVideo?.title}</h1>
<div <div
className="font-light text-justify mb-5 lg:mb-0" className="font-light text-justify mb-5 lg:mb-0"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
@ -608,17 +610,20 @@ const DetailVideo = () => {
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${data.id}`} className="px-4 pl-14 lg:px-14 lg:pl-32 mt-2 "> {visibleInput === `comment-id-${data.id}` && (
<Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" /> <div id={`comment-id-${data.id}`} className="px-4 pl-[72px] lg:px-14 lg:pl-32 mt-2 ">
<div className="flex flex-row gap-3"> <Textarea id={`input-comment-${data.id}`} className="p-4 focus:outline-none focus:border-sky-500" placeholder="Masukkan balasan anda" />
<a onClick={() => postDataChild(data.id)}> <div className="flex flex-row gap-3">
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small> <a onClick={() => postDataChild(data.id)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 mt-2 cursor-pointer">Kirim</small>
<a onClick={() => showInput(`comment-id-${data.id}`)}> </a>
<small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small> <a onClick={() => showInput(`comment-id-${data.id}`)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg mt-2 w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{data.children.length > 0 {data.children.length > 0
? data.children?.map((child1: any) => ( ? data.children?.map((child1: any) => (
<div className="flex flex-col"> <div className="flex flex-col">
@ -659,24 +664,27 @@ const DetailVideo = () => {
</div> </div>
</div> </div>
</div> </div>
<div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-32"> {visibleInput === `comment-id-${child1.id}` && (
<Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" /> <div id={`comment-id-${child1.id}`} className="px-4 lg:px-14 pl-28 lg:pl-[200px]">
<div className="flex flex-row mt-2 gap-3"> <Textarea name="" className="mt-2 " id={`input-comment-${child1.id}`} placeholder="Masukkan balasan anda" />
<a onClick={() => postDataChild(child1.id)}> <div className="flex flex-row mt-2 gap-3">
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small> <a onClick={() => postDataChild(child1.id)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
<a onClick={() => showInput(`comment-id-${child1.id}`)}> </a>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small> <a onClick={() => showInput(`comment-id-${child1.id}`)}>
</a> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a>
</div>
</div> </div>
</div> )}
{child1.children.length > 0 {child1.children.length > 0
? child1.children?.map((child2: any) => ( ? child1.children?.map((child2: any) => (
<div className=""> <div className="">
<div className="flex flex-row mt-2 px-4 lg:px-48"> <div className="flex flex-row mt-2 px-4 lg:pr-14 pl-28 lg:pl-48">
<img src={child2.suggestionFrom?.profilePictureUrl} className="h-16 w-16 mr-2" onError={addDefaultProfile} alt="" /> <img src={child2.suggestionFrom?.profilePictureUrl} className="h-9 lg:h-16 w-9 lg:w-16 mr-2" onError={addDefaultProfile} alt="" />
<div className="border border-slate-300 w-full p-4 bg-white gap-1"> <div className="border border-slate-300 w-full p-2 lg:p-4 bg-white gap-1">
<p className="text-slate-500 text-base border-b-2 border-slate-200 mb-2"> <p className="text-slate-500 text-sm lg:text-base border-b-2 border-slate-200 mb-2">
{" "} {" "}
<b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "} <b>{Number(child2.suggestionFrom?.roleId) == 2 || Number(child2.suggestionFrom?.roleId) == 3 || Number(child2.suggestionFrom?.roleId) == 4 ? "HUMAS POLRI" : child2.suggestionFrom?.fullname}</b>{" "}
{getPublicLocaleTimestamp(new Date(child2.createdAt))} {getPublicLocaleTimestamp(new Date(child2.createdAt))}
@ -710,18 +718,19 @@ const DetailVideo = () => {
</div> </div>
</div> </div>
</div> </div>
{visibleInput === `comment-id-${child2.id}` && (
<div id={`comment-id-${child2.id}`} className="px-4 lg:px-52"> <div id={`comment-id-${child2.id}`} className="px-4 lg:px-14 pl-40 lg:pl-[265px]">
<Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" /> <Textarea name="" id={`input-comment-${child2.id}`} className="my-2" placeholder="Masukkan balasan anda" />
<div className="flex flex-row gap-3"> <div className="flex flex-row gap-3">
<a onClick={() => postDataChild(child2.id)}> <a onClick={() => postDataChild(child2.id)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Kirim</small>
</a> </a>
<a onClick={() => showInput(`comment-id-${child2.id}`)}> <a onClick={() => showInput(`comment-id-${child2.id}`)}>
<small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small> <small className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-2 text-xs lg:text-base lg:px-4 py-1 cursor-pointer">Batal</small>
</a> </a>
</div>
</div> </div>
</div> )}
</div> </div>
)) ))
: ""} : ""}

17
app/[locale]/(public)/video/filter/page.tsx
View File

@ -522,19 +522,14 @@ const FilterPage = () => {
{isLoading ? ( {isLoading ? (
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3"> <div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" /> <Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" /> <Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" /> <Skeleton className="h-[280px] w-[380px] rounded-xl" />
</div> </div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3"> <div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" /> <Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" /> <Skeleton className="h-[280px] w-[380px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" /> <Skeleton className="h-[280px] w-[380px] rounded-xl" />
</div>
<div className="flex flex-col lg:flex-row space-y-3 w-full justify-center items-center gap-3">
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
<Skeleton className="h-[300px] w-[400px] rounded-xl" />
</div> </div>
</div> </div>
) : ( ) : (

4
app/[locale]/auth/page.tsx
View File

@ -33,11 +33,11 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
<div className="flex-1 relative"> <div className="flex-1 relative">
<div className=" h-full flex flex-col dark:bg-default-100 bg-white"> <div className=" h-full flex flex-col dark:bg-default-100 bg-white">
<div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7 mx-auto w-full text-2xl text-default-900 mb-3 h-full flex flex-col justify-center"> <div className="max-w-[524px] md:px-[42px] md:py-[44px] p-7 mx-auto w-full text-2xl text-default-900 mb-3 h-full flex flex-col justify-center">
<div className="flex justify-center items-center text-center mb-6 lg:hidden "> {/* <div className="flex justify-center items-center text-center mb-6 lg:hidden ">
<Link href="/"> <Link href="/">
<Logo /> <Logo />
</Link> </Link>
</div> </div> */}
<div className="text-left 2xl:mb-10 mb-4 mt-10"> <div className="text-left 2xl:mb-10 mb-4 mt-10">
<h4 className="font-semibold text-3xl text-left">Silahkan masuk ke akun Anda terlebih dahulu</h4> <h4 className="font-semibold text-3xl text-left">Silahkan masuk ke akun Anda terlebih dahulu</h4>
<div className="text-default-500 text-base"> <div className="text-default-500 text-base">

74
app/[locale]/auth/registration/page.tsx
View File

@ -504,7 +504,7 @@ const page = () => {
return ( return (
<div className="overflow-y-auto flex flex-wrap w-full h-dvh"> <div className="overflow-y-auto flex flex-wrap w-full h-dvh">
<div className="lg:block hidden flex-1 overflow-hidden bg-black text-[40px] leading-[48px] text-default-600 relative z-[1]"> <div className="lg:block hidden flex-1 overflow-hidden bg-[#f7f7f7] text-[40px] leading-[48px] text-default-600 relative z-[1]">
<div className="max-w-[520px] pt-16 ps-20 "> <div className="max-w-[520px] pt-16 ps-20 ">
<Link href="/" className="mb-6 inline-block"> <Link href="/" className="mb-6 inline-block">
<Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" /> <Image src="/assets/mediahub-logo.png" alt="" width={250} height={250} className="mb-10 w-full h-full" />
@ -516,7 +516,7 @@ const page = () => {
</div> </div>
<form <form
className="flex-1 bg-[#f7f7f7]" className="flex-1 w-full bg-white"
onSubmit={handleSubmit(onSubmit)} onSubmit={handleSubmit(onSubmit)}
style={ style={
Number(category) < 5 Number(category) < 5
@ -560,8 +560,8 @@ const page = () => {
: {} : {}
} }
> >
<p className="text-4xl px-12 font-bold ">{stepThreeActive ? "Silahkan lengkapi data pengguna" : "Silahkan registrasi terlebih dahulu"}</p> <p className="text-2xl lg:text-4xl px-0 lg:px-12 font-bold ">{stepThreeActive ? "Silahkan lengkapi data pengguna" : "Silahkan registrasi terlebih dahulu"}</p>
<p className="px-12 mt-2"> <p className="px-0 lg:px-12 text-sm lg:text-base mt-2">
Sudah memiliki akun?{" "} Sudah memiliki akun?{" "}
<Link href="/auth" className="text-red-500"> <Link href="/auth" className="text-red-500">
<b>Masuk</b> <b>Masuk</b>
@ -569,7 +569,7 @@ const page = () => {
</p> </p>
</div> </div>
<div <div
className="px-20 mb-6" className="px-8 lg:px-20 mb-6"
style={ style={
!stepTwoActive || (stepOneActive && stepThreeActive) !stepTwoActive || (stepOneActive && stepThreeActive)
? { ? {
@ -578,14 +578,14 @@ const page = () => {
: {} : {}
} }
> >
<p className="text-black text-2xl px-20 font-semibold">Masukkan Kode OTP</p> <p className="text-black text-2xl px-0 lg:px-20 font-semibold">Masukkan Kode OTP</p>
<p className="text-red-500 text-sm px-20">Silahkan cek inbox atau kotak spam pada email Anda.</p> <p className="text-red-500 text-sm px-0 lg:px-20">Silahkan cek inbox atau kotak spam pada email Anda.</p>
</div> </div>
</div> </div>
<div className={`flex flex-col gap-3 px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}> <div className={`flex flex-col gap-3 px-8 lg:px-12 ${formProfile == true || stepTwoActive ? "hidden" : ""}`}>
<div <div
className=" flex flex-col px-8 " className="flex flex-col"
style={ style={
Number(category) == 6 Number(category) == 6
? {} ? {}
@ -597,7 +597,7 @@ const page = () => {
<Label htmlFor="association" className="mb-2"> <Label htmlFor="association" className="mb-2">
Jenis Keanggotaan <span className="text-red-500">*</span> Jenis Keanggotaan <span className="text-red-500">*</span>
</Label> </Label>
<select className={`py-3 px-2 rounded-md border border-slate-300 bg-white ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}> <select className={`py-2 px-1 rounded-md border border-slate-300 bg-white ${errors.association ? "block" : ""}`} {...register("association")} id="association" onChange={(e) => setAssociation(e.target.value)}>
<option disabled selected> <option disabled selected>
Pilih Asosiasi Pilih Asosiasi
</option> </option>
@ -621,7 +621,7 @@ const page = () => {
</div> </div>
{Number(category) == 7 ? ( {Number(category) == 7 ? (
<div className="px-[34px]"> <div className="px-0 lg:px-[34px]">
<label htmlFor="userIdentity" className="mb-3"> <label htmlFor="userIdentity" className="mb-3">
<b>Nomor Registrasi Polri (NRP)</b> <span className="text-red-500">*</span> <b>Nomor Registrasi Polri (NRP)</b> <span className="text-red-500">*</span>
</label> </label>
@ -633,7 +633,7 @@ const page = () => {
)} )}
{Number(category) == 6 ? ( {Number(category) == 6 ? (
<div <div
className="px-[34px]" className="px-0 lg:px-[34px]"
style={ style={
Number(category) == 6 Number(category) == 6
? {} ? {}
@ -650,16 +650,16 @@ const page = () => {
) : ( ) : (
"" ""
)} )}
<div className="flex flex-col w-full px-8 gap-2"> <div className="flex flex-col w-full px-0 lg:px-8 gap-2">
<label htmlFor="email"> <label htmlFor="email">
<b>Email</b> <span className="text-red-500">*</span> <b>Email</b> <span className="text-red-500">*</span>
</label> </label>
<Input className="w-full" autoComplete="off" placeholder="Masukan Email Anda" type="email" onChange={(event) => checkEmail(event.target.value)} /> <Input className="w-full" autoComplete="off" placeholder="Masukkan Email Anda" type="email" onChange={(event) => checkEmail(event.target.value)} />
<p className="text-sm text-red-500 mt-1">{emailValidate}</p> <p className="text-sm text-red-500 mt-1">{emailValidate}</p>
</div> </div>
</div> </div>
<div className={`flex flex-col mt-4 px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}> <div className={`flex flex-col mt-4 px-8 lg:px-12 ${!stepTwoActive || stepThreeActive ? "hidden" : ""}`}>
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}> <InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
<InputOTPGroup> <InputOTPGroup>
@ -681,7 +681,7 @@ const page = () => {
<p className="text-red-500"> <p className="text-red-500">
<b>{otpValidate}</b> <b>{otpValidate}</b>
</p> </p>
<div className="flex flex-row px-28 justify-between items-center my-4"> <div className="flex flex-row px-0 lg:px-28 justify-between items-center my-4">
<a className="bg-slate-300 text-center rounded-lg mr-1 w-[200px] py-2 text-base cursor-pointer" onClick={() => handleResendOTP()}> <a className="bg-slate-300 text-center rounded-lg mr-1 w-[200px] py-2 text-base cursor-pointer" onClick={() => handleResendOTP()}>
Kirim Ulang ({convertMilisecondsToHour(timerCount)}) Kirim Ulang ({convertMilisecondsToHour(timerCount)})
</a> </a>
@ -691,10 +691,10 @@ const page = () => {
</div> </div>
</div> </div>
<div className={`flex flex-col px-12 ${formProfile == false ? "hidden" : ""}`}> <div className={`flex flex-col px-8 lg:px-12 ${formProfile == false ? "hidden" : ""}`}>
<div> <div>
{Number(category) == 6 || Number(category) == 7 ? ( {Number(category) == 6 || Number(category) == 7 ? (
<div className="px-[34px]"> <div className="px-0 lg:px-[34px]">
<Label className="mb-2"> <Label className="mb-2">
{`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`} {`${Number(category) == 6 ? "Nomor Sertifikasi Wartawan" : "NRP"}`}
<span className="text-red-500">*</span> <span className="text-red-500">*</span>
@ -713,14 +713,14 @@ const page = () => {
) : ( ) : (
"" ""
)} )}
<div className="mb-4 px-[34px]"> <div className="mb-4 px-0 lg:px-[34px]">
<Label className="mb-2"> <Label className="mb-2">
Nama Lengkap <span className="text-red-500">*</span> Nama Lengkap <span className="text-red-500">*</span>
</Label> </Label>
<Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder="Masukan Nama Lengkap Anda" /> <Input type="text" autoComplete="off" className={` ${errors.firstName ? "block" : ""}`} {...register("firstName")} placeholder="Masukan Nama Lengkap Anda" />
<div className="text-red-500">{errors.firstName?.message}</div> <div className="text-red-500">{errors.firstName?.message}</div>
</div> </div>
<div className="mb-4 px-[34px]"> <div className="mb-4 px-0 lg:px-[34px]">
<Label className="mb-2"> <Label className="mb-2">
Username <span className="text-red-500">*</span> Username <span className="text-red-500">*</span>
</Label> </Label>
@ -742,7 +742,7 @@ const page = () => {
/> />
<div className="text-red-500">{errors.username?.message}</div> <div className="text-red-500">{errors.username?.message}</div>
</div> </div>
<div className="mb-4 px-[34px]"> <div className="mb-4 px-0 lg:px-[34px]">
<Label className="mb-2"> <Label className="mb-2">
Email <span className="text-red-500">*</span> Email <span className="text-red-500">*</span>
</Label> </Label>
@ -750,14 +750,14 @@ const page = () => {
<div className="text-red-500">{errors.email?.message}</div> <div className="text-red-500">{errors.email?.message}</div>
</div> </div>
</div> </div>
<div className="flex flex-col px-[34px]"> <div className="flex flex-col px-0 lg:px-[34px]">
<Label className="mb-2"> <Label className="mb-2">
No. HP<span className="text-red-500">*</span> No. HP<span className="text-red-500">*</span>
</Label> </Label>
<Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" /> <Input type="number" autoComplete="off" className={`mb-3 ${errors.phoneNumber ? "block" : ""}`} {...register("phoneNumber")} placeholder="Masukan Nomor Telepon Anda" />
<div className="text-red-500">{errors.phoneNumber?.message}</div> <div className="text-red-500">{errors.phoneNumber?.message}</div>
</div> </div>
<div className="mb-4 px-[34px]"> <div className="mb-4 px-0 lg:px-[34px]">
<Label htmlFor="address" className="mb-2"> <Label htmlFor="address" className="mb-2">
Alamat <span className="text-red-500">*</span> Alamat <span className="text-red-500">*</span>
</Label> </Label>
@ -765,7 +765,7 @@ const page = () => {
<div className="text-red-500">{errors.address?.message}</div> <div className="text-red-500">{errors.address?.message}</div>
</div> </div>
{Number(category) == 6 ? ( {Number(category) == 6 ? (
<div className="flex flex-col gap-3 px-[34px]"> <div className="flex flex-col gap-3 px-0 lg:px-[34px]">
<div className="flex flex-col mb-2"> <div className="flex flex-col mb-2">
<Label htmlFor="provinsi"> <Label htmlFor="provinsi">
Institusi <span className="text-red-500">*</span> Institusi <span className="text-red-500">*</span>
@ -785,7 +785,7 @@ const page = () => {
</select> </select>
</div> </div>
<div <div
className="px-[34px]" className="px-0 lg:px-[34px]"
style={ style={
isCustomActive == false isCustomActive == false
? { ? {
@ -799,7 +799,7 @@ const page = () => {
</Label> </Label>
<Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} /> <Input className="mb-3" autoComplete="off" placeholder="Masukan Nama Lengkap Institusi Anda" type="text" onChange={(event) => setCustomInstituteName(event.target.value)} />
</div> </div>
<div className=""> <div>
<Label htmlFor="alamat" className="mb-2"> <Label htmlFor="alamat" className="mb-2">
Alamat Institusi <span className="text-red-500">*</span> Alamat Institusi <span className="text-red-500">*</span>
</Label> </Label>
@ -809,11 +809,17 @@ const page = () => {
) : ( ) : (
"" ""
)} )}
<div className="flex flex-col px-[34px]"> <div className="flex flex-col px-0 lg:px-[34px]">
<label htmlFor="provinsi" className="mb-2"> <label htmlFor="provinsi" className="mb-2">
Provinsi <span className="text-red-500">*</span> Provinsi <span className="text-red-500">*</span>
</label> </label>
<select className={`mb-3 p-2 border rounded-md border-slate-300 bg-white cursor-pointer ${errors.provinsi ? "block" : ""}`} {...register("provinsi")} id="provinsi" name="provinsi" onChange={(event) => getCity(event.target.value)}> <select
className={`mb-3 p-2 border rounded-md border-slate-300 bg-white cursor-pointer ${errors.provinsi ? "block" : ""}`}
{...register("provinsi")}
id="provinsi"
name="provinsi"
onChange={(event) => getCity(event.target.value)}
>
<option disabled selected> <option disabled selected>
Pilih Provinsi Pilih Provinsi
</option> </option>
@ -825,7 +831,7 @@ const page = () => {
</select> </select>
<div className="text-red-500">{errors.provinsi?.message}</div> <div className="text-red-500">{errors.provinsi?.message}</div>
</div> </div>
<div className="flex flex-col px-[34px]"> <div className="flex flex-col px-0 lg:px-[34px]">
<label htmlFor="kota" className="mb-2"> <label htmlFor="kota" className="mb-2">
Kota/Kabupaten <span className="text-red-500">*</span> Kota/Kabupaten <span className="text-red-500">*</span>
</label> </label>
@ -841,7 +847,7 @@ const page = () => {
</select> </select>
<div className="text-red-500">{errors.kota?.message}</div> <div className="text-red-500">{errors.kota?.message}</div>
</div> </div>
<div className="flex flex-col px-[34px]"> <div className="flex flex-col px-0 lg:px-[34px]">
<label htmlFor="kecamatan" className="mb-2"> <label htmlFor="kecamatan" className="mb-2">
Kecamatan <span className="text-red-500">*</span> Kecamatan <span className="text-red-500">*</span>
</label> </label>
@ -886,7 +892,7 @@ const page = () => {
</a> </a>
<div className="text-red-500">{errors.password?.message}</div> <div className="text-red-500">{errors.password?.message}</div>
</div> */} </div> */}
<div className="mt-3.5 space-y-2 px-[34px]"> <div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
<Label htmlFor="password" className="mb-2 font-medium text-default-600"> <Label htmlFor="password" className="mb-2 font-medium text-default-600">
Kata Sandi <span className="text-red-500">*</span> Kata Sandi <span className="text-red-500">*</span>
</Label> </Label>
@ -944,7 +950,7 @@ const page = () => {
<Icon icon="fa:eye-slash" /> <Icon icon="fa:eye-slash" />
</a> </a>
</div> */} </div> */}
<div className="mt-3.5 space-y-2 px-[34px]"> <div className="mt-3.5 space-y-2 px-0 lg:px-[34px]">
<Label htmlFor="password" className="mb-2 font-medium text-default-600"> <Label htmlFor="password" className="mb-2 font-medium text-default-600">
Konfirmasi Kata Sandi <span className="text-red-500">*</span> Konfirmasi Kata Sandi <span className="text-red-500">*</span>
</Label> </Label>
@ -973,7 +979,7 @@ const page = () => {
</div> </div>
<div className="text-red-500">{warningPassConf}</div> <div className="text-red-500">{warningPassConf}</div>
</div> </div>
<div className="form-group px-[34px]"> <div className="form-group px-0 lg:px-[34px]">
<PasswordChecklist <PasswordChecklist
rules={["minLength", "specialChar", "number", "capital", "match"]} rules={["minLength", "specialChar", "number", "capital", "match"]}
minLength={8} minLength={8}
@ -1004,7 +1010,7 @@ const page = () => {
} }
> >
<div className="text-center mb-2 px-[34px]"> <div className="text-center mb-2 px-[34px]">
<p> <p className="text-sm lg:text-base">
Dengan mendaftar, saya telah menyetujui <br />{" "} Dengan mendaftar, saya telah menyetujui <br />{" "}
<a href="/privacy" target="_blank" className="text-red-500"> <a href="/privacy" target="_blank" className="text-red-500">
<b>Syarat dan Ketentuan</b> <b>Syarat dan Ketentuan</b>

6
components/landing-page/content-category.tsx
View File

@ -20,9 +20,7 @@ const ContentCategory = (props: { group?: string }) => {
}, []); }, []);
const initFetch = async () => { const initFetch = async () => {
const response = await getPublicCategoryData( const response = await getPublicCategoryData(
props.group == "mabes" ? "" : props.group == "mabes" ? "" : props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName : props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "",
props.group == "polda" && poldaName && String(poldaName)?.length > 1 ? poldaName :
props.group == "satker" && satkerName && String(satkerName)?.length > 1 ? "satker-"+satkerName : "",
"", "",
locale == "en" ? true : false locale == "en" ? true : false
); );
@ -55,7 +53,7 @@ const ContentCategory = (props: { group?: string }) => {
<div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid my-3 grid-cols-2 lg:grid-cols-4 gap-4">
{categories?.map((category: any, index: number) => {categories?.map((category: any, index: number) =>
!seeAllValue ? ( !seeAllValue ? (
index < 8 ? ( index < 4 ? (
<Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg"> <Link key={category?.id} href={`all/filter?category=${category?.id}`} className="relative group rounded-md overflow-hidden shadow-md hover:shadow-lg">
<img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" /> <img src={category?.thumbnailLink} className="w-full h-48 sm:h-40 object-cover group-hover:scale-110 transition-transform duration-300" />
<div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2"> <div className="absolute bottom-0 rounded-lg left-0 right-0 bg-gray-400 border-l-4 mb-4 border-[#bb3523] text-white p-2">

8
components/landing-page/header-management.tsx
View File

@ -67,8 +67,8 @@ const HeaderManagement = () => {
return ( return (
<div> <div>
{/* Header */} {/* Header */}
<div className="bg-[#504e52] p-12"> <div className="bg-[#504e52] p-10 lg:p-12">
<div className="flex justify-between mx-10"> <div className="flex flex-col lg:flex-row justify-center lg:justify-between mx-6 lg:mx-10">
<div className="flex items-center gap-2 "> <div className="flex items-center gap-2 ">
<img src="/assets/avatar-profile.png" alt="avatar" className="w-14 h-14" /> <img src="/assets/avatar-profile.png" alt="avatar" className="w-14 h-14" />
<div className="flex flex-col mx-2"> <div className="flex flex-col mx-2">
@ -82,9 +82,9 @@ const HeaderManagement = () => {
</p> </p>
</div> </div>
</div> </div>
<Link href="/profile" className="flex items-center text-white gap-2"> <Link href="/profile" className="flex justify-center items-center text-white gap-2 mt-3 lg:mt-0">
<Icon icon="tdesign:setting-1-filled" /> <Icon icon="tdesign:setting-1-filled" />
Pengaturan <p className="text-sm lg:text-base">Pengaturan</p>
</Link> </Link>
</div> </div>
</div> </div>

8
components/landing-page/hero.tsx
View File

@ -104,28 +104,28 @@ const Hero: React.FC = () => {
<Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[200px]" />
</div> </div>
</div> </div>
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3"> <div className="items-center hidden md:block gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" /> <Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[200px]" />
</div> </div>
</div> </div>
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3"> <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" /> <Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[200px]" />
</div> </div>
</div> </div>
<div className="flex items-center gap-4 max-w-sm mx-auto mb-3"> <div className="hidden md:block items-center gap-4 max-w-sm mx-auto mb-3 lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" /> <Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" /> <Skeleton className="h-4 w-[200px]" />
</div> </div>
</div> </div>
<div className="flex items-center gap-4 max-w-sm mx-auto"> <div className="hidden md:block items-center gap-4 max-w-sm mx-auto lg:flex">
<Skeleton className="h-[73px] w-16 rounded-md" /> <Skeleton className="h-[73px] w-16 rounded-md" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-4 w-[250px]" /> <Skeleton className="h-4 w-[250px]" />

65
components/landing-page/navbar.tsx
View File

@ -693,7 +693,7 @@ const Navbar = () => {
</div> </div>
<div className="border-b-2 border-black"></div> <div className="border-b-2 border-black"></div>
<DialogFooter> <DialogFooter>
<Link href={`/auth/registration?category=${category}`} className="bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit"> <Link href={`/auth/registration?category=${category}`} className="flex justify-center bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit">
Selanjutnya{" "} Selanjutnya{" "}
</Link> </Link>
</DialogFooter> </DialogFooter>
@ -794,43 +794,42 @@ const Navbar = () => {
</NavigationMenuList> </NavigationMenuList>
</NavigationMenu> </NavigationMenu>
<div className="flex flex-row justify-between mx-3"> <div className="flex flex-row justify-between mx-3">
{roleId == undefined ? ( {roleId == undefined ? (
"" ""
) : ( ) : (
<div <div
className="my-auto items-center cursor-pointer" className="my-auto items-center cursor-pointer"
style={
Number(roleId) == 5 || Number(roleId) == 8
? {
display: "none",
}
: {}
}
>
<Link
href="https://spit.humas.polri.go.id"
className=""
target="_blank"
style={ style={
menuActive == "indeks" Number(roleId) == 5 || Number(roleId) == 8
? { ? {
color: "#fff", display: "none",
}
: {
color: "#1F1A17",
} }
: {}
} }
legacyBehavior
> >
<div className="flex flex-row items-center gap-1"> <Link
<Icon icon="gravity-ui:database-fill" fontSize={25} /> href="https://spit.humas.polri.go.id"
<p className="text-xs font-semibold">Raw Data</p> className=""
</div> target="_blank"
</Link> style={
</div> menuActive == "indeks"
)} ? {
color: "#fff",
}
: {
color: "#1F1A17",
}
}
legacyBehavior
>
<div className="flex flex-row items-center gap-1">
<Icon icon="gravity-ui:database-fill" fontSize={25} />
<p className="text-xs font-semibold">Raw Data</p>
</div>
</Link>
</div>
)}
{/* <div className="flex items-center space-x-1 mx-3 text-red-600"> {/* <div className="flex items-center space-x-1 mx-3 text-red-600">
<span className="w-2 h-2 bg-red-500 rounded-full"></span> <span className="w-2 h-2 bg-red-500 rounded-full"></span>
<span className="font-medium">Live</span> <span className="font-medium">Live</span>
@ -1268,7 +1267,7 @@ const Navbar = () => {
</div> </div>
<div className="border-b-2 border-black"></div> <div className="border-b-2 border-black"></div>
<DialogFooter> <DialogFooter>
<Link href={`/auth/registration?category=${category}`} className="bg-red-500 px-4 py-1 rounded-md border border-black text-white" type="submit"> <Link href={`/auth/registration?category=${category}`} className="bg-red-500 flex justify-center px-4 py-1 rounded-md border border-black text-white" type="submit">
Selanjutnya{" "} Selanjutnya{" "}
</Link> </Link>
</DialogFooter> </DialogFooter>

4
components/landing-page/new-content.tsx
View File

@ -105,8 +105,8 @@ const NewContent = (props: { group: string; type: string }) => {
{isLoading ? ( {isLoading ? (
<div className="flex flex-row space-y-3 w-full justify-center items-center gap-10"> <div className="flex flex-row space-y-3 w-full justify-center items-center gap-10">
<Skeleton className="h-[200px] w-[400px] rounded-xl" /> <Skeleton className="h-[200px] w-[400px] rounded-xl" />
<Skeleton className="h-[200px] w-[400px] rounded-xl" /> <Skeleton className="h-[200px] w-[400px] rounded-xl hidden md:block" />
<Skeleton className="h-[200px] w-[400px] rounded-xl" /> <Skeleton className="h-[200px] w-[400px] rounded-xl hidden md:block" />
</div> </div>
) : ( ) : (
<div className="px-0 lg:px-10"> <div className="px-0 lg:px-10">

2
components/landing-page/sidebar-management.tsx
View File

@ -65,7 +65,7 @@ const SidebarManagement = () => {
// Render // Render
if (!hasMounted) return null; if (!hasMounted) return null;
return ( return (
<div className="p-12 w-1/3 "> <div className="p-4 lg:p-12 w-full lg:w-1/3 ">
<div className="border rounded-2xl border-black m-4"> <div className="border rounded-2xl border-black m-4">
<h1 className="text-xl p-5">Tentang Saya</h1> <h1 className="text-xl p-5">Tentang Saya</h1>
<div> <div>