From f72634564075ed2deb2b8658413b112889c5426a Mon Sep 17 00:00:00 2001
From: Sabda Yagra <msabdayagra@gmail.com>
Date: Sat, 29 Mar 2025 12:58:57 +0700
Subject: [PATCH] fix: mobile version polda/kaltara

---
 .../image/detail/[slug]/layout.tsx            | 17 ---------
 .../[polda_name]/image/detail/[slug]/page.tsx | 37 ++++++++++++++-----
 .../[polda_name]/image/detail/[slug]/page.tsx |  3 +-
 3 files changed, 28 insertions(+), 29 deletions(-)
 delete mode 100644 app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/layout.tsx

diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/layout.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/layout.tsx
deleted file mode 100644
index 14d5b7d0..00000000
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import NewsTickerKaltara from "@/app/[locale]/(public)/(polda)/tbnews/[polda_name]/components/news-tickers-kaltara";
-import ContactUsKaltara from "@/components/landing-page/landing-polda-kaltara/contact-us-kaltara";
-import NavbarKaltara from "@/components/landing-page/landing-polda-kaltara/navbar-polda-kaltara";
-
-
-const layout = async ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      <NavbarKaltara />
-      {children}
-      <ContactUsKaltara />
-      <NewsTickerKaltara />
-    </>
-  );
-};
-
-export default layout;
diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
index 8a6565ee..02be3577 100644
--- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/detail/[slug]/page.tsx
@@ -12,7 +12,7 @@ import { checkWishlistStatus, createPublicSuggestion, deletePublicSuggestion, de
 import { Link, useRouter } from "@/i18n/routing";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
-import { checkMaliciousText, getPublicLocaleTimestamp } from "@/utils/globals";
+import { checkMaliciousText, formatDateToIndonesian, getPublicLocaleTimestamp } from "@/utils/globals";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { useSearchParams } from "next/navigation";
@@ -402,19 +402,37 @@ const DetailInfo = () => {
             </div>
 
             {/* Footer Informasi */}
-            <div className="text-sm text-gray-500 flex justify-between items-center border-t mt-4">
-              <div className="flex flex-row items-center mt-3 justify-between">
-                oleh&nbsp;<span className="font-semibold text-black">{detailDataImage?.uploadedBy?.userLevel?.name}</span>&nbsp; | &nbsp;Diupdate pada {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
-                <Icon icon="formkit:eye" width="15" height="15" />
-                &nbsp; {detailDataImage?.clickCount} &nbsp;
-                <p className="flex text-end">Kreator: {detailDataImage?.creatorName}</p>
+            <div className="text-gray-500 flex flex-col lg:flex-row justify-between items-center border-t mt-4">
+              <div className="flex flex-col lg:flex-row items-center mt-3 lg:justify-between">
+                <p className="text-xs lg:text-sm">
+                  {t("by")}&nbsp;<span className="font-semibold text-black dark:text-white">{detailDataImage?.uploadedBy?.userLevel?.name}</span>
+                </p>
+                {/* <p className="text-xs lg:text-sm">
+                             &nbsp;|&nbsp;{t("updatedOn")}
+                             {detailDataImage?.updatedAt} WIB &nbsp;|&nbsp;
+                           </p> */}
+                <p className="text-xs lg:text-sm">
+                  &nbsp;|&nbsp;{t("updatedOn")}&nbsp;
+                  {formatDateToIndonesian(new Date(detailDataImage?.updatedAt))} {"WIB"}
+                </p>
+                <p className="text-xs lg:text-sm flex justify-center items-center">
+                  &nbsp;|&nbsp;
+                  <Icon icon="formkit:eye" width="15" height="15" />
+                  &nbsp; {detailDataImage?.clickCount} &nbsp;
+                </p>
+              </div>
+              <div className="mt-3">
+                <p className="flex text-end text-xs lg:text-sm font-semibold">
+                  {t("creator")}
+                  {detailDataImage?.creatorName}
+                </p>
               </div>
             </div>
 
             {/* Keterangan */}
             <div className="w-full">
               <h1 className="flex flex-row font-bold text-2xl my-8">{detailDataImage?.title}</h1>
-              <div className="font-light text-justify" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
+              <div className="font-light text-justify mb-4" dangerouslySetInnerHTML={{ __html: detailDataImage?.htmlDescription }} />
             </div>
           </div>
 
@@ -495,10 +513,9 @@ const DetailInfo = () => {
             <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
               {t("send")}
             </button>
+            <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
           </div>
 
-          <div className="border-b-2  border-slate-300 mt-4 w-auto lg:w-[1230px] self-center"></div>
-
           <div>
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">
diff --git a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
index f00057c9..84bcd98a 100644
--- a/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
+++ b/app/[locale]/(public)/(polda)/tbnews/[polda_name]/image/detail/[slug]/page.tsx
@@ -811,10 +811,9 @@ const DetailInfo = () => {
             <button onClick={() => postData()} className="flex items-start bg-[#bb3523] rounded-lg w-fit text-white px-4 py-1">
               {t("send")}
             </button>
+            <div className="border-b-2  border-slate-300 mt-4 w-full self-center"></div>
           </div>
 
-          <div className="border-b-2  border-slate-300 mt-4 w-auto lg:w-[1600px] self-center"></div>
-
           <div>
             {listSuggestion?.map((data: any) => (
               <div className="flex flex-col">