feat: adjust ui

Dockerfile

@@ -1,24 +1,26 @@
-FROM node:21-alpine
+FROM node:23.5.0-alpine
 
 ENV PORT 3000
 
+# Install pnpm globally
+RUN npm install -g pnpm
+
 # Create app directory
 RUN mkdir -p /usr/src/app
 WORKDIR /usr/src/app
 
 # Installing dependencies
-COPY package*.json /usr/src/app/
+COPY package*.json pnpm-lock.yaml* /usr/src/app/
 
-# RUN npm install --force
+# Install dependencies using pnpm
-RUN npm install -g npm@latest
+RUN pnpm install --frozen-lockfile
-RUN npm install next --legacy-peer-deps
 
 # Copying source files
 COPY . /usr/src/app
 
 # Building app
-RUN npm run build
+RUN pnpm run build
 EXPOSE 3000
 
 # Running the app
-CMD "npm" "run" "start"
+CMD ["pnpm", "run", "start"]

action/auth-action.ts

@@ -1,14 +1,14 @@
 'use server'
 import { redirect } from "next/navigation";
 import { revalidatePath } from "next/cache";
-import {signIn} from "@/lib/auth";
 export const loginUser = async (data: any) => {
   try {
-    const response = await signIn("credentials", {
+    const response = undefined;
-      email: data.email,
+    // await signIn("credentials", {
-      password: data.password,
+    //   email: data.email,
-      redirect: false,
+    //   password: data.password,
-    });
+    //   redirect: false,
+    // });
     return response;
   } catch (error) {
     throw new Error(error as string);

app/[locale]/(protected)/app/chat/layout copy.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/app/email/layout copy.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/app/kanban/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/app/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/blocks/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/changelog/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/charts/appex-charts/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/charts/chart-js/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/charts/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/charts/rechart/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/accordion/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/alert-dialog/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/alert/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/avatar/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/badge/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/breadcrumb/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/button/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/calendar/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/card/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/carousel/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/collapsible/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/colors/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/context-menu/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/dialog/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/drawer/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/dropdown/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/hover-card/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/menu-bar/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/navigation-menu/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/pagination/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/popover/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/progress/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/resizable/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/scroll-area/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/separator/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/sheet/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/skeleton/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/sonner/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/tabs/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/toast/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/toggle/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/tooltip/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/components/typography/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/contributor/agenda-setting/calender-view.tsx

@@ -17,12 +17,15 @@ import { EventContentArg } from "@fullcalendar/core";
 import EventModal from "./event-modal";
 import { useTranslations } from "next-intl";
 import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
+import dayjs from "dayjs";
 const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
 interface CalendarViewProps {
   events: CalendarEvent[];
   categories: CalendarCategory[];
 }
 
+const INITIAL_YEAR = dayjs().format("YYYY");
+const INITIAL_MONTH = dayjs().format("M");
 export interface CalendarEvent {
   id: string;
   title: string;
@@ -80,6 +83,18 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
     { title: "Create New theme", id: "104", tag: "etc" },
   ]);
 
+  useEffect(() => {
+    getCalendarEvents();
+  });
+  const getCalendarEvents = async () => {
+    const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
+    console.log("ress", res);
+
+    if (res.error) {
+      return false;
+    }
+  };
+
   useEffect(() => {
     setSelectedCategory(categories?.map((c) => c.value));
   }, [events, categories]);
@@ -251,14 +266,14 @@ const CalendarView = ({ events, categories }: CalendarViewProps) => {
               />
             </div>
 
-            <div id="external-events" className=" space-y-1.5 mt-6 px-4">
+            {/* <div id="external-events" className=" space-y-1.5 mt-6 px-4">
               <p className="text-sm font-medium text-default-700 mb-3">
                 {t("shortDesc")}
               </p>
               {dragEvents.map((event) => (
                 <ExternalDraggingevent key={event.id} event={event} />
               ))}
-            </div>
+            </div> */}
             <div className="py-4 text-default-800  font-semibold text-xs uppercase mt-4 mb-2 px-4">
               {t("filter")}
             </div>

app/[locale]/(protected)/contributor/agenda-setting/data.ts

@@ -1,17 +1,31 @@
+import { getAgendaSettingsList } from "@/service/agenda-setting/agenda-setting";
 import { faker } from "@faker-js/faker";
+import dayjs from "dayjs";
 
 const date = new Date();
 const prevDay = new Date().getDate() - 1;
 const nextDay = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
+const INITIAL_YEAR = dayjs().format("YYYY");
+const INITIAL_MONTH = dayjs().format("M");
 
 // prettier-ignore
 const nextMonth = date.getMonth() === 11 ? new Date(date.getFullYear() + 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() + 1, 1)
 // prettier-ignore
 const prevMonth = date.getMonth() === 11 ? new Date(date.getFullYear() - 1, 0, 1) : new Date(date.getFullYear(), date.getMonth() - 1, 1)
+
+export const getCalendarEvents = async () => {
+  const res = await getAgendaSettingsList(INITIAL_YEAR, INITIAL_MONTH, "");
+  if (res.error) {
+    return false;
+  }
+  console.log("ress", res.data.data);
+  return res?.data?.data;
+};
+
 export const calendarEvents = [
   {
     id: faker.string.uuid(),
-    title: "All Day Event",
+    title: "aaaAll Day Event",
     start: date,
     end: nextDay,
     allDay: false,

app/[locale]/(protected)/contributor/agenda-setting/utils.ts

@@ -8,4 +8,4 @@ export const getEvents = async () => {
 // get categories
 export const getCategories = async () => {
   return categories;
-}
+};

app/[locale]/(protected)/contributor/blog/components/columns.tsx

@@ -102,16 +102,16 @@ const columns: ColumnDef<any>[] = [
                 View
               </DropdownMenuItem>
             </Link>
-            {/* 
+            <Link href={`/contributor/blog/update/${row.original.id}`}>
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
                 <SquarePen className="w-4 h-4 me-1.5" />
                 Edit
               </DropdownMenuItem>
-
+            </Link>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete
-            </DropdownMenuItem> */}
+            </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       );

app/[locale]/(protected)/contributor/blog/update/[id]/page.tsx

@@ -0,0 +1,15 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormBlogUpdate from "@/components/form/blog/blog--update-form";
+
+const BlogUpdatePage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormBlogUpdate />
+      </div>
+    </div>
+  );
+};
+
+export default BlogUpdatePage;

app/[locale]/(protected)/contributor/content/audio/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/contributor/content/image/components/columns.tsx

@@ -146,6 +146,12 @@ const columns: ColumnDef<any>[] = [
                 View
               </DropdownMenuItem>
             </Link>
+            <Link href={`/contributor/content/image/update/${row.original.id}`}>
+              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
+                <SquarePen className="w-4 h-4 me-1.5" />
+                Edit
+              </DropdownMenuItem>
+            </Link>
             <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
               <Trash2 className="w-4 h-4 me-1.5" />
               Delete

app/[locale]/(protected)/contributor/content/image/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/contributor/content/image/update/[id]/page.tsx

@@ -0,0 +1,16 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormImageDetail from "@/components/form/content/image-detail-form";
+import FormImageUpdate from "@/components/form/content/image-update-form";
+
+const ImageUpdatePage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormImageUpdate />
+      </div>
+    </div>
+  );
+};
+
+export default ImageUpdatePage;

app/[locale]/(protected)/contributor/content/nulis-ai/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/contributor/content/spit/convert/[id]/page.tsx

@@ -0,0 +1,16 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import FormImageDetail from "@/components/form/content/image-detail-form";
+import FormConvertSPIT from "@/components/form/content/spit-convert-form";
+
+const SPITConvertPage = async () => {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="space-y-4">
+        <FormConvertSPIT />
+      </div>
+    </div>
+  );
+};
+
+export default SPITConvertPage;

