feat:drone

.drone.yml

@@ -0,0 +1,34 @@
+kind: pipeline
+type: ssh
+name: humas-fe-build
+
+server:
+  host:
+    from_secret: ssh_host
+  user:
+    from_secret: ssh_user
+  ssh_key:
+    from_secret: ssh_key
+
+steps:
+  - name: prepare repo
+    when:
+      branch:
+        - prod
+    commands:
+      - rm -rf /opt/build/web-humas-fe
+      - mkdir -p /opt/build/web-humas-fe
+      - cd /opt/build
+      - git clone http://38.47.180.165:3000/humas/web-humas-fe.git
+      - cd /opt/build/web-humas-fe
+      - git checkout $DRONE_BRANCH
+
+  - name: build image
+    when:
+      branch:
+        - prod
+    commands:
+      - docker login 38.47.180.165:3000 -u administrator -p HarborDockerImageRep0
+      - cd /opt/build/web-humas-fe
+      - docker build -t 38.47.180.165:3000/humas/web-humas-fe:$DRONE_BRANCH .
+      - docker push 38.47.180.165:3000/humas/web-humas-fe:$DRONE_BRANCH

.gitlab-ci.yml

@@ -0,0 +1,29 @@
+stages:
+  - build
+  - deploy
+
+build-dev:
+  stage: build
+  when: on_success
+  only:
+    - main
+  image: docker:stable
+  services:
+  - name: docker:dind
+    command: ["--insecure-registry=103.82.242.92:8900"]
+  script:
+    - docker logout
+    - docker login -u $DEPLOY_USERNAME -p $DEPLOY_TOKEN 103.82.242.92:8900
+    - docker build -t 103.82.242.92:8900/humas/web-humas-fe:dev .
+    - docker push 103.82.242.92:8900/humas/web-humas-fe:dev
+
+auto-deploy:
+  stage: deploy
+  when: on_success
+  only:
+    - main
+  image: curlimages/curl:latest
+  services:
+    - docker:dind
+  script:
+    - curl --user cekmedsos:$JENKINS_PWD http://103.82.242.92:8080/job/autodeploy-humas/build?token=autodeployhumas

Dockerfile

@@ -0,0 +1,24 @@
+FROM node:21-alpine
+
+ENV PORT 4000
+
+# Create app directory
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# Installing dependencies
+COPY package*.json /usr/src/app/
+
+# RUN npm install --force
+RUN npm install -g npm@latest
+RUN npm install
+
+# Copying source files
+COPY . /usr/src/app
+
+# Building app
+RUN npm run build
+EXPOSE 4000
+
+# Running the app
+CMD "npm" "run" "start"

app/(admin)/admin/article/create/page.tsx

@@ -0,0 +1,10 @@
+import FormArticle from '@/components/form/form-article'
+import { Card } from '@nextui-org/react'
+
+export default function CreateArticle() {
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormArticle />
+        </Card>
+    )
+}

app/(admin)/admin/article/detail/[id]/page.tsx

@@ -0,0 +1,10 @@
+import FormDetailArticle from '@/components/form/form-detail-article'
+import { Card } from '@nextui-org/react'
+
+export default function DetailArticlePage() {
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormDetailArticle />
+        </Card>
+    )
+}

app/(admin)/admin/article/edit/[id]/page.tsx

@@ -0,0 +1,10 @@
+import FormUpdateArticle from '@/components/form/form-edit-article'
+import { Card } from '@nextui-org/react'
+
+export default function UpdateArticlePage() {
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormUpdateArticle />
+        </Card>
+    )
+}

app/(admin)/admin/article/page.tsx

@@ -0,0 +1,24 @@
+"use client"
+import { AddIcon } from "@/components/icons";
+import ArticleTable from "@/components/table/article-table";
+import { Button, Card } from "@nextui-org/react";
+import Link from "next/link";
+
+export default function BasicPage() {
+    return (
+        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
+            <div className="px-4">
+                <Card className="rounded-md my-5 pl-5 py-2">
+                    <Link href="/admin/article/create">
+                        <Button size="md" color="primary" className="w-min">
+                            <AddIcon />New Article
+                        </Button>
+                    </Link>
+                </Card>
+                <Card className="rounded-md my-5">
+                    <ArticleTable />
+                </Card>
+            </div>
+        </div>
+    );
+}

app/(admin)/admin/dashboard/page.tsx

