feat

Desc:
- Fitur config untuk error pada server di bagian .env PWD
- Fitur home dan tampilan menu

src/app/dev/home/layout.tsx

@@ -0,0 +1,9 @@
+import { HomeLayout } from "@/app_modules/home";
+
+export default async function Layout({children}: {children: any}) {
+    return <>
+    <HomeLayout>{children}</HomeLayout>
+    
+    </>
+    
+}

src/app_modules/auth/login/view.tsx

@@ -64,34 +64,35 @@ export default function Login() {
         align={"center"}
         gap={"lg"}
       >
-        <>
-          <IconCircleLetterH size={150} />
-          <Title>Login</Title>
+        <IconCircleLetterH size={150} />
+        <Title>Login</Title>
 
-          <TextInput
-            label="Phone Number"
-            w={250}
-            type="number"
-            placeholder="62 xx xxx xxx xxx"
-            // value={nomor}
-            onChange={(val) => {
-              setNomor(val.target.value);
-            }}
-          />
+        <TextInput
+          label="Phone Number"
+          w={250}
+          type="number"
+          placeholder="62 xx xxx xxx xxx"
+          // value={nomor}
+          onChange={(val) => {
+            setNomor(val.target.value);
+          }}
+        />
 
-          <Button
-            h={30}
-            radius={50}
-            compact
-            bg={Warna.hijau_muda}
-            color={"green"}
-            onClick={() => {
-              onLogin();
-            }}
-          >
-            Login
-          </Button>
-        </>
+        <Button
+          mt={"xs"}
+          h={30}
+          w={250}
+
+          radius={50}
+          compact
+          bg={Warna.hijau_muda}
+          color={"green"}
+          onClick={() => {
+            onLogin();
+          }}
+        >
+          Login
+        </Button>
       </Flex>
     </>
   );

src/app_modules/auth/register/view.tsx