app/[locale]/(protected)/contributor/content/spit/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/contributor/content/spit/page.tsx

@@ -1,35 +1,24 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
-import TableImage from "./table-spit/page";
+import TableImage from "./table-spit/table-spit";
-import { Newspaper, NewspaperIcon, UploadIcon } from "lucide-react";
+import TableSPIT from "./table-spit/table-spit";
-import { Button } from "@/components/ui/button";
-import { Icon } from "@iconify/react/dist/iconify.js";
-import TableSPIT from "./table-spit/page";
 
 const ReactTableSPITPage = () => {
   return (
     <div>
       <SiteBreadcrumb />
       <div className="space-y-4">
-        <Card className="py-4 px-3">
+        <Card>
-          <div className="flex flex-row justify-between items-center">
+          <CardHeader className="border-b border-solid border-default-200 mb-6">
+            <CardTitle>
+              <div className="flex items-center">
                 <div className="flex-1 text-xl font-medium text-default-900">
                   Konten SPIT
                 </div>
-            {/* <div>
-              <Button color="primary" className="text-white">
-                <UploadIcon />
-                Unggah Foto
-              </Button>
-              <Button color="primary" className="text-white ml-3">
-                <UploadIcon />
-                Unggah Foto Dengan AI
-              </Button>
-            </div> */}
               </div>
-        </Card>
+            </CardTitle>
-        <Card>
+          </CardHeader>
           <CardContent className="p-0">
             <TableSPIT />
           </CardContent>

app/[locale]/(protected)/contributor/content/spit/table-spit/columns.tsx

@@ -1,145 +1,109 @@
 "use client";
-
 import { ColumnDef } from "@tanstack/react-table";
-import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import {
-
+  Eye,
+  MoreVertical,
+  MoveDownRight,
+  SquarePen,
+  Trash2,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { format } from "date-fns";
+import { Link } from "@/components/navigation";
 
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+const columns: ColumnDef<any>[] = [
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-export type DataProps = {
-  id: string | number;
-  order: string;
-  customer: {
-    name: string;
-  };
-  date: string;
-  quantity: number;
-  amount: string;
-  status: "paid" | "due" | "canceled";
-  action: React.ReactNode;
-};
-export const columns: ColumnDef<DataProps>[] = [
-  // {
-  //   id: "select",
-  //   header: ({ table }) => (
-  //     <Checkbox
-  //       checked={
-  //         table.getIsAllPageRowsSelected() ||
-  //         (table.getIsSomePageRowsSelected() && "indeterminate")
-  //       }
-  //       onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-  //       aria-label="Select all"
-  //     />
-  //   ),
-  //   cell: ({ row }) => (
-  //     <div className="xl:w-16">
-  //       <Checkbox
-  //         checked={row.getIsSelected()}
-  //         onCheckedChange={(value) => row.toggleSelected(!!value)}
-  //         aria-label="Select row"
-  //       />
-  //     </div>
-  //   ),
-  //   enableSorting: false,
-  //   enableHiding: false,
-  // },
   {
-    accessorKey: "id",
+    accessorKey: "no",
     header: "No",
-    cell: ({ row }) => <span>{row.getValue("id")}</span>,
-  },
-  {
-    accessorKey: "order",
-    header: "Judul",
     cell: ({ row }) => (
-      <div className="w-52">
+      <div className="flex items-center gap-5">
-        <span>{row.getValue("order")}</span>,
+        <div className="flex-1 text-start">
+          <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
+            {row.getValue("no")}
+          </h4>
+        </div>
       </div>
     ),
   },
   {
-    accessorKey: "customer",
+    accessorKey: "contentTitle",
-    header: "Kategory",
+    header: "Judul",
-    cell: ({ row }) => {
+    cell: ({ row }: { row: { getValue: (key: string) => string } }) => {
-      const user = row.original.customer;
+      const title: string = row.getValue("contentTitle");
       return (
-        <div className="font-medium text-card-foreground/80">
+        <span className="whitespace-nowrap">
-          <div className="flex gap-3 items-center">
+          {title.length > 50 ? `${title.slice(0, 30)}...` : title}
-            <span className="text-sm text-default-600 whitespace-nowrap">
-              {user?.name ?? "Unknown User"}
         </span>
-          </div>
-        </div>
       );
     },
   },
   {
-    accessorKey: "date",
+    accessorKey: "contentTag",
-    header: "Tanggal unggah",
+    header: "Tag",
-    cell: ({ row }) => {
+    cell: ({ row }) => (
-      return <span>{row.getValue("date")}</span>;
+      <span className="whitespace-nowrap">{row.getValue("contentTag")}</span>
+    ),
   },
+
+  {
+    accessorKey: "contentType",
+    header: "Tipe Konten ",
+    cell: ({ row }) => (
+      <span className="whitespace-nowrap">{row.getValue("contentType")}</span>
+    ),
   },
   {
-    accessorKey: "quantity",
+    accessorKey: "contentCreatedGroupBy",
-    header: "Kreator",
+    header: "Sumber ",
-    cell: ({ row }) => {
+    cell: ({ row }) => (
-      return <span>{row.getValue("quantity")}</span>;
+      <span className="whitespace-nowrap">
-    },
+        {row.getValue("contentCreatedGroupBy")}
+      </span>
+    ),
   },
+
   {
-    accessorKey: "amount",
+    accessorKey: "isPublish",
-    header: "Sumber",
-    cell: ({ row }) => {
-      return <span>{row.getValue("amount")}</span>;
-    },
-  },
-  {
-    accessorKey: "amount",
-    header: "Penempatan File",
-    cell: ({ row }) => {
-      return <span>{row.getValue("amount")}</span>;
-    },
-  },
-  {
-    accessorKey: "status",
     header: "Status",
     cell: ({ row }) => {
-      const statusColors: Record<string, string> = {
+      const isPublish = row.getValue<boolean>("isPublish");
-        paid: "bg-success/20 text-success",
-        due: "bg-warning/20 text-warning",
-        canceled: "bg-destructive/20 text-destructive",
-      };
-      const status = row.getValue<string>("status");
-      const statusStyles = statusColors[status] || "default";
       return (
-        <Badge className={cn("rounded-full px-5", statusStyles)}>
+        <div>
-          {status}{" "}
+          <Button
-        </Badge>
+            size="sm"
+            color={isPublish ? "success" : "warning"} // Hijau untuk diterima, oranye untuk menunggu review
+            variant="outline"
+            className={`btn btn-sm ${
+              isPublish ? "btn-outline-success" : "btn-outline-warning"
+            } pill-btn ml-1`}
+          >
+            {isPublish ? "Diterima" : "Menunggu Review"}
+          </Button>
+        </div>
       );
     },
   },
+
   {
-    accessorKey: "amount",
+    accessorKey: "contentCreatedDate",
-    header: "Kurasi Konten",
+    header: "Tanggal Unggah",
     cell: ({ row }) => {
-      return <span>{row.getValue("amount")}</span>;
+      const createdAt = row.getValue("contentCreatedDate") as
-    },
+        | string
-  },
+        | number
-  {
+        | undefined;
-    accessorKey: "amount",
+
-    header: "Saran",
+      const formattedDate =
-    cell: ({ row }) => {
+        createdAt && !isNaN(new Date(createdAt).getTime())
-      return <span>{row.getValue("amount")}</span>;
+          ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
+          : "-";
+      return <span className="whitespace-nowrap">{formattedDate}</span>;
     },
   },
   {
@@ -160,21 +124,19 @@ export const columns: ColumnDef<DataProps>[] = [
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="p-0" align="end">
+            <Link
+              href={`/contributor/content/spit/convert/${row.original.contentId}`}
+            >
               <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <Eye className="w-4 h-4 me-1.5" />
+                <MoveDownRight className="w-4 h-4 me-1.5" />
-              View
+                Pindah Ke Mediahub
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-              <SquarePen className="w-4 h-4 me-1.5" />
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
-              <Trash2 className="w-4 h-4 me-1.5" />
-              Delete
               </DropdownMenuItem>
+            </Link>
           </DropdownMenuContent>
         </DropdownMenu>
       );
     },
   },
 ];
+
+export default columns;

app/[locale]/(protected)/contributor/content/spit/table-spit/data.ts

@@ -1,184 +0,0 @@
-import { DataProps } from "./columns";
-
-export const data: DataProps[] = [
-  {
-    id: 1,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Liputan Kegiatan",
-    },
-    date: "3/26/2022",
-    quantity: 13,
-    amount: "$1779.53",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 2,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Liputan Kegiatan",
-    },
-    date: "2/6/2022",
-    quantity: 13,
-    amount: "$2215.78",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 3,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Liputan Kegiatan",
-    },
-    date: "9/6/2021",
-    quantity: 1,
-    amount: "$3183.60",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 4,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Liputan Kegiatan",
-    },
-    date: "11/7/2021",
-    quantity: 13,
-    amount: "$2587.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 5,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Rachel Brown",
-    },
-    date: "5/6/2022",
-    quantity: 12,
-    amount: "$3840.73",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 6,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Megan Taylor",
-    },
-    date: "2/14/2022",
-    quantity: 12,
-    amount: "$4764.18",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 7,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Sophie Clark",
-    },
-    date: "7/30/2022",
-    quantity: 6,
-    amount: "$2875.05",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 8,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Natalie Martin",
-    },
-    date: "6/30/2022",
-    quantity: 9,
-    amount: "$2491.02",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 9,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Hannah Lewis",
-    },
-    date: "8/9/2022",
-    quantity: 8,
-    amount: "$3006.95",
-    status: "due",
-    action: null,
-  },
-  {
-    id: 10,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Lisa White",
-    },
-    date: "8/4/2022",
-    quantity: 12,
-    amount: "$2160.32",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 11,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Emma Walker",
-    },
-    date: "4/5/2022",
-    quantity: 8,
-    amount: "$1272.66",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 12,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Jenny Wilson",
-    },
-    date: "8/9/2022",
-    quantity: 2,
-    amount: "$4327.86",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 13,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Jenny Wilson",
-    },
-    date: "2/10/2022",
-    quantity: 11,
-    amount: "$3671.81",
-    status: "canceled",
-    action: null,
-  },
-  {
-    id: 14,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Jenny Wilson",
-    },
-    date: "2/10/2022",
-    quantity: 2,
-    amount: "$3401.82",
-    status: "paid",
-    action: null,
-  },
-  {
-    id: 15,
-    order: "Pertemuan PPID Satker Mabes Polri Langkah Strate",
-    customer: {
-      name: "Jenny Wilson",
-    },
-    date: "5/20/2022",
-    quantity: 4,
-    amount: "$2387.49",
-    status: "canceled",
-    action: null,
-  },
-];

