fix

Desc:
- Perubahan tampilan

src/app_modules/auth/logout/view.tsx

@@ -7,11 +7,14 @@ import { useAtom } from "jotai";
 import { gs_nomor, gs_otp } from "../state/state";
 import { IconLogout } from "@tabler/icons-react";
 import { Warna } from "@/app/lib/warna";
+import { gs_token } from "@/app_modules/home/state/global_state";
 
 export default function Logout() {
   const router = useRouter();
   const [nomor, setnomor] = useAtom(gs_nomor);
   const [code, setCode] = useAtom(gs_otp);
+  const [token, setToken] = useAtom(gs_token);
+
 
   const onLogout = async () => {
     // MyConsole("keluar");
@@ -22,6 +25,7 @@ export default function Logout() {
         if (val.status == 200) {
           setnomor(null);
           setCode(null);
+          setToken(null)
 
           return router.push("/dev/auth/login");
         }

src/app_modules/home/index.ts

@@ -1,3 +1,4 @@
 import HomeView from "./view";
 import HomeLayout from "./layout";
-export {HomeView, HomeLayout}
+import { getToken } from "./fun/get-token";
+export {HomeView, HomeLayout, getToken}

src/app_modules/home/state/global_state.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const gs_token = atomWithStorage<any | null>("gs_token", null);

src/app_modules/home/view.tsx

@@ -1,6 +1,16 @@
 "use client";
 
-import { ActionIcon, Box, Flex, Image, Paper, SimpleGrid, Text, Title } from "@mantine/core";
+import {
+  ActionIcon,
+  Box,
+  Flex,
+  Image,
+  Loader,
+  Paper,
+  SimpleGrid,
+  Text,
+  Title,
+} from "@mantine/core";
 import { Logout } from "../auth";
 import { useState } from "react";
 import { ApiHipmi } from "@/app/lib/api";
@@ -18,8 +28,12 @@ import {
   IconShoppingBag,
   IconUserCircle,
 } from "@tabler/icons-react";
-import router from "next/router";
+
 import toast from "react-simple-toasts";
+import { getProfile } from "../katalog/profile";
+import { useRouter } from "next/navigation";
+import { useAtom } from "jotai";
+import { gs_token } from "./state/global_state";
 
 const listHalaman = [
   {
@@ -65,7 +79,9 @@ const listHalaman = [
 ];
 
 export default function HomeView() {
-  const [token, setToken] = useState<any | null>(null);
+  const router = useRouter();
+  const [token, setToken] = useAtom(gs_token);
+  const [profile, setProfile] = useState<any | null>(null);
 
   useShallowEffect(() => {
     getUserId();
@@ -75,27 +91,37 @@ export default function HomeView() {
     setToken(data);
   }
 
+  useShallowEffect(() => {
+    getUserProfile();
+  }, []);
+  async function getUserProfile() {
+    const data = await getProfile();
+    setProfile(data);
+  }
+
   return (
     <>
-      {/* <pre>{JSON.stringify(token, null, 2)}</pre> */}
-      
+      {/* <pre>{JSON.stringify(profile, null, 2)}</pre> */}
       <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");
-            //   }
-            // }}
+            onClick={() => {
+              if (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 ?  token?.username : "SERVER ERROR"}</Text>
+          <Text>
+            Welcome to,{" "}
+            {token?.username ? token?.username : <Loader size={"xs"} />}
+          </Text>
         </Flex>
         <Paper bg={"dark"} radius={5} my={"xs"}>
           <Image alt="logo" src={"/aset/logo.png"} />

src/app_modules/katalog/component/header_transparent.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Header, Group, ActionIcon, Text } from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import React from "react";
+
+export default function headerTransparent({
+  icon1,
+  icon2,
+  title,
+}: {
+  icon1: React.ReactNode;
+  icon2: React.ReactNode;
+  title: string;
+}) {
+  return (
+    <>
+      <Header height={50} px={"sm"}>
+        <Group position="apart" h={50}>
+          {icon1}
+          <Text>{title}</Text>
+          {icon2}
+        </Group>
+      </Header>
+    </>
+  );
+}

src/app_modules/katalog/index.ts

@@ -0,0 +1,3 @@
+import headerTransparent from "./component/header_transparent";
+
+export {headerTransparent}

src/app_modules/katalog/profile/create/layout.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import {
+  ActionIcon,
+  AppShell,
+  Group,
+  Header,
+  Text,
+  Title,
+} from "@mantine/core";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function ProfileLayout({ children }: { children: any }) {
+  const router = useRouter()
+  return (
+    <>
+      <AppShell
+
+        header={
+          <Header height={50} px={"sm"}>
+            <Group position="apart" h={50}>
+              <ActionIcon variant="transparent" onClick={() => router.push("/dev/home")}>
+                <IconArrowLeft />
+              </ActionIcon>
+              <Text>Create Profile</Text>
+              <ActionIcon variant="transparent"></ActionIcon>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/katalog/profile/create/view.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { myConsole } from "@/app/fun/my_console";
+import { ApiHipmi } from "@/app/lib/api";
+import { Warna } from "@/app/lib/warna";
+import { gs_token } from "@/app_modules/home/state/global_state";
+import { Button, Select, Stack, TextInput } from "@mantine/core";
+import { useAtom } from "jotai";
+import _ from "lodash";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-simple-toasts";
+
+export default function CreateProfile() {
+  const router = useRouter();
+  const [token, setToken] = useAtom(gs_token);
+
+  const [value, setValue] = useState({
+    name: "",
+    email: "",
+    alamat: "",
+    jenisKelamin: "",
+  });
+
+  async function onSubmit() {
+    const body = {
+      userId: token?.id,
+      name: value.name,
+      email: value.email,
+      alamat: value.alamat,
+      jenisKelamin: value.jenisKelamin,
+    };
+
+    myConsole(body);
+
+    if (_.values(value).includes("")) return toast("Lengkapi data");
+    // if(_.values(value.email).includes(`${/^\S+@\S+$/.test(value.email) ? null : "Invalid email"}`)){}
+
+    await fetch(ApiHipmi.create_profile, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    })
+      .then((res) => res.json())
+      .then((val) => {
+        if (val.status == 201) {
+          toast("Data tersimpan")
+          return router.push("/dev/katalog/view");
+        } else {
+          return toast("Server Error!!!")
+        }
+      });
+  }
+
+  return (
+    <>
+      <Stack px={"sm"}>
+        <TextInput
+          label="Nama"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              name: val.target.value,
+            });
+          }}
+        />
+        <TextInput
+          label="Email"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              email: val.target.value,
+            });
+          }}
+        />
+        <TextInput
+          label="Alamat"
+          onChange={(val) => {
+            setValue({
+              ...value,
+              alamat: val.target.value,
+            });
+          }}
+        />
+        <Select
+          label="Jenis Kelamin"
+          data={[
+            { value: "Laki-laki", label: "Laki-laki" },
+            { value: "Perempuan", label: "Perempuan" },
+          ]}
+          onChange={(val) => {
+            setValue({
+              ...value,
+              jenisKelamin: val as string,
+            });
+          }}
+        />
+        <Button
+          mt={"md"}
+          radius={50}
+          bg={Warna.hijau_muda}
+          color="green"
+          onClick={() => onSubmit()}
+        >
+          Simpan
+        </Button>
+      </Stack>
+    </>
+  );
+}

src/app_modules/katalog/profile/fun/get-profile.ts

@@ -0,0 +1,33 @@
+"use server";
+
+import { myConsole } from "@/app/fun/my_console";
+import prisma from "@/app/lib/prisma";
+import { getToken } from "@/app_modules/home";
+import { NextResponse } from "next/server";
+
+export async function getProfile() {
+  const token = await getToken();
+
+  const dataProfile = await prisma.profile.findUnique({
+    where: {
+      userId: token.id,
+    },
+    select: {
+      id: true,
+      name: true,
+      email: true,
+      alamat: true,
+      jenisKelamin: true,
+      active: true,
+      ImageProfile: {
+        select: {
+          id: true,
+          url: true,
+          active: true,
+        },
+      },
+    },
+  });
+
+  return dataProfile;
+}

src/app_modules/katalog/profile/index.ts

@@ -0,0 +1,4 @@
+import ProfileLayout from "./create/layout";
+import CreateProfile from "./create/view";
+import {getProfile} from "./fun/get-profile";
+export {ProfileLayout, CreateProfile, getProfile}

src/app_modules/katalog/view/index.ts

@@ -0,0 +1,4 @@
+import KatalogView from "./view";
+import KatalogLayout from "./layout";
+
+export {KatalogView, KatalogLayout}

src/app_modules/katalog/view/layout.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { Logout } from "@/app_modules/auth";
+import { ActionIcon, AppShell, Group, Header, Text } from "@mantine/core";
+import { IconUserSearch, IconAward, IconQrcode, IconArrowLeft, IconPencilPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+
+export default function KatalogLayout({ children }: { children: any }) {
+    const router = useRouter()
+  return (
+    <>
+      <AppShell
+        header={
+          <Header height={50} bg={"dark"}>
+            <Group position="apart" align="center" h={50} p={"sm"}>
+              <Group spacing={"sm"}>
+                <ActionIcon variant="transparent" onClick={() => router.push("/dev/home")}>
+                  <IconArrowLeft/>
+                </ActionIcon>
+                {/* <ActionIcon>
+                  <IconAward />
+                </ActionIcon> */}
+              </Group>
+              <Text color="white" fw={"bold"}>
+               Katalog
+              </Text>
+              <Group spacing={"sm"}>
+                <ActionIcon>
+                  <IconPencilPlus />
+                </ActionIcon>
+                {/* <Logout /> */}
+              </Group>
+            </Group>
+          </Header>
+        }
+      >
+        {children}
+      </AppShell>
+    </>
+  );
+}

src/app_modules/katalog/view/view.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { BackgroundImage, Box, Center, Text } from "@mantine/core"
+
+export default function KatalogView(){
+    return <>
+
+    <Center>
+        Katalog User
+    </Center>
+   
+    </>
+}