feat:add input otp sign in, add header table kurator
This commit is contained in:
parent
7164e99d17
commit
c5350a9dbd
|
|
@ -61,6 +61,12 @@ const columns: ColumnDef<any>[] = [
|
|||
cell: ({ row }) => <span>{row.getValue("experience")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
accessorKey: "experience",
|
||||
header: "Posisi",
|
||||
cell: ({ row }) => <span>{row.getValue("experience")}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
id: "actions",
|
||||
accessorKey: "action",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,13 @@ import {
|
|||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { useEffect, useState } from "react";
|
||||
import { AdministrationLevelList, getListCompetencies, getListExperiences, saveUserInternal, saveUserRolePlacements } from "@/service/management-user/management-user";
|
||||
import {
|
||||
AdministrationLevelList,
|
||||
getListCompetencies,
|
||||
getListExperiences,
|
||||
saveUserInternal,
|
||||
saveUserRolePlacements,
|
||||
} from "@/service/management-user/management-user";
|
||||
import { loading } from "@/config/swal";
|
||||
|
||||
const FormSchema = z.object({
|
||||
|
|
@ -58,7 +64,7 @@ export type Placements = {
|
|||
index: number;
|
||||
roleId?: string;
|
||||
userLevelId?: number;
|
||||
}
|
||||
};
|
||||
|
||||
export default function AddExpertForm() {
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
|
@ -67,7 +73,9 @@ export default function AddExpertForm() {
|
|||
resolver: zodResolver(FormSchema),
|
||||
});
|
||||
const [incrementId, setIncrementId] = useState(1);
|
||||
const [placementRows, setPlacementRows] = useState<Placements[]>([{ index: 0, roleId: "", userLevelId: 0 }]);
|
||||
const [placementRows, setPlacementRows] = useState<Placements[]>([
|
||||
{ index: 0, roleId: "", userLevelId: 0 },
|
||||
]);
|
||||
const [userCompetencies, setUserCompetencies] = useState<any>();
|
||||
const [userExperiences, setUserExperiences] = useState<any>();
|
||||
const [userLevels, setUserLevels] = useState<any>();
|
||||
|
|
@ -80,7 +88,7 @@ export default function AddExpertForm() {
|
|||
{
|
||||
id: "12",
|
||||
name: "Kurator",
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||
|
|
@ -113,12 +121,12 @@ export default function AddExpertForm() {
|
|||
userCompetencyId: data.skills,
|
||||
userExperienceId: data.experiences,
|
||||
companyName: data.company,
|
||||
}
|
||||
};
|
||||
|
||||
loading();
|
||||
const res = await saveUserInternal(dataReq);
|
||||
const resData = res?.data?.data;
|
||||
const userProfileId = resData.id;
|
||||
const userProfileId = resData?.id;
|
||||
|
||||
var placementArr: any[] = [];
|
||||
placementRows.forEach((row: any) => {
|
||||
|
|
@ -131,15 +139,14 @@ export default function AddExpertForm() {
|
|||
|
||||
const dataReq2 = {
|
||||
userId: userProfileId,
|
||||
placements: placementArr
|
||||
}
|
||||
placements: placementArr,
|
||||
};
|
||||
const res2 = await saveUserRolePlacements(dataReq2);
|
||||
const resData2 = res2?.data?.data;
|
||||
|
||||
success("/admin/add-experts");
|
||||
};
|
||||
|
||||
|
||||
function success(redirect: string): void {
|
||||
MySwal.fire({
|
||||
title: '<p class="text-green-600 font-bold">Sukses</p>',
|
||||
|
|
@ -180,7 +187,6 @@ export default function AddExpertForm() {
|
|||
setUserLevels(levelsArr);
|
||||
}
|
||||
|
||||
|
||||
function successSubmit() {
|
||||
MySwal.fire({
|
||||
title: "Sukses",
|
||||
|
|
@ -194,7 +200,11 @@ export default function AddExpertForm() {
|
|||
});
|
||||
}
|
||||
|
||||
const handleSelectionChange = (index: number, type: "roleId" | "userLevelId", value: string) => {
|
||||
const handleSelectionChange = (
|
||||
index: number,
|
||||
type: "roleId" | "userLevelId",
|
||||
value: string
|
||||
) => {
|
||||
setPlacementRows((prevRows) =>
|
||||
prevRows.map((row) =>
|
||||
row.index === index ? { ...row, [type]: value } : row
|
||||
|
|
@ -202,7 +212,6 @@ export default function AddExpertForm() {
|
|||
);
|
||||
};
|
||||
|
||||
|
||||
const handleRemoveRow = (index: number) => {
|
||||
console.log(index);
|
||||
console.log(placementRows);
|
||||
|
|
@ -212,7 +221,10 @@ export default function AddExpertForm() {
|
|||
};
|
||||
|
||||
const handleAddRow = () => {
|
||||
setPlacementRows((prevRows: any) => [...prevRows, { index: incrementId, roleId: "", userLevelId: 0 }]);
|
||||
setPlacementRows((prevRows: any) => [
|
||||
...prevRows,
|
||||
{ index: incrementId, roleId: "", userLevelId: 0 },
|
||||
]);
|
||||
setIncrementId((prevId) => prevId + 1);
|
||||
};
|
||||
|
||||
|
|
@ -375,7 +387,11 @@ export default function AddExpertForm() {
|
|||
<FormLabel>Penempatan</FormLabel>
|
||||
{placementRows?.map((row: any) => (
|
||||
<div key={row.index} className="flex items-center gap-2 my-2">
|
||||
<Select onValueChange={(e) => handleSelectionChange(row.index, "roleId", e)} >
|
||||
<Select
|
||||
onValueChange={(e) =>
|
||||
handleSelectionChange(row.index, "roleId", e)
|
||||
}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Pilih Role" />
|
||||
|
|
@ -389,7 +405,11 @@ export default function AddExpertForm() {
|
|||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Select onValueChange={(e) => handleSelectionChange(row.index, "userLevelId", e)}>
|
||||
<Select
|
||||
onValueChange={(e) =>
|
||||
handleSelectionChange(row.index, "userLevelId", e)
|
||||
}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Pilih User Level" />
|
||||
|
|
@ -415,11 +435,7 @@ export default function AddExpertForm() {
|
|||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
type="button"
|
||||
size="md"
|
||||
onClick={() => handleAddRow()}
|
||||
>
|
||||
<Button type="button" size="md" onClick={() => handleAddRow()}>
|
||||
Tambah
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,11 +25,23 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
|
|||
<div className="lg:block hidden flex-1 overflow-hidden text-[40px] leading-[48px] text-default-600 relative z-[1] bg-default-50">
|
||||
<div className="max-w-[520px] pt-16 ps-20 ">
|
||||
<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"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="absolute left-0 2xl:bottom-[-160px] bottom-[-130px] h-full w-full z-[-1]">
|
||||
<Image src="/assets/vector-login.svg" alt="" width={300} height={300} className="mb-10 w-full h-full" />
|
||||
<Image
|
||||
src="/assets/vector-login.svg"
|
||||
alt=""
|
||||
width={300}
|
||||
height={300}
|
||||
className="mb-10 w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 relative">
|
||||
|
|
@ -40,12 +52,12 @@ const Login = ({ params: { locale } }: { params: { locale: string } }) => {
|
|||
<Logo />
|
||||
</Link>
|
||||
</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">{t("logInPlease")}</h4>
|
||||
<div className="text-default-500 text-base">
|
||||
{t("acc")} <span className="text-red-500">{t("reg")}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<LoginForm />
|
||||
{/* <div className="relative border-b-[#9AA2AF] border-opacity-[16%] border-b pt-6">
|
||||
<div className="absolute inline-block bg-default-50 dark:bg-default-100 left-1/2 top-1/2 transform -translate-x-1/2 px-4 min-w-max text-sm text-default-500 font-normal">
|
||||
|
|
|
|||
|
|
@ -813,7 +813,7 @@ export default function FormConvertSPIT() {
|
|||
<Label className="text-xl">Penempatan file</Label>
|
||||
</div>
|
||||
{files?.length > 1 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
<div className="flex flex-wrap gap-2 mt-2 justify-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="all-content"
|
||||
|
|
@ -879,20 +879,12 @@ export default function FormConvertSPIT() {
|
|||
>
|
||||
<img
|
||||
src={file.contentFile}
|
||||
className="w-[150px] rounded-md"
|
||||
className="w-[180px] rounded-md"
|
||||
/>
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex flex-col gap-2 w-full pl-4">
|
||||
<div className="flex justify-between text-sm">
|
||||
{file.fileName}
|
||||
{/* <a
|
||||
onClick={() =>
|
||||
handleDeleteFileApproval(file.id)
|
||||
}
|
||||
>
|
||||
<Icon icon="humbleicons:times" color="red" />
|
||||
</a> */}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
"use client";
|
||||
import { formatDateToIndonesian, textEllipsis } from "@/utils/globals";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import "swiper/css/bundle";
|
||||
|
|
@ -5,9 +6,27 @@ import "swiper/css/navigation";
|
|||
import { getHeroData } from "@/service/landing/landing";
|
||||
import Link from "next/link";
|
||||
import { useParams, usePathname, useRouter } from "next/navigation";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from "@/components/ui/carousel";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import Image from "next/image";
|
||||
import { TabsList, TabsTrigger, TabsContent } from "@radix-ui/react-tabs";
|
||||
import { Input } from "postcss";
|
||||
import { Button } from "react-day-picker";
|
||||
import { Label } from "recharts";
|
||||
import {
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
} from "../ui/card";
|
||||
import { Tabs } from "../ui/tabs";
|
||||
|
||||
const Hero: React.FC = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -52,7 +71,7 @@ const Hero: React.FC = () => {
|
|||
console.log(response);
|
||||
setHeroData(response?.data?.data?.content);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row items-start justify-center gap-8 px-4 lg:px-20 py-4 mx-auto w-auto mt-6">
|
||||
{/* Section Gambar Utama */}
|
||||
|
|
@ -70,15 +89,31 @@ const Hero: React.FC = () => {
|
|||
{heroData?.map((list: any) => (
|
||||
<CarouselItem key={list?.id}>
|
||||
<div className="relative h-[310px] lg:h-[420px]">
|
||||
<Image src={list?.thumbnailLink} alt="gambar-utama" width={1920} height={1080} className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover" />
|
||||
<Image
|
||||
src={list?.thumbnailLink}
|
||||
alt="gambar-utama"
|
||||
width={1920}
|
||||
height={1080}
|
||||
className="w-full lg:w-[850px] h-[310px] lg:h-[420px] rounded-lg object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-transparent backdrop-blur-sm text-black dark:text-white p-4 rounded-b-lg">
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">{list?.categoryName}</span>
|
||||
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-xs px-2 py-1">
|
||||
{list?.categoryName}
|
||||
</span>
|
||||
<Link href={`${locale}/image/detail/${list?.slug}`}>
|
||||
<h2 className="text-lg text-slate-200 dark:text-white font-bold mt-2">{list?.title}</h2>
|
||||
<h2 className="text-lg text-slate-200 dark:text-white font-bold mt-2">
|
||||
{list?.title}
|
||||
</h2>
|
||||
</Link>
|
||||
<p className="text-xs flex flex-row items-center text-slate-200 dark:text-white gap-1 mt-1">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))} {list?.timezone ? list?.timezone : "WIB"}|{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
{formatDateToIndonesian(new Date(list?.createdAt))}{" "}
|
||||
{list?.timezone ? list?.timezone : "WIB"}|{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.2em"
|
||||
height="1.2em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
|
|
@ -137,31 +172,61 @@ const Hero: React.FC = () => {
|
|||
</div>
|
||||
</>
|
||||
) : (
|
||||
<ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
||||
{heroData?.map((item: any) => (
|
||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
|
||||
<div className="flex-shrink-0 w-24 rounded-lg">
|
||||
<Image width={720} height={480} src={item?.thumbnailLink} alt={item?.title} className="w-full h-[73px] object-cover rounded-lg" />
|
||||
</div>
|
||||
<div className="w-[280px] lg:w-auto">
|
||||
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">{item?.categoryName}</span>
|
||||
<Link href={`${locale}/image/detail/${item?.slug}`}>
|
||||
<h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">{item?.title}</h3>
|
||||
</Link>
|
||||
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))} {item?.timezone ? item?.timezone : "WIB"} |{" "}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>
|
||||
<div className="my-3">
|
||||
<Tabs defaultValue="national" className="w-[400px] ">
|
||||
<TabsList className="grid w-full grid-cols-3" color="black">
|
||||
<TabsTrigger value="national">Nasional</TabsTrigger>
|
||||
<TabsTrigger value="wilayah">Polda</TabsTrigger>
|
||||
<TabsTrigger value="satker">Satker</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="national"></TabsContent>
|
||||
<TabsContent value="wilayah"></TabsContent>
|
||||
<TabsContent value="satker"></TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
<ul className="py-4 lg:py-0 flex flex-row lg:flex-col gap-4 flex-nowrap w-[95vw] lg:w-auto overflow-x-auto">
|
||||
{heroData?.map((item: any) => (
|
||||
<li key={item?.id} className="flex gap-4 flex-row lg:w-full ">
|
||||
<div className="flex-shrink-0 w-24 rounded-lg">
|
||||
<Image
|
||||
width={720}
|
||||
height={480}
|
||||
src={item?.thumbnailLink}
|
||||
alt={item?.title}
|
||||
className="w-full h-[73px] object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[280px] lg:w-auto">
|
||||
<span className="text-white bg-[#bb3523] px-4 py-1 rounded-lg flex text-[8px] font-bold uppercase w-fit">
|
||||
{item?.categoryName}
|
||||
</span>
|
||||
<Link href={`${locale}/image/detail/${item?.slug}`}>
|
||||
<h3 className="text-base font-bold mt-2 h-6 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
|
||||
{item?.title}
|
||||
</h3>
|
||||
</Link>
|
||||
<p className="text-[10px] flex flex-row items-center gap-1 text-gray-500 mt-1">
|
||||
{formatDateToIndonesian(new Date(item?.createdAt))}{" "}
|
||||
{item?.timezone ? item?.timezone : "WIB"} |{" "}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1.2em"
|
||||
height="1.2em"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
|
||||
/>
|
||||
</svg>{" "}
|
||||
{item?.clickCount}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useTranslations } from "next-intl";
|
|||
|
||||
export default function NewsTicker() {
|
||||
const [article, setArticle] = useState<any>([]);
|
||||
const [currentNewsIndex, setCurrentNewsIndex] = useState(0);
|
||||
const [currentNewsIndex, setCurrentNewsIndex] = useState<any>(0);
|
||||
const [animate, setAnimate] = useState(false);
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
|
|
@ -38,13 +38,13 @@ export default function NewsTicker() {
|
|||
triggerAnimation(newIndex);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
triggerAnimation((currentNewsIndex + 1) % article.length);
|
||||
}, 7000);
|
||||
// useEffect(() => {
|
||||
// const interval = setInterval(() => {
|
||||
// triggerAnimation((currentNewsIndex + 1) % article.length);
|
||||
// }, 7000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [article?.length]);
|
||||
// return () => clearInterval(interval);
|
||||
// }, [article?.length]);
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 z-50 flex flex-row h-[60px] gap-3 w-full justify-between dark:bg-stone-800 bg-gray-50">
|
||||
|
|
@ -52,20 +52,42 @@ export default function NewsTicker() {
|
|||
<span className="mr-2"></span> {t("breakingNews")}
|
||||
<div className="absolute right-0 top-0 h-full w-4 bg-[#bb3523] transform translate-x-full clip-path-triangle"></div>
|
||||
</div>
|
||||
<div className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"}`}>
|
||||
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="hidden lg:block">
|
||||
<p className="text-sm lg:text-base">{article[currentNewsIndex]?.title}</p>
|
||||
{/* <div
|
||||
className={`w-full px-5 py-1 flex flex-col gap-1 transition-transform duration-300 ${
|
||||
animate ? "opacity-0 translate-y-5" : "opacity-100 translate-y-0"
|
||||
}`}
|
||||
>
|
||||
<Link
|
||||
href={`news/detail/${article[currentNewsIndex]?.id}`}
|
||||
className="hidden lg:block"
|
||||
>
|
||||
<p className="text-sm lg:text-base">
|
||||
{article[currentNewsIndex]?.title}
|
||||
</p>
|
||||
</Link>
|
||||
<Link href={`news/detail/${article[currentNewsIndex]?.id}`} className="lg:hidden">
|
||||
<p className="text-sm lg:text-base">{textEllipsis(article[currentNewsIndex]?.title, 28)}</p>
|
||||
<Link
|
||||
href={`news/detail/${article[currentNewsIndex]?.id}`}
|
||||
className="lg:hidden"
|
||||
>
|
||||
<p className="text-sm lg:text-base">
|
||||
{textEllipsis(article[currentNewsIndex]?.title, 28)}
|
||||
</p>
|
||||
</Link>
|
||||
<p className="text-xs">{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}</p>
|
||||
</div>
|
||||
<p className="text-xs">
|
||||
{formatDateToIndonesian(article[currentNewsIndex]?.createdAt)}
|
||||
</p>
|
||||
</div> */}
|
||||
<div className="flex flex-row text-white h-full gap-[1px]">
|
||||
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handlePrev()}>
|
||||
<a
|
||||
className="bg-[#bb3523] h-full flex items-center"
|
||||
onClick={() => handlePrev()}
|
||||
>
|
||||
<Icon icon="ic:twotone-arrow-left" fontSize={30} />
|
||||
</a>
|
||||
<a className="bg-[#bb3523] h-full flex items-center" onClick={() => handleNext()}>
|
||||
<a
|
||||
className="bg-[#bb3523] h-full flex items-center"
|
||||
onClick={() => handleNext()}
|
||||
>
|
||||
<Icon icon="ic:twotone-arrow-right" fontSize={30} />
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
"use client";
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
|
@ -11,12 +11,19 @@ import { zodResolver } from "@hookform/resolvers/zod";
|
|||
import { z } from "zod";
|
||||
import { cn, setCookiesEncrypt } from "@/lib/utils";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { getProfile, login } from "@/service/auth";
|
||||
import { getProfile, login, requestOTP } from "@/service/auth";
|
||||
import { toast } from "sonner";
|
||||
import { useRouter } from "@/components/navigation";
|
||||
import { warning } from "@/lib/swal";
|
||||
import { Link } from "@/i18n/routing";
|
||||
import { useTranslations } from "next-intl";
|
||||
import {
|
||||
InputOTP,
|
||||
InputOTPGroup,
|
||||
InputOTPSeparator,
|
||||
InputOTPSlot,
|
||||
} from "@/components/ui/input-otp";
|
||||
import { error, loading } from "@/config/swal";
|
||||
|
||||
// Schema validasi menggunakan zod
|
||||
const schema = z.object({
|
||||
|
|
@ -38,6 +45,24 @@ const LoginForm = () => {
|
|||
const [passwordType, setPasswordType] = React.useState("password");
|
||||
const t = useTranslations("LandingPage");
|
||||
|
||||
const [isOtpStep, setIsOtpStep] = useState(false);
|
||||
const [otpValue, setOtpValue] = useState("");
|
||||
const [userIdentity] = useState();
|
||||
const [email, setEmail] = useState();
|
||||
const [category, setCategory] = useState("5");
|
||||
|
||||
const handleSignInClick = () => {
|
||||
handleSendOTP();
|
||||
setIsOtpStep(true);
|
||||
};
|
||||
|
||||
const [otp1, setOtp1] = useState();
|
||||
const [otp2, setOtp2] = useState();
|
||||
const [otp3, setOtp3] = useState();
|
||||
const [otp4, setOtp4] = useState();
|
||||
const [otp5, setOtp5] = useState();
|
||||
const [otp6, setOtp6] = useState();
|
||||
|
||||
const togglePasswordType = () => {
|
||||
setPasswordType((prevType) =>
|
||||
prevType === "password" ? "text" : "password"
|
||||
|
|
@ -53,6 +78,40 @@ const LoginForm = () => {
|
|||
mode: "all",
|
||||
});
|
||||
|
||||
const handleTypeOTP = (event: any) => {
|
||||
const { form } = event.target;
|
||||
const index = [...form].indexOf(event.target);
|
||||
form.elements[index + 1].focus();
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
// const handleNextStep = () => {
|
||||
// setIsOtpStep(true);
|
||||
// };
|
||||
|
||||
const handleSendOTP = async () => {
|
||||
console.log(userIdentity, email);
|
||||
|
||||
console.log("UMUM");
|
||||
if (email != "") {
|
||||
const data = {
|
||||
memberIdentity: null,
|
||||
email: "",
|
||||
category,
|
||||
};
|
||||
|
||||
// loading();
|
||||
const response = await requestOTP(data);
|
||||
|
||||
if (response.error) {
|
||||
error(response.message);
|
||||
return false;
|
||||
}
|
||||
|
||||
close();
|
||||
}
|
||||
};
|
||||
|
||||
// Fungsi submit form
|
||||
const onSubmit: SubmitHandler<LoginFormValues> = async (data) => {
|
||||
try {
|
||||
|
|
@ -202,77 +261,129 @@ const LoginForm = () => {
|
|||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="mt-5 2xl:mt-7 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username" className="font-medium text-default-600">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("username")}
|
||||
id="username"
|
||||
type="username"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
{!isOtpStep && (
|
||||
<>
|
||||
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
||||
<h4 className="font-semibold text-3xl text-left">
|
||||
{t("logInPlease")}
|
||||
</h4>
|
||||
<div className="text-default-500 text-base">
|
||||
{t("acc")} <span className="text-red-500">{t("reg")}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-3.5 space-y-2">
|
||||
<Label htmlFor="password" className="mb-2 font-medium text-default-600">
|
||||
{t("password")}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("password")}
|
||||
id="password"
|
||||
type={passwordType}
|
||||
className="peer"
|
||||
/>
|
||||
<div
|
||||
className="absolute top-1/2 -translate-y-1/2 ltr:right-4 rtl:left-4 cursor-pointer"
|
||||
onClick={togglePasswordType}
|
||||
>
|
||||
{passwordType === "password" ? (
|
||||
<Icon icon="heroicons:eye" className="w-5 h-5 text-default-400" />
|
||||
) : (
|
||||
<Icon
|
||||
icon="heroicons:eye-slash"
|
||||
className="w-5 h-5 text-default-400"
|
||||
/>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="username" className="font-medium text-default-600">
|
||||
Username
|
||||
</Label>
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("username")}
|
||||
id="username"
|
||||
type="text"
|
||||
className={cn("", {
|
||||
"border-destructive": errors.username,
|
||||
})}
|
||||
/>
|
||||
{errors.username?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.username.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{errors.password?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="checkbox" defaultChecked />
|
||||
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
|
||||
</div>
|
||||
<Link
|
||||
href="/auth/forgot-password"
|
||||
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
|
||||
>
|
||||
{t("forgotPass")}
|
||||
</Link>
|
||||
</div>
|
||||
<Button fullWidth disabled={isPending}>
|
||||
{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{isPending ? "Loading..." : "Sign In"}
|
||||
</Button>
|
||||
<div className="mt-3.5 space-y-2">
|
||||
<Label htmlFor="password" className="font-medium text-default-600">
|
||||
{t("password")}
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
size="lg"
|
||||
disabled={isPending}
|
||||
{...register("password")}
|
||||
id="password"
|
||||
type="password"
|
||||
className="peer"
|
||||
/>
|
||||
</div>
|
||||
{errors.password?.message && (
|
||||
<div className="text-destructive mt-2 text-sm">
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<div className="flex gap-2 items-center">
|
||||
<Checkbox id="checkbox" defaultChecked />
|
||||
<Label htmlFor="checkbox">{t("rememberMe")}</Label>
|
||||
</div>
|
||||
<Link
|
||||
href="/auth/forgot-password"
|
||||
className="text-sm text-default-800 dark:text-default-400 leading-6 font-medium"
|
||||
>
|
||||
{t("forgotPass")}
|
||||
</Link>
|
||||
</div>
|
||||
<Button fullWidth onClick={handleSignInClick}>
|
||||
Selanjutnya
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isOtpStep && (
|
||||
<>
|
||||
<div className="text-left 2xl:mb-10 mb-4 mt-10">
|
||||
<h4 className="font-semibold text-3xl text-left">
|
||||
{t("pleaseEnterOtp")}
|
||||
</h4>
|
||||
</div>
|
||||
<div className="flex justify-center mb-6">
|
||||
<InputOTP maxLength={6} onChange={(e) => setOtpValue(e)}>
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot
|
||||
index={0}
|
||||
onChange={(e: any) => setOtp1(e.target.value)}
|
||||
onKeyUp={handleTypeOTP}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={1}
|
||||
onChange={(e: any) => setOtp2(e.target.value)}
|
||||
onKeyUp={handleTypeOTP}
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot
|
||||
index={2}
|
||||
onChange={(e: any) => setOtp3(e.target.value)}
|
||||
onKeyUp={handleTypeOTP}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={3}
|
||||
onChange={(e: any) => setOtp4(e.target.value)}
|
||||
onKeyUp={handleTypeOTP}
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
<InputOTPSeparator />
|
||||
<InputOTPGroup>
|
||||
<InputOTPSlot
|
||||
index={4}
|
||||
onChange={(e: any) => setOtp5(e.target.value)}
|
||||
onKeyUp={handleTypeOTP}
|
||||
/>
|
||||
<InputOTPSlot
|
||||
index={5}
|
||||
onChange={(e: any) => setOtp6(e.target.value)}
|
||||
onKeyUp={handleTypeOTP}
|
||||
/>
|
||||
</InputOTPGroup>
|
||||
</InputOTP>
|
||||
</div>
|
||||
<Button fullWidth className="bg-red-500">
|
||||
Sign in
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
128
lib/menus.ts
128
lib/menus.ts
|
|
@ -2312,6 +2312,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupLabel: "",
|
||||
id: "settings",
|
||||
menus: [
|
||||
{
|
||||
id: "settings",
|
||||
href: "/admin/settings",
|
||||
label: t("settings"),
|
||||
active: pathname.includes("/settinng"),
|
||||
icon: "material-symbols:settings",
|
||||
submenus: [
|
||||
{
|
||||
href: "/admin/settings/category",
|
||||
label: t("category"),
|
||||
active: pathname === "/admin/settings/category",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/tag",
|
||||
label: "Tag",
|
||||
active: pathname === "/admin/settings/tag",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/banner",
|
||||
label: "Banner",
|
||||
active: pathname === "/admin/settings/banner",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/feedback",
|
||||
label: "Feedback",
|
||||
active: pathname === "/admin/settings/feedback",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/faq",
|
||||
label: "FAQ",
|
||||
active: pathname === "/admin/settings/faq",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "https://nat-mediahub.polri.go.id/",
|
||||
label: "Mediahub 2022",
|
||||
active: pathname === "/admin/settings/mediahub-2022",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/privacy",
|
||||
label: t("privacy"),
|
||||
active: pathname === "/admin/settings/privacy",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
} else if (Number(userParentLevelId) == 761) {
|
||||
menusSelected = [
|
||||
|
|
@ -2521,6 +2585,70 @@ export function getMenuList(pathname: string, t: any): Group[] {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupLabel: "",
|
||||
id: "settings",
|
||||
menus: [
|
||||
{
|
||||
id: "settings",
|
||||
href: "/admin/settings",
|
||||
label: t("settings"),
|
||||
active: pathname.includes("/settinng"),
|
||||
icon: "material-symbols:settings",
|
||||
submenus: [
|
||||
{
|
||||
href: "/admin/settings/category",
|
||||
label: t("category"),
|
||||
active: pathname === "/admin/settings/category",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/tag",
|
||||
label: "Tag",
|
||||
active: pathname === "/admin/settings/tag",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/banner",
|
||||
label: "Banner",
|
||||
active: pathname === "/admin/settings/banner",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/feedback",
|
||||
label: "Feedback",
|
||||
active: pathname === "/admin/settings/feedback",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/faq",
|
||||
label: "FAQ",
|
||||
active: pathname === "/admin/settings/faq",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "https://nat-mediahub.polri.go.id/",
|
||||
label: "Mediahub 2022",
|
||||
active: pathname === "/admin/settings/mediahub-2022",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
href: "/admin/settings/privacy",
|
||||
label: t("privacy"),
|
||||
active: pathname === "/admin/settings/privacy",
|
||||
icon: "heroicons:arrow-trending-up",
|
||||
children: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
} else if (Number(roleId) == 9) {
|
||||
|
|
|
|||
|
|
@ -420,6 +420,7 @@
|
|||
"audioSize": "Audio Size Options",
|
||||
"relatedPosts": "Related Posts",
|
||||
"logInPlease": "Please Log In to Your Account First",
|
||||
"pleaseEnterOtp": "Please enter the OTP code first",
|
||||
"acc": "Don't have an account yet?",
|
||||
"reg": "Register",
|
||||
"password": "Password",
|
||||
|
|
|
|||
|
|
@ -421,6 +421,7 @@
|
|||
"audioSize": "Opsi Ukuran Audio",
|
||||
"relatedPosts": "Post Terkait",
|
||||
"logInPlease": "Silahkan masuk ke akun Anda terlebih dahulu",
|
||||
"pleaseEnterOtp": "Silahkan masukan Kode OTP terlebih dahulu",
|
||||
"acc": "Belum Punya Akun?",
|
||||
"reg": "Daftar",
|
||||
"password": "Kata Sandi",
|
||||
|
|
|
|||
Loading…
Reference in New Issue