app/[locale]/(protected)/contributor/content/spit/table-spit/page.tsx

@@ -1,383 +0,0 @@
-"use client";
-import * as React from "react";
-import {
-  ColumnDef,
-  ColumnFiltersState,
-  PaginationState,
-  SortingState,
-  VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { Button } from "@/components/ui/button";
-import { format } from "date-fns";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Eye,
-  MoreVertical,
-  Trash2,
-} from "lucide-react";
-import { title } from "process";
-
-import { getCookiesDecrypt } from "@/lib/utils";
-import { listSPIT } from "@/service/content/content";
-import { pages } from "next/dist/build/templates/app-page";
-
-export type CompanyData = {
-  no: number;
-  title: string;
-  categoryName: string;
-  createdAt: string;
-  creatorGroup: string;
-  publishedOn: string;
-  isPublish: any;
-  isPublishOnPolda: any;
-  isDone: string;
-};
-
-const columns: ColumnDef<CompanyData>[] = [
-  {
-    accessorKey: "no",
-    header: "No",
-    cell: ({ row }) => (
-      <div className="flex items-center gap-5">
-        <div className="flex-1 text-start">
-          <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
-            {row.getValue("no")}
-          </h4>
-        </div>
-      </div>
-    ),
-  },
-  {
-    accessorKey: "title",
-    header: "Judul",
-    cell: ({ row }) => (
-      <div className="flex items-center gap-5">
-        <div className="flex-1 text-start">
-          <h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
-            {row.getValue("title")}
-          </h4>
-        </div>
-      </div>
-    ),
-  },
-  {
-    accessorKey: "categoryName",
-    header: "Kategori",
-    cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
-    ),
-  },
-  {
-    accessorKey: "createdAt",
-    header: "Tanggal Unggah",
-    cell: ({ row }) => {
-      const createdAt = row.getValue("createdAt") as
-        | string
-        | number
-        | undefined;
-
-      const formattedDate =
-        createdAt && !isNaN(new Date(createdAt).getTime())
-          ? format(new Date(createdAt), "dd-MM-yyyy HH:mm:ss")
-          : "-";
-      return <span className="whitespace-nowrap">{formattedDate}</span>;
-    },
-  },
-  {
-    accessorKey: "creatorGroup",
-    header: "Sumber ",
-    cell: ({ row }) => (
-      <span className="whitespace-nowrap">{row.getValue("creatorGroup")}</span>
-    ),
-  },
-  {
-    accessorKey: "publishedOn",
-    header: "Penempatan File",
-    cell: ({ row }) => {
-      const isPublish = row.original.isPublish;
-      const isPublishOnPolda = row.original.isPublishOnPolda;
-
-      let displayText = "-";
-      if (isPublish && !isPublishOnPolda) {
-        displayText = "Mabes";
-      } else if (isPublish && isPublishOnPolda) {
-        displayText = "Mabes & Polda";
-      } else if (!isPublish && isPublishOnPolda) {
-        displayText = "Polda";
-      }
-
-      return (
-        <div className="text-center whitespace-nowrap" title={displayText}>
-          {displayText}
-        </div>
-      );
-    },
-  },
-
-  {
-    accessorKey: "isDone",
-    header: "Status",
-    cell: ({ row }) => {
-      const isDone = row.getValue<boolean>("isDone");
-      return (
-        <div>
-          <Button
-            size="sm"
-            color="success"
-            variant="outline"
-            className={` btn btn-sm ${
-              isDone ? "btn-outline-success" : "btn-outline-primary"
-            } pill-btn ml-1`}
-          >
-            {isDone ? "Selesai" : "Aktif"}
-          </Button>
-        </div>
-      );
-    },
-  },
-  {
-    id: "actions",
-    accessorKey: "action",
-    header: "Actions",
-    enableHiding: false,
-    cell: ({ row }) => {
-      return (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="icon"
-              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
-            >
-              <span className="sr-only">Open menu</span>
-              <MoreVertical className="h-4 w-4 text-default-800" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="p-0" align="end">
-            <a href="/contributor/task/detail/[id]">
-              <DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
-                <Eye className="w-4 h-4 me-1.5" />
-                View
-              </DropdownMenuItem>
-            </a>
-            <DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30  focus:bg-destructive focus:text-destructive-foreground rounded-none">
-              <Trash2 className="w-4 h-4 me-1.5" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      );
-    },
-  },
-];
-
-const TableSPIT = () => {
-  const [spitTable, setSpitTable] = React.useState<CompanyData[]>([]);
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
-  );
-  const [columnVisibility, setColumnVisibility] =
-    React.useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = React.useState({});
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0, // Halaman pertama
-    pageSize: 10, // Jumlah baris per halaman
-  });
-  const [page, setPage] = React.useState(1); // Halaman aktif
-  const [totalPage, setTotalPage] = React.useState(1); // Total halaman
-  const [limit, setLimit] = React.useState(6); // Jumlah baris per halaman
-  const [search, setSearch] = React.useState(title);
-  const userId = getCookiesDecrypt("uie");
-  const userLevelId = getCookiesDecrypt("ulie");
-
-  const [categories, setCategories] = React.useState();
-  const [categoryFilter, setCategoryFilter] = React.useState([]);
-  const [statusFilter, setStatusFilter] = React.useState([1, 2]);
-  const [startDateString, setStartDateString] = React.useState("");
-  const [endDateString, setEndDateString] = React.useState("");
-  const [filterByCreator, setFilterByCreator] = React.useState("");
-  const [filterBySource, setFilterBySource] = React.useState("");
-
-  const roleId = getCookiesDecrypt("urie");
-
-  const table = useReactTable({
-    data: spitTable,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-    },
-  });
-
-  // React.useEffect(() => {
-  //   initState();
-  // }, [page, limit]);
-
-  // async function initState() {
-  //   try {
-  //     const isForSelf = Number(roleId) == 4;
-
-  //     let isPublish;
-  //     if (statusFilter.length > 1) {
-  //       isPublish = "";
-  //     } else if (statusFilter.length === 1) {
-  //       if (statusFilter.includes(1)) {
-  //         isPublish = false;
-  //       } else {
-  //         isPublish = true;
-  //       }
-  //     } else {
-  //       isPublish = undefined;
-  //     }
-  //     const res = await listSPIT(pages, limit, search, isPublish);
-  //     const data = res.data.data.content.map((item: any, index: number) => ({
-  //       no: (page - 1) * limit + index + 1,
-  //       title: item.title,
-  //       categoryName: item.categoryName,
-  //       creatorGroup: item.creatorGroup,
-  //       assignmentType: item.assignmentType?.name || "-",
-  //       createdAt: item.createdAt,
-  //       isDone: item.isDone,
-  //       publishedOn: item.publishedOn,
-  //       isPublish: item.isPublish,
-  //       isPublishOnPolda: item.isPublishOnPolda,
-  //     }));
-
-  //     setSpitTable(data);
-  //     setTotalPage(res.data.totalPages);
-  //   } catch (error) {
-  //     console.error("Error fetching tasks:", error);
-  //   }
-  // }
-
-  return (
-    <div className="w-full">
-      <div className="flex items-center py-4 px-5">
-        <div className="flex-none">
-          <Input
-            placeholder="Filter Status..."
-            value={
-              (table.getColumn("status")?.getFilterValue() as string) ?? ""
-            }
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-              table.getColumn("status")?.setFilterValue(event.target.value)
-            }
-            className="max-w-sm "
-          />
-        </div>
-      </div>
-
-      <Table className="overflow-hidden">
-        <TableHeader>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TableRow key={headerGroup.id} className="bg-default-200">
-              {headerGroup.headers.map((header) => (
-                <TableHead key={header.id}>
-                  {header.isPlaceholder
-                    ? null
-                    : flexRender(
-                        header.column.columnDef.header,
-                        header.getContext()
-                      )}
-                </TableHead>
-              ))}
-            </TableRow>
-          ))}
-        </TableHeader>
-        <TableBody>
-          {table.getRowModel().rows?.length ? (
-            table.getRowModel().rows.map((row) => (
-              <TableRow
-                key={row.id}
-                data-state={row.getIsSelected() && "selected"}
-                className="h-[75px]"
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-24 text-center">
-                No results.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
-      <div className="flex items-center justify-center py-4 gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className="w-8 h-8"
-        >
-          <ChevronLeft className="w-4 h-4" />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className="w-8 h-8"
-            variant={
-              table.getState().pagination.pageIndex === pageIndex
-                ? "default"
-                : "outline"
-            }
-          >
-            {page + 1}
-          </Button>
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className="w-8 h-8"
-        >
-          <ChevronRight className="w-4 h-4" />
-        </Button>
-      </div>
-    </div>
-  );
-};
-export default TableSPIT;

app/[locale]/(protected)/contributor/content/spit/table-spit/table-pagination.tsx

@@ -1,52 +0,0 @@
-import { Button } from '@/components/ui/button';
-import { Table } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-interface DataTablePaginationProps {
-  table: Table<any>;
-}
-
-const TablePagination = ({ table }: DataTablePaginationProps) => {
-  return (
-    <div className="flex items-center justify-end py-4 px-10">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center gap-2 flex-none">
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.previousPage()}
-          disabled={!table.getCanPreviousPage()}
-          className='w-8 h-8'
-        >
-          <ChevronLeft className='w-4 h-4' />
-        </Button>
-        {table.getPageOptions().map((page, pageIndex) => (
-          <Button
-            key={`basic-data-table-${pageIndex}`}
-            onClick={() => table.setPageIndex(pageIndex)}
-            size="icon"
-            className="w-8 h-8"
-            variant={table.getState().pagination.pageIndex === pageIndex ? 'default' : 'outline'}
-          >
-            {page + 1}
-          </Button>
-
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => table.nextPage()}
-          disabled={!table.getCanNextPage()}
-          className='w-8 h-8'
-        >
-          <ChevronRight className='w-4 h-4' />
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-export default TablePagination;

app/[locale]/(protected)/contributor/content/spit/table-spit/table-spit.tsx

@@ -0,0 +1,232 @@
+"use client";
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { Button } from "@/components/ui/button";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  Trash2,
+} from "lucide-react";
+import { title } from "process";
+import { getCookiesDecrypt } from "@/lib/utils";
+import TablePagination from "@/components/table/table-pagination";
+import { listSPIT } from "@/service/content/content";
+
+import { useSearchParams } from "next/navigation";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import columns from "./columns";
+
+// export type CompanyData = {
+//   no: number;
+//   id: any;
+//   title: string;
+//   categoryName: string;
+//   createdAt: string;
+//   creatorGroup: string;
+//   publishedOn: string;
+//   isPublish: any;
+//   isPublishOnPolda: any;
+//   isDone: string;
+// };
+
+const TableSPIT = () => {
+  const searchParams = useSearchParams();
+  const [spitTable, setSpitTable] = React.useState<any[]>([]);
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [page, setPage] = React.useState(1);
+  const [totalPage, setTotalPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const [search, setSearch] = React.useState("");
+  const userId = getCookiesDecrypt("uie");
+  const userLevelId = getCookiesDecrypt("ulie");
+
+  const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [statusFilter, setStatusFilter] = React.useState([1, 2]);
+
+  const roleId = getCookiesDecrypt("urie");
+
+  const table = useReactTable({
+    data: spitTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page, limit, search]);
+
+  async function fetchData() {
+    let isPublish;
+    if (statusFilter.length > 1) {
+      isPublish = "";
+    } else if (statusFilter.length === 1) {
+      if (statusFilter.includes(1)) {
+        isPublish = false;
+      } else {
+        isPublish = true;
+      }
+    } else {
+      isPublish = undefined;
+    }
+
+    try {
+      const res = await listSPIT(page - 1, limit, search, isPublish);
+      const data = res.data?.data;
+      const contentData = data?.content;
+      contentData.forEach((item: any, index: number) => {
+        item.no = (page - 1) * limit + index + 1;
+      });
+
+      console.log("contentData : ", contentData);
+
+      setSpitTable(contentData);
+      setTotalData(data?.totalElements);
+      setTotalPage(data?.totalPages);
+    } catch (error) {
+      console.error("Error fetching tasks:", error);
+    }
+  }
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value); // Perbarui state search
+    table.getColumn("judul")?.setFilterValue(e.target.value); // Set filter tabel
+  };
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between items-center px-5">
+        <div>
+          <InputGroup merged>
+            <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
+              <Search className=" h-4 w-4 dark:text-white" />
+            </InputGroupText>
+            <Input
+              type="text"
+              placeholder="Search Judul..."
+              className="bg-transparent  dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
+              value={search}
+              onChange={handleSearch}
+            />
+          </InputGroup>
+        </div>
+        <div className="flex-none">
+          <Input
+            placeholder="Filter Status..."
+            value={
+              (table.getColumn("status")?.getFilterValue() as string) ?? ""
+            }
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              table.getColumn("status")?.setFilterValue(event.target.value)
+            }
+            className="max-w-sm "
+          />
+        </div>
+      </div>
+
+      <Table className="overflow-hidden mt-3">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+export default TableSPIT;

app/[locale]/(protected)/contributor/content/teks/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/contributor/content/video/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/curator/content-production/layout.tsx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Content Production",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

app/[locale]/(protected)/curator/content-production/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import ContentProductionVisualization from "@/components/visualization/content-production";
+
+export default function ContentProduction() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <ContentProductionVisualization />
+    </div>
+  );
+}

app/[locale]/(protected)/curator/pattern-relation/layout.tsx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Pattern Relation",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

app/[locale]/(protected)/curator/pattern-relation/page.tsx

@@ -0,0 +1,11 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import PatternRelationVisualization from "@/components/visualization/pattern-relation-viz";
+
+export default function PatternRelation() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <PatternRelationVisualization />
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/components/columns.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+
+import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { htmlToString } from "@/utils/globals";
+import { Link, useRouter } from "@/i18n/routing";
+
+const columns: ColumnDef<any>[] = [
+  {
+    accessorKey: "no",
+    header: "No",
+    cell: ({ row }) => <span>{row.getValue("no")}</span>,
+  },
+  {
+    accessorKey: "title",
+    header: "Judul Perencanaan",
+    cell: ({ row }) => <span>{row.getValue("title")}</span>,
+  },
+  {
+    accessorKey: "createdByName",
+    header: "Nama Pembuat",
+    cell: ({ row }) => <span>{row.getValue("createdByName")}</span>,
+  },
+  {
+    accessorKey: "description",
+    header: "Deskripsi",
+    cell: ({ row }) => <span>{htmlToString(row.getValue("description"))}</span>,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }) => <span>{row.getValue("status")}</span>,
+  },
+
+  {
+    id: "actions",
+    accessorKey: "action",
+    header: "Actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              size="icon"
+              className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
+            >
+              <MoreVertical className="h-4 w-4 text-default-800" />
+            </Button>
+          </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={`/curator/task-plan/mediahub/detail/${row.original.id}`}
+              >
+                Detail
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    },
+  },
+];
+
+export default columns;

