Merge pull request #25 from bipproduction/join

Join

.env

@@ -4,4 +4,4 @@
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL="postgresql://bip:Production_123d@localhost:5433/sdm?schema=public"
+DATABASE_URL="postgresql://bip:Production_123d@localhost:5433/sistem_desa_mandiri?schema=public"

.gitignore

@@ -28,6 +28,9 @@ yarn-error.log*
 # local env files
 .env*.local
 
+# env
+.env
+
 # vercel
 .vercel
 

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "WillLuke.nextjs.hasPrompted": true
+}

package.json

@@ -8,19 +8,58 @@
     "start": "next start",
     "lint": "next lint"
   },
+  "prisma": {
+    "seed": "tsx prisma/seed.ts"
+  },
   "dependencies": {
+    "@hookstate/core": "^4.0.1",
+    "@mantine/carousel": "^7.11.1",
+    "@mantine/charts": "^7.11.0",
+    "@mantine/code-highlight": "^7.11.0",
+    "@mantine/core": "^7.11.0",
+    "@mantine/dates": "^7.11.0",
+    "@mantine/dropzone": "^7.11.0",
+    "@mantine/form": "^7.11.0",
+    "@mantine/hooks": "^7.11.0",
+    "@mantine/modals": "^7.11.0",
+    "@mantine/notifications": "^7.11.0",
+    "@mantine/nprogress": "^7.11.0",
+    "@mantine/spotlight": "^7.11.0",
+    "@mantine/tiptap": "^7.11.0",
+    "@prisma/client": "5.16.1",
+    "@tabler/icons-react": "^3.7.0",
+    "@tiptap/extension-link": "^2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
+    "@types/lodash": "^4.17.6",
+    "dayjs": "^1.11.11",
+    "embla-carousel-autoplay": "^7.1.0",
+    "embla-carousel-react": "^7.1.0",
+    "lodash": "^4.17.21",
+    "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.4"
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.2.1",
+    "recharts": "2"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@types/node": "^20.14.9",
-    "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^8",
-    "eslint-config-next": "14.2.4"
+    "eslint-config-next": "14.2.4",
-  }
+    "postcss": "^8.4.39",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prisma": "^5.16.1",
+    "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.5.3"
+  },
+  "description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }

prisma/schema.prisma

