Merge pull request #25 from bipproduction/join

Join
This commit is contained in:
bip production
2024-07-08 13:13:36 +08:00
committed by GitHub
122 changed files with 12198 additions and 512 deletions

2
.env
View File

@@ -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"

3
.gitignore vendored
View File

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

3
.vscode/settings.json vendored Normal file
View File

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

7204
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -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",
"@types/node": "^20.14.9",
"@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"
}

364
prisma/schema.prisma Normal file
View File

@@ -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
}

51
prisma/seed.ts Normal file
View File

@@ -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)
})

0
public/assets/.gitkeep Normal file
View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

0
src/app/api/.gitkeep Normal file
View File

View File

@@ -1,22 +1,48 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import "@mantine/core/styles.css";
import {
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: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
export const metadata = {
title: "SISTEM DESA MANDIRI",
description: "I have followed setup instructions carefully",
};
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>
);
}

5
src/app/loading.tsx Normal file
View File

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

View File

@@ -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">
<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>
<>
<ViewLogin/>
</>
);
}

View File

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

View File

@@ -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 }

View File

@@ -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>
);
}

View File

@@ -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;

View File

@@ -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>
</>
)
}

View File

@@ -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}
</>
);
}

View File

@@ -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>
);
}

View File

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

View File

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

View File

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

View File

@@ -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>
)
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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 }

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

View File

@@ -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>
)
}

7
src/module/auth/index.ts Normal file
View File

@@ -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 }

View File

@@ -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;

View File

@@ -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>
</>
);
}

View File

@@ -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>
);
}

View File

View File

View File

View File

View File

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
</>
);
}

View File

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

View File

@@ -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>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
);
}

5
src/module/home/index.ts Normal file
View File

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

View File

@@ -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>
</>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

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

View File

@@ -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>
)
}

View File

@@ -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>
);
}

View File

@@ -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>
)
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

@@ -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>
);
}

View File

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

View File

@@ -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>
);
}

View File

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

View File

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

View File

@@ -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>
);
}

View File

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

View File

@@ -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>
</>
);
}

View File

@@ -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"
}
]

View File

@@ -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": "-"
}
]

Some files were not shown because too many files have changed in this diff Show More