@@ -0,0 +1,11 @@
+import DashboardContainer from "@/components/main/dashboard/dashboard-container";
+
+export default function AdminPage() {
+    return (
+        <div className="flex h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+            <div className="px-4">
+                <DashboardContainer />
+            </div>
+        </div>
+    )
+}

app/(admin)/admin/e-magazine/create/page.tsx

@@ -0,0 +1,11 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMagazineCreate = () => {
+    return (
+        <div><CreateMagazineForm /></div>
+    )
+}
+
+export default AdminMagazineCreate

app/(admin)/admin/e-magazine/detail/page.tsx

@@ -0,0 +1,11 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMagazineDetail = () => {
+    return (
+        <div><CreateMagazineForm /></div>
+    )
+}
+
+export default AdminMagazineDetail

app/(admin)/admin/e-magazine/page.tsx

@@ -0,0 +1,10 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMagazine = () => {
+    return (
+        <div><MagazineTable /></div>
+    )
+}
+
+export default AdminMagazine

app/(admin)/admin/layout.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { AdminLayout } from "@/components/layout/admin-layout";
+
+export default function AdminPageLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <AdminLayout>
+            {children}
+        </AdminLayout>
+    );
+}

app/(admin)/admin/master-menu/create/page.tsx

@@ -0,0 +1,12 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import CreateMenuDataForm from '@/components/form/master/master-menu/menu-data/menu-data-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMenuDataCreate = () => {
+    return (
+        <div><CreateMenuDataForm /></div>
+    )
+}
+
+export default AdminMenuDataCreate

app/(admin)/admin/master-menu/page.tsx

@@ -0,0 +1,11 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
+import React from 'react'
+
+const AdminMenuData = () => {
+    return (
+        <div><MenuDataTable /></div>
+    )
+}
+
+export default AdminMenuData

app/(admin)/admin/master-module/create/page.tsx

@@ -0,0 +1,13 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import CreateMenuDataForm from '@/components/form/master/master-menu/menu-data/menu-data-form'
+import CreateMasterModuleForm from '@/components/form/master/master-module/master-module-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMasterModuleCreate = () => {
+    return (
+        <div><CreateMasterModuleForm /></div>
+    )
+}
+
+export default AdminMasterModuleCreate

app/(admin)/admin/master-module/page.tsx

@@ -0,0 +1,12 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
+import MasterModuleTable from '@/components/table/master/master-module/master-module-table'
+import React from 'react'
+
+const AdminMasterModule = () => {
+    return (
+        <div><MasterModuleTable /></div>
+    )
+}
+
+export default AdminMasterModule

app/(admin)/admin/master-role/create/page.tsx

@@ -0,0 +1,10 @@
+import FormMasterUserRole from '@/components/form/form-master-user-role'
+import { Card } from '@nextui-org/react'
+
+export default function CreateMasterUserRolePage() {
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormMasterUserRole />
+        </Card>
+    )
+}

app/(admin)/admin/master-role/detail/[id]/page.tsx

@@ -0,0 +1,10 @@
+import FormDetailMasterUserRole from '@/components/form/form-detail-master-user-role'
+import { Card } from '@nextui-org/react'
+
+export default function DetailMasterRolePage() {
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormDetailMasterUserRole />
+        </Card>
+    )
+}

app/(admin)/admin/master-role/page.tsx

@@ -0,0 +1,24 @@
+"use client"
+import { AddIcon } from "@/components/icons";
+import MasterRoleTable from "@/components/table/master-role-table";
+import { Button, Card } from "@nextui-org/react";
+import Link from "next/link";
+
+export default function MasterRolePage() {
+    return (
+        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
+            <div className="px-4">
+                <Card className="rounded-md my-5 pl-5 py-2">
+                    <Link href="/admin/master-role/create">
+                        <Button size="md" color="primary" className="w-min">
+                            <AddIcon />New Role
+                        </Button>
+                    </Link>
+                </Card>
+                <Card className="rounded-md my-5">
+                    <MasterRoleTable />
+                </Card>
+            </div>
+        </div>
+    );
+}

app/(admin)/admin/master-user-level/create/page.tsx

@@ -0,0 +1,14 @@
+import CreateMagazineForm from '@/components/form/magazine/magazine-form'
+import CreateMenuDataForm from '@/components/form/master/master-menu/menu-data/menu-data-form'
+import CreateMasterModuleForm from '@/components/form/master/master-module/master-module-form'
+import CreateMasterUserLevelForm from '@/components/form/master/master-user-level/master-user-level-form'
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import React from 'react'
+
+const AdminMasterUserLevelCreate = () => {
+    return (
+        <div><CreateMasterUserLevelForm /></div>
+    )
+}
+
+export default AdminMasterUserLevelCreate