app/[locale]/(protected)/curator/task-plan/mediahub/components/table.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  MoreVertical,
+  Search,
+  SquarePen,
+  Trash2,
+  TrendingDown,
+  TrendingUp,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupText } from "@/components/ui/input-group";
+import { paginationBlog } from "@/service/blog/blog";
+import { ticketingPagination } from "@/service/ticketing/ticketing";
+import { Badge } from "@/components/ui/badge";
+import { useRouter, useSearchParams } from "next/navigation";
+import TablePagination from "@/components/table/table-pagination";
+import columns from "./columns";
+
+const TaskPlanMediahubTable = (props: {
+  data: any;
+  totalPage: number;
+  totalData: number;
+}) => {
+  const { data, totalPage, totalData } = props;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [dataTable, setDataTable] = React.useState<any[]>([]);
+  // const [totalData, setTotalData] = React.useState<number>(1);
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+  const [page, setPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+
+  const table = useReactTable({
+    data: dataTable,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      pagination,
+    },
+  });
+
+  React.useEffect(() => {
+    const pageFromUrl = searchParams?.get("page");
+    if (pageFromUrl) {
+      setPage(Number(pageFromUrl));
+    }
+  }, [searchParams]);
+
+  React.useEffect(() => {
+    fetchData();
+  }, [page, limit, data]);
+
+  async function fetchData() {
+    // try {
+    // const res = await ticketingPagination("", limit, page - 1);
+    // const data = res.data?.data;
+    console.log("datgaa", data);
+    const contentData = data;
+    contentData.forEach((item: any, index: number) => {
+      item.no = (page - 1) * limit + index + 1;
+    });
+
+    console.log("contentData : ", contentData);
+
+    setDataTable(contentData);
+    // setTotalData(data?.totalElements);
+    // } catch (error) {
+    //   console.error("Error fetching tasks:", error);
+    // }
+  }
+
+  return (
+    <div className="w-full overflow-x-auto">
+      <Table className="overflow-hidden mt-3">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id} className="bg-default-200">
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext()
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() && "selected"}
+                className="h-[75px]"
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                No results.
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <TablePagination
+        table={table}
+        totalData={totalData}
+        totalPage={totalPage}
+      />
+    </div>
+  );
+};
+
+export default TaskPlanMediahubTable;