@@ -60,6 +60,7 @@ export default function Register() {
         <Flex direction={"column"} gap={"xl"} align={"center"}>
           <Flex direction={"column"}>
             <TextInput
+              w={250}
               label="Username"
               placeholder="Username"
               onChange={(val) => {
@@ -70,6 +71,8 @@ export default function Register() {
             <Text>Nomor : {nomor}</Text>
           </Flex>
           <Button
+            w={250}
+            mt={"md"}
             radius={50}
             bg={Warna.biru}
             color="cyan"

src/app_modules/auth/validasi/view.tsx

@@ -81,11 +81,15 @@ export default function Validasi() {
             <Text>to {nomor}</Text>
           </Flex>
           <PinInput
+            spacing={"md"}
+            mt={"md"}
             onChange={(val) => {
               setInputOtp(val);
             }}
           />
           <Button
+            w={100}
+            mt={"md"}
             compact
             radius={50}
             bg={Warna.hijau_tua}

src/app_modules/home/fun/get-token.ts

@@ -9,6 +9,9 @@ import fs from "fs";
 import yaml from "yaml";
 const config = yaml.parse(fs.readFileSync("config.yaml").toString());
 
+/**
+ * @returns token(id and username)
+ */
 export async function getToken() {
   const c = cookies().get("ssn");
 

src/app_modules/home/index.ts

@@ -1,3 +1,3 @@
 import HomeView from "./view";
-
-export {HomeView}
+import HomeLayout from "./layout";
+export {HomeView, HomeLayout}

src/app_modules/home/layout.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { ActionIcon, AppShell, Flex, Group, Header, Text } from "@mantine/core";
+import { HomeView } from ".";
+import { IconUserSearch, IconAward, IconQrcode } from "@tabler/icons-react";
+
+export default function HomeLayout({ children }: { children: any }) {
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50} bg={"dark"}>
+            <Group position="apart" align="center" h={50} p={"sm"}>
+              <ActionIcon>
+                <IconUserSearch />
+              </ActionIcon>
+              <Text color="white" fw={"bold"}>
+                HIPMI
+              </Text>
+              <Flex justify={"flex-end"}>
+                <ActionIcon>
+                  <IconAward />
+                </ActionIcon>
+                <ActionIcon>
+                  <IconQrcode />
+                </ActionIcon>
+              </Flex>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/home/view.tsx

@@ -1,25 +1,72 @@
 "use client";
 
-import { Text, Title } from "@mantine/core";
+import { ActionIcon, Box, Flex, Image, Paper, SimpleGrid, Text, Title } from "@mantine/core";
 import { Logout } from "../auth";
 import { useState } from "react";
 import { ApiHipmi } from "@/app/lib/api";
 import { useShallowEffect } from "@mantine/hooks";
 import { getToken } from "./fun/get-token";
 
+import {
+  IconAffiliate,
+  IconBriefcase,
+  IconHeartHandshake,
+  IconMap2,
+  IconMessages,
+  IconPackageImport,
+  IconPresentation,
+  IconShoppingBag,
+  IconUserCircle,
+} from "@tabler/icons-react";
+import router from "next/router";
+import toast from "react-simple-toasts";
+
+const listHalaman = [
+  {
+    id: 1,
+    name: "Forums",
+    icon: <IconMessages size={50} />,
+  },
+  {
+    id: 2,
+    name: "Project Collaboration",
+    icon: <IconAffiliate size={50} />,
+  },
+  {
+    id: 3,
+    name: "Voting",
+    icon: <IconPackageImport size={50} />,
+  },
+  {
+    id: 4,
+    name: "Event",
+    icon: <IconPresentation size={50} />,
+  },
+  {
+    id: 5,
+    name: "Crowd Funding",
+    icon: <IconHeartHandshake size={50} />,
+  },
+  {
+    id: 6,
+    name: "Marketplace",
+    icon: <IconShoppingBag size={50} />,
+  },
+  {
+    id: 7,
+    name: "Job Vacancy",
+    icon: <IconBriefcase size={50} />,
+  },
+  {
+    id: 8,
+    name: "Business Maps",
+    icon: <IconMap2 size={50} />,
+  },
+];
+
 export default function HomeView() {
   const [token, setToken] = useState<any | null>(null);
 
-  // useShallowEffect(() => {
-  //   userToken();
-  // }, []);
-
-  // async function userToken() {
-  //   await fetch(ApiHipmi.get_token)
-  //     .then((res) => res.json())
-  //     .then((val) => setToken(val));
-  // }
-
   useShallowEffect(() => {
     getUserId();
   }, []);
@@ -31,9 +78,51 @@ export default function HomeView() {
   return (
     <>
       {/* <pre>{JSON.stringify(token, null, 2)}</pre> */}
-      <Title>Home</Title>
-      <Text>Welcome, {token?.username}</Text>
-      <Logout />
+      
+      <Box>
+        <Flex align={"center"} gap={"sm"}>
+          <ActionIcon
+            size={30}
+            variant="transparent"
+            // onClick={() => {
+            //   if (valToken?.data?.Profile === null) {
+            //     return router.push("/dev/katalog/profile/create");
+            //   } else {
+            //     return router.push("/dev/katalog/view");
+            //   }
+            // }}
+          >
+            <IconUserCircle size={50} color="black" />
+          </ActionIcon>
+
+          <Text>Welcome to, {token?.username}</Text>
+        </Flex>
+        <Paper bg={"dark"} radius={5} my={"xs"}>
+          <Image alt="logo" src={"/aset/logo.png"} />
+        </Paper>
+        <Box my={"sm"}>
+          <SimpleGrid cols={2}>
+            {listHalaman.map((e, i) => (
+              <Paper
+                key={e.id}
+                h={100}
+                withBorder
+                onClick={() => toast(e.name)}
+              >
+                <Flex
+                  justify={"center"}
+                  align={"center"}
+                  direction={"column"}
+                  h={100}
+                >
+                  {e.icon}
+                  {e.name}
+                </Flex>
+              </Paper>
+            ))}
+          </SimpleGrid>
+        </Box>
+      </Box>
     </>
   );
 }