app/(admin)/admin/master-user-level/page.tsx

@@ -0,0 +1,13 @@
+import MagazineTable from '@/components/table/magazine/magazine-table'
+import MenuDataTable from '@/components/table/master/master-menu/menu-data/menu-data-table'
+import MasterModuleTable from '@/components/table/master/master-module/master-module-table'
+import MasterUserLevelTable from '@/components/table/master/master-user-level/master-user-level-table'
+import React from 'react'
+
+const AdminMasterUserLevel = () => {
+    return (
+        <div><MasterUserLevelTable /></div>
+    )
+}
+
+export default AdminMasterUserLevel

app/(admin)/admin/master-user/create/page.tsx

@@ -0,0 +1,10 @@
+import FormMasterUser from '@/components/form/form-master-user'
+import { Card } from '@nextui-org/react'
+
+export default function CreateMasterUserPage() {
+    return (
+        <Card className="h-[96vh] rounded-md my- ml-3 border bg-transparent">
+            <FormMasterUser />
+        </Card>
+    )
+}

app/(admin)/admin/master-user/page.tsx

@@ -0,0 +1,24 @@
+"use client"
+import { AddIcon } from "@/components/icons";
+import MasterUserTable from "@/components/table/master-user-table";
+import { Button, Card } from "@nextui-org/react";
+import Link from "next/link";
+
+export default function MasterUserPage() {
+    return (
+        <div className="h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-2 ml-4">
+            <div className="px-4">
+                <Card className="rounded-md my-5 pl-5 py-2">
+                    <Link href="/admin/master-user/create">
+                        <Button size="md" color="primary" className="w-min">
+                            <AddIcon />New User
+                        </Button>
+                    </Link>
+                </Card>
+                <Card className="rounded-md my-5">
+                    <MasterUserTable />
+                </Card>
+            </div>
+        </div>
+    );
+}

app/(admin)/admin/page.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+export default function HomePage() {
+	return (
+		<div className=" h-[96vh] overflow-x-hidden overflow-y-scroll gap-0 grid rounded-lg border-small ml-4">
+			<div className="px-4">
+				<h3>Welcome</h3>
+			</div>
+		</div>
+	);
+}

app/about/layout.tsx

@@ -1,13 +0,0 @@
-export default function AboutLayout({
-	children,
-}: {
-	children: React.ReactNode;
-}) {
-	return (
-		<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-			<div className="inline-block max-w-lg text-center justify-center">
-				{children}
-			</div>
-		</section>
-	);
-}

app/about/page.tsx

@@ -1,9 +0,0 @@
-import { title } from "@/components/primitives";
-
-export default function AboutPage() {
-	return (
-		<div>
-			<h1 className={title()}>About</h1>
-		</div>
-	);
-}

app/auth/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function AuthLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/auth/page.tsx

@@ -0,0 +1,8 @@
+import Login from '@/components/form/login'
+import React from 'react'
+
+export default function AuthPage() {
+    return (
+        <Login />
+    )
+}

app/detail/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Page() {
+    return (
+        <div>page</div>
+    )
+}

app/docs/layout.tsx

@@ -1,13 +1,15 @@
+'use client'
+
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
 export default function DocsLayout({
 	children,
 }: {
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-			<div className="inline-block max-w-lg text-center justify-center">
-				{children}
-			</div>
-		</section>
+		<HumasLayout>
+			{children}
+		</HumasLayout>
 	);
 }

app/e-majalah-polri/daftar-majalah/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function EMajalahLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/e-majalah-polri/daftar-majalah/page.tsx

@@ -0,0 +1,8 @@
+import ListEnewsPolri from '@/components/table/tabel-emajalah-polri'
+import React from 'react'
+
+export default function ListEnewsPage() {
+    return (
+        <ListEnewsPolri />
+    )
+}

app/e-majalah-polri/detail/[id]/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function DetailEMajalahLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/e-majalah-polri/detail/[id]/page.tsx

@@ -0,0 +1,8 @@
+import EMagazineDetail from '@/components/detail/E-MagazineDetail'
+import React from 'react'
+
+export default function EnewsDetailPage() {
+    return (
+        <EMagazineDetail />
+    )
+}

app/form-permohonan-informasi/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function ApplicationLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/form-permohonan-informasi/page.tsx