@@ -0,0 +1,364 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+// Looking for ways to speed up your queries, or scale easily with your serverless or edge functions?
+// Try Prisma Accelerate: https://pris.ly/cli/accelerate-init
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model UserRole {
+  id        String   @id @default(cuid())
+  name      String
+  desc      String   @db.Text
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  User      User[]
+}
+
+model Village {
+  id          String        @id @default(cuid())
+  name        String
+  desc        String        @db.Text
+  isActive    Boolean       @default(true)
+  createdAt   DateTime      @default(now())
+  updatedAt   DateTime      @updatedAt
+  Group       Group[]
+  User        User[]
+  Annoucement Annoucement[]
+  Project     Project[]
+  Division    Division[]
+}
+
+model Group {
+  id                String              @id @default(cuid())
+  Village           Village             @relation(fields: [idVillage], references: [id])
+  idVillage         String
+  name              String
+  isActive          Boolean             @default(true)
+  createdAt         DateTime            @default(now())
+  updatedAt         DateTime            @updatedAt
+  Position          Position[]
+  User              User[]
+  Project           Project[]
+  Division          Division[]
+  AnnoucementMember AnnoucementMember[]
+}
+
+model Position {
+  id        String   @id @default(cuid())
+  Group     Group    @relation(fields: [idGroup], references: [id])
+  idGroup   String
+  name      String
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  User      User[]
+}
+
+model User {
+  id                         String                       @id @default(cuid())
+  UserRole                   UserRole                     @relation(fields: [idUserRole], references: [id])
+  idUserRole                 String
+  Village                    Village?                     @relation(fields: [idVillage], references: [id])
+  idVillage                  String?
+  Group                      Group?                       @relation(fields: [idGroup], references: [id])
+  idGroup                    String?
+  Position                   Position?                    @relation(fields: [idPosition], references: [id])
+  idPosition                 String?
+  nik                        String                       @unique
+  name                       String
+  phone                      String                       @unique
+  email                      String?                      @unique
+  gender                     String                       @default("M") //M= Male, F= Female
+  isActive                   Boolean                      @default(true)
+  createdAt                  DateTime                     @default(now())
+  updatedAt                  DateTime                     @updatedAt
+  Annoucement                Annoucement[]
+  Project                    Project[]
+  ProjectMember              ProjectMember[]
+  ProjectComment             ProjectComment[]
+  UserLog                    UserLog[]
+  Division                   Division[]
+  DivisionMember             DivisionMember[]
+  DivisionProjectMember      DivisionProjectMember[]
+  DivisionProjectFile        DivisionProjectFile[]
+  DivisionDisscussion        DivisionDisscussion[]
+  DivisionDisscussionComment DivisionDisscussionComment[]
+  DivisionDocumentFolderFile DivisionDocumentFolderFile[]
+  DivisionCalendar           DivisionCalendar[]
+}
+
+model UserLog {
+  id        String   @id @default(cuid())
+  User      User     @relation(fields: [idUser], references: [id])
+  idUser    String
+  action    String
+  desc      String   @db.Text
+  idContent String
+  tbContent String
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Annoucement {
+  id                String              @id @default(cuid())
+  Village           Village             @relation(fields: [idVillage], references: [id])
+  idVillage         String
+  title             String
+  desc              String              @db.Text
+  isActive          Boolean             @default(true)
+  User              User                @relation(fields: [createdBy], references: [id])
+  createdBy         String
+  createdAt         DateTime            @default(now())
+  updatedAt         DateTime            @updatedAt
+  AnnoucementMember AnnoucementMember[]
+}
+
+model AnnoucementMember {
+  id            String      @id @default(cuid())
+  Annoucement   Annoucement @relation(fields: [idAnnoucement], references: [id])
+  idAnnoucement String
+  Group         Group       @relation(fields: [idGroup], references: [id])
+  idGroup       String
+  Division      Division    @relation(fields: [idDivision], references: [id])
+  idDivision    String
+  isActive      Boolean     @default(true)
+  createdAt     DateTime    @default(now())
+  updatedAt     DateTime    @updatedAt
+}
+
+model Project {
+  id             String           @id @default(cuid())
+  Village        Village          @relation(fields: [idVillage], references: [id])
+  idVillage      String
+  Group          Group            @relation(fields: [idGroup], references: [id])
+  idGroup        String
+  name           String
+  desc           String           @db.Text
+  isActive       Boolean          @default(true)
+  User           User             @relation(fields: [createdBy], references: [id])
+  createdBy      String
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  ProjectMember  ProjectMember[]
+  ProjectFile    ProjectFile[]
+  ProjectComment ProjectComment[]
+}
+
+model ProjectMember {
+  id        String   @id @default(cuid())
+  Project   Project  @relation(fields: [idProject], references: [id])
+  idProject String
+  User      User     @relation(fields: [idUser], references: [id])
+  idUser    String
+  isLeader  Boolean  @default(false)
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model ProjectFile {
+  id        String   @id @default(cuid())
+  Project   Project  @relation(fields: [idProject], references: [id])
+  idProject String
+  name      String
+  extension String
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model ProjectComment {
+  id        String   @id @default(cuid())
+  Project   Project  @relation(fields: [idProject], references: [id])
+  idProject String
+  User      User     @relation(fields: [createdBy], references: [id])
+  createdBy String
+  comment   String   @db.Text
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Division {
+  id                         String                       @id @default(cuid())
+  Village                    Village                      @relation(fields: [idVillage], references: [id])
+  idVillage                  String
+  Group                      Group                        @relation(fields: [idGroup], references: [id])
+  idGroup                    String
+  name                       String
+  desc                       String                       @db.Text
+  isActive                   Boolean                      @default(true)
+  User                       User                         @relation(fields: [createdBy], references: [id])
+  createdBy                  String
+  createdAt                  DateTime                     @default(now())
+  updatedAt                  DateTime                     @updatedAt
+  DivisionMember             DivisionMember[]
+  AnnoucementMember          AnnoucementMember[]
+  DivisionProject            DivisionProject[]
+  DivisionProjectTask        DivisionProjectTask[]
+  DivisionProjectMember      DivisionProjectMember[]
+  DivisionProjectFile        DivisionProjectFile[]
+  DivisionDisscussion        DivisionDisscussion[]
+  DivisionDocumentFolderFile DivisionDocumentFolderFile[]
+  DivisionDocumentShare      DivisionDocumentShare[]
+  DivisionCalendar           DivisionCalendar[]
+  DivisionCalendarReminder   DivisionCalendarReminder[]
+}
+
+model DivisionMember {
+  id         String   @id @default(cuid())
+  Division   Division @relation(fields: [idDivision], references: [id])
+  idDivision String
+  User       User     @relation(fields: [idUser], references: [id])
+  idUser     String
+  isAdmin    Boolean  @default(false)
+  isLeader   Boolean  @default(false)
+  isActive   Boolean  @default(true)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model DivisionProject {
+  id         String   @id @default(cuid())
+  Division   Division @relation(fields: [idDivision], references: [id])
+  idDivision String
+  title      String
+  desc       String   @db.Text
+  status     Int      @default(0)
+  isActive   Boolean  @default(true)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model DivisionProjectTask {
+  id         String   @id @default(cuid())
+  Division   Division @relation(fields: [idDivision], references: [id])
+  idDivision String
+  title      String
+  desc       String   @db.Text
+  status     Int      @default(0)
+  dateStart  DateTime @db.Date
+  dateEnd    DateTime @db.Date
+  isActive   Boolean  @default(true)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model DivisionProjectMember {
+  id         String   @id @default(cuid())
+  Division   Division @relation(fields: [idDivision], references: [id])
+  idDivision String
+  User       User     @relation(fields: [idUser], references: [id])
+  idUser     String
+  isLeader   Boolean  @default(false)
+  isActive   Boolean  @default(true)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model DivisionProjectFile {
+  id         String   @id @default(cuid())
+  Division   Division @relation(fields: [idDivision], references: [id])
+  idDivision String
+  name       String
+  extension  String
+  isActive   Boolean  @default(true)
+  User       User     @relation(fields: [createdBy], references: [id])
+  createdBy  String
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model DivisionDisscussion {
+  id         String   @id @default(cuid())
+  Division   Division @relation(fields: [idDivision], references: [id])
+  idDivision String
+  title      String
+  desc       String   @db.Text
+  status     Int      @default(1) // 1 = open, 2 = close
+  isActive   Boolean  @default(true)
+  User       User     @relation(fields: [createdBy], references: [id])
+  createdBy  String
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model DivisionDisscussionComment {
+  id            String   @id @default(cuid())
+  idDisscussion String
+  comment       String   @db.Text
+  isActive      Boolean  @default(true)
+  User          User     @relation(fields: [createdBy], references: [id])
+  createdBy     String
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+}
+
+model DivisionDocumentFolderFile {
+  id                    String                  @id @default(cuid())
+  Division              Division                @relation(fields: [idDivision], references: [id])
+  idDivision            String
+  category              String                  @default("FOLDER") // FOLDER OR FILE
+  name                  String
+  extension             String
+  path                  String
+  isActive              Boolean                 @default(true)
+  User                  User                    @relation(fields: [createdBy], references: [id])
+  createdBy             String
+  createdAt             DateTime                @default(now())
+  updatedAt             DateTime                @updatedAt
+  DivisionDocumentShare DivisionDocumentShare[]
+}
+
+model DivisionDocumentShare {
+  id                         String                     @id @default(cuid())
+  DivisionDocumentFolderFile DivisionDocumentFolderFile @relation(fields: [idDocument], references: [id])
+  idDocument                 String
+  Division                   Division                   @relation(fields: [idDivision], references: [id])
+  idDivision                 String
+  isActive                   Boolean                    @default(true)
+  createdAt                  DateTime                   @default(now())
+  updatedAt                  DateTime                   @updatedAt
+}
+
+model DivisionCalendar {
+  id                       String                     @id @default(cuid())
+  Division                 Division                   @relation(fields: [idDivision], references: [id])
+  idDivision               String
+  title                    String
+  desc                     String                     @db.Text
+  dateStart                DateTime                   @db.Date
+  dateEnd                  DateTime                   @db.Date
+  repeatEventTyper         String
+  reminderInterval         String
+  status                   Int                        @default(0)
+  isActive                 Boolean                    @default(true)
+  User                     User                       @relation(fields: [createdBy], references: [id])
+  createdBy                String
+  createdAt                DateTime                   @default(now())
+  DivisionCalendarReminder DivisionCalendarReminder[]
+}
+
+model DivisionCalendarReminder {
+  id               String           @id @default(cuid())
+  Division         Division         @relation(fields: [idDivision], references: [id])
+  idDivision       String
+  DivisionCalendar DivisionCalendar @relation(fields: [idCalendar], references: [id])
+  idCalendar       String
+  dateStart        DateTime         @db.Date
+  dateEnd          DateTime         @db.Date
+  status           Int              @default(0)
+  isActive         Boolean          @default(true)
+  createdAt        DateTime         @default(now())
+  updatedAt        DateTime         @updatedAt
+}

prisma/seed.ts

@@ -0,0 +1,51 @@
+import { seederUser, seederUserRole } from '@/module/seeder';
+import { PrismaClient } from '@prisma/client';
+const prisma = new PrismaClient()
+
+async function main() {
+   // USER ROLE
+   for (let data of seederUserRole) {
+      await prisma.userRole.upsert({
+         where: {
+            id: data.id
+         },
+         update: {
+            name: data.name
+         },
+         create: {
+            id: data.id,
+            name: data.name,
+            desc: data.desc
+         },
+      })
+   }
+
+   // USER 
+   for (let data of seederUser) {
+      await prisma.user.upsert({
+         where: {
+            id: data.id
+         },
+         update: {
+            name: data.name
+         },
+         create: {
+            id: data.id,
+            idUserRole: data.idUserRole,
+            nik: data.nik,
+            name: data.name,
+            phone: data.phone,
+            email: data.email,
+            gender: data.gender
+         },
+      })
+   }
+}
+
+main().then(async () => {
+   await prisma.$disconnect()
+}).catch(async (e) => {
+   console.error(e)
+   await prisma.$disconnect()
+   process.exit(1)
+})

src/app/(application)/announcement/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewDetailAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: string } }) {
+   return (
+      <ViewDetailAnnouncement data={params.id} />
+   )
+}
+
+export default Page;

src/app/(application)/announcement/create/page.tsx

@@ -0,0 +1,9 @@
+import { ViewCreateAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewCreateAnnouncement />
+   )
+}
+
+export default Page;

src/app/(application)/announcement/edit/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewEditAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: any } }) {
+   return (
+      <ViewEditAnnouncement data={params.id} />
+   )
+}
+
+export default Page;

src/app/(application)/announcement/page.tsx

@@ -0,0 +1,9 @@
+import { ViewListAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewListAnnouncement/>
+   )
+}
+
+export default Page;

src/app/(application)/detail-feature/page.tsx

@@ -0,0 +1,10 @@
+import { ViewDetailFeature } from '@/module/home';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewDetailFeature/>
+  );
+}
+
+export default Page;

src/app/(application)/group/page.tsx

@@ -0,0 +1,10 @@
+import { ViewGroup } from '@/module/group';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewGroup />
+  );
+}
+
+export default Page;

src/app/(application)/home/page.tsx

@@ -0,0 +1,14 @@
+import LayoutNavbarHome from '@/module/_global/layout/layout_navbar_home';
+import { ViewHome } from '@/module/home';
+import { Flex, Group, Text } from '@mantine/core';
+import React from 'react';
+
+function Page() {
+  return (
+    <>
+      <ViewHome />
+    </>
+  );
+}
+
+export default Page;

src/app/(application)/member/[id]/page.tsx

@@ -0,0 +1,10 @@
+import { ViewDetailMember } from "@/module/user/member";
+
+function Page({ params }: { params: { id: string } }) {
+   return (
+      <ViewDetailMember data={params.id} />
+   )
+}
+
+export default Page;
+

src/app/(application)/member/create/page.tsx

@@ -0,0 +1,9 @@
+import { ViewCreateMember } from "@/module/user/member";
+
+function Page() {
+   return (
+      <ViewCreateMember />
+   );
+}
+
+export default Page;

src/app/(application)/member/edit/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewEditMember } from "@/module/user/member";
+
+function Page() {
+   return (
+      <ViewEditMember />
+   )
+}
+
+export default Page;

src/app/(application)/member/page.tsx

@@ -0,0 +1,9 @@
+import { ViewListMember } from "@/module/user/member";
+
+function Page() {
+   return (
+      <ViewListMember />
+   )
+}
+
+export default Page;

src/app/(application)/notification/page.tsx

@@ -0,0 +1,10 @@
+import { ViewNotification } from '@/module/notification';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewNotification />
+  );
+}
+
+export default Page;

