wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5 from bipproduction/lukman-sdm-3-juni-2024

Browse Source 
Lukman sdm 3 juni 2024
This commit is contained in:
Amalia
2024-07-03 14:29:48 +08:00
committed by GitHub
parent 4defc4a7ec b26f184b53
commit 9805d78f9f
20 changed files with 392 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/(application)/layout.tsx → public/assets/.gitkeep
View File

BIN
public/assets/img/logo/logo-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/assets/img/welcome/wellcome-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
public/assets/img/welcome/wellcome-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
public/assets/img/welcome/wellcome-3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

14
src/app/(application)/home/page.tsx Normal file
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;

6
src/app/(auth)/verification/page.tsx Normal file
View File

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

8
src/app/(auth)/welcome/page.tsx Normal file
View File

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

32
src/app/layout.tsx
View File

@@ -1,12 +1,24 @@
import '@mantine/core/styles.css'; import "@mantine/core/styles.css";
import {
import { ColorSchemeScript, MantineProvider } from '@mantine/core'; Box,
ColorSchemeScript,
Container,
MantineProvider,
rem,
} from "@mantine/core";
import { WARNA } from "@/module/_global";
import { Lato } from "next/font/google";
export const metadata = { export const metadata = {
title: 'My Mantine app', title: "SISTEM DESA MANDIRI",
description: 'I have followed setup instructions carefully', description: "I have followed setup instructions carefully",
}; };
const LatoFont = Lato({
subsets: ["latin"],
weight: ["300", "400", "700", "900"],
});
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
@@ -17,8 +29,14 @@ export default function RootLayout({
<head> <head>
<ColorSchemeScript /> <ColorSchemeScript />
</head> </head>
<body> <body className={`${LatoFont.className}`}>
<MantineProvider>{children}</MantineProvider> <MantineProvider>
<Box bg={'#252A2F'}>
<Container h={"100vh"} p={0} size={rem(550)} bg={WARNA.bgWhite}>
{children}
</Container>
</Box>
</MantineProvider>
</body> </body>
</html> </html>
); );

8
src/app/page.tsx
View File

@@ -1,12 +1,10 @@
import { Box, Text } from "@mantine/core"; import { ViewLogin } from "@/module/auth";
import Image from "next/image"; import { Box, Image, rem, Stack, Text } from "@mantine/core";
export default function Home() { export default function Home() {
return ( return (
<> <>
<Box> <ViewLogin/>
<Text>AWAL BRANCH</Text>
</Box>
</> </>
); );
} }

4
src/module/_global/fun/WARNA.ts Normal file
View File

@@ -0,0 +1,4 @@
export const WARNA = {
bgWhite: "#F4F9FD",
biruTua: "#19345E",
}

7
src/module/_global/index.ts
View File

@@ -0,0 +1,7 @@
import { WARNA } from "./fun/WARNA";
import LayoutLogin from "./layout/layout_login";
import LayoutNavbarHome from "./layout/layout_navbar_home";
export { WARNA }
export { LayoutLogin }
export {LayoutNavbarHome}

21
src/module/_global/layout/layout_login.tsx Normal file
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}
</>
);
}

19
src/module/_global/layout/layout_navbar_home.tsx Normal file
View File

@@ -0,0 +1,19 @@
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} pb={25} bg={WARNA.biruTua}
style={{
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
}}
>
{children}
</Box>
</>
);
}
export default LayoutNavbarHome

7
src/module/auth/index.ts
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 }

77
src/module/auth/login/view/view_login.tsx Normal file
View File

@@ -0,0 +1,77 @@
"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")
}
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;

61
src/module/auth/varification/view/view_verification.tsx Normal file
View File

@@ -0,0 +1,61 @@
"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");
}
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>
</>
);
}

119
src/module/auth/welcome/view_welcome.tsx Normal file
View File

@@ -0,0 +1,119 @@
"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");
}
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>
);
}

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

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

17
src/module/home/view/view_home.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { LayoutNavbarHome } from '@/module/_global';
import { Group, Text } from '@mantine/core';
import React from 'react';
export default function ViewHome() {
return (
<>
<LayoutNavbarHome>
<Group justify='space-between'>
<Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
<Text fw={'bold'} c={'white'} >icon</Text>
</Group>
</LayoutNavbarHome>
</>
);
}