feat: update fixing error, import, etc until success build

package.json

@@ -54,39 +54,99 @@
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@reach/combobox": "^0.18.0",
+    "@react-google-maps/api": "^2.20.3",
+    "@south-paw/react-vector-maps": "^3.2.0",
     "@studio-freight/react-lenis": "^0.0.47",
     "@tanstack/react-table": "^8.19.2",
+    "@types/cleave.js": "^1.4.12",
+    "@types/crypto-js": "^4.2.2",
+    "@types/js-cookie": "^3.0.6",
+    "@types/next": "^9.0.0",
+    "@types/qs": "^6.9.17",
+    "@types/react-google-recaptcha": "^2.1.9",
+    "@types/react-html-parser": "^2.0.6",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@types/sanitize-html": "^2.13.0",
     "@vercel/analytics": "^1.3.1",
     "@wavesurfer/react": "^1.0.8",
+    "add": "^2.0.6",
     "apexcharts": "^3.49.2",
     "axios": "^1.7.8",
+    "chart": "^0.1.2",
     "chart.js": "^4.4.3",
+    "ckeditor5-custom-build": "file:src/vendor/ckeditor5",
     "class-variance-authority": "^0.7.0",
+    "cleave.js": "^1.6.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "cookie": "^1.0.2",
+    "crypto-js": "^4.2.0",
     "date-fns": "^3.6.0",
     "dayjs": "^1.11.11",
     "embla-carousel-autoplay": "^8.1.3",
     "embla-carousel-react": "^8.1.3",
+    "emoji-mart": "^5.6.0",
     "framer-motion": "^11.15.0",
+    "geojson": "^0.5.0",
+    "google-map-react": "^2.2.1",
     "html-react-parser": "^5.2.0",
     "input-otp": "^1.2.4",
+    "jodit-react": "^4.1.2",
     "jotai": "^2.9.3",
+    "jquery": "^3.7.1",
+    "js-cookie": "^3.0.5",
+    "jspdf": "^3.0.1",
+    "layout-grid": "^2.2.0",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.390.0",
+    "moment": "^2.30.1",
     "next": "14.2.3",
     "next-intl": "^4.0.0",
     "next-themes": "^0.3.0",
     "nextra": "^2.13.4",
     "nextra-theme-docs": "^2.13.4",
+    "qs": "^6.13.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.52.1",
+    "react-apexcharts": "^1.7.0",
+    "react-audio-player": "^0.17.0",
+    "react-audio-voice-recorder": "^2.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-cssfx-loading": "^2.1.0",
+    "react-datepicker": "^7.5.0",
+    "react-day-picker": "^8.10.1",
     "react-hot-toast": "^2.4.1",
+    "react-dropzone": "^14.2.3",
+    "react-geocode": "^0.2.3",
     "react-icons": "^5.3.0",
+    "react-leaflet": "^4.2.1",
+    "react-loading-skeleton": "^3.5.0",
+    "react-password-checklist": "^1.8.1",
+    "react-player": "^2.16.0",
+    "react-resizable-panels": "^2.0.19",
+    "react-responsive": "^10.0.0",
+    "react-select": "^5.8.3",
+    "react-slick": "^0.30.2",
+    "react-syntax-highlighter": "^15.5.0",
+    "react-time-picker": "^7.0.0",
+    "recharts": "^2.12.7",
+    "rtl-detect": "^1.1.2",
+    "sanitize-html": "^2.14.0",
+    "shadcn": "^2.3.0",
+    "sharp": "^0.33.4",
     "sonner": "^1.5.0",
+    "sweetalert2": "^11.10.5",
+    "sweetalert2-react-content": "^5.0.7",
+    "swiper": "^11.1.15",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
+    "tus-js-client": "^4.2.3",
+    "use-places-autocomplete": "^4.0.1",
+    "vaul": "^0.9.1",
     "wavesurfer.js": "^7.9.5",
+    "yup": "^1.6.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -97,6 +157,12 @@
     "@types/node": "^20",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/d3-shape": "^3.1.6",