src/app/(application)/position/page.tsx

@@ -0,0 +1,10 @@
+import { ViewListPosition } from '@/module/position';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewListPosition />
+  );
+}
+
+export default Page;

src/app/(application)/profile/edit/page.tsx

@@ -0,0 +1,9 @@
+import { ViewEditProfile } from "@/module/user"
+
+function Page() {
+   return (
+      <ViewEditProfile />
+   )
+}
+
+export default Page

src/app/(application)/profile/page.tsx

@@ -0,0 +1,9 @@
+import { ViewProfile } from "@/module/user";
+
+function Page() {
+   return (
+      <ViewProfile />
+   )
+}
+
+export default Page;

src/app/(application)/project/page.tsx

@@ -0,0 +1,10 @@
+import { ViewProject } from '@/module/project';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewProject />
+  );
+}
+
+export default Page;

src/app/(application)/search/page.tsx

@@ -0,0 +1,10 @@
+import { ViewSearch } from '@/module/search';
+import React from 'react';
+
+function Page() {
+  return (
+    <ViewSearch/>
+  );
+}
+
+export default Page;

src/app/(auth)/verification/page.tsx

@@ -0,0 +1,6 @@
+import { ViewVerification } from "@/module/auth";
+import React from "react";
+
+export default function Verification() {
+  return <ViewVerification />;
+}

src/app/(auth)/welcome/page.tsx

@@ -0,0 +1,8 @@
+import { ViewWelcome } from "@/module/auth";
+import React from "react";
+
+function Page() {
+  return <ViewWelcome />;
+}
+
+export default Page;

src/app/layout.tsx

@@ -1,22 +1,48 @@
-import type { Metadata } from "next";
+import "@mantine/core/styles.css";
-import { Inter } from "next/font/google";
+import {
-import "./globals.css";
+  Box,
+  ColorSchemeScript,
+  Container,
+  MantineProvider,
+  rem,
+} from "@mantine/core";
+import { WARNA } from "@/module/_global";
+import { Lato } from "next/font/google";
+import '@mantine/carousel/styles.css';
+import { Toaster } from 'react-hot-toast';
 
-const inter = Inter({ subsets: ["latin"] });
+export const metadata = {
-
+  title: "SISTEM DESA MANDIRI",
-export const metadata: Metadata = {
+  description: "I have followed setup instructions carefully",
-  title: "Create Next App",
-  description: "Generated by create next app",
 };
 
+const LatoFont = Lato({
+  subsets: ["latin"],
+  weight: ["300", "400", "700", "900"],
+});
+
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <head>
+        <ColorSchemeScript />
+      </head>
+      <body className={`${LatoFont.className}`} suppressHydrationWarning>
+        <MantineProvider>
+          <Box bg={'#252A2F'} pos={"fixed"} w={"100%"} h={"100%"} style={{
+            overflowY: "auto"
+          }}>
+            <Toaster/>
+            <Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}>
+              {children}
+            </Container>
+          </Box>
+        </MantineProvider>
+      </body>
     </html>
   );
 }

src/app/loading.tsx

@@ -0,0 +1,5 @@
+import { LoadingPage } from "@/module/_global";
+
+export default function Loading() {
+   return <LoadingPage />
+}

src/app/page.tsx

@@ -1,113 +1,10 @@
-import Image from "next/image";
+import { ViewLogin } from "@/module/auth";
+import { Box, Image, rem, Stack, Text } from "@mantine/core";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+    <>
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
+      <ViewLogin/>
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+    </>
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">src/app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
   );
 }

src/module/_global/fun/WARNA.ts

@@ -0,0 +1,6 @@
+export const WARNA = {
+    bgWhite: "#F4F9FD",
+    biruTua: "#19345E",
+    bgIcon: "#384288",
+    borderOrange: "#FCAA4B"
+}

src/module/_global/index.ts

@@ -0,0 +1,17 @@
+import { WARNA } from "./fun/WARNA";
+import LayoutDrawer from "./layout/layout_drawer";
+import LayoutIconBack from "./layout/layout_icon_back";
+import LoadingPage from "./layout/layout_loading_page";
+import LayoutLogin from "./layout/layout_login";
+import LayoutNavbarHome from "./layout/layout_navbar_home";
+import { isDrawer } from "./val/isDrawer";
+import { isModal } from "./val/isModal";
+
+export { WARNA }
+export { LayoutLogin }
+export { LayoutNavbarHome }
+export { LayoutIconBack }
+export { LoadingPage }
+export { LayoutDrawer }
+export { isDrawer }
+export { isModal }

src/module/_global/layout/layout_drawer.tsx

@@ -0,0 +1,20 @@
+import { Box, Drawer, Text } from '@mantine/core';
+import React from 'react';
+import { WARNA } from '../fun/WARNA';
+
+export default function LayoutDrawer({ opened, onClose, title, children, size }: { children: React.ReactNode, opened: boolean, size?: string, onClose: () => void, title: React.ReactNode }) {
+  return (
+    <Box>
+      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '30%'}
+        styles={{
+          content: {
+            backgroundColor: "white",
+            borderRadius: "20px 20px 0px 0px",
+          },
+        }}
+      >
+        {children}
+      </Drawer>
+    </Box>
+  );
+}

src/module/_global/layout/layout_icon_back.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { ActionIcon, Box } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiChevronLeft } from 'react-icons/hi2';
+import { WARNA } from '../fun/WARNA';
+import _ from 'lodash';
+
+function LayoutIconBack({ back }: { back?: string }) {
+  const router = useRouter()
+  return (
+    <Box>
+      <ActionIcon variant="light" onClick={() => {
+        if (!_.isUndefined(back) && !_.isNull(back)) {
+          return router.push(back)
+        } else {
+          return router.back()
+        }
+
+      }} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <HiChevronLeft size={20} color='white' />
+      </ActionIcon>
+    </Box>
+  );
+}
+
+export default LayoutIconBack;

src/module/_global/layout/layout_loading_page.tsx

@@ -0,0 +1,33 @@
+import { Box, Group, Skeleton, Text } from "@mantine/core";
+import LayoutNavbarHome from "./layout_navbar_home";
+
+export default function LoadingPage() {
+   return (
+      <>
+         <LayoutNavbarHome>
+            <Text></Text>
+         </LayoutNavbarHome>
+         <Box p={20}>
+            <Skeleton width={"100%"} height={180} radius={"md"} />
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={50} radius={"md"} />
+               <Skeleton height={50} radius={"md"} />
+               <Skeleton height={50} radius={"md"} />
+            </Group>
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={100} radius={"md"} />
+               <Skeleton height={100} radius={"md"} />
+            </Group>
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={100} radius={"md"} />
+               <Skeleton height={100} radius={"md"} />
+            </Group>
+            <Group my={20} justify="space-between" grow>
+               <Skeleton height={100} radius={"md"} />
+               <Skeleton height={100} radius={"md"} />
+            </Group>
+         </Box>
+      </>
+
+   )
+}

src/module/_global/layout/layout_login.tsx

@@ -0,0 +1,21 @@
+import { Image, rem, Stack, Title } from "@mantine/core";
+import React from "react";
+import { WARNA } from "../fun/WARNA";
+
+export default function LayoutLogin({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Stack justify="center" align="center" pt={rem(50)}>
+        <Image w={102} h={103} src={"/assets/img/logo/logo-1.png"} alt="logo" />
+        <Title c={WARNA.biruTua} order={4}>
+          PERBEKAL DARMASABA
+        </Title>
+      </Stack>
+      {children}
+    </>
+  );
+}

src/module/_global/layout/layout_modal.tsx

@@ -0,0 +1,30 @@
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Flex, Modal, Text } from '@mantine/core';
+import React from 'react';
+import { BsQuestionCircleFill } from 'react-icons/bs';
+import { isModal } from '../val/isModal';
+
+export default function LayoutModal({ opened, onClose, description, onYes }: { opened: boolean, onClose: () => void, description: string, onYes: (val: boolean) => void }) {
+  const openModal = useHookstate(isModal)
+  return (
+    <Modal styles={{
+      body: {
+        margin: 10,
+      },
+      content: {
+        border: `2px solid ${'#828AFC'}`,
+        borderRadius: 10
+      }
+    }} opened={opened} onClose={onClose} withCloseButton={false} centered closeOnClickOutside={false}>
+      <Flex justify={"center"} align={"center"} direction={"column"}>
+        <BsQuestionCircleFill size={100} color="red" />
+        <Text mt={30} ta={"center"} fw={"bold"} fz={18}>{description}</Text>
+        <Box mt={30} w={'100%'}>
+          <Button mb={20} fullWidth size="lg" radius={'xl'} bg={'#4754F0'} onClick={() => onYes(true)}>YA</Button>
+          <Button fullWidth size="lg" radius={'xl'} bg={'#DCE1FE'} c={'#4754F0'} onClick={() => openModal.set(false)}>TIDAK</Button>
+        </Box>
+      </Flex>
+    </Modal>
+  );
+}
+

