merge dev-restructure

2025-06-12 16:18:14 +07:00 · 2025-06-12 16:18:14 +07:00 · 4303804136
parent 2b5accd391 34a78b088e
commit 4303804136
5 changed files with 96 additions and 51 deletions
--- a/components/form/article/edit-article-form.tsx
+++ b/components/form/article/edit-article-form.tsx
@ -797,16 +797,16 @@ export default function EditArticleForm(props: { isDetail: boolean }) {
              ))
            ) : (
              <>
-                <div>
+                <div className="w-full h-[480px] flex justify-center items-center">
                  <Image
                    alt="main"
                    width={720}
                    height={480}
                    src={detailfiles[mainImage]?.file_url}
-                    className="w-[75%] mx-auto"
+                    className={`h-[480px] object-cover w-auto`}
                  />
                </div>
-                <div className="flex flex-row gap-2">
+                <div className="flex flex-row gap-2 mt-2">
                  {detailfiles?.map((file: any, index: number) => (
                    <a
                      key={index}
--- a/components/form/form-master-user-edit.tsx
+++ b/components/form/form-master-user-edit.tsx
@ -43,10 +43,10 @@ const masterUserSchema = z.object({
  fullname: z.string().min(1, { message: "Required" }),
  username: z.string().min(1, { message: "Required" }),
  email: z.string().min(1, { message: "Required" }),
-  identityNumber: z.string().min(1, { message: "Required" }),
-  genderType: z.string().min(1, { message: "Required" }),
-  phoneNumber: z.string().min(1, { message: "Required" }),
-  address: z.string().min(1, { message: "Required" }),
+  identityNumber: z.string().optional(),
+  genderType: z.string().optional(),
+  phoneNumber: z.string().optional(),
+  address: z.string().optional(),
  userLevelType: userSchema,
  userRoleType: userSchema,
 });
@ -62,6 +62,7 @@ export default function FormMasterUserEdit() {

  const formOptions = {
    resolver: zodResolver(masterUserSchema),
+    defaultValues: { identityNumber: "" },
  };
  type MicroIssueSchema = z.infer<typeof masterUserSchema>;
  const {
@ -140,10 +141,10 @@ export default function FormMasterUserEdit() {
    setValue("fullname", profile?.fullname);
    setValue("username", profile?.username);
    setValue("email", profile?.email);
-    setValue("address", profile?.address);
-    setValue("identityNumber", profile?.identityNumber);
-    setValue("genderType", profile?.genderType);
-    setValue("phoneNumber", profile?.phoneNumber);
+    setValue("address", profile?.address || "");
+    setValue("identityNumber", profile?.identityNumber || "");
+    setValue("genderType", profile?.genderType || "");
+    setValue("phoneNumber", profile?.phoneNumber || "");
    if (findLevel) {
      setValue("userLevelType", findLevel);
    }
@ -154,7 +155,12 @@ export default function FormMasterUserEdit() {
  };

  const fetchUserLevel = async () => {
-    const res = await getAllUserLevels({ timeStamp: getUnixTimestamp() });
+    const request = {
+      limit: 1000,
+      page: 1,
+    };
+
+    const res = await getAllUserLevels(request);
    if (res?.data?.data) {
      return setupParent(res?.data?.data, "level");
    }
--- a/components/form/form-master-user.tsx
+++ b/components/form/form-master-user.tsx
@ -53,10 +53,10 @@ const masterUserSchema = z.object({
    }),
  passwordValidate: z.string().min(1, { message: "Required" }),
  email: z.string().min(1, { message: "Required" }),
-  identityNumber: z.string().min(1, { message: "Required" }),
-  genderType: z.string().min(1, { message: "Required" }),
-  phoneNumber: z.string().min(1, { message: "Required" }),
-  address: z.string().min(1, { message: "Required" }),
+  identityNumber: z.string().optional(),
+  genderType: z.string().optional(),
+  phoneNumber: z.string().optional(),
+  address: z.string().optional(),
  userLevelType: userSchema,
  userRoleType: userSchema,
 });
@ -247,7 +247,11 @@ export default function FormMasterUser() {

  return (
    <div className="mx-5 my-5 overflow-y-auto">
-      <form method="POST" onSubmit={handleSubmit(onSubmit)}>
+      <form
+        method="POST"
+        onSubmit={handleSubmit(onSubmit)}
+        className="w-full lg:w-1/2 lg:ml-4"
+      >
        <Card className="rounded-md p-5 flex flex-col gap-3">
          <Controller
            control={control}
--- a/components/landing/HeaderNews.tsx
+++ b/components/landing/HeaderNews.tsx
@ -78,10 +78,22 @@ export default function HeaderNews() {
    setHotNews(response?.data?.data);
  }

+  const [portraitMap, setPortraitMap] = useState<any>({});
+
+  const handleImageLoad = (e: any, index: number) => {
+    const { naturalWidth, naturalHeight } = e.target;
+    const isPortrait = naturalHeight > naturalWidth;
+
+    setPortraitMap((prev: any) => ({
+      ...prev,
+      [index]: isPortrait,
+    }));
+  };
+
  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-[540px] w-full lg:w-[75%] lg:mx-auto">
-        <div className="lg:hidden w-[90%] h-[300px] md:h-[500px] mx-auto">
+        <div className="lg:hidden w-[90%] h-[200px] md:h-[400px] mx-auto mt-1">
          {hotNews?.length > 0 ? (
            <Swiper
              centeredSlides={true}
@ -110,23 +122,38 @@ export default function HeaderNews() {
              }}
            >
              {hotNews?.map((newsItem: any, index: number) => (
-                <SwiperSlide key={newsItem?.id}>
-                  <Card
-                    radius="lg"
-                    className="border-none rounded-xl shadow-none"
+                <SwiperSlide
+                  key={newsItem?.id}
+                  className="!w-full h-[200px] md:h-[400px]"
                >
+                  <Card
+                    isFooterBlurred
+                    radius="lg"
+                    className="border-none h-[200px] md:h-[400px] shadow-none dark:bg-stone-800 bg-[#f0f0f0]"
+                  >
+                    <div className="relative w-full h-[200px] md:h-[400px]">
                      <Image
                        alt="headernews"
+                        width={480}
+                        height={480}
+                        onLoad={(e) => handleImageLoad(e, index)}
                        src={
-                        newsItem?.thumbnailUrl == ""
+                          newsItem?.thumbnailUrl === ""
                            ? "/no-image.jpg"
                            : newsItem?.thumbnailUrl
                        }
-                      className="!w-[90vh] md:!w-[95vh] !h-[200px] md:!h-[400px] object-cover !rounded-b-none"
+                        className={`!object-cover !rounded-none ${
+                          portraitMap[index]
+                            ? "!w-auto object-cover mx-auto"
+                            : "!w-[90vw]"
+                        } !h-[200px] md:!h-[400px]`}
                      />

-                    <CardFooter className="before:bg-white/10 border-gray-100 border-1 rounded-b-xl shadow-sm bottom-1 w-full">
-                      <div className="text-black dark:text-white">
+                      <div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
+                    </div>
+
+                    <CardFooter className="mb-1 max-h-[50px] before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute bottom-0 before:rounded-xl rounded-large  w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
+                      <div className="text-white py-1">
                        <Link
                          href={`news/detail/${newsItem.id}-${newsItem?.slug}`}
                        >
@ -138,7 +165,7 @@ export default function HeaderNews() {
                          {convertDateFormat(newsItem.createdAt)} WIB
                        </p>
                        <p className="flex items-center gap-1 text-xs">
-                          <EyeIcon className="text-black dark:text-white" />
+                          <EyeIcon className="text-white" />
                          {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                        </p>
                      </div>
@ -149,13 +176,12 @@ export default function HeaderNews() {
            </Swiper>
          ) : (
            <Skeleton className="rounded-lg">
-              <div className="h-[200px] rounded-lg bg-default-300" />
+              <div className="w-full !h-[500px] rounded-lg bg-default-300" />
            </Skeleton>
          )}
        </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-[500px] mx-auto">
          <p className="text-base font-bold text-center dark:text-white text-black">
-            {/* {t("berita")} */}
            Hot Topik
          </p>
          <ScrollShadow hideScrollBar className="h-[29vh] lg:h-[400px] ">
@ -254,18 +280,29 @@ export default function HeaderNews() {
                  <Card
                    isFooterBlurred
                    radius="lg"
-                    className="border-none h-[50vh] lg:h-[500px] shadow-none"
+                    className="border-none h-[50vh] lg:h-[500px] shadow-none dark:bg-stone-800  bg-[#f0f0f0]"
                  >
+                    <div className="relative w-full h-[50vh] lg:h-[500px]">
                      <Image
                        alt="headernews"
+                        width={480}
+                        height={480}
+                        onLoad={(e) => handleImageLoad(e, index)}
                        src={
-                        newsItem?.thumbnailUrl == ""
+                          newsItem?.thumbnailUrl === ""
                            ? "/no-image.jpg"
                            : newsItem?.thumbnailUrl
                        }
-                      className="!w-[90vw] !h-[500px] !object-cover !rounded-none"
+                        className={`!object-cover !rounded-none ${
+                          portraitMap[index]
+                            ? "!w-auto object-cover mx-auto"
+                            : "!w-[90vw]"
+                        } !h-[500px]`}
                      />

+                      <div className="absolute inset-0 bg-black/20 flex items-center justify-center text-white text-lg font-semibold"></div>
+                    </div>
+
                    <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">
                      <div className="text-white">
                        <Link
@ -299,8 +336,6 @@ export default function HeaderNews() {
          )}
        </div>
        <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-[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/components/page/detail-news.tsx
+++ b/components/page/detail-news.tsx
@ -171,13 +171,13 @@ export default function DetailNews(props: { data: any; listArticle: any }) {
        ) : (
          data?.files?.length > 0 && (
            <Image
-              classNames={{
-                wrapper: "!w-full !max-w-full",
-                img: "!w-full",
-              }}
+              // classNames={{
+              //   wrapper: "!w-full !max-w-full",
+              //   img: "!w-full",
+              // }}
              alt="Main Image"
              src={data?.files[imageNow]?.file_url}
-              className="object-cover w-[100%] rounded-md"
+              className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
            />
          )
        )}