app/[locale]/(protected)/curator/task-plan/mediahub/create-daily/page.tsx

@@ -0,0 +1,436 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+
+const FormSchema = z.object({
+  date: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+  output: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+  unit: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "Required",
+  }),
+  type: z.enum(["publication", "amplification", "contra"], {
+    required_error: "Required",
+  }),
+});
+
+const items = [
+  {
+    id: "video",
+    label: "Audio Visual",
+  },
+  {
+    id: "image",
+    label: "Foto",
+  },
+  {
+    id: "audio",
+    label: "Audio",
+  },
+  {
+    id: "text",
+    label: "Text",
+  },
+];
+
+const units = [
+  {
+    id: "mabes",
+    label: "Mabes Polri",
+  },
+  {
+    id: "polda",
+    label: "Polda",
+  },
+  {
+    id: "polres",
+    label: "Polres",
+  },
+];
+export default function CreateMonthly() {
+  const MySwal = withReactContent(Swal);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      unit: [],
+      output: [],
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      MySwal.fire({
+        title: "Simpan Data",
+        text: "Apakah Anda yakin ingin menyimpan data ini?",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save(data);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    console.log("data", data);
+  };
+
+  const output = form.watch("output");
+
+  const isAllChecked = items.every((item) => output?.includes(item.id));
+
+  const unit = form.watch("unit");
+
+  const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
+
+  const handleAllCheckedChange = (checked: boolean | string) => {
+    if (checked) {
+      form.setValue(
+        "output",
+        items.map((item) => item.id)
+      );
+    } else {
+      form.setValue("output", []);
+    }
+  };
+
+  const handleItemCheckedChange = (id: string, checked: boolean | string) => {
+    form.setValue(
+      "output",
+      checked ? [...output, id] : output.filter((value) => value !== id)
+    );
+  };
+
+  const handleAllUnitCheckedChange = (checked: boolean | string) => {
+    if (checked) {
+      form.setValue(
+        "unit",
+        units.map((item) => item.id)
+      );
+    } else {
+      form.setValue("unit", []);
+    }
+  };
+
+  const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
+    form.setValue(
+      "unit",
+      checked ? [...unit, id] : unit.filter((value) => value !== id)
+    );
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row justify-center gap-5 mt-10">
+          <Link
+            href="/curator/task-plan/mediahub/create-monthly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Bulanan
+          </Link>
+          <Link
+            href="/curator/task-plan/mediahub/create-weekly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Mingguan
+          </Link>
+
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
+            Harian
+          </div>
+        </div>
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="output"
+                render={() => (
+                  <FormItem>
+                    <div className="mb-4">
+                      <FormLabel className="text-sm">Output Tugas</FormLabel>
+                    </div>
+                    <div className="flex flex-row gap-3 items-center ">
+                      <div className="flex items-center gap-3">
+                        <Checkbox
+                          id="all"
+                          checked={isAllChecked}
+                          // indeterminate={isSomeChecked && !isAllChecked}
+                          onCheckedChange={(checked) =>
+                            handleAllCheckedChange(checked)
+                          }
+                        />
+                        <label htmlFor="all" className="text-sm">
+                          Semua
+                        </label>
+                      </div>
+
+                      {items.map((item) => (
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="output"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start space-x-3 space-y-0"
+                              >
+                                <FormControl>
+                                  <Checkbox
+                                    checked={output?.includes(item.id)}
+                                    onCheckedChange={(checked) =>
+                                      handleItemCheckedChange(item.id, checked)
+                                    }
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.label}
+                                </FormLabel>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="unit"
+                render={() => (
+                  <FormItem>
+                    <div className="mb-4">
+                      <FormLabel className="text-sm">Pelaksana Tugas</FormLabel>
+                    </div>
+                    <div className="flex flex-row gap-3 items-center ">
+                      <div className="flex items-center gap-3">
+                        <Checkbox
+                          id="all"
+                          checked={isAllUnitChecked}
+                          onCheckedChange={(checked) =>
+                            handleAllUnitCheckedChange(checked)
+                          }
+                        />
+                        <label htmlFor="all" className="text-sm">
+                          Semua
+                        </label>
+                      </div>
+
+                      {units.map((item) => (
+                        <FormField
+                          key={item.id}
+                          control={form.control}
+                          name="unit"
+                          render={({ field }) => {
+                            return (
+                              <FormItem
+                                key={item.id}
+                                className="flex flex-row items-start space-x-3 space-y-0"
+                              >
+                                <FormControl>
+                                  <Checkbox
+                                    checked={unit?.includes(item.id)}
+                                    disabled={
+                                      item.id === "polres" &&
+                                      !unit.includes("polda")
+                                    }
+                                    onCheckedChange={(checked) =>
+                                      handleUnitCheckedChange(item.id, checked)
+                                    }
+                                  />
+                                </FormControl>
+                                <FormLabel className="font-normal">
+                                  {item.label}
+                                </FormLabel>
+                              </FormItem>
+                            );
+                          }}
+                        />
+                      ))}
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Jenis Penugasan</FormLabel>
+                    <FormControl>
+                      <RadioGroup
+                        onValueChange={field.onChange}
+                        defaultValue={field.value}
+                        className="flex flex-row gap-3"
+                      >
+                        <FormItem className="flex items-center space-x-3 space-y-0">
+                          <FormControl>
+                            <RadioGroupItem value="publication" />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            Publikasi
+                          </FormLabel>
+                        </FormItem>
+                        <FormItem className="flex items-center space-x-3 space-y-0">
+                          <FormControl>
+                            <RadioGroupItem value="amplification" />
+                          </FormControl>
+                          <FormLabel className="font-normal">
+                            Amplifikasi
+                          </FormLabel>
+                        </FormItem>
+                        <FormItem className="flex items-center space-x-3 space-y-0">
+                          <FormControl>
+                            <RadioGroupItem value="contra" />
+                          </FormControl>
+                          <FormLabel className="font-normal">Kontra</FormLabel>
+                        </FormItem>
+                      </RadioGroup>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="date"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value ? (
+                            format(field.value, "PPP")
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button type="submit" variant="outline" color="destructive">
+                  Cancel
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/create-monthly/page.tsx

@@ -0,0 +1,227 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { error } from "@/config/swal";
+import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+
+const FormSchema = z.object({
+  month: z.date({
+    required_error: "Required",
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function CreateMonthly() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      MySwal.fire({
+        title: "Simpan Data",
+        text: "Apakah Anda yakin ingin menyimpan data ini?",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save(data);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      planningTypeId: 1,
+      title: data.title,
+      time: "3",
+      description: data.detail,
+      username: "",
+      date: new Date(data.month).getMonth() + 1,
+      status: "Open",
+    };
+    console.log("req", reqData, data.month);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  const handleMonthSelect = (selectedDate: Date | undefined) => {
+    if (!selectedDate) return;
+    const newDate = new Date(
+      selectedDate.getFullYear(),
+      selectedDate.getMonth(),
+      1
+    );
+    form.setValue("month", newDate);
+  };
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row justify-center gap-5 mt-10">
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
+            Bulanan
+          </div>
+          <Link
+            href="/curator/task-plan/mediahub/create-weekly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Mingguan
+          </Link>
+          <Link
+            href="/curator/task-plan/mediahub/create-daily"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Harian
+          </Link>
+        </div>
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Bulanan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="month"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Bulan</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value ? (
+                            format(field.value, "MMMM yyyy")
+                          ) : (
+                            <span>Masukkan Bulan</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="single"
+                          selected={field.value}
+                          onSelect={handleMonthSelect}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button type="submit" variant="outline" color="destructive">
+                  Cancel
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/create-weekly/page.tsx

@@ -0,0 +1,232 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Link, useRouter } from "@/i18n/routing";
+import { CalendarIcon } from "lucide-react";
+import React, { useRef, useState } from "react";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import JoditEditor from "jodit-react";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Swal from "sweetalert2";
+import withReactContent from "sweetalert2-react-content";
+import { error } from "@/config/swal";
+import { getOnlyDate } from "@/utils/globals";
+import { savePlanning } from "@/service/agenda-setting/agenda-setting";
+
+const FormSchema = z.object({
+  week: z.object({
+    from: z.date({
+      required_error: "Start date (from) is required",
+    }),
+    to: z.date({
+      required_error: "End date (to) is required",
+    }),
+  }),
+  title: z.string({
+    required_error: "Required",
+  }),
+  detail: z.string({
+    required_error: "Required",
+  }),
+});
+export default function CreateMonthly() {
+  const MySwal = withReactContent(Swal);
+  const router = useRouter();
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      detail: "",
+    },
+  });
+  const editor = useRef(null);
+
+  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
+    if (form.getValues("detail") == "") {
+      form.setError("detail", {
+        type: "manual",
+        message: "Required",
+      });
+    } else {
+      MySwal.fire({
+        title: "Simpan Data",
+        text: "Apakah Anda yakin ingin menyimpan data ini?",
+        icon: "warning",
+        showCancelButton: true,
+        cancelButtonColor: "#d33",
+        confirmButtonColor: "#3085d6",
+        confirmButtonText: "Simpan",
+      }).then((result) => {
+        if (result.isConfirmed) {
+          save(data);
+        }
+      });
+    }
+  };
+
+  const save = async (data: z.infer<typeof FormSchema>) => {
+    const reqData = {
+      planningTypeId: 1,
+      title: data.title,
+      time: "2",
+      description: data.detail,
+      username: "",
+      date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
+      status: "Open",
+    };
+    console.log("req", reqData);
+    const response = await savePlanning(reqData);
+    close();
+    if (response.error) {
+      error(response.message);
+      return false;
+    }
+
+    MySwal.fire({
+      title: "Sukses",
+      icon: "success",
+      confirmButtonColor: "#3085d6",
+      confirmButtonText: "OK",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        router.push("/curator/task-plan/mediahub");
+      }
+    });
+  };
+
+  return (
+    <div>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row justify-center gap-5 mt-10">
+          <Link
+            href="/curator/task-plan/mediahub/create-monthly"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Bulanan
+          </Link>
+          <div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
+            Mingguan
+          </div>
+
+          <Link
+            href="/curator/task-plan/mediahub/create-daily"
+            className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
+          >
+            Harian
+          </Link>
+        </div>
+        <div className="flex flex-col bg-white gap-2 p-6">
+          <p className="text-lg">Perencanaan MediaHub Mingguan</p>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Judul Perencanaan</FormLabel>
+                    <Input
+                      value={field.value}
+                      placeholder="Masukkan Judul Perencanaan"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="week"
+                render={({ field }) => (
+                  <FormItem className="flex flex-col">
+                    <FormLabel>Pilih Tanggal</FormLabel>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[280px] justify-start text-left font-normal",
+                            !field.value && "text-muted-foreground"
+                          )}
+                        >
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {field.value?.from ? (
+                            field.value.to ? (
+                              <>
+                                {format(field.value.from, "LLL dd, y")} -{" "}
+                                {format(field.value.to, "LLL dd, y")}
+                              </>
+                            ) : (
+                              format(field.value.from, "LLL dd, y")
+                            )
+                          ) : (
+                            <span>Masukkan Tanggal</span>
+                          )}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar
+                          mode="range"
+                          selected={field.value}
+                          onSelect={field.onChange}
+                          initialFocus
+                        />
+                      </PopoverContent>
+                    </Popover>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="detail"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Detail Perencanaan</FormLabel>
+                    <JoditEditor
+                      ref={editor}
+                      value={field.value}
+                      className="dark:text-black"
+                      onChange={field.onChange}
+                    />
+
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <div className="flex flex-row gap-2 justify-end mt-4 pt-4">
+                <Button type="submit" variant="outline" color="destructive">
+                  Cancel
+                </Button>
+                <Button type="submit" color="primary">
+                  Submit
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/detail/[id]/page.tsx

@@ -0,0 +1,270 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { close, loading } from "@/config/swal";
+import { getWeeklyPlanList } from "@/service/agenda-setting/agenda-setting";
+import { getPlanningById } from "@/service/planning/planning";
+import { useParams } from "next/navigation";
+import dayjs from "dayjs";
+import { useEffect, useRef, useState } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import JoditEditor from "jodit-react";
+
+export default function DetailTaskPlanMediahub() {
+  const params = useParams();
+  const id = params?.id;
+  const editor = useRef(null);
+
+  const [planningData, setPlanningData] = useState<any>();
+
+  const [type, setType] = useState("");
+
+  const [weeklyList, setWeeklyList] = useState<any>([]);
+  const [weeklySelected, setWeeklySelected] = useState();
+
+  const [taskOutput, setTaskOutput] = useState<any>([]);
+  const [destination, setDestination] = useState<any>([]);
+  const [listDest, setListDest] = useState([]);
+  const [topDestination, setTopDestination] = useState<any>([]);
+
+  useEffect(() => {
+    initFetch();
+  }, [id]);
+
+  async function initFetch() {
+    if (id != undefined) {
+      loading();
+      const res = await getPlanningById(id);
+      close();
+
+      if (res?.data?.data != undefined) {
+        const data = res?.data?.data;
+        console.log("Data :", data);
+        setPlanningData(data);
+        setAssignedTopLevel(data?.assignedToTopLevel);
+        setArrayDestination(data?.assignedToLevel);
+        setArrayTaskOutput(data?.fileTypeOutput);
+        setType(String(data?.assignmentTypeId));
+      }
+    }
+  }
+
+  function setArrayDestination(assignedToLevel: any) {
+    if (assignedToLevel?.length > 0) {
+      const arrayDestination = [];
+      const arrayDest = assignedToLevel.split(",");
+
+      for (const element of arrayDest) {
+        arrayDestination.push(element);
+      }
+
+      setDestination(arrayDestination);
+    }
+  }
+
+  function setAssignedTopLevel(assignedToTopLevel: any) {
+    if (assignedToTopLevel?.length > 0) {
+      const arrayTopLevel = [];
+      const arrayTop = assignedToTopLevel.split(",");
+
+      for (const element of arrayTop) {
+        arrayTopLevel.push(Number(element));
+      }
+
+      setTopDestination(arrayTopLevel);
+    }
+  }
+
+  function setArrayTaskOutput(output: any) {
+    if (output?.length > 0) {
+      const arrayOutput = [];
+      const arrOutput = output.split(",");
+
+      for (const element of arrOutput) {
+        arrayOutput.push(Number(element));
+      }
+
+      setTaskOutput(arrayOutput);
+    }
+  }
+
+  useEffect(() => {
+    getWeeklyPlanning();
+  }, [planningData]);
+
+  async function getWeeklyPlanning() {
+    const TODAY = dayjs().format("YYYY-MM-DD");
+    const res = await getWeeklyPlanList(planningData?.date || TODAY, 1);
+
+    if (res.data !== null) {
+      const rawUser = res.data?.data;
+      const optionArr = rawUser.map((option: any) => ({
+        id: option.id,
+        label: option.title,
+        value: option.id,
+      }));
+      console.log("res", optionArr);
+
+      setWeeklyList(optionArr);
+    }
+  }
+  return (
+    <>
+      <SiteBreadcrumb />
+      <div className="text-black flex flex-col gap-4">
+        <p className="text-lg">Perencanaan Mediahub</p>
+        <p className="text-sm">Judul Perencanaan</p>
+        <Input value={planningData?.title} readOnly />
+        <p className="text-sm">Output Tugas</p>
+        <div className="flex flex-row gap-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.length == 4 : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Semua
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(2) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Audio Visual
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(4) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Audio
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(1) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Foto
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={taskOutput ? taskOutput.includes(3) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Text
+            </label>
+          </div>
+        </div>
+        <p className="text-sm">Pelaksana Tugas</p>
+        <div className="flex flex-row gap-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(0) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Semua Unit
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(1) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Mabes Polri
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(2) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Polda
+            </label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="all"
+              checked={topDestination ? topDestination.includes(3) : false}
+            />
+            <label
+              htmlFor="all"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Polres
+            </label>
+          </div>
+        </div>
+        <p className="text-sm">Jenis Penugasan</p>
+        <RadioGroup className="flex flex-row" disabled>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="1" id="1" checked={type === "1"} />
+            <Label htmlFor="1">Publikasi {type}</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="2" id="2" checked={type === "2"} />
+            <Label htmlFor="2">Amplifikasi</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="3" id="3" checked={type === "3"} />
+            <Label htmlFor="3">Kontra</Label>
+          </div>
+        </RadioGroup>
+        <p className="text-sm">Tanggal</p>
+        <Input value={planningData?.date} className="w-fit" readOnly />
+        <p className="text-sm">Penugasan Mingguan</p>
+        <Input value={weeklyList[0]?.label} readOnly />
+        <JoditEditor
+          ref={editor}
+          value={planningData?.description}
+          className="dark:text-black"
+          config={{ readonly: true, toolbar: false }}
+        />
+      </div>
+    </>
+  );
+}

app/[locale]/(protected)/curator/task-plan/mediahub/layout.tsx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Mediahub",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

app/[locale]/(protected)/curator/task-plan/mediahub/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+import ListViewTable from "@/components/table/task-plan/list-view-table";
+import SingleViewTable from "@/components/table/task-plan/single-view-table";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "@/i18n/routing";
+import { useState } from "react";
+
+export default function TaskPlanMediaHub() {
+  const router = useRouter();
+  const [view, setView] = useState("single");
+  return (
+    <>
+      <SiteBreadcrumb />
+      <div className="flex flex-col gap-4">
+        <div className="flex justify-between">
+          <Button
+            onClick={() =>
+              view === "single" ? setView("list") : setView("single")
+            }
+          >
+            {view == "single" ? "List" : "Single"} View
+          </Button>
+          <Button
+            color="primary"
+            onClick={() =>
+              router.push("/curator/task-plan/mediahub/create-monthly")
+            }
+          >
+            Buat Perencaan
+          </Button>
+        </div>
+        {view == "single" ? <SingleViewTable /> : <ListViewTable />}
+      </div>
+    </>
+  );
+}

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/layout.tsx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: "Medos Mediahub",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

app/[locale]/(protected)/curator/task-plan/medsos-mediahub/page.tsx

@@ -0,0 +1,9 @@
+import SiteBreadcrumb from "@/components/site-breadcrumb";
+
+export default function TaskPlanMedsosMediaHub() {
+  return (
+    <div>
+      <SiteBreadcrumb />
+    </div>
+  );
+}

app/[locale]/(protected)/dashboard/layout.tsx

@@ -1,10 +1,9 @@
 import PageTitle from "@/components/page-title";
 import { Metadata } from "next";
-import { Suspense } from "react";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>

app/[locale]/(protected)/dashboard/page.tsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 
 import { StatisticsBlock } from "@/components/blocks/statistics-block";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -7,18 +7,29 @@ import { useTranslations } from "next-intl";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { UploadIcon } from "lucide-react";
+
+import Cookies from "js-cookie";
+import { useEffect } from "react";
+import { getCookiesDecrypt } from "@/lib/utils";
+import DashboardVisualization from "@/components/visualization/dashboard-viz";
+import SiteBreadcrumb from "@/components/site-breadcrumb";
 import TaskTable from "../contributor/task/components/task-table";
 import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table";
 import BlogTable from "../contributor/blog/components/blog-table";
 import ContentTable from "./routine-task/components/content-table";
 import RecentActivity from "./routine-task/components/recent-activity";
 import { Link } from "@/components/navigation";
-import { Suspense } from "react";
 
 const DashboardPage = () => {
   const t = useTranslations("AnalyticsDashboard");
-  return (
+  const roleId = getCookiesDecrypt("urie");
-    <Suspense>
+
+  return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
+    <div>
+      <SiteBreadcrumb />
+      <DashboardVisualization />
+    </div>
+  ) : (
     <div>
       <div className="my-3">
         <Tabs defaultValue="routine-task" className="w-full">
@@ -171,7 +182,6 @@ const DashboardPage = () => {
         </Tabs>
       </div>
     </div>
-    </Suspense>
   );
 };
 

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

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/ecommerce/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/checkbox/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/combobox/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/command/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/form-validation/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/input-file/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/input-group/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/input-layout/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/input-mask/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/input-otp/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/input/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/radio/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/select/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/slider/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/switch/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/forms/textarea/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;

app/[locale]/(protected)/icons/layout.tsx

@@ -2,7 +2,7 @@ import { Metadata } from "next";
 
 export const metadata: Metadata = {
   title: "Media Hub | POLRI",
-  description: "Dashcode is a popular dashboard template.",
+  description: "Media Hub merupakan situs resmi milik Divisi Humas Polri di mana di dalamnya berisi konten-konten yang dapat diakses secara gratis oleh Internal Polri, Jurnalis, Masyarakat Umum, dan KSP.",
 };
 const Layout = ({ children }: { children: React.ReactNode }) => {
   return <>{children}</>;