src/module/_global/layout/layout_navbar_home.tsx

@@ -0,0 +1,18 @@
+import { Box, Grid, Group } from '@mantine/core';
+import React from 'react';
+import { WARNA } from '../fun/WARNA';
+
+export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => {
+  return (
+      <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
+        style={{
+          borderBottomLeftRadius: 20,
+          borderBottomRightRadius: 20,
+          zIndex: 100
+        }}
+      >
+        {children}
+      </Box>
+  );
+}
+export default LayoutNavbarHome

src/module/_global/val/isDrawer.ts

@@ -0,0 +1,4 @@
+'use client'
+import { hookstate } from '@hookstate/core';
+
+export const isDrawer = hookstate(false)

src/module/_global/val/isModal.ts

@@ -0,0 +1,4 @@
+'use client'
+import { hookstate } from '@hookstate/core';
+
+export const isModal = hookstate(false)

src/module/announcement/component/detail_announcement.tsx

@@ -0,0 +1,37 @@
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { BsCardText } from "react-icons/bs";
+import { TfiAnnouncement } from "react-icons/tfi";
+
+export default function DetailAnnouncement() {
+   return (
+      <Box py={30} px={20}>
+         <Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Group>
+                  <TfiAnnouncement size={25} />
+                  <Text fw={'bold'}>Pengumuman Dinas</Text>
+               </Group>
+               <Group>
+                  <BsCardText size={25} />
+                  <Text>Pengumuman agar menggunakan</Text>
+               </Group>
+            </Stack>
+         </Box>
+         <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Text fw={'bold'}>Anggota</Text>
+               <Group>
+                  <Text>LPD</Text>
+               </Group>
+               <Group>
+                  <Text>PKK</Text>
+               </Group>
+               <Group>
+                  <Text>Karang Taruna</Text>
+               </Group>
+            </Stack>
+         </Box>
+      </Box>
+
+   )
+}

src/module/announcement/component/list_announcement.tsx

@@ -0,0 +1,92 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { TfiAnnouncement } from "react-icons/tfi";
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { useRouter } from 'next/navigation';
+
+const dataPengumuman = [
+   {
+      id: 1,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 2,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 3,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 4,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 5,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 6,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 7,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 8,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+]
+
+export default function ListAnnouncement() {
+   const router = useRouter()
+   return (
+      <Box p={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
+         {dataPengumuman.map((v, i) => {
+            return (
+               <Box pt={20} key={i} onClick={() => {
+                  router.push(`/announcement/${v.id}`)
+               }}>
+                  <Group align='center' style={{
+                     borderBottom: `1px solid #D9D9D9`,
+                     padding: 10,
+                  }} >
+                     <Box>
+                        <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
+                           <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}

src/module/announcement/component/ui/drawer_announcement.tsx

@@ -0,0 +1,48 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from "react-icons/ri";
+
+export default function DrawerAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/announcement/create')
+                     onCLose()
+                  }}
+               >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <RiFilter2Line size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Filter</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}

src/module/announcement/component/ui/drawer_detail_announcement.tsx

@@ -0,0 +1,45 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
+
+export default function DrawerDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}>
+                  <Box>
+                     <FaTrash size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Hapus</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
+                  router.push('edit/123')
+                  onCLose()
+               }}>
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}

src/module/announcement/component/ui/navbar_announcement.tsx

@@ -0,0 +1,37 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMenu } from "react-icons/hi";
+import { useHookstate } from '@hookstate/core';
+import DrawerAnnouncement from './drawer_announcement';
+
+export default function NavbarAnnouncement() {
+  const openDrawer = useHookstate(isDrawer)
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                <HiMenu size={20} color='white' />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+        <DrawerAnnouncement />
+      </LayoutDrawer>
+    </>
+  );
+}
+

src/module/announcement/component/ui/navbar_create_announcement.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
+import { Box, Grid, Text } from "@mantine/core";
+
+export default function NavbarCreateAnnouncement() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Tambah Pengumuman</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   )
+}

src/module/announcement/component/ui/navbar_detail_announcement.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerDetailAnnouncement from "./drawer_detail_announcement";
+
+export default function NavbarDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                        <HiMenu size={20} color='white' />
+                     </ActionIcon>
+                  </Group>
+               </Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+         <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+            <DrawerDetailAnnouncement />
+         </LayoutDrawer>
+      </Box>
+   )
+}

src/module/announcement/component/ui/navbar_edit_announcement.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
+import { Box, Grid, Text } from "@mantine/core";
+
+export default function NavbarEditAnnouncement() {
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Edit Pengumuman</Text>
+               </Grid.Col>
+               <Grid.Col span="auto"></Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+      </Box>
+   )
+}

src/module/announcement/index.ts

@@ -0,0 +1,9 @@
+import ViewCreateAnnouncement from "./view/view_create_announcement";
+import ViewDetailAnnouncement from "./view/view_detail_anouncement";
+import ViewEditAnnouncement from "./view/view_edit_announcement";
+import ViewListAnnouncement from "./view/view_list_announcement";
+
+export { ViewListAnnouncement }
+export { ViewCreateAnnouncement }
+export { ViewDetailAnnouncement }
+export { ViewEditAnnouncement }

src/module/announcement/view/view_create_announcement.tsx

@@ -0,0 +1,60 @@
+import { WARNA } from "@/module/_global";
+import { Box, Stack, TextInput, Button, Textarea } from "@mantine/core";
+import { HiOutlineChevronRight, HiUser } from "react-icons/hi2";
+import NavbarCreateAnnouncement from "../component/ui/navbar_create_announcement";
+
+export default function ViewCreateAnnouncement() {
+   return (
+      <Box>
+         <NavbarCreateAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight  size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}

src/module/announcement/view/view_detail_anouncement.tsx

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import DetailAnnouncement from "../component/detail_announcement";
+import NavbarDetailAnnouncement from "../component/ui/navbar_detail_announcement";
+
+export default function ViewDetailAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarDetailAnnouncement />
+         <DetailAnnouncement />
+      </Box>
+   )
+}

src/module/announcement/view/view_edit_announcement.tsx

@@ -0,0 +1,60 @@
+import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import NavbarEditAnnouncement from "../component/ui/navbar_edit_announcement";
+import { WARNA } from "@/module/_global";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+
+export default function ViewEditAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarEditAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}

src/module/announcement/view/view_list_announcement.tsx

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarAnnouncement from "../component/ui/navbar_announcement";
+import ListAnnouncement from "../component/list_announcement";
+
+export default function ViewListAnnouncement() {
+   return (
+      <Box>
+         <NavbarAnnouncement />
+         <ListAnnouncement />
+      </Box>
+   )
+}

src/module/auth/index.ts

@@ -0,0 +1,7 @@
+import ViewLogin from "./login/view/view_login";
+import ViewVerification from "./varification/view/view_verification";
+import { ViewWelcome } from "./welcome/view_welcome";
+
+export { ViewLogin }
+export { ViewVerification }
+export { ViewWelcome }

src/module/auth/login/view/view_login.tsx

@@ -0,0 +1,78 @@
+"use client"
+import { LayoutLogin, WARNA } from "@/module/_global";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Image,
+  rem,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+} from "@mantine/core";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+function ViewLogin() {
+  const router = useRouter()
+  const textInfo =
+    "Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda.";
+  
+  function onMasuk() {
+    // router.push("/verification")
+    window.location.href = "/verification"
+  }
+  
+  return (
+    <>
+      <Box p={10}>
+        <LayoutLogin>
+          <Stack pt={30}>
+            <Box p={10}>
+              <TextInput
+                styles={{
+                  input: {
+                    color: WARNA.biruTua,
+                    borderRadius: WARNA.biruTua,
+                    borderColor: WARNA.biruTua,
+                  },
+                }}
+                size="md"
+                type="number"
+                radius={30}
+                leftSection={<Text>+62</Text>}
+                placeholder="XXX XXX XXX"
+              />
+              <Text fz={10} mt={10} c={WARNA.biruTua}>
+                {textInfo}
+              </Text>
+              <Checkbox
+                mt={20}
+                label={
+                  <Text fz={10} c={WARNA.biruTua}>
+                    Ingat saya
+                  </Text>
+                }
+              />
+              <Box mt={20}>
+                <Button
+                  c={"white"}
+                  bg={WARNA.biruTua}
+                  size="md"
+                  radius={30}
+                  fullWidth
+                  onClick={onMasuk}
+                >
+                  MASUK
+                </Button>
+              </Box>
+            </Box>
+          </Stack>
+        </LayoutLogin>
+      </Box>
+    </>
+  );
+}
+
+export default ViewLogin;

