feat: e-magazine detail

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/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

@@ -1,7 +1,41 @@
 import React from 'react'
 
-export default function PPIDAdminPage() {
+export default function tes() {
     return (
-        <div>PPIDAdminPage</div>
+        <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>
     )
 }

components/Landing Page/ENewsPolri.tsx

@@ -26,24 +26,6 @@ export default function ENewsPolri() {
         },
     ];
 
-    // useEffect(() => {
-    //     function updateLimitedData() {
-    //         if (window.matchMedia("(max-width: 767px)").matches) {
-    //             setLimitedData(eNews.slice(0, 1));
-    //         } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
-    //             setLimitedData(eNews.slice(0, 2));
-    //         } else {
-    //             setLimitedData(eNews.slice(0, 3));
-    //         }
-    //     }
-
-    //     updateLimitedData();
-    //     window.addEventListener('resize', updateLimitedData);
-    //     return () => {
-    //         window.removeEventListener('resize', updateLimitedData);
-    //     };
-    // }, [eNews]);
-
     return (
         <div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-5 flex py-4 flex-col justify-center items-center'>
             <p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p>
@@ -52,6 +34,7 @@ export default function ENewsPolri() {
                 <div className='lg:flex space-y-4 lg:space-y-0 gap-1 md:gap-2  lg:gap-8'>
                     {eNews.map((data: any) => (
                         <div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
+                            <Link href={`/e-majalah-polri/detail/${data.id}`}>
                                 <Card className='text-white'
                                     isFooterBlurred
                                 >
@@ -67,6 +50,7 @@ export default function ENewsPolri() {
                                         <p className='text-xs text-left'>{data.title}</p>
                                     </CardFooter>
                                 </Card>
+                            </Link>
                         </div>
                     ))}
                 </div>

components/detail/DetailPage.tsx

@@ -4,7 +4,7 @@ import Comment from './Comment'
 import SidebarDetail from '../page/SidebarDetail'
 import RelatedNews from '../page/RelatedNews'
 
-export default function DetailPage() {
+export default function NewsDetailPage() {
     return (
         <>
             <div className='text-black md:flex bg-white'>

components/detail/E-MagazineDetail.tsx

@@ -0,0 +1,60 @@
+'use client'
+import { BreadcrumbItem, Breadcrumbs } from '@nextui-org/breadcrumbs'
+import { Button } from '@nextui-org/button'
+import React from 'react'
+
+export default function EMagazineDetail() {
+    return (
+        <div className='w-auto bg-[#E2E2E2] text-black'>
+            <div className='p-1 md:p-5 lg:px-8'>
+                <div className='font-bold text-xl'>E-Majalah Polri</div>
+                <div className="pt-2">
+                    <Breadcrumbs color='primary'>
+                        <BreadcrumbItem>Beranda</BreadcrumbItem>
+                        <BreadcrumbItem>E-Majalah Polri</BreadcrumbItem>
+                        <BreadcrumbItem>Judul</BreadcrumbItem>
+                    </Breadcrumbs>
+                </div>
+                <div className='pt-5 space-y-4'>
+                    <div className='font-semibold border-b-4 border-red-700 leading-loose'>MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023</div>
+                    <div className='bg-[#FFFFFF] rounded-lg h-[380px] flex items-center justify-center'>
+                        <img src="/emagazine.jpeg" alt="emagazine" className='h-[380px] rounded-md py-1' />
+                    </div>
+                    <div>
+                        <Button
+                            className='w-full bg-[#DD8306] text-sm font-semibold'
+                        >
+                            Download
+                        </Button>
+                    </div>
+                    <div className='bg-[#FFFFFF] rounded-md text-sm font-medium'>
+                        <div className='flex justify-between text-white border-t-2 border-l border-r rounded-t-md border-gray-300 p-3 bg-[#9D9D9D]'>
+                            <div className='w-5/6'>Judul</div>
+                            <div className='w-1/6 text-center border-l border-gray-300'>Keterangan</div>
+                        </div>
+                        <div className='flex justify-between border border-gray-300 p-3'>
+                            <div className='w-5/6'>Download</div>
+                            <div className='w-1/6 text-center border-l border-gray-300'>51</div>
+                        </div>
+                        <div className='flex justify-between border border-gray-300 p-3'>
+                            <div className='w-5/6'>File Size</div>
+                            <div className='w-1/6 text-center border-l border-gray-300'>12,.58MB</div>
+                        </div>
+                        <div className='flex justify-between border border-gray-300 p-3'>
+                            <div className='w-5/6'>Download</div>
+                            <div className='w-1/6 text-center border-l border-gray-300'>10</div>
+                        </div>
+                        <div className='flex justify-between border border-gray-300 p-3'>
+                            <div className='w-5/6'>Created Date</div>
+                            <div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
+                        </div>
+                        <div className='flex justify-between border border-b border-gray-300 p-3 rounded-b-md'>
+                            <div className='w-5/6'>Last Update</div>
+                            <div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

components/layout/PPIDAdminLayout.tsx

@@ -0,0 +1,21 @@
+"use client";
+import React, { Children } from "react";
+import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
+import PPIDAdminNavbarWrapper from "../navbar/PPIDAdminNavbarWrapper";
+
+interface Props {
+    children: React.ReactNode;
+    pageTitle?: string;
+}
+
+export const PPIDAdminLayout = ({ children, pageTitle }: Props) => {
+
+    return (
+        <section className="flex text-black dark:text-white dark:bg-[#0b2948] border-2 border-red-500">
+            <PPIDAdminSidebarWrapper />
+            <PPIDAdminNavbarWrapper>
+                {children}
+            </PPIDAdminNavbarWrapper>
+        </section>
+    );
+};

components/layout/SatKerLayout.tsx

@@ -1,9 +1,7 @@
 "use client";
 import React from "react";
-import FooterPPID from "../Portal PPID/FooterPPID";
-import NavbarPPID from "../navbar/NavbarPPID";
-import NavbarSatker from "../navbar/NavbarSatker";
 import FooterSatker from "../navbar/FooterSatker";
+import NavbarSatker from "../navbar/NavbarSatker";
 
 interface Props {
     children: React.ReactNode;

components/navbar/PPIDAdminNavbarWrapper.tsx

@@ -0,0 +1,54 @@
+import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/navbar';
+import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
+import Link from 'next/link';
+import React, { Children } from 'react'
+import { ThemeSwitch } from '../theme-switch';
+
+interface Props {
+    children: React.ReactNode;
+    pageTitle?: string;
+    pageSubTitle?: string;
+    pageSubSubTitle?: string;
+    mainHref?: any;
+    subHref?: any;
+}
+
+export default function PPIDAdminNavbarWrapper({ children, pageTitle, pageSubTitle, pageSubSubTitle, mainHref, subHref }: Props) {
+    return (
+        <div className='  relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden h-screen'>
+            <Navbar className='w-full bg-slate-100 dark:bg-[#0b2948]'
+                isBordered
+                classNames={{
+                    wrapper: "w-full max-w-full"
+                }}>
+                <NavbarContent as="div" justify="end">
+                    <Dropdown placement="bottom-end">
+                        <DropdownTrigger>
+                            <Avatar
+                                isBordered
+                                as="button"
+                                className="transition-transform"
+                                color="secondary"
+                                name="Jason Hughes"
+                                size="sm"
+                                src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
+                            />
+                        </DropdownTrigger>
+                        <DropdownMenu aria-label="Profile Actions" variant="flat">
+                            <DropdownItem key="profile" className="h-14 gap-2">
+                                <p className="font-semibold">Signed in as</p>
+                                <p className="font-semibold">zoey@example.com</p>
+                            </DropdownItem>
+                            <DropdownItem key="settings">My Settings</DropdownItem>
+                            <DropdownItem key="logout" color="danger">
+                                Log Out
+                            </DropdownItem>
+                            <DropdownItem key="theme"><ThemeSwitch /> </DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </NavbarContent>
+            </Navbar>
+            {children}
+        </div>
+    )
+}

components/navbar/PPIDAdminSidebarWrapper.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function PPIDAdminSidebarWrapper() {
+    return (
+        <aside className='w-[300px]  rounded-r-xl h-screen shadow-lg border bg-slate-100 dark:bg-[#0b2948]'>
+            Sidebar
+        </aside>
+    )
+}

components/sidebar/PPIDAdminSidebar.tsx

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

components/table/tabel-emajalah-polri.tsx

@@ -64,14 +64,14 @@ export default function ListEnewsPolri() {
         }
     ]
 
-    const animals = [
+    const category = [
         { label: "Title", value: "title" },
         { label: "Date", value: "date" },
         { label: "Created At", value: "createdAt" },
     ];
     return (
         <div className='md:flex '>
-            <div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'>
+            <div className='w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] text-black'>
                 <div className='p-1 md:p-5 lg:p-8'>
                     <div className='font-bold text-xl'>E-Majalah Polri</div>
                     <div className="pt-2">
@@ -109,7 +109,7 @@ export default function ListEnewsPolri() {
                             // onChange={onChangeFilterEnterprising}
                             >
                                 <SelectSection >
-                                    {animals.map((list: any) => (
+                                    {category.map((list: any) => (
                                         <SelectItem key={list.id}>{list.label}</SelectItem>
                                     ))}
                                 </SelectSection>
@@ -139,7 +139,7 @@ export default function ListEnewsPolri() {
                             // onChange={onChangeFilterEnterprising}
                             >
                                 <SelectSection >
-                                    {animals.map((list: any) => (
+                                    {category.map((list: any) => (
                                         <SelectItem key={list.id}>{list.label}</SelectItem>
                                     ))}
                                 </SelectSection>
@@ -178,7 +178,7 @@ export default function ListEnewsPolri() {
 
                 </div>
             </div>
-            <div className='w-auto md:w-[30%]'>
+            <div className='w-auto md:w-1/3 lg:w-[25%]'>
                 <PPIDSidebar />
             </div>
         </div>

debug.log

@@ -0,0 +1,2 @@
+[0303/221019.644:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
+[0303/221019.882:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)