@@ -0,0 +1,7 @@
+import FormApplication from '@/components/form/form-permohonan-informasi'
+
+export default function ApplicationPage() {
+    return (
+        <FormApplication />
+    )
+}

app/gpr/page.tsx

@@ -0,0 +1,18 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+export default function GPRPage() {
+    const [hasMounted, setHasMounted] = useState(false);
+
+    useEffect(() => {
+        setHasMounted(true);
+    }, []);
+
+    // Render
+    if (!hasMounted) return null;
+    return (
+        <div className='bg-red-500 h-96'>
+            <div id="gpr-kominfo-widget-container" className='h-96 text-white bg-tra'></div>
+        </div>
+    )
+}

app/kontak-kami/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function KontakLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/kontak-kami/page.tsx

@@ -0,0 +1,7 @@
+import Contact from '@/components/detail/Contact'
+
+export default function VisiMisiPage() {
+    return (
+        <Contact />
+    )
+}

app/layout.tsx

@@ -1,11 +1,9 @@
-import "@/styles/globals.css";
-import { Metadata } from "next";
-import { siteConfig } from "@/config/site";
 import { fontSans } from "@/config/fonts";
-import { Providers } from "./providers";
-import { Navbar } from "@/components/navbar";
-import { Link } from "@nextui-org/link";
+import { siteConfig } from "@/config/site";
+import "@/styles/globals.css";
 import clsx from "clsx";
+import { Metadata } from "next";
+import { Providers } from "./providers";
 
 export const metadata: Metadata = {
 	title: {
@@ -18,7 +16,7 @@ export const metadata: Metadata = {
 		{ media: "(prefers-color-scheme: dark)", color: "black" },
 	],
 	icons: {
-		icon: "/favicon.ico",
+		icon: "/logohumas.ico",
 		shortcut: "/favicon-16x16.png",
 		apple: "/apple-touch-icon.png",
 	},
@@ -30,32 +28,18 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<html lang="en" suppressHydrationWarning>
+		<html lang="en" suppressHydrationWarning className="scroll-smooth">
 			<head />
 			<body
 				className={clsx(
-					"min-h-screen bg-background font-sans antialiased",
+					"bg-background font-sans antialiased",
 					fontSans.variable
 				)}
 			>
 				<Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-					<div className="relative flex flex-col h-screen">
-						<Navbar />
-						<main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
-							{children}
-						</main>
-						<footer className="w-full flex items-center justify-center py-3">
-							<Link
-								isExternal
-								className="flex items-center gap-1 text-current"
-								href="https://nextui-docs-v2.vercel.app?utm_source=next-app-template"
-								title="nextui.org homepage"
-							>
-								<span className="text-default-600">Powered by</span>
-								<p className="text-primary">NextUI</p>
-							</Link>
-						</footer>
-					</div>
+					<main className="">
+						{children}
+					</main>
 				</Providers>
 			</body>
 		</html>

app/news/[polda-name]/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function PoldaNewsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/news/[polda-name]/page.tsx

@@ -0,0 +1,8 @@
+import ListNews from '@/components/detail/ListNews'
+import React from 'react'
+
+export default function PoldaNewsPage() {
+    return (
+        <ListNews />
+    )
+}

app/news/all/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function AllNewsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/news/all/page.tsx

@@ -0,0 +1,8 @@
+import ListNews from '@/components/detail/ListNews'
+import React from 'react'
+
+export default function ListNewsPage() {
+    return (
+        <ListNews />
+    )
+}

app/news/detail/[id]/layout.tsx

@@ -0,0 +1,13 @@
+import { HumasLayout } from "@/components/layout/HumasLayout";
+
+export default function NewsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <HumasLayout>
+            {children}
+        </HumasLayout>
+    );
+}

app/news/detail/[id]/page.tsx

@@ -0,0 +1,8 @@
+import DetailPage from '@/components/detail/DetailPage'
+import React from 'react'
+
+export default function NewsPage() {
+    return (
+        <DetailPage />
+    )
+}

app/page.tsx