src/module/auth/varification/view/view_verification.tsx

@@ -0,0 +1,62 @@
+"use client";
+import { LayoutLogin, WARNA } from "@/module/_global";
+import { Box, Button, PinInput, Stack, Text, Title } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+export default function ViewVerification() {
+  const router = useRouter();
+
+  function onNext() {
+    // router.push("/welcome");
+    window.location.href = "/welcome"
+  }
+  return (
+    <>
+      <Box p={10}>
+        <LayoutLogin>
+          <Stack pt={30}>
+            <Box p={10}>
+              <Title order={5} c={WARNA.biruTua}>
+                Verifikasi Nomor Telepon
+              </Title>
+              <Text fz={12} c={WARNA.biruTua}>
+                Masukkan kode yang kami kirimkan melalui WhatsApp
+              </Text>
+              <Text fz={12} c={WARNA.biruTua} fw={"bold"}>
+                +6287701790942
+              </Text>
+              <Box pt={30}>
+                <PinInput
+                  style={{ justifyContent: "center" }}
+                  placeholder=""
+                  size="lg"
+                  styles={{
+                    input: {
+                      color: WARNA.biruTua,
+                      // backgroundColor: WARNA.biruTua,
+                      borderRadius: 15,
+                      borderColor: WARNA.biruTua,
+                    },
+                  }}
+                />
+              </Box>
+              <Box mt={40}>
+                <Button
+                  c={"white"}
+                  bg={WARNA.biruTua}
+                  size="md"
+                  radius={30}
+                  fullWidth
+                  onClick={onNext}
+                >
+                  Lanjut
+                </Button>
+              </Box>
+            </Box>
+          </Stack>
+        </LayoutLogin>
+      </Box>
+    </>
+  );
+}

src/module/auth/welcome/view_welcome.tsx

@@ -0,0 +1,120 @@
+"use client";
+import {
+  Anchor,
+  Button,
+  Center,
+  Flex,
+  Group,
+  Image,
+  Stack,
+  Text,
+} from "@mantine/core";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { WARNA } from "@/module/_global";
+
+const listTextWellcome = [
+  {
+    id: "1",
+    text: "Selamat Datang di Aplikasi Desa Darmasaba Optimalkan Proyek Desa dengan Fitur Kolaboratif Manajemen Proyek yang Efisien untuk Masa Depan Yang Lebih Baik",
+    img: "/assets/img/welcome/wellcome-1.png",
+  },
+  {
+    id: "2",
+    text: "Monitor Progres Tugas Secara Real-time Kolaborasi Tim yang Dinamis untuk Sukses Bersama Perencanaan Tugas yang Terstruktur untuk Pertumbuhan Desa",
+    img: "/assets/img/welcome/wellcome-2.png",
+  },
+  {
+    id: "3",
+    text: "Mulai Membangun Desa dengan Teknologi Canggih Manfaatkan Fitur Analytics untuk Keputusan yang Lebih Baik Selamat Bergabung di Komunitas Desa Darmasaba yang Progresif",
+    img: "/assets/img/welcome/wellcome-3.png",
+  },
+];
+
+export function ViewWelcome() {
+  const [index, setIndex] = useState(0);
+  const router = useRouter();
+
+  function onLanjutkan() {
+    if (index === listTextWellcome.length - 1) {
+      // return router.push("/home");
+      return window.location.href = "/home"
+    }
+    setIndex(index + 1);
+  }
+
+  function onSebelumnya() {
+    if (index === 0) {
+      return;
+    }
+    setIndex(index - 1);
+  }
+  return (
+    <Stack>
+      <Group pos={"absolute"} top={20} right={40}>
+        <Anchor>Lewati</Anchor>
+      </Group>
+      <Stack gap={"xl"} p={"xl"} pt={50}>
+        <WelcomeItem index={index} listTextWellcome={listTextWellcome} />
+      </Stack>
+      <Flex
+        w={"100%"}
+        pos={"absolute"}
+        bottom={0}
+        justify={"space-between"}
+        left={0}
+        right={0}
+        p={"xl"}
+        align={"center"}
+      >
+        <Button
+          display={index === 0 ? "none" : "block"}
+          onClick={onSebelumnya}
+          radius={100}
+          size="md"
+          color={WARNA.biruTua}
+        >
+          Sebelumnya
+        </Button>
+        <Text>
+          {index + 1}/{listTextWellcome.length}
+        </Text>
+        <Button
+          onClick={onLanjutkan}
+          radius={100}
+          size="md"
+          color={WARNA.biruTua}
+        >
+          Lanjutkan
+        </Button>
+      </Flex>
+    </Stack>
+  );
+}
+
+function WelcomeItem({
+  index,
+  listTextWellcome,
+}: {
+  index: number;
+  listTextWellcome: any[];
+}) {
+  return (
+    <Stack align="center" justify="center">
+      <Center>
+        <Image
+          w={"90%"}
+          src={listTextWellcome[index].img}
+          alt="gambar wellcome"
+        />
+      </Center>
+      <Text
+        style={{
+          textAlign: "center",
+        }}
+      >
+        {listTextWellcome[index].text}
+      </Text>
+    </Stack>
+  );
+}

src/module/group/components/list_group_active.tsx

@@ -0,0 +1,88 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiOutlineOfficeBuilding } from 'react-icons/hi';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import EditDrawerGroup from './ui/edit_drawer_group';
+import { useHookstate } from '@hookstate/core';
+import { useRouter } from 'next/navigation';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 2,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 3,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 4,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 5,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 6,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 7,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 8,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+]
+
+export default function ListGroupActive() {
+  // const openDrawerEdit = useHookstate(isDrawer)
+  const [openDrawer, setOpenDrawer] = useState(false)
+  return (
+    <Box pt={20}>
+      <TextInput
+        styles={{
+          input: {
+            color: WARNA.biruTua,
+            borderRadius: WARNA.biruTua,
+            borderColor: WARNA.biruTua,
+          },
+        }}
+        size="md"
+        radius={30}
+        leftSection={<HiMagnifyingGlass size={20} />}
+        placeholder="Pencarian"
+      />
+      {dataGroup.map((v, i) => {
+        return (
+          <Box pt={20} key={i}>
+            <Group align='center' style={{
+              border: `1px solid ${"#DCEED8"}`,
+              padding: 10,
+              borderRadius: 10
+            }} onClick={() => setOpenDrawer(true)} >
+              <Box>
+                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                  <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
+                </ActionIcon>
+              </Box>
+              <Box>
+                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+              </Box>
+            </Group>
+          </Box>
+        )
+      })}
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+        <EditDrawerGroup />
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/group/components/list_group_non_active.tsx

@@ -0,0 +1,85 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiOutlineOfficeBuilding } from 'react-icons/hi';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import EditDrawerGroup from './ui/edit_drawer_group';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'No Active Desa'
+  },
+  {
+    id: 2,
+    name: 'No Active Desa'
+  },
+  {
+    id: 3,
+    name: 'No Active Desa'
+  },
+  {
+    id: 4,
+    name: 'No Active Desa'
+  },
+  {
+    id: 5,
+    name: 'No Active Desa'
+  },
+  {
+    id: 6,
+    name: 'No Active Desa'
+  },
+  {
+    id: 7,
+    name: 'No Active Desa'
+  },
+  {
+    id: 8,
+    name: 'No Active Desa'
+  },
+]
+
+export default function ListGroupNonActive() {
+  const [openDrawer, setOpenDrawer] = useState(false)
+  return (
+    <Box pt={20}>
+      <TextInput
+        styles={{
+          input: {
+            color: WARNA.biruTua,
+            borderRadius: WARNA.biruTua,
+            borderColor: WARNA.biruTua,
+          },
+        }}
+        size="md"
+        radius={30}
+        leftSection={<HiMagnifyingGlass size={20} />}
+        placeholder="Pencarian"
+      />
+      {dataGroup.map((v, i) => {
+        return (
+          <Box pt={20} key={i}>
+            <Group align='center' style={{
+              border: `1px solid ${"#DCEED8"}`,
+              padding: 10,
+              borderRadius: 10
+            }} onClick={() => setOpenDrawer(true)}>
+              <Box>
+                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                  <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
+                </ActionIcon>
+              </Box>
+              <Box>
+                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+              </Box>
+            </Group>
+          </Box>
+        )
+      })}
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+        <EditDrawerGroup />
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/group/components/tab_list_group.tsx

@@ -0,0 +1,38 @@
+'use client'
+import { Box, Tabs, rem } from '@mantine/core';
+import { IoCloseCircleOutline } from "react-icons/io5"
+import { IoMdCheckmarkCircleOutline } from "react-icons/io"
+import ListGroupActive from './list_group_active';
+import ListGroupNonActive from './list_group_non_active';
+
+export default function TabListGroup() {
+  const iconStyle = { width: rem(20), height: rem(20) };
+
+  return (
+    <Box p={20}>
+      <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
+        <Tabs.List bg={"white"} style={{
+          border: `1px solid ${"#EDEDED"}`,
+          padding: 5,
+          borderRadius: 100
+        }}>
+          <Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
+            Aktif
+          </Tabs.Tab>
+          <Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+            Tidak Aktif
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="aktif">
+          <ListGroupActive />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="tidak-aktif">
+          <ListGroupNonActive />
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+}
+

src/module/group/components/ui/drawer_group.tsx

@@ -0,0 +1,62 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerGroup() {
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  const openDrawer = useHookstate(isDrawer)
+
+  function onCLose() {
+    setOpenDrawerGroup(false)
+    openDrawer.set(false)
+  }
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerGroup(true)}
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tambah Group</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}>
+        <Box pt={10}>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Tambah Grup"
+          />
+          <Box mt={'xl'}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={onCLose}
+            >
+              MASUK
+            </Button>
+          </Box>
+        </Box>
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/group/components/ui/edit_drawer_group.tsx

@@ -0,0 +1,72 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
+
+export default function EditDrawerGroup() {
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  const openDrawerEdit = useHookstate(isDrawer)
+
+  function onCLose() {
+    setOpenDrawerGroup(false)
+    openDrawerEdit.set(false)
+  }
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoCloseCircleOutline size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tidak Aktif</Text>
+            </Box>
+          </Flex>
+          <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)}>
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Edit</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'EDIT GRUP'}>
+        <Box pt={10}>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Edit Grup"
+          />
+          <Box mt={'xl'}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={onCLose}
+            >
+              EDIT
+            </Button>
+          </Box>
+        </Box>
+      </LayoutDrawer>
+    </Box>
+  );
+}
+