+    "@types/geojson": "^7946.0.15",
+    "@types/jquery": "^3.5.32",
+    "@types/leaflet": "^1.9.12",
+    "@types/react-geocode": "^0.2.4",
+    "@types/rtl-detect": "^1.0.3",
     "eslint": "^8",
     "eslint-config-next": "14.2.3",
     "postcss": "^8",

src/app/[locale]/(protected)/admin/add-experts/component/column.tsx

@@ -81,7 +81,7 @@ const columns: ColumnDef<any>[] = [
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
             <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Link href="#">Detail</Link>
+              <Link href="/">Detail</Link>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

src/app/[locale]/(protected)/app/chat/[id]/page.tsx

@@ -35,12 +35,12 @@ const socials = [
   },
 ];
 
-const ChatPageSingle = async ({ params: { id } }: { params: { id: string } }) => {
+const ChatPageSingle = async ({ params: { id, locale } }: { params: { id: string; locale: string } }) => {
   const { chat, contact } = await getChatsByContactId(id);
   const profile = await getProfileUser();
 
   if (!contact) {
-    redirect("/app/chat");
+    redirect({ href: "/app/chat", locale });
   }
 
   return (
@@ -154,7 +154,7 @@ const ChatPageSingle = async ({ params: { id } }: { params: { id: string } }) =>
 
         <div className="flex flex-col items-center px-6">
           <Avatar className="h-24 w-24 border-none shadow-none bg-transparent hover:bg-transparent">
-            <AvatarImage src={contact?.avatar?.src || `/images/users/user-5.jpg`} alt="" />
+            <AvatarImage src={contact?.avatar || `/images/users/user-5.jpg`} alt="" />
             <AvatarFallback>{contact?.fullName?.slice(0, 2)}</AvatarFallback>
           </Avatar>
           <div className="text-center mt-4 ">

src/app/[locale]/(protected)/app/chat/components/contact-list.tsx

@@ -34,7 +34,7 @@ const ContactList = ({ contact }: { contact: ContactType }) => {
       <div className="flex-1 flex items-center  gap-3 ">
         <div className="relative inline-block ">
           <Avatar className="border-none bg-transparent hover:bg-transparent">
-            <AvatarImage src={avatar.src} />
+            <AvatarImage src={avatar} />
             <AvatarFallback className="uppercase">{fullName.slice(0, 2)}</AvatarFallback>
           </Avatar>
           <Badge

src/app/[locale]/(protected)/app/projects/page.tsx

@@ -1,7 +1,7 @@
 import { redirect } from "@/i18n/navigation";
 
-const ProjectPage = () => {
+const ProjectPage = async ({ params: { locale } }: { params: { locale: string } }) => {
-  redirect("/app/projects/grid");
+    redirect({ href: "/app/projects/grid", locale });
   return null;
 };
 

src/app/[locale]/(protected)/ecommerce/backend/page.tsx

@@ -2,8 +2,8 @@
 
 import { redirect } from "@/i18n/navigation";
 
-const Backend = () => {
+const Backend = async ({ params: { locale } }: { params: { locale: string } }) => {
-  redirect("/ecommerce/backend/add-product");
+  redirect({ href: "/ecommerce/backend/add-product", locale });
   return null;
 };
 

src/app/[locale]/(protected)/ecommerce/page.tsx

@@ -2,8 +2,8 @@
 
 import { redirect } from "@/i18n/navigation";
 
-const Backend = () => {
+const Backend = async ({ params: { locale } }: { params: { locale: string } }) => {
-  redirect("/ecommerce/frontend");
+  redirect({ href: "/ecommerce/frontend", locale });
   return null;
 };
 

src/app/[locale]/(protected)/shared/curated-content/giat-routine/image/detail/content-rewrite/page.tsx

@@ -19,7 +19,13 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import CustomEditor from "@/components/features/editor/custom-editor";
+import dynamic from "next/dynamic";
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/features/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),

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

@@ -31,9 +31,15 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Textarea } from "@/components/ui/textarea";
-import CustomEditor from "@/components/features/editor/custom-editor";
 import HeaderManagement from "@/components/features/landing-page/header-management";
 import SidebarManagement from "@/components/features/landing-page/sidebar-management";
+import dynamic from "next/dynamic";
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/features/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 const imageSchema = z.object({
   title: z.string().min(1, { message: "Judul diperlukan" }),

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

@@ -15,9 +15,15 @@ import { saveContentRewrite } from "@/lib/services/content/content";
 import { getContentRewrite, getInfoProfile } from "@/lib/services/landing/landing";
 import { getCookiesDecrypt } from "@/lib/utils/utils";
 import { Input } from "@/components/ui/input";
-import CustomEditor from "@/components/features/editor/custom-editor";
 import HeaderManagement from "@/components/features/landing-page/header-management";
 import SidebarManagement from "@/components/features/landing-page/sidebar-management";
+import dynamic from "next/dynamic";
+const CustomEditor = dynamic(
+  () => {
+    return import("@/components/features/editor/custom-editor");
+  },
+  { ssr: false }
+);
 
 const page = () => {
   const [profile, setProfile] = useState();

src/components/features/form/content/audio-update-seo.tsx

@@ -50,7 +50,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/features/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({

src/components/features/form/content/image-update-seo.tsx

@@ -52,7 +52,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/features/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({

src/components/features/form/content/teks-update-seo.tsx

@@ -50,7 +50,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/features/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({

src/components/features/form/content/video-update-seo.tsx

@@ -50,7 +50,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import ViewEditor from "@/components/features/editor/view-editor";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 const imageSchema = z.object({

src/components/features/form/repeater.tsx

@@ -101,7 +101,7 @@ const Repeater = () => {
           </form>
           <div className="mt-4">
             <Link
-              href="#"
+              href="/"
               className="text-default-800 p-0 flex gap-2 text-sm font-medium items-center"
               onClick={() => append({ firstName: "", lastName: "", phone: "" })}
             >

src/components/features/landing-page/event-calender.tsx

@@ -68,7 +68,7 @@ const EventCalender = () => {
               Kapolri Jenderal Pol. Listyo Sigit Prabowo memberikan apresiasi kepada polisi wanita
               yang berprestasi...
             </p>
-            <a href="#" className="text-xs text-blue-500">
+            <a href="/" className="text-xs text-blue-500">
               Lihat Selengkapnya
             </a>
           </div>

src/components/features/landing-page/footer.tsx

@@ -59,7 +59,7 @@ const Footer = () => {
           <Dialog>
             <DialogTrigger>
               <span className="hidden md:inline-block">|</span>
-              <a href="#" className="hover:underline px-2">
+              <a href="/" className="hover:underline px-2">
                 {t("privacy")}
               </a>
             </DialogTrigger>
@@ -78,19 +78,19 @@ const Footer = () => {
         {/* Social Media Icons */}
         <div className="flex justify-center items-center space-x-3">
           <span className="text-sm">Follow Us:</span>
-          <a href="#" aria-label="Facebook">
+          <a href="/" aria-label="Facebook">
             <img src="/assets/facebook.svg" alt="Facebook" className="w-5 h-5" />
           </a>
-          <a href="#" aria-label="Instagram">
+          <a href="/" aria-label="Instagram">
             <img src="/assets/instagram.svg" alt="Instagram" className="w-5 h-5" />
           </a>
-          <a href="#" aria-label="Twitter">
+          <a href="/" aria-label="Twitter">
             <img src="/assets/twitter.svg" alt="Instagram" className="w-5 h-5" />
           </a>
-          <a href="#" aria-label="TikTok">
+          <a href="/" aria-label="TikTok">
             <img src="/assets/tiktok.svg" alt="TikTok" className="w-5 h-5" />
           </a>
-          <a href="#" aria-label="YouTube">
+          <a href="/" aria-label="YouTube">
             <img src="/assets/youtube.svg" alt="YouTube" className="w-5 h-5" />
           </a>
         </div>

src/components/features/landing-page/landing-polda-kaltara/contact-us-kaltara.tsx

@@ -207,19 +207,19 @@ const ContactUsKaltara = () => {
             <h2 className="text-lg font-bold">Sosial Media Humas</h2>
             <hr className="border-t-2 border-dotted border-black my-2" />
             <div className="flex gap-4">
-              <a href="#">
+              <a href="/">
                 <Icon icon="fa6-brands:square-x-twitter" className="w-6 h-6" />
               </a>
-              <a href="#">
+              <a href="/">
                 <Icon icon="skill-icons:instagram" className="w-6 h-6" />
               </a>
-              <a href="#">
+              <a href="/">
                 <Icon icon="devicon:facebook" className="w-6 h-6" />
               </a>
-              <a href="#">
+              <a href="/">
                 <Icon icon="hugeicons:tiktok" className="w-6 h-6" />
               </a>
-              <a href="#">
+              <a href="/">
                 <Icon icon="fa-brands:youtube-square" className="w-6 h-6" />
               </a>
             </div>

src/components/features/landing-page/navbar.tsx

@@ -355,7 +355,7 @@ const Navbar = () => {
             </div>
           )}
 
-          {/* <Link href="#" className="flex items-center space-x-1 text-red-600">
+          {/* <Link href="/" className="flex items-center space-x-1 text-red-600">
             <span className="w-2 h-2 bg-red-500 rounded-full"></span>
             <span className="font-medium">{t("live")}</span>
           </Link> */}
@@ -434,7 +434,7 @@ const Navbar = () => {
                       </Link>
                     </DropdownMenuItem>
                     <DropdownMenuItem>
-                      <Link href="#" className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
+                      <Link href="/" className="flex items-center gap-1 hover:bg-slate-600 w-full rounded-lg">
                         <Icon icon="iconamoon:exit-bold" />
                         Keluar
                       </Link>
@@ -447,7 +447,7 @@ const Navbar = () => {
                 <Link href="/auth" className="px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-[#bb3523]">
                   Masuk
                 </Link>
-                <Link href="#" className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">
+                <Link href="/" className="px-4 py-1 border border-[#bb3523] text-[#bb3523] font-semibold rounded-md hover:bg-[#bb3523] hover:text-white">
                   Daftar
                 </Link>{" "}
               </>

src/components/features/landing-page/popular-content.tsx

@@ -214,7 +214,7 @@ const PopularContent = () => {
                   <CarouselItem key={description.id} className="md:basis-1/2 lg:basis-1/3">
                     <div className="flex flex-row gap-6">
                       <a
-                        href="#"
+                        href="/"
                         key={description.id}
                         className="flex flex-col  sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
                       >
@@ -295,7 +295,7 @@ const PopularContent = () => {
                   <CarouselItem key={description.id} className="md:basis-1/2 lg:basis-1/3">
                     <div className="md:basis-1/2 lg:basis-1/3">
                       <a
-                        href="#"
+                        href="/"
                         className="flex flex-col bg-yellow-500 sm:flex-row items-center dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
                       >
                         <div className="flex items-center justify-center rounded-lg w-16 h-2 lg:h-16">
@@ -349,7 +349,7 @@ const PopularContent = () => {
       </div>
       <div className="flex items-center flex-row justify-center">
         <Link
-          href="#"
+          href="/"
           className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]"
         >
           LIHAT SEMUA

src/components/features/main/audio-detail.tsx

@@ -809,7 +809,7 @@ const DetailAudio = () => {
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
-                    href="#"
+                    href="/"
                     aria-expanded="false"
                   >
                     <Icon

src/components/features/main/document-detail.tsx

@@ -644,7 +644,7 @@ const DetailDocument = () => {
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
-                    href="#"
+                    href="/"
                     aria-expanded="false"
                   >
                     <Icon

src/components/features/main/image-detail.tsx

@@ -736,7 +736,7 @@ const DetailImage = (data: any) => {
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
-                    href="#"
+                    href="/"
                     aria-expanded="false"
                   >
                     <Icon

src/components/features/main/video-detail.tsx

@@ -660,7 +660,7 @@ const DetailVideo = () => {
                   <a
                     className="ml-5 cursor-pointer"
                     data-toggle="dropdown"
-                    href="#"
+                    href="/"
                     aria-expanded="false"
                   >
                     <Icon

src/components/partials/auth/social.tsx

@@ -6,7 +6,7 @@ const Social = ({ locale }: { locale: string }) => {
       <ul className="flex">
         <li className="flex-1">
           <a
-            href="#"
+            href="/"
             className="inline-flex h-10 w-10 p-2 bg-[#1C9CEB] text-white text-2xl flex-col items-center justify-center rounded-full"
           >
             <Image
@@ -20,7 +20,7 @@ const Social = ({ locale }: { locale: string }) => {
         </li>
         <li className="flex-1">
           <a
-            href="#"
+            href="/"
             className="inline-flex h-10 w-10 p-2 bg-[#395599] text-white text-2xl flex-col items-center justify-center rounded-full"
           >
             <Image
@@ -34,7 +34,7 @@ const Social = ({ locale }: { locale: string }) => {
         </li>
         <li className="flex-1">
           <a
-            href="#"
+            href="/"
             className="inline-flex h-10 w-10 p-2 bg-[#0A63BC] text-white text-2xl flex-col items-center justify-center rounded-full"
           >
             <Image

src/components/partials/customizer/header-style.tsx

@@ -3,7 +3,7 @@
 import { Check } from "lucide-react";
 
 import { useConfig } from "@/lib/hooks/use-config";
-import { navBarType } from "@/lib/type";
+import { navBarType } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

src/components/partials/customizer/set-content-width.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 
 import { useConfig } from "@/lib/hooks/use-config";
-import { contentType } from "@/lib/type";
+import { contentType } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 import { Icon } from "@/components/ui/icon";
 import { Label } from "@/components/ui/label";

src/components/partials/customizer/set-layout.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import Image from "next/image";
 
 import { useConfig } from "@/lib/hooks/use-config";
-import { layoutType } from "@/lib/type";
+import { layoutType } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 import { Icon } from "@/components/ui/icon";
 import { Label } from "@/components/ui/label";

src/components/partials/customizer/set-sidebar.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 
 import { useConfig } from "@/lib/hooks/use-config";
-import { sidebarType } from "@/lib/type";
+import { sidebarType } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 import { Icon } from "@/components/ui/icon";
 import { Label } from "@/components/ui/label";

src/components/partials/customizer/set-skin.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 
 import { useConfig } from "@/lib/hooks/use-config";
-import { skinType } from "@/lib/type";
+import { skinType } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 import { Icon } from "@/components/ui/icon";
 import { Label } from "@/components/ui/label";

src/components/partials/header/data.ts

@@ -109,7 +109,7 @@ export const messages = [
     hasnotifaction: true,
     notification_count: 1,
     image: undefined,
-    link: "#",
+    link: "/",
   },
   {
     title: "Savannah Nguyen",
@@ -117,7 +117,7 @@ export const messages = [
     active: false,
     hasnotifaction: false,
     image: undefined,
-    link: "#",
+    link: "/",
   },
   {
     title: "Ralph Edwards",
@@ -126,7 +126,7 @@ export const messages = [
     hasnotifaction: true,
     notification_count: 8,
     image: undefined,
-    link: "#",
+    link: "/",
   },
   {
     title: "Cody Fisher",
@@ -134,7 +134,7 @@ export const messages = [
     active: true,
     hasnotifaction: false,
     image: undefined,
-    link: "#",
+    link: "/",
   },
   {
     title: "Savannah Nguyen",
@@ -142,7 +142,7 @@ export const messages = [
     active: false,
     hasnotifaction: false,
     image: undefined,
-    link: "#",
+    link: "/",
   },
   {
     title: "Ralph Edwards",
@@ -151,7 +151,7 @@ export const messages = [
     hasnotifaction: true,
     notification_count: 8,
     image: undefined,
-    link: "#",
+    link: "/",
   },
   {
     title: "Cody Fisher",
@@ -159,7 +159,7 @@ export const messages = [
     active: true,
     hasnotifaction: false,
     image: undefined,
-    link: "#",
+    link: "/",
   },
 ];
 

src/components/ui/alert.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { Icon } from "@iconify/react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { color, rounded, shadow } from "@/lib/type";
+import { color, rounded, shadow } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const alertVariants = cva(

src/components/ui/avatar.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva } from "class-variance-authority";
 
-import { color, rounded } from "@/lib/type";
+import { color, rounded } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {

src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { color, rounded } from "@/lib/type";
+import { color, rounded } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const badgeVariants = cva(

src/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { color, rounded, shadow } from "@/lib/type";
+import { color, rounded, shadow } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const buttonVariants = cva(

src/components/ui/checkbox.tsx

@@ -5,7 +5,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Check } from "lucide-react";
 
-import { color } from "@/lib/type";
+import { color } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const checkboxVariants = cva(

src/components/ui/dialog.tsx

@@ -5,7 +5,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
 
-import { size } from "@/lib/type";
+import { size } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const Dialog = DialogPrimitive.Root;

src/components/ui/icon.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { Icon as IconIfyIcon } from "@iconify/react";
-
+import { SVGProps } from "react";
 import { cn } from "@/lib/utils/utils";
 
 const Icon = React.forwardRef<
@@ -14,3 +14,167 @@ const Icon = React.forwardRef<
 Icon.displayName = "Icon";
 
 export { Icon };
+
+type IconSvgProps = SVGProps<SVGSVGElement> & {
+  size?: number;
+};
+
+
+export const FacebookIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    height={size || height}
+    width={size || width}
+    viewBox="0 0 24 24"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g fill="none">
+      <g clip-path="url(#akarIconsFacebookFill0)">
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M0 12.067C0 18.034 4.333 22.994 10 24v-8.667H7V12h3V9.333c0-3 1.933-4.666 4.667-4.666c.866 0 1.8.133 2.666.266V8H15.8c-1.467 0-1.8.733-1.8 1.667V12h3.2l-.533 3.333H14V24c5.667-1.006 10-5.966 10-11.933C24 5.43 18.6 0 12 0S0 5.43 0 12.067"
+          clipRule="evenodd"
+        />
+      </g>
+      <defs>
+        <clipPath id="akarIconsFacebookFill0">
+          <path fill="#fff" d="M0 0h24v24H0z" />
+        </clipPath>
+      </defs>
+    </g>
+  </svg>
+);
+export const InstagramIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    height={size || height}
+    width={size || width}
+    viewBox="0 0 24 24"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3"
+    />
+  </svg>
+);
+export const YoutubeIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    height={size || height}
+    width={size || width}
+    viewBox="0 0 24 24"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g fill="none">
+      <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
+      <path
+        fill="currentColor"
+        d="M12 4c.855 0 1.732.022 2.582.058l1.004.048l.961.057l.9.061l.822.064a3.8 3.8 0 0 1 3.494 3.423l.04.425l.075.91c.07.943.122 1.971.122 2.954s-.052 2.011-.122 2.954l-.075.91l-.04.425a3.8 3.8 0 0 1-3.495 3.423l-.82.063l-.9.062l-.962.057l-1.004.048A62 62 0 0 1 12 20a62 62 0 0 1-2.582-.058l-1.004-.048l-.961-.057l-.9-.062l-.822-.063a3.8 3.8 0 0 1-3.494-3.423l-.04-.425l-.075-.91A41 41 0 0 1 2 12c0-.983.052-2.011.122-2.954l.075-.91l.04-.425A3.8 3.8 0 0 1 5.73 4.288l.821-.064l.9-.061l.962-.057l1.004-.048A62 62 0 0 1 12 4m0 2c-.825 0-1.674.022-2.5.056l-.978.047l-.939.055l-.882.06l-.808.063a1.8 1.8 0 0 0-1.666 1.623C4.11 9.113 4 10.618 4 12s.11 2.887.227 4.096c.085.872.777 1.55 1.666 1.623l.808.062l.882.06l.939.056l.978.047c.826.034 1.675.056 2.5.056s1.674-.022 2.5-.056l.978-.047l.939-.055l.882-.06l.808-.063a1.8 1.8 0 0 0 1.666-1.623C19.89 14.887 20 13.382 20 12s-.11-2.887-.227-4.096a1.8 1.8 0 0 0-1.666-1.623l-.808-.062l-.882-.06l-.939-.056l-.978-.047A61 61 0 0 0 12 6m-2 3.575a.6.6 0 0 1 .819-.559l.081.04l4.2 2.424a.6.6 0 0 1 .085.98l-.085.06l-4.2 2.425a.6.6 0 0 1-.894-.43l-.006-.09z"
+      />
+    </g>
+  </svg>
+);
+
+export const TiktokIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    height={size || height}
+    width={size || width}
+    viewBox="0 0 24 24"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M16.6 5.82s.51.5 0 0A4.28 4.28 0 0 1 15.54 3h-3.09v12.4a2.59 2.59 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"
+    />
+  </svg>
+);
+export const XIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    height={size || height}
+    width={size || width}
+    viewBox="0 0 24 24"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="m13.081 10.712l-4.786-6.71a.6.6 0 0 0-.489-.252H5.28a.6.6 0 0 0-.488.948l6.127 8.59m2.162-2.576l6.127 8.59a.6.6 0 0 1-.488.948h-2.526a.6.6 0 0 1-.489-.252l-4.786-6.71m2.162-2.576l5.842-6.962m-8.004 9.538L5.077 20.25"
+    />
+  </svg>
+);
+
+export const NewCampaignIcon = ({
+  size,
+  height = 24,
+  width = 24,
+  fill = "currentColor",
+  ...props
+}: IconSvgProps) => (
+  <svg
+    height={size || height}
+    width={size || width}
+    viewBox="0 0 18 18"
+    fill={fill}
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_4_200)">
+      <path
+        d="M12 2.25C12.1989 2.25 12.3897 2.32902 12.5303 2.46967C12.671 2.61032 12.75 2.80109 12.75 3V3.75H14.25C14.6284 3.74988 14.9929 3.8928 15.2704 4.15012C15.5479 4.40744 15.7179 4.76013 15.7463 5.1375L15.75 5.25V14.25C15.7501 14.6284 15.6072 14.9929 15.3499 15.2704C15.0926 15.5479 14.7399 15.7179 14.3625 15.7463L14.25 15.75H3.75C3.37157 15.7501 3.00708 15.6072 2.72959 15.3499C2.4521 15.0926 2.28213 14.7399 2.25375 14.3625L2.25 14.25V5.25C2.24988 4.87157 2.3928 4.50708 2.65012 4.22959C2.90744 3.9521 3.26013 3.78213 3.6375 3.75375L3.75 3.75H5.25V3C5.25 2.80109 5.32902 2.61032 5.46967 2.46967C5.61032 2.32902 5.80109 2.25 6 2.25C6.19891 2.25 6.38968 2.32902 6.53033 2.46967C6.67098 2.61032 6.75 2.80109 6.75 3V3.75H11.25V3C11.25 2.80109 11.329 2.61032 11.4697 2.46967C11.6103 2.32902 11.8011 2.25 12 2.25ZM11.118 7.03425L7.9365 10.2158L6.87525 9.15525C6.7338 9.01863 6.54435 8.94304 6.3477 8.94474C6.15105 8.94645 5.96294 9.02533 5.82389 9.16439C5.68483 9.30344 5.60595 9.49155 5.60424 9.6882C5.60254 9.88485 5.67813 10.0743 5.81475 10.2158L7.40025 11.802C7.4706 11.8724 7.55414 11.9283 7.64608 11.9664C7.73803 12.0045 7.83659 12.0241 7.93612 12.0241C8.03566 12.0241 8.13422 12.0045 8.22617 11.9664C8.31811 11.9283 8.40165 11.8724 8.472 11.802L12.1785 8.09475C12.2501 8.02557 12.3073 7.94281 12.3466 7.8513C12.3859 7.7598 12.4066 7.66139 12.4074 7.5618C12.4083 7.46222 12.3893 7.36346 12.3516 7.27129C12.3139 7.17911 12.2582 7.09537 12.1878 7.02495C12.1174 6.95453 12.0336 6.89884 11.9415 6.86113C11.8493 6.82342 11.7505 6.80445 11.6509 6.80531C11.5514 6.80618 11.4529 6.82687 11.3614 6.86617C11.2699 6.90548 11.1872 6.96262 11.118 7.03425Z"
+        fill="white"
+      />
+      <rect width="10" height="10" transform="translate(4 5)" fill="white" />
+      <path
+        d="M13.2857 10.7143H9.71429V14.2857C9.71429 14.6786 9.39286 15 9 15C8.60714 15 8.28571 14.6786 8.28571 14.2857V10.7143H4.71429C4.32143 10.7143 4 10.3929 4 10C4 9.60714 4.32143 9.28571 4.71429 9.28571H8.28571V5.71429C8.28571 5.32143 8.60714 5 9 5C9.39286 5 9.71429 5.32143 9.71429 5.71429V9.28571H13.2857C13.6786 9.28571 14 9.60714 14 10C14 10.3929 13.6786 10.7143 13.2857 10.7143Z"
+        fill="#0d6efd"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4_200">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

src/components/ui/input.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { InputColor } from "@/lib/type";
+import { InputColor } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 export const inputVariants = cva(

src/components/ui/progress.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cva } from "class-variance-authority";
 
-import { color, size } from "@/lib/type";
+import { color, size } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const progressVariants = cva(

src/components/ui/radio-group.tsx

@@ -5,7 +5,7 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Circle } from "lucide-react";
 
-import { color, size } from "@/lib/type";
+import { color, size } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const radioVariants = cva(

src/components/ui/select.tsx

@@ -5,7 +5,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { cva, type VariantProps } from "class-variance-authority";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { InputColor, size } from "@/lib/type";
+import { InputColor, size } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const Select = SelectPrimitive.Root;

src/components/ui/switch.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { color, size } from "@/lib/type";
+import { color, size } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const switchVariants = cva(

src/components/ui/textarea.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { InputColor, radius } from "@/lib/type";
+import { InputColor, radius } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 export const textareaVariants = cva(

src/components/ui/tooltip.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { color } from "@/lib/type";
+import { color } from "@/lib/utils/type";
 import { cn } from "@/lib/utils/utils";
 
 const tooltipVariants = cva(

src/i18n/routing-pathnames.ts

@@ -0,0 +1,4 @@
+export const customPaths = [
+    "/",
+    "/app/chat",
+];

src/i18n/routing.ts

@@ -1,9 +1,8 @@
 import { defineRouting } from "next-intl/routing";
+import { customPaths } from "./routing-pathnames";
 
 export const routing = defineRouting({
   locales: ["in", "en"],
   defaultLocale: "in",
-  pathnames: {
+  localePrefix: "always"
-    "/": "/",
-  },
 });

src/lib/hooks/use-config.ts

@@ -1,7 +1,7 @@
 import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 
-import { layoutType, navBarType, sidebarType } from "@/lib/type";
+import { layoutType, navBarType, sidebarType } from "@/lib/utils/type";
 
 export type Config = {
   collapsed: boolean;

src/messages/en.json

@@ -1,10 +0,0 @@
-{
-  "Index": {
-    "title": "Welcome to Media Hub",
-    "description": "Integrated Media Platform for Indonesian National Police"
-  },
-  "Common": {
-    "search": "Search",
-    "menu": "Menu"
-  }
-}

src/messages/in.json

@@ -1,10 +0,0 @@
-{
-  "Index": {
-    "title": "Selamat Datang di Media Hub",
-    "description": "Platform Media Terpadu untuk Kepolisian Republik Indonesia"
-  },
-  "Common": {
-    "search": "Cari",
-    "menu": "Menu"
-  }
-}

tailwind.config.ts

@@ -3,7 +3,13 @@ import type { Config } from "tailwindcss";
 const config = {
   darkMode: ["class"],
   content: [
-    "./src/**/*.{js,jsx,ts,tsx}",
+    "./src/app/**/*.{js,jsx,ts,tsx}",
+    "./src/pages/**/*.{js,jsx,ts,tsx}",
+    "./src/components/**/*.{js,jsx,ts,tsx}",
+    "./src/features/**/*.{js,jsx,ts,tsx}",
+    "./src/layouts/**/*.{js,jsx,ts,tsx}",
+    "./src/lib/**/*.{js,jsx,ts,tsx}",
+    "./src/hooks/**/*.{js,jsx,ts,tsx}"
   ],
   prefix: "",
   theme: {