humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing ui

This commit is contained in:
Rama Priyanto 2025-03-26 15:27:09 +07:00
parent 831acbb5da
commit c030aa4444
8 changed files with 121 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/detail/page.tsx
View File

@ -1,7 +0,0 @@
import React from 'react'
export default function Page() {
return (
<div>page</div>
)
}

279
components/form/login.tsx
View File

@ -12,6 +12,8 @@ import {
otpRequest,
otpValidation,
postSignIn,
savePassword,
updateProfile,
} from "@/service/master-user";
import { useRouter } from "next/navigation";
import Swal from "sweetalert2";
@ -56,82 +58,82 @@ export default function Login() {
setAccessData(response?.data?.data);
const profile = await getProfile(response?.data?.data?.access_token);
console.log("PROFILE : ", profile?.data?.data);
// setEmailSetup(profile?.data?.data?.email);
// setProfile(profile?.data?.data);
// setFirstLogin(true);
setEmailSetup(profile?.data?.data?.email);
setProfile(profile?.data?.data);
setFirstLogin(true);
// if (profile?.data?.data?.isFirstLogin) {
// setFirstLogin(true);
// } else {
// const res = await otpRequest(
// profile?.data?.data?.email,
// profile?.data?.data?.fullname
// );
// setNeedOtp(true);
// }
if (profile?.data?.data?.isFirstLogin) {
setFirstLogin(true);
} else {
const res = await otpRequest(
profile?.data?.data?.email,
profile?.data?.data?.fullname
);
setNeedOtp(true);
}
const dateTime: any = new Date();
// const dateTime: any = new Date();
const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
// const newTime: any = dateTime.getTime() + 10 * 60 * 1000;
Cookies.set("access_token", response?.data?.data?.access_token, {
expires: 1,
});
Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
expires: 1,
});
Cookies.set("time_refresh", newTime, {
expires: 1,
});
Cookies.set("is_first_login", "true", {
secure: true,
sameSite: "strict",
});
const resActivity = await saveActivity(
{
activityTypeId: 1,
url: "https://kontenhumas.com/auth",
userId: profile?.data?.data?.id,
},
accessData?.id_token
);
Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
expires: 1,
});
Cookies.set("uie", profile?.data?.data?.id, {
expires: 1,
});
Cookies.set("ufne", profile?.data?.data?.fullname, {
expires: 1,
});
Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
expires: 1,
});
Cookies.set("username", profile?.data?.data?.username, {
expires: 1,
});
Cookies.set("urie", profile?.data?.data?.roleId, {
expires: 1,
});
Cookies.set("roleName", profile?.data?.data?.roleName, {
expires: 1,
});
Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
expires: 1,
});
Cookies.set("ulne", profile?.data?.data?.userLevelId, {
expires: 1,
});
Cookies.set("urce", profile?.data?.data?.roleCode, {
expires: 1,
});
Cookies.set("email", profile?.data?.data?.email, {
expires: 1,
});
router.push("/admin/dashboard");
Cookies.set("status", "login", {
expires: 1,
});
// Cookies.set("access_token", response?.data?.data?.access_token, {
// expires: 1,
// });
// Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
// expires: 1,
// });
// Cookies.set("time_refresh", newTime, {
// expires: 1,
// });
// Cookies.set("is_first_login", "true", {
// secure: true,
// sameSite: "strict",
// });
// const resActivity = await saveActivity(
// {
// activityTypeId: 1,
// url: "https://kontenhumas.com/auth",
// userId: profile?.data?.data?.id,
// },
// accessData?.id_token
// );
// Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
// expires: 1,
// });
// Cookies.set("uie", profile?.data?.data?.id, {
// expires: 1,
// });
// Cookies.set("ufne", profile?.data?.data?.fullname, {
// expires: 1,
// });
// Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
// expires: 1,
// });
// Cookies.set("username", profile?.data?.data?.username, {
// expires: 1,
// });
// Cookies.set("urie", profile?.data?.data?.roleId, {
// expires: 1,
// });
// Cookies.set("roleName", profile?.data?.data?.roleName, {
// expires: 1,
// });
// Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
// expires: 1,
// });
// Cookies.set("ulne", profile?.data?.data?.userLevelId, {
// expires: 1,
// });
// Cookies.set("urce", profile?.data?.data?.roleCode, {
// expires: 1,
// });
// Cookies.set("email", profile?.data?.data?.email, {
// expires: 1,
// });
// router.push("/admin/dashboard");
// Cookies.set("status", "login", {
// expires: 1,
// });
close();
}
@ -251,51 +253,28 @@ export default function Login() {
close();
};
const generatePassword = () => {
const length = Math.floor(Math.random() * 9) + 8;
const submitResetEmail = async () => {
const req = {
email: emailSetup,
fullName: profile?.fullname,
username: profile?.username,
userLevelId: profile?.userLevelId,
userRoleId: profile?.userRoleId,
};
const upperCaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lowerCaseChars = "abcdefghijklmnopqrstuvwxyz";
const numberChars = "0123456789";
const specialChars = "!@#$%^&*";
const allChars =
upperCaseChars + lowerCaseChars + numberChars + specialChars;
let generatedPassword = "";
generatedPassword +=
upperCaseChars[Math.floor(Math.random() * upperCaseChars.length)];
generatedPassword +=
specialChars[Math.floor(Math.random() * specialChars.length)];
generatedPassword +=
numberChars[Math.floor(Math.random() * numberChars.length)];
generatedPassword +=
lowerCaseChars[Math.floor(Math.random() * lowerCaseChars.length)];
for (let i = generatedPassword.length; i < length; i++) {
generatedPassword +=
allChars[Math.floor(Math.random() * allChars.length)];
const res = await updateProfile(req);
if (res?.error) {
error(res.message);
return false;
}
close();
generatedPassword = generatedPassword
.split("")
.sort(() => 0.5 - Math.random())
.join("");
setPasswordSetup(generatedPassword);
console.log("profile", req, passwordSetup, confPasswordSetup);
};
return (
<div className="flex flex-row h-full">
<div
// style={{
// backgroundImage: "url(headerbanner1.png)",
// backgroundRepeat: "no-repeat",
// backgroundSize: "cover",
// backgroundPosition: "left center",
// }}
className="h-screen hidden md:block md:w-3/5"
>
<div className="h-screen hidden md:block md:w-3/5">
<Image
src="/headerbanner1.png"
alt="login-image"
@ -307,7 +286,7 @@ export default function Login() {
height={480}
alt="icon"
src="/divhumas.png"
className="w-[240px] !h-[240px]"
className="w-[180px] !h-[180px]"
/>
</Link>
</div>
@ -327,85 +306,11 @@ export default function Login() {
value={emailSetup}
onValueChange={setEmailSetup}
/>
<p className="my-2 text-white">Password Baru</p>
<Input
isRequired
className="my-2"
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
endContent={
<button
className="focus:outline-none"
type="button"
onClick={() =>
setIsVisibleSetup([!isVisibleSetup[0], isVisibleSetup[1]])
}
>
{isVisibleSetup[0] ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisibleSetup[0] ? "text" : "password"}
label=""
placeholder=""
value={passwordSetup}
onValueChange={setPasswordSetup}
/>
<p className="my-2 text-white">Konfirmasi Password Baru</p>
<Input
isRequired
className="my-2"
classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
endContent={
<button
className="focus:outline-none"
type="button"
onClick={() =>
setIsVisibleSetup([isVisibleSetup[0], !isVisibleSetup[1]])
}
>
{isVisibleSetup[1] ? (
<EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
) : (
<EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
)}
</button>
}
type={isVisibleSetup[1] ? "text" : "password"}
label=""
placeholder=""
value={confPasswordSetup}
onValueChange={setConfPasswordSetup}
/>
<a
className="cursor-pointer text-[#DD8306]"
onClick={generatePassword}
>
Generate Password
</a>
<PasswordChecklist
rules={["minLength", "specialChar", "number", "capital", "match"]}
minLength={8}
value={passwordSetup}
valueAgain={confPasswordSetup}
onChange={(isValid) => {
setIsValidPassword(isValid);
}}
className="text-white text-sm my-3"
messages={{
minLength: "Kata sandi harus lebih dari 8 karakter",
specialChar: "Kata sandi harus mengandung karakter khusus",
number: "Kata sandi harus mengandung angka",
capital: "Kata sandi harus mengandung huruf kapital",
match: "Kata sandi cocok",
}}
/>
<a className="text-[#DD8306] text-sm">Validasi Email</a>
<Button
size="lg"
className="w-fit bg-[#DD8306] rounded-md font-semibold my-3 text-white"
onPress={submitOtp}
onPress={submitResetEmail}
>
Submit
</Button>

22
components/landing/HeaderNews.tsx
View File

@ -67,7 +67,7 @@ export default function HeaderNews() {
return (
<div className="w-full">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[55vh] w-full lg:w-[75%] lg:mx-auto">
<div className="flex flex-col lg:flex-row gap-3 lg:gap-8 bg-white dark:bg-black p-1 lg:p-8 lg:h-[540px] w-full lg:w-[75%] lg:mx-auto">
<div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
{article ? (
<Swiper
@ -109,7 +109,7 @@ export default function HeaderNews() {
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover"
className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover !rounded-b-none"
/>
<CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">
@ -138,11 +138,11 @@ export default function HeaderNews() {
<CircularProgress aria-label="Loading..." size="lg" />
)}
</div>
<div className="w-[90%] lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[40vh] lg:h-[50vh] mx-auto">
<div className="w-[90%] lg:w-[25%] p-2 dark:bg-stone-800 bg-[#f0f0f0] dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[40vh] lg:h-[500px] mx-auto">
<p className="text-base font-bold text-center dark:text-white text-black">
{t("berita")}
</p>
<ScrollShadow hideScrollBar className="h-[29vh] lg:h-[39vh] ">
<ScrollShadow hideScrollBar className="h-[29vh] lg:h-[400px] ">
{hotNews?.map((data: any, index: number) => (
<div
className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
@ -198,7 +198,7 @@ export default function HeaderNews() {
</div>
</div>
<div className="hidden lg:block w-full lg:w-[50%] h-[50vh]">
<div className="hidden lg:flex w-full lg:w-[50%] h-[500px]">
{article ? (
<Swiper
centeredSlides={true}
@ -227,11 +227,11 @@ export default function HeaderNews() {
}}
>
{article?.map((newsItem: any, index: number) => (
<SwiperSlide key={newsItem?.id} className="h-[50vh]">
<SwiperSlide key={newsItem?.id} className="!w-full h-[50vh]">
<Card
isFooterBlurred
radius="lg"
className="border-none h-[50vh] shadow-none"
className="border-none h-[50vh] lg:h-[500px] shadow-none"
>
<Image
alt="headernews"
@ -240,7 +240,7 @@ export default function HeaderNews() {
? "/no-image.jpg"
: newsItem?.thumbnailUrl
}
className="w-full !h-[50vh] object-cover rounded-lg"
className="!w-full !h-[500px] !object-cover !rounded-none"
/>
<CardFooter className="mb-1 max-h-[20vh] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
@ -273,11 +273,11 @@ export default function HeaderNews() {
<CircularProgress aria-label="Loading..." size="lg" />
)}
</div>
<div className="w-[90%] lg:w-[25%] h-[50vh] rounded-md text-white dark:text-black mx-auto lg:mx-0">
<div className="w-[90%] lg:w-[25%] h-[50vh] lg:h-[500px] rounded-md text-white dark:text-black mx-auto lg:mx-0">
{/* <GPRKominfo /> */}
{selectedTab === "media" ? (
<div className="lg:!h-[50vh] p-2 dark:bg-stone-800 bg-[#f0f0f0] text-black dark:text-white rounded-lg">
<div className="lg:h-[500px] p-2 dark:bg-stone-800 bg-[#f0f0f0] text-black dark:text-white rounded-lg">
<div className="text-sm flex flex-row gap-3 mx-2 mb-2">
<a
onClick={() => setSelectedTab("media")}
@ -294,7 +294,7 @@ export default function HeaderNews() {
Video Virtual
</a>
</div>
<ScrollShadow hideScrollBar className="h-[39vh]">
<ScrollShadow hideScrollBar className="h-[39vh] lg:h-[400px]">
{article?.map((list: any, index: number) => (
<div
key={list?.id}

4
components/landing/banner-new.tsx
View File

@ -401,14 +401,14 @@ export default function BannerHumasNew() {
<div className="bg-white rounded-md py-0.5 px-1">
<ThemeSwitch />
</div>
<a
{/* <a
className="cursor-pointer"
onClick={() =>
language === "id" ? setLanguage("en") : setLanguage("id")
}
>
{language === "id" ? <IdnIcon /> : <UKIcon />}
</a>
</a> */}
</div>
</div>
</div>

12
components/landing/digital-services.tsx
View File

@ -20,10 +20,10 @@ export default function DigitalServices() {
Polda Satker dan Layanan Digital
</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-5 p-4 justify-center">
<div className="grid grid-cols-1 lg:grid-cols-5 p-4 justify-center lg:gap-3">
<a
onClick={() => setIsPoldaOpen(true)}
className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
>
<Image
src="/indonesia-map.png"
@ -39,7 +39,7 @@ export default function DigitalServices() {
</a>
<a
onClick={() => setIsSatkerOpen(true)}
className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
>
<Image
src="/satker.png"
@ -55,7 +55,7 @@ export default function DigitalServices() {
</a>
<a
onClick={() => setIsAppsOpen(true)}
className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
>
<Image
src="/presisi.png"
@ -71,7 +71,7 @@ export default function DigitalServices() {
</a>
<a
onClick={() => setIsSuggestionOpen(true)}
className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
>
<Image
src="/kritik-saran.png"
@ -87,7 +87,7 @@ export default function DigitalServices() {
</a>
<Link
href="https://survey.zohopublic.com/zs/EYCOBO"
className="group shadow-lg rounded-lg w-full lg:w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
className="group shadow-lg rounded-lg w-full h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
>
<Image
src="/survey.png"

8
components/landing/footer-new.tsx
View File

@ -98,7 +98,7 @@ export default function FooterNew(props: { margin?: boolean }) {
/>
</Link>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:px-10">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div className="flex flex-col gap-1 text-md font-light">
<p className="text-lg font-semibold">Tentang Kami</p>
<div className="flex flex-row gap-2 items-center">
@ -123,7 +123,7 @@ export default function FooterNew(props: { margin?: boolean }) {
</span>
</div>
</div>
<div className="flex flex-col gap-4 text-md">
<div className="flex flex-col gap-4 text-md items-center">
<p className="text-lg font-semibold">
Download Aplikasi Polri Presisi
</p>
@ -133,7 +133,7 @@ export default function FooterNew(props: { margin?: boolean }) {
className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
>
<LandingAppleIcon size={36} />
<div className="flex flex-col gap-0 leading-none font-light mr-4">
<div className="flex flex-col gap-0 leading-none font-light mr-1">
<p className="text-[10px]">Download on the</p>
<p className="text-lg font-semibold">App Store</p>
</div>
@ -143,7 +143,7 @@ export default function FooterNew(props: { margin?: boolean }) {
className="flex flex-row p-1 border-1 border-black dark:border-white rounded-lg items-center"
>
<LandingPlayStoreIcon size={30} />
<div className="flex flex-col gap-0 leading-none font-light mr-4">
<div className="flex flex-col gap-0 leading-none font-light mr-1">
<p className="text-[10px]">GET IT ON</p>
<p className="text-lg font-semibold">Google Play</p>
</div>

8
components/layout/navbar/NavbarHumas.tsx
View File

@ -1287,14 +1287,14 @@ export default function NavbarHumas(props: { size: string }) {
<div className="bg-gray-200 dark:bg-default-900 rounded-md py-0.5 px-1">
<ThemeSwitch />
</div>
<a
{/* <a
className="cursor-pointer"
onClick={() =>
language === "id" ? setLanguage("en") : setLanguage("id")
}
>
{language === "id" ? <IdnIcon /> : <UKIcon />}
</a>
</a> */}
</div>
</div>
<div className="flex items-center gap-3">
@ -1331,14 +1331,14 @@ export default function NavbarHumas(props: { size: string }) {
/>
</Link>
<div className="flex flex-row gap-3 items-center">
<a
{/* <a
className="cursor-pointer"
onClick={() =>
language === "id" ? setLanguage("en") : setLanguage("id")
}
>
{language === "id" ? <IdnIcon size={24} /> : <UKIcon />}
</a>
</a> */}
<ThemeSwitch />
<NavbarMenuToggle />
<NavbarMenu>

28
components/main/detail/new-detail.tsx
View File

@ -34,19 +34,10 @@ export default function NewsDetailPage(props: { datas: any }) {
const response = await getListArticle(req);
setArticles(response?.data?.data);
}
const initFetch = async () => {
loading();
const res = await getArticleById(id?.split("-")[0]);
const data = res?.data?.data;
setDetailArticle(data);
close();
};
const sendActivity = async () => {
let req: any = {
activityTypeId: 2,
url: "https://kontenhumas.com/" + pathname,
url: "https://kontenhumas.com" + pathname,
articleId: Number(id?.split("-")[0]),
};
if (uid) {
@ -55,24 +46,9 @@ export default function NewsDetailPage(props: { datas: any }) {
const resActivity = await saveActivity(req, token);
};
return (
<>
{/* {" "}
<Head>
<title>{detailArticle?.title}</title>
<meta property="og:title" content={detailArticle?.title} />
<meta property="og:description" content={detailArticle?.description} />
<meta property="og:image" content={detailArticle?.thumbnailUrl} />
<meta
property="og:url"
content={`https://kontenhumas.com/news/detail/${detailArticle?.id}-${detailArticle?.slug}`}
/>
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={detailArticle?.title} />
<meta name="twitter:description" content={detailArticle?.description} />
<meta name="twitter:image" content={detailArticle?.thumbnailUrl} />
</Head> */}
<div className="bg-white dark:bg-stone-900">
<div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
<div className="flex flex-row gap-4 items-end ">