src/module/group/components/ui/navbar_group.tsx

@@ -0,0 +1,36 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import React from 'react';
+import { HiMenu } from "react-icons/hi";
+import DrawerGroup from './drawer_group';
+import { useHookstate } from '@hookstate/core';
+
+export default function NavbarGroup() {
+  const openDrawerMenu = useHookstate(isDrawer)
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'}>GROUP</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                <HiMenu size={20} color='white' />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <LayoutDrawer opened={openDrawerMenu.get()} title={'MENU'} onClose={() => openDrawerMenu.set(false)}>
+        <DrawerGroup />
+      </LayoutDrawer>
+    </>
+  );
+}
+

src/module/group/index.ts

@@ -0,0 +1,3 @@
+import ViewGroup from "./view/view_group";
+
+export {ViewGroup}

src/module/group/view/view_group.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import NavbarGroup from '../components/ui/navbar_group';
+import { Box } from '@mantine/core';
+import ListGroupActive from '../components/list_group_active';
+import TabListGroup from '../components/tab_list_group';
+
+export default function ViewGroup() {
+  return (
+    <Box>
+      <NavbarGroup />
+      <TabListGroup/>
+    </Box>
+  );
+}
+

src/module/home/components/carosole.tsx

@@ -0,0 +1,36 @@
+'use client'
+import React, { useRef } from 'react';
+import { Carousel } from '@mantine/carousel';
+import { WARNA } from '@/module/_global';
+import Autoplay from 'embla-carousel-autoplay';
+import { Flex, Text } from '@mantine/core';
+export default function Carosole() {
+  const autoplay = useRef(Autoplay({ delay: 5000 }));
+  return (
+    <>
+      <Carousel
+        withIndicators
+        height={150}
+        plugins={[autoplay.current]}
+        onMouseEnter={autoplay.current.stop}
+        onMouseLeave={autoplay.current.reset}
+      >
+        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+          <Flex justify={'center'} h={"100%"} align={'center'}>
+          <Text c={"white"}>INFORMASI DARMASABA</Text>
+          </Flex>
+        </Carousel.Slide>
+        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+          <Flex justify={'center'} h={"100%"} align={'center'}>
+          <Text c={"white"}>INFORMASI DARMASABA</Text>
+          </Flex>
+        </Carousel.Slide>
+        <Carousel.Slide bg={WARNA.biruTua} style={{ borderRadius: 10 }}>
+          <Flex justify={'center'} h={"100%"} align={'center'}>
+          <Text c={"white"}>INFORMASI DARMASABA</Text>
+          </Flex>
+        </Carousel.Slide>
+      </Carousel>
+    </>
+  );
+}

src/module/home/components/features.tsx

@@ -0,0 +1,79 @@
+'use client'
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Grid, SimpleGrid, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2 } from "react-icons/hi2";
+
+export default function Features() {
+  const router = useRouter()
+  return (
+    <>
+      <Box pt={10}>
+        <Text c={WARNA.biruTua} mb={10} fw={'bold'} fz={16}>Features</Text>
+        <SimpleGrid
+          cols={{ base: 4, sm: 4, lg: 4 }}
+        >
+          <Box>
+            <Center>
+              <ActionIcon variant="gradient"
+                size={68}
+                aria-label="Gradient action icon"
+                radius={100}
+                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                <HiMiniUserGroup size={35} color={WARNA.biruTua} />
+              </ActionIcon>
+            </Center>
+            <Center>
+              <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
+            </Center>
+          </Box>
+          <Box onClick={() => router.push('/project')}>
+            <Center>
+              <ActionIcon variant="gradient"
+                size={68}
+                aria-label="Gradient action icon"
+                radius={100}
+                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
+              </ActionIcon>
+            </Center>
+            <Center>
+              <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
+            </Center>
+          </Box>
+          <Box onClick={() => router.push('/announcement')}>
+            <Center>
+              <ActionIcon variant="gradient"
+                size={68}
+                aria-label="Gradient action icon"
+                radius={100}
+                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                <HiMegaphone size={35} color={WARNA.biruTua} />
+              </ActionIcon>
+            </Center>
+            <Center>
+              <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
+            </Center>
+          </Box>
+          <Box onClick={() => router.push('detail-feature')}>
+            <Center>
+              <ActionIcon variant="gradient"
+                size={68}
+                aria-label="Gradient action icon"
+                radius={100}
+                gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                <HiSquares2X2 size={35} color={WARNA.biruTua} />
+              </ActionIcon>
+            </Center>
+            <Center>
+              <Text fz={15} c={WARNA.biruTua}>Semua</Text>
+            </Center>
+          </Box>
+        </SimpleGrid>
+      </Box>
+
+    </>
+  );
+}
+