@@ -1,51 +1,27 @@
-import { Link } from "@nextui-org/link";
-import { Snippet } from "@nextui-org/snippet";
-import { Code } from "@nextui-org/code"
-import { button as buttonStyles } from "@nextui-org/theme";
-import { siteConfig } from "@/config/site";
-import { title, subtitle } from "@/components/primitives";
-import { GithubIcon } from "@/components/icons";
+'use client'
+import BannerHumas from "@/components/Landing Page/BannerHumas";
+import BodyLayout from "@/components/Landing Page/BodyLayout";
+import HeaderNews from "@/components/Landing Page/HeaderNews";
+import { HumasLayout } from "@/components/layout/HumasLayout";
+import { useEffect, useState } from "react";
 
 export default function Home() {
+	const [hasMounted, setHasMounted] = useState(false);
+
+	useEffect(() => {
+		setHasMounted(true);
+	}, []);
+
+	// Render
+	if (!hasMounted) return null;
+
 	return (
-		<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-			<div className="inline-block max-w-lg text-center justify-center">
-				<h1 className={title()}>Make&nbsp;</h1>
-				<h1 className={title({ color: "violet" })}>beautiful&nbsp;</h1>
-				<br />
-				<h1 className={title()}>
-					websites regardless of your design experience.
-				</h1>
-				<h2 className={subtitle({ class: "mt-4" })}>
-					Beautiful, fast and modern React UI library.
-				</h2>
-			</div>
-
-			<div className="flex gap-3">
-				<Link
-					isExternal
-					href={siteConfig.links.docs}
-					className={buttonStyles({ color: "primary", radius: "full", variant: "shadow" })}
-				>
-					Documentation
-				</Link>
-				<Link
-					isExternal
-					className={buttonStyles({ variant: "bordered", radius: "full" })}
-					href={siteConfig.links.github}
-				>
-					<GithubIcon size={20} />
-					GitHub
-				</Link>
-			</div>
-
-			<div className="mt-8">
-				<Snippet hideSymbol hideCopyButton variant="flat">
-					<span>
-						Get started by editing <Code color="primary">app/page.tsx</Code>
-					</span>
-				</Snippet>
-			</div>
-		</section>
+		<>
+			<HumasLayout>
+				<BannerHumas />
+				<HeaderNews />
+				<BodyLayout />
+			</HumasLayout>
+		</>
 	);
 }

app/portal-ppid/admin/layout.tsx

@@ -0,0 +1,13 @@
+import { PPIDAdminLayout } from "@/components/layout/PPIDAdminLayout";
+
+export default function LayoutAdmin({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return (
+        <PPIDAdminLayout >
+            {children}
+        </PPIDAdminLayout>
+    );
+}

app/portal-ppid/admin/page.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+export default function tes() {
+    return (
+        <div className='bg-white'>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+            <div>1</div>
+        </div>
+    )
+}

app/portal-ppid/e-ppid-polda/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'
+
+export default function EPPIDPoldaLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
+}

app/portal-ppid/e-ppid-polda/page.tsx

@@ -0,0 +1,7 @@
+import PPIDPolda from '@/components/Portal PPID/PPIDPolda'
+
+export default function PPIDSakterPage() {
+    return (
+        <PPIDPolda />
+    )
+}

app/portal-ppid/e-ppid-satker/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'
+
+export default function EPPIDSatkerLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
+}

app/portal-ppid/e-ppid-satker/page.tsx

@@ -0,0 +1,7 @@
+import PPIDSatker from '@/components/Portal PPID/PPIDSatker'
+
+export default function PPIDSakterPage() {
+    return (
+        <PPIDSatker />
+    )
+}

app/portal-ppid/informasi-publik/informasi-berkala/page.tsx

@@ -0,0 +1,7 @@
+import InformasiBerkala from '@/components/table/informasi-berkala'
+
+export default function InformasiSMPage() {
+    return (
+        <InformasiBerkala />
+    )
+}

app/portal-ppid/informasi-publik/informasi-dikecualikan/page.tsx

@@ -0,0 +1,7 @@
+import InformasiDikecualikan from '@/components/table/informasi-dikecualikan'
+
+export default function InfromationExcluded() {
+    return (
+        <InformasiDikecualikan />
+    )
+}

app/portal-ppid/informasi-publik/informasi-serta-merta/page.tsx

@@ -0,0 +1,8 @@
+import InformasiSertaMerta from '@/components/table/informasi-sertamerta'
+import React from 'react'
+
+export default function InformasiSMPage() {
+    return (
+        <InformasiSertaMerta />
+    )
+}

app/portal-ppid/informasi-publik/informasi-setiap-saat/page.tsx

@@ -0,0 +1,8 @@
+import InformasiSetiapSaat from '@/components/table/informasi-setiap-saat'
+import React from 'react'
+
+export default function InformasiSSPage() {
+    return (
+        <InformasiSetiapSaat />
+    )
+}

app/portal-ppid/informasi-publik/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'
+
+export default function InfoPublicLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
+}