src/module/home/components/ui/icon_navbar.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from 'react-icons/hi2';
+
+export default function IconNavbar() {
+  const router = useRouter()
+  return (
+    <Box>
+      <Group>
+        <ActionIcon onClick={()=> router.push('/search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <HiMagnifyingGlass size={20} color='white' />
+        </ActionIcon>
+        <ActionIcon onClick={()=> router.push('/notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <HiOutlineBell size={20} color='white' />
+        </ActionIcon>
+        <ActionIcon onClick={()=> router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+          <HiOutlineUser size={20} color='white' />
+        </ActionIcon>
+      </Group>
+    </Box>
+  );
+}
+

src/module/home/index.ts

@@ -0,0 +1,5 @@
+import ViewDetailFeature from "./view/view_detail_feature";
+import ViewHome from "./view/view_home";
+
+export { ViewHome }
+export {ViewDetailFeature}

src/module/home/view/view_detail_feature.tsx

@@ -0,0 +1,120 @@
+'use client'
+import { LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
+import React from 'react';
+import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2";
+import { PiUsersFourFill } from "react-icons/pi";
+import { FaUsersRays, FaUserTie } from "react-icons/fa6";
+import { useRouter } from 'next/navigation';
+import LayoutIconBack from '@/module/_global/layout/layout_icon_back';
+
+export default function ViewDetailFeature() {
+  const router = useRouter()
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >SEMUA FITUR</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <Box p={20}>
+        <Box >
+          <SimpleGrid
+            cols={{ base: 4, sm: 4, lg: 4 }}
+          >
+            <Box>
+              <Center>
+                <ActionIcon variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  <HiMiniUserGroup size={35} color={WARNA.biruTua} />
+                </ActionIcon>
+              </Center>
+              <Center>
+                <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
+              </Center>
+            </Box>
+            <Box onClick={() => router.push('/project')}>
+              <Center>
+                <ActionIcon variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  <HiMiniPresentationChartBar size={35} color={WARNA.biruTua} />
+                </ActionIcon>
+              </Center>
+              <Center>
+                <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
+              </Center>
+            </Box>
+            <Box onClick={() => router.push('/announcement')}>
+              <Center>
+                <ActionIcon variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  <HiMegaphone size={35} color={WARNA.biruTua} />
+                </ActionIcon>
+              </Center>
+              <Center>
+                <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
+              </Center>
+            </Box>
+            <Box onClick={() => router.push('/member')}>
+              <Center>
+                <ActionIcon variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  <PiUsersFourFill size={35} color={WARNA.biruTua} />
+                </ActionIcon>
+              </Center>
+              <Center>
+                <Text fz={15} c={WARNA.biruTua}>Anggota</Text>
+              </Center>
+            </Box>
+            <Box onClick={() => router.push('/group')}>
+              <Center>
+                <ActionIcon variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  <HiUsers size={35} color={WARNA.biruTua} />
+                </ActionIcon>
+              </Center>
+              <Center>
+                <Text fz={15} c={WARNA.biruTua}>Group</Text>
+              </Center>
+            </Box>
+            <Box onClick={() => router.push('/position')}>
+              <Center>
+                <ActionIcon variant="gradient"
+                  size={68}
+                  aria-label="Gradient action icon"
+                  radius={100}
+                  gradient={{ from: '#DFDA7C', to: '#F2AF46', deg: 174 }}>
+                  <FaUserTie size={35} color={WARNA.biruTua} />
+                </ActionIcon>
+              </Center>
+              <Center>
+                <Text fz={15} c={WARNA.biruTua}>Jabatan</Text>
+              </Center>
+            </Box>
+          </SimpleGrid>
+        </Box>
+      </Box>
+    </>
+  );
+}

src/module/home/view/view_home.tsx

@@ -0,0 +1,30 @@
+import { LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Anchor, Box, Group, rem, Stack, Text } from '@mantine/core';
+import React from 'react';
+import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
+import Carosole from '../components/carosole';
+import Features from '../components/features';
+import IconNavbar from '../components/ui/icon_navbar';
+
+
+
+export default function ViewHome() {
+  return (
+    <>
+      <LayoutNavbarHome>
+        <Group justify='space-between'>
+          <Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
+          <IconNavbar/>
+        </Group>
+      </LayoutNavbarHome>
+      <Box p={20}>
+        <Stack >
+          <Carosole />
+          <Features />
+        </Stack>
+      </Box>
+
+    </>
+  );
+}
+

src/module/notification/components/list_notification.tsx

@@ -0,0 +1,94 @@
+"use client"
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Grid, Group, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiUser } from 'react-icons/hi2';
+
+const dataNotification = [
+  {
+    id: 1,
+    title: 'Rapat Kamis',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 2,
+    title: 'Rapat Jumat',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 3,
+    title: 'Rapat Senin',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 4,
+    title: 'Rapat Selasa',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+  {
+    id: 5,
+    title: 'Rapat Rabu',
+    description: 'Dipta menambahkan berkas di document dan file.',
+  },
+]
+
+export default function ListNotification() {
+  const router = useRouter()
+  return (
+    <Box>
+      {dataNotification.map((v, i) => {
+        return (
+          <Grid style={{
+            border: `1px solid ${WARNA.borderOrange}`,
+            padding: 15,
+            borderRadius: 15
+          }} gutter={1} key={i} mb={"sm"}>
+            <Grid.Col span={3} pl={'xs'}>
+              <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                <HiUser size={30} color='white' />
+              </ActionIcon>
+            </Grid.Col>
+            <Grid.Col span={9}>
+              <Box>
+                <Text fw={'bold'} fz={18}>{v.title}</Text>
+                <Text fz={15}>{v.description}</Text>
+              </Box>
+            </Grid.Col>
+          </Grid>
+        )
+      })}
+    </Box>
+  );
+}
+

src/module/notification/components/ui/navbar_notification.tsx

@@ -0,0 +1,23 @@
+"use client"
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+export default function NavbarNotification() {
+  const router = useRouter()
+  return (
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >NOTIFIKASI</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+  );
+}
+

src/module/notification/index.ts

@@ -0,0 +1,3 @@
+import ViewNotification from "./view/view_notification";
+
+export {ViewNotification}

src/module/notification/view/view_notification.tsx

@@ -0,0 +1,16 @@
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global'
+import { Box, Grid, Text } from '@mantine/core'
+import React from 'react'
+import NavbarNotification from '../components/ui/navbar_notification'
+import ListNotification from '../components/list_notification'
+
+export default function ViewNotification() {
+    return (
+        <Box>
+            <NavbarNotification />
+            <Box p={20}>
+                <ListNotification />
+            </Box>
+        </Box>
+    )
+}

src/module/position/component/tab_list_position.tsx

@@ -0,0 +1,38 @@
+'use client'
+import { Box, Tabs, rem } from '@mantine/core';
+import { IoCloseCircleOutline } from "react-icons/io5"
+import { IoMdCheckmarkCircleOutline } from "react-icons/io"
+import ListPositionActive from './ui/list_position_active';
+import ListPositionNonActive from './ui/list_position_nonactive';
+
+export default function TabListGroup() {
+  const iconStyle = { width: rem(20), height: rem(20) };
+
+  return (
+    <Box p={20}>
+      <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
+        <Tabs.List bg={"white"} style={{
+          border: `1px solid ${"#EDEDED"}`,
+          padding: 5,
+          borderRadius: 100
+        }}>
+          <Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
+            Aktif
+          </Tabs.Tab>
+          <Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+            Tidak Aktif
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="aktif">
+          <ListPositionActive />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="tidak-aktif">
+          <ListPositionNonActive />
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+}
+

src/module/position/component/ui/drawer_detail_position.tsx

@@ -0,0 +1,92 @@
+import { isDrawer, LayoutDrawer, WARNA } from "@/module/_global"
+import { useHookstate } from "@hookstate/core"
+import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button } from "@mantine/core"
+import router from "next/router"
+import { useState } from "react"
+import { FaPencil } from "react-icons/fa6"
+import { ImUserCheck } from "react-icons/im"
+
+export default function DrawerDetailPosition() {
+   const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+   const openDrawer = useHookstate(isDrawer)
+   function onCLose() {
+      setOpenDrawerGroup(false)
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}>
+                  <Box>
+                     <ImUserCheck size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Status</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => setOpenDrawerGroup(true)}
+               >
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+
+         <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
+            <Box pt={10}>
+               <Select
+                  label="Grup"
+                  placeholder="Pilih grup"
+                  data={['Dinas', 'Adat', 'LPD']}
+                  size="md"
+                  radius={10}
+                  mb={5}
+                  withAsterisk
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+               />
+               <TextInput
+                  label="Jabatan"
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+                  my={15}
+                  size="md"
+                  radius={10}
+                  placeholder="Nama Jabatan"
+               />
+               <Box mt={'xl'}>
+                  <Button
+                     c={"white"}
+                     bg={WARNA.biruTua}
+                     size="lg"
+                     radius={30}
+                     fullWidth
+                     onClick={onCLose}
+                  >
+                     EDIT
+                  </Button>
+               </Box>
+            </Box>
+         </LayoutDrawer>
+      </Box>
+   )
+}

src/module/position/component/ui/drawer_list_position.tsx

@@ -0,0 +1,80 @@
+import { isDrawer, WARNA, LayoutDrawer } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
+import { useState } from "react";
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerListPosition() {
+   const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+   const openDrawer = useHookstate(isDrawer)
+
+   function onCLose() {
+      setOpenDrawerGroup(false)
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+               onClick={() => setOpenDrawerGroup(true)}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text ta={'center'} c={WARNA.biruTua}>Tambah Jabatan</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+         <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
+            <Box pt={0}>
+               <Select
+                  label="Grup"
+                  placeholder="Pilih grup"
+                  data={['Dinas', 'Adat', 'LPD']}
+                  size="md"
+                  radius={10}
+                  mb={5}
+                  withAsterisk
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+               />
+               <TextInput
+                  label="Jabatan"
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+                  my={15}
+                  size="md"
+                  radius={10}
+                  placeholder="Nama Jabatan"
+               />
+               <Box mt={'xl'}>
+                  <Button
+                     c={"white"}
+                     bg={WARNA.biruTua}
+                     size="lg"
+                     radius={30}
+                     fullWidth
+                     onClick={onCLose}
+                  >
+                     MASUK
+                  </Button>
+               </Box>
+            </Box>
+         </LayoutDrawer>
+      </Box>
+   );
+}

src/module/position/component/ui/list_position_active.tsx

@@ -0,0 +1,85 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { FaUserTie } from 'react-icons/fa6';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import DrawerDetailPosition from './drawer_detail_position';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'Kepala'
+  },
+  {
+    id: 2,
+    name: 'Sekretaris'
+  },
+  {
+    id: 3,
+    name: 'Bendahara'
+  },
+  {
+    id: 4,
+    name: 'Anggota'
+  },
+  {
+    id: 5,
+    name: 'Kepala Urusan Kemasyarakatan'
+  },
+  {
+    id: 6,
+    name: 'Kepala Urusan Pemerintahan'
+  },
+  {
+    id: 7,
+    name: 'Kepala Urusan Kependudukan'
+  },
+  {
+    id: 8,
+    name: 'Anggota'
+  },
+]
+
+export default function ListPositionActive() {
+  const [openDrawer, setOpenDrawer] = useState(false)
+  return (
+    <Box pt={20}>
+      <TextInput
+        styles={{
+          input: {
+            color: WARNA.biruTua,
+            borderRadius: WARNA.biruTua,
+            borderColor: WARNA.biruTua,
+          },
+        }}
+        size="md"
+        radius={30}
+        leftSection={<HiMagnifyingGlass size={20} />}
+        placeholder="Pencarian"
+      />
+      {dataGroup.map((v, i) => {
+        return (
+          <Box pt={20} key={i}>
+            <Group align='center' style={{
+              border: `1px solid ${"#DCEED8"}`,
+              padding: 10,
+              borderRadius: 10
+            }} onClick={() => setOpenDrawer(true)} >
+              <Box>
+                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                  <FaUserTie color={WARNA.biruTua} size={25} />
+                </ActionIcon>
+              </Box>
+              <Box>
+                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+              </Box>
+            </Group>
+          </Box>
+        )
+      })}
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+        <DrawerDetailPosition />
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/position/component/ui/list_position_nonactive.tsx

@@ -0,0 +1,85 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { FaUserTie } from 'react-icons/fa6';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import DrawerDetailPosition from './drawer_detail_position';
+
+const dataGroup = [
+   {
+      id: 1,
+      name: 'Anggota'
+   },
+   {
+      id: 2,
+      name: 'Anggota'
+   },
+   {
+      id: 3,
+      name: 'Anggota'
+   },
+   {
+      id: 4,
+      name: 'Anggota'
+   },
+   {
+      id: 5,
+      name: 'Anggota'
+   },
+   {
+      id: 6,
+      name: 'Anggota'
+   },
+   {
+      id: 7,
+      name: 'Anggota'
+   },
+   {
+      id: 8,
+      name: 'Anggota'
+   },
+]
+
+export default function ListPositionNonActive() {
+   const [openDrawer, setOpenDrawer] = useState(false)
+   return (
+      <Box pt={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
+         {dataGroup.map((v, i) => {
+            return (
+               <Box pt={20} key={i}>
+                  <Group align='center' style={{
+                     border: `1px solid ${"#DCEED8"}`,
+                     padding: 10,
+                     borderRadius: 10
+                  }} onClick={() => setOpenDrawer(true)}>
+                     <Box>
+                        <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                           <FaUserTie color={WARNA.biruTua} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+         <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+            <DrawerDetailPosition />
+         </LayoutDrawer>
+      </Box>
+   );
+}

src/module/position/component/ui/navbar_list_position.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { Grid, Group, ActionIcon, Box, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerListPosition from "./drawer_list_position";
+
+export default function NavbarListPosition() {
+   const openDrawerMenu = useHookstate(isDrawer)
+   return (
+      <Box>
+         <LayoutNavbarHome>
+            <Grid justify='center' align='center'>
+               <Grid.Col span="auto">
+                  <LayoutIconBack back='/home' />
+               </Grid.Col>
+               <Grid.Col span={6}>
+                  <Text ta={'center'} fw={'bold'} c={'white'}>Jabatan</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <ActionIcon onClick={() => openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                        <HiMenu size={20} color='white' />
+                     </ActionIcon>
+                  </Group>
+               </Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+         <LayoutDrawer opened={openDrawerMenu.get()} title={'MENU'} onClose={() => openDrawerMenu.set(false)}>
+            <DrawerListPosition />
+         </LayoutDrawer>
+      </Box>
+   );
+}

src/module/position/index.ts

@@ -0,0 +1,3 @@
+import ViewListPosition from "./view/view_list_position";
+
+export { ViewListPosition }

src/module/position/view/view_list_position.tsx

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarListPosition from "../component/ui/navbar_list_position";
+import TabListGroup from "../component/tab_list_position";
+
+export default function ViewListPosition() {
+   return (
+      <Box>
+         <NavbarListPosition />
+         <TabListGroup />
+      </Box>
+   );
+}

src/module/project/index.ts

@@ -0,0 +1,3 @@
+import ViewProject from "./view/view_project";
+
+export {ViewProject}

src/module/project/view/view_project.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function ViewProject() {
+  return (
+    <div>
+      ViewProject
+    </div>
+  );
+}
+

src/module/search/components/ui/navbar_search.tsx

@@ -0,0 +1,25 @@
+"use client"
+import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
+import { Box, Grid, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+export default function NavbarSearch() {
+  const router = useRouter()
+  return (
+    <Box>
+      <LayoutNavbarHome>
+        <Grid justify='center' align='center'>
+          <Grid.Col span="auto">
+            <LayoutIconBack back='/home' />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Text ta={'center'} fw={'bold'} c={'white'} >PENCARIAN</Text>
+          </Grid.Col>
+          <Grid.Col span="auto"></Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+    </Box>
+  );
+}
+

src/module/search/index.ts

@@ -0,0 +1,3 @@
+import ViewSearch from "./view/view_search";
+
+export {ViewSearch}

src/module/search/view/view_search.tsx

@@ -0,0 +1,31 @@
+
+import { LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Grid, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
+import NavbarSearch from '../components/ui/navbar_search';
+
+export default function ViewSearch() {
+  return (
+    <>
+      <NavbarSearch />
+      <Box p={20}>
+        <TextInput
+          styles={{
+            input: {
+              color: WARNA.biruTua,
+              borderRadius: WARNA.biruTua,
+              borderColor: WARNA.biruTua,
+            },
+          }}
+          size="md"
+          radius={30}
+          leftSection={<HiMagnifyingGlass size={20} />}
+          placeholder="Pencarian"
+        />
+      </Box>
+    </>
+  );
+}
+

src/module/seeder/data/user.json

@@ -0,0 +1,29 @@
+[
+   {
+      "id": "devAmalia",
+      "idUserRole": "dev",
+      "nik": "1111111",
+      "name": "Amalia",
+      "phone": "6298980185458",
+      "email": "amalia@bip.com",
+      "gender": "F"
+   },
+   {
+      "id": "devLukman",
+      "idUserRole": "dev",
+      "nik": "2222222",
+      "name": "Lukman",
+      "phone": "6287701790942",
+      "email": "lukman@bip.com",
+      "gender": "M"
+   },
+   {
+      "id": "devMalik",
+      "idUserRole": "dev",
+      "nik": "3333333",
+      "name": "Malik",
+      "phone": "6289697338821",
+      "email": "malik@bip.com",
+      "gender": "M"
+   }
+]

src/module/seeder/data/user_role.json

@@ -0,0 +1,32 @@
+[
+   {
+      "id": "dev",
+      "name": "Developer",
+      "desc": "-"
+   },
+   {
+      "id": "supadmin",
+      "name": "Super Admin",
+      "desc": "-"
+   },
+   {
+      "id": "cosupadmin",
+      "name": "Wakil Super Admin",
+      "desc": "-"
+   },
+   {
+      "id": "admin",
+      "name": "Admin",
+      "desc": "-"
+   },
+   {
+      "id": "coadmin",
+      "name": "Wakil Admin",
+      "desc": "-"
+   },
+   {
+      "id": "user",
+      "name": "User",
+      "desc": "-"
+   }
+]