app/portal-ppid/informasi-publik/penerangan-satuan/page.tsx

@@ -0,0 +1,8 @@
+import PeneranganSatuan from '@/components/table/penerangan-satuan'
+import React from 'react'
+
+export default function UnitIlumintaion() {
+    return (
+        <PeneranganSatuan />
+    )
+}

app/portal-ppid/informasi-publik/uu-dan-peraturan/page.tsx

@@ -0,0 +1,8 @@
+import UUPeraturan from '@/components/table/uu-peraturan'
+import React from 'react'
+
+export default function LawsRegulation() {
+    return (
+        <UUPeraturan />
+    )
+}

app/portal-ppid/layanan-informasi/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'
+
+export default function LayananInformasiLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
+}

app/portal-ppid/layanan-informasi/permohonan-informasi/page.tsx

@@ -0,0 +1,8 @@
+import Login from '@/components/form/login'
+import React from 'react'
+
+export default function PemohononanInformasi() {
+    return (
+        <Login />
+    )
+}

app/portal-ppid/layanan-informasi/permohonan-keberatan/page.tsx

@@ -0,0 +1,8 @@
+import FormObjectionRequest from '@/components/form/form-permohonan-keberatan'
+import React from 'react'
+
+export default function PermohonanKeberanatan() {
+    return (
+        <FormObjectionRequest />
+    )
+}

app/portal-ppid/layanan-informasi/ppid-laporan-tahunan/page.tsx

@@ -0,0 +1,8 @@
+import AnnualReport from '@/components/table/laporan-tahunan'
+import React from 'react'
+
+export default function ReportTahunan() {
+    return (
+        <AnnualReport />
+    )
+}

app/portal-ppid/layanan-informasi/registrasi-permohonan/page.tsx

@@ -0,0 +1,8 @@
+import FormApplication from '@/components/form/form-permohonan-informasi'
+import React from 'react'
+
+export default function RegistrasiPage() {
+    return (
+        <FormApplication />
+    )
+}

app/portal-ppid/layanan-informasi/statistik-rekapitulasi/page.tsx

@@ -0,0 +1,8 @@
+import StatiticAndRecap from '@/components/detail/StatistikRekapitulas'
+import React from 'react'
+
+export default function StatisticPage() {
+    return (
+        <StatiticAndRecap />
+    )
+}

app/portal-ppid/page.tsx

@@ -0,0 +1,23 @@
+'use client'
+import FooterPPID from '@/components/Portal PPID/FooterPPID';
+import PPIDbody from '@/components/Portal PPID/PpidMain';
+import PPIDBanner from '@/components/Portal PPID/ppid-banner';
+import NavbarPPID from '@/components/navbar/NavbarPPID';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+
+
+export default function PortalPPID(url: any) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <>
+            <NavbarPPID />
+            <PPIDBanner url={url} />
+            <PPIDbody />
+            <FooterPPID />
+        </>
+    )
+}

app/portal-ppid/polda/[polda-name]/informasi-publik/informasi-berkala/page.tsx

@@ -0,0 +1,7 @@
+import InformasiBerkala from '@/components/table/informasi-berkala'
+
+export default function InformasiSMPage() {
+    return (
+        <InformasiBerkala />
+    )
+}

app/portal-ppid/polda/[polda-name]/informasi-publik/informasi-dikecualikan/page.tsx

@@ -0,0 +1,7 @@
+import InformasiDikecualikan from '@/components/table/informasi-dikecualikan'
+
+export default function InfromationExcluded() {
+    return (
+        <InformasiDikecualikan />
+    )
+}

app/portal-ppid/polda/[polda-name]/informasi-publik/informasi-serta-merta/page.tsx

@@ -0,0 +1,8 @@
+import InformasiSertaMerta from '@/components/table/informasi-sertamerta'
+import React from 'react'
+
+export default function InformasiSMPage() {
+    return (
+        <InformasiSertaMerta />
+    )
+}

app/portal-ppid/polda/[polda-name]/informasi-publik/informasi-setiap-saat/page.tsx

@@ -0,0 +1,8 @@
+import InformasiSetiapSaat from '@/components/table/informasi-setiap-saat'
+import React from 'react'
+
+export default function InformasiSSPage() {
+    return (
+        <InformasiSetiapSaat />
+    )
+}

app/portal-ppid/polda/[polda-name]/informasi-publik/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+export default function DinamicSatkerLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    // const pathname = usePathname();
+    // console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
+}

app/portal-ppid/polda/[polda-name]/informasi-publik/penerangan-satuan/page.tsx

@@ -0,0 +1,8 @@
+import PeneranganSatuan from '@/components/table/penerangan-satuan'
+import React from 'react'
+
+export default function UnitIlumintaion() {
+    return (
+        <PeneranganSatuan />
+    )
+}

app/portal-ppid/polda/[polda-name]/informasi-publik/uu-dan-peraturan/page.tsx

@@ -0,0 +1,8 @@
+import UUPeraturan from '@/components/table/uu-peraturan'
+import React from 'react'
+
+export default function LawsRegulation() {
+    return (
+        <UUPeraturan />
+    )
+}

app/portal-ppid/polda/[polda-name]/layanan-informasi/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+export default function LayananInformasiLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
+}

app/portal-ppid/polda/[polda-name]/layanan-informasi/permohonan-informasi/page.tsx

@@ -0,0 +1,8 @@
+import Login from '@/components/form/login'
+import React from 'react'
+
+export default function PemohononanInformasi() {
+    return (
+        <Login />
+    )
+}

app/portal-ppid/polda/[polda-name]/layanan-informasi/permohonan-keberatan/page.tsx

@@ -0,0 +1,8 @@
+import FormObjectionRequest from '@/components/form/form-permohonan-keberatan'
+import React from 'react'
+
+export default function PermohonanKeberanatan() {
+    return (
+        <FormObjectionRequest />
+    )
+}

app/portal-ppid/polda/[polda-name]/layanan-informasi/ppid-laporan-tahunan/page.tsx

@@ -0,0 +1,8 @@
+import AnnualReport from '@/components/table/laporan-tahunan'
+import React from 'react'
+
+export default function ReportTahunan() {
+    return (
+        <AnnualReport />
+    )
+}

app/portal-ppid/polda/[polda-name]/layanan-informasi/registrasi-permohonan/page.tsx

@@ -0,0 +1,8 @@
+import FormApplication from '@/components/form/form-permohonan-informasi'
+import React from 'react'
+
+export default function RegistrasiPage() {
+    return (
+        <FormApplication />
+    )
+}

app/portal-ppid/polda/[polda-name]/layanan-informasi/statistik-rekapitulasi/page.tsx

@@ -0,0 +1,8 @@
+import StatiticAndRecap from '@/components/detail/StatistikRekapitulas'
+import React from 'react'
+
+export default function StatisticPage() {
+    return (
+        <StatiticAndRecap />
+    )
+}

app/portal-ppid/polda/[polda-name]/page.tsx

@@ -0,0 +1,24 @@
+'use client'
+import PPIDSatkerMain from '@/components/Portal PPID/PPIDMainSatker';
+import PPIDBanner from '@/components/Portal PPID/ppid-banner';
+import FooterSatker from '@/components/navbar/FooterSatker';
+import NavbarSatker from '@/components/navbar/NavbarSatker';
+import { usePathname } from 'next/navigation';
+import React from 'react'
+
+export default function PoldaPage() {
+    const pathname = usePathname();
+    const url: string = pathname.split('polda/')[1].replace(/-/g, ' ').toUpperCase();
+
+
+    return (
+        <div className='text-black'>
+            <div className='text-black'>
+                <NavbarSatker />
+                <PPIDBanner url={url} />
+                <PPIDSatkerMain />
+                <FooterSatker />
+            </div>
+        </div>
+    )
+}

app/portal-ppid/polda/[polda-name]/profile/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+export default function DinamicSatkerLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    // const pathname = usePathname();
+    // console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
+}

app/portal-ppid/polda/[polda-name]/profile/profile-singkat-ppid/page.tsx

@@ -0,0 +1,8 @@
+import About from '@/components/detail/About'
+import React from 'react'
+
+export default function PPIDProfile() {
+    return (
+        <About />
+    )
+}

app/portal-ppid/polda/[polda-name]/profile/sejarah-ppid-polri/page.tsx

@@ -0,0 +1,8 @@
+import HistoryPPID from '@/components/page/HistoryPPID'
+import React from 'react'
+
+export default function PPIDProfilePage() {
+    return (
+        <HistoryPPID />
+    )
+}

app/portal-ppid/polda/[polda-name]/profile/struktur-ppid/page.tsx

@@ -0,0 +1,7 @@
+import StrukturOrganisasi from "@/components/detail/StrukturOrganisasi";
+
+export default function StructurePPID() {
+    return (
+        <StrukturOrganisasi />
+    )
+}

app/portal-ppid/polda/[polda-name]/profile/tugas-dan-fungsi-ppid/page.tsx

@@ -0,0 +1,9 @@
+import Task from "@/components/detail/TaskDetail";
+
+
+
+export default function PPIDTask() {
+    return (
+        <Task />
+    )
+}

app/portal-ppid/polda/[polda-name]/profile/visi-dan-misi-ppid/page.tsx

@@ -0,0 +1,8 @@
+import VisiMisi from '@/components/detail/VisiMisi'
+import React from 'react'
+
+export default function VMPPID() {
+    return (
+        <VisiMisi />
+    )
+}

app/portal-ppid/polda/[polda-name]/regulasi/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+export default function RegulasiLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
+}

app/portal-ppid/polda/[polda-name]/regulasi/page.tsx

@@ -0,0 +1,15 @@
+import PPIDSidebar from '@/components/Portal PPID/PPIDSidebar'
+import RegulationTable from '@/components/table/tabel-regulasi'
+
+export default function RegulasiPage() {
+    return (
+        <div className='md:flex'>
+            <div className='w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] px-2 md:px-0 lg:px-5'>
+                <RegulationTable />
+            </div>
+            <div className='w-auto md:w-1/3 lg:w-[25%]'>
+                <PPIDSidebar />
+            </div>
+        </div>
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/alur-pelayanan-informasi-publik/page.tsx

@@ -0,0 +1,8 @@
+import ServiceFlow from '@/components/detail/ServiceFlow'
+import React from 'react'
+
+export default function ServiceFlowPage() {
+    return (
+        <ServiceFlow />
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/layout.tsx

@@ -0,0 +1,20 @@
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { SatkerLayout } from '@/components/layout/SatKerLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'
+
+export default function StandarLayananLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <SatkerLayout>
+            {children}
+        </SatkerLayout>
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/maklumat-pelayanan/page.tsx

@@ -0,0 +1,8 @@
+import ServiceAnnouncement from '@/components/detail/ServiceAnnouncement'
+import React from 'react'
+
+export default function ServiceAnnouncePage() {
+    return (
+        <ServiceAnnouncement />
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/mekanisme-keberatan/page.tsx

@@ -0,0 +1,8 @@
+import ObjectionMecanism from '@/components/detail/ObjectionMecanism'
+import React from 'react'
+
+export default function ObjectionMecanismPage() {
+    return (
+        <ObjectionMecanism />
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/mekanisme-permohonan-penyelesaian-sengketa/page.tsx

@@ -0,0 +1,8 @@
+import RequestDispute from '@/components/detail/RequestDispute'
+import React from 'react'
+
+export default function RequestDisputePage() {
+    return (
+        <RequestDispute />
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/standar-biaya-pelayanan/page.tsx

@@ -0,0 +1,8 @@
+import ServiceFee from '@/components/detail/ServiceFee'
+import React from 'react'
+
+export default function ServiceFeePage() {
+    return (
+        <ServiceFee />
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/tata-cara-permohonan-informasi/page.tsx

@@ -0,0 +1,8 @@
+import RequestInformation from '@/components/detail/RequestInformation'
+import React from 'react'
+
+export default function RequestInformationPage() {
+    return (
+        <RequestInformation />
+    )
+}

app/portal-ppid/polda/[polda-name]/standar-layanan/waktu-pelayanan/page.tsx

@@ -0,0 +1,8 @@
+import ServiceTime from '@/components/detail/ServiceTime'
+import React from 'react'
+
+export default function ServiceTimePage() {
+    return (
+        <ServiceTime />
+    )
+}

app/portal-ppid/profile/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+import { PPIDLayout } from '@/components/layout/PPIDLayout';
+import { usePathname } from 'next/navigation';
+import React, { Children } from 'react'
+
+export default function PPIDProfileLayout({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const pathname = usePathname();
+    console.log(pathname)
+
+    return (
+        <PPIDLayout>
+            {children}
+        </PPIDLayout>
+    )
+}

app/portal-ppid/profile/profile-singkat-ppid/page.tsx

@@ -0,0 +1,8 @@
+import About from '@/components/detail/About'
+import React from 'react'
+
+export default function PPIDProfile() {
+    return (
+        <About />
+    )
+}

app/portal-ppid/profile/sejarah-ppid-polri/page.tsx

@@ -0,0 +1,8 @@
+import HistoryPPID from '@/components/page/HistoryPPID'
+import React from 'react'
+
+export default function PPIDProfilePage() {
+    return (
+        <HistoryPPID />
+    )
+}