#style: Tampilan home

Deskripsi:
- Tampilan tamplate layout positionnya di ganti fixed ( tidak bisa di tarik ke bawah jika sudah menjadi aplikasi )
- UI Home selesai
- UI User search selesai
- UI Notifikasi selesai
## No issuee

src/app_modules/user_search/component/is_empty_data.tsx

@@ -1,13 +0,0 @@
-"use client";
-
-import { Center } from "@mantine/core";
-
-export default function ComponentUserSearch_IsEmptyData({ text }: { text: string }) {
-  return (
-    <>
-      <Center h={"50vh"} fz={"sm"} c="gray" fw={"bold"} style={{ zIndex: 1 }}>
-        {text}
-      </Center>
-    </>
-  );
-}

src/app_modules/user_search/component/ui_user_search.tsx

@@ -0,0 +1,310 @@
+"use client";
+
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import ComponentGlobal_IsEmptyData from "@/app_modules/component_global/is_empty_data";
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import {
+  ActionIcon,
+  Avatar,
+  Box,
+  Center,
+  Grid,
+  Group,
+  Loader,
+  Stack,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconChevronRight, IconSearch } from "@tabler/icons-react";
+import _ from "lodash";
+import { ScrollOnly } from "next-scroll-loader";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { userSearch_getAllUser } from "../fun/get/get_all_user";
+import { MainColor } from "@/app_modules/component_global/color/color_pallet";
+import ComponentGlobal_UI_Loader from "@/app_modules/component_global/ui/ui_loader";
+
+export function UserSearch_UiView({ listUser }: { listUser: MODEL_USER[] }) {
+  const [data, setData] = useState(listUser);
+  const [activePage, setActivePage] = useState(1);
+  const [isSearch, setIsSearch] = useState("");
+
+  async function onSearch(name: string) {
+    setIsSearch(name);
+    const loadData = await userSearch_getAllUser({
+      page: activePage,
+      search: name,
+    });
+    setData(loadData as any);
+    setActivePage(1);
+  }
+
+  return (
+    <>
+      <Stack spacing={"xl"}>
+        <TextInput
+          radius={"xl"}
+          style={{ zIndex: 99 }}
+          icon={<IconSearch size={20} />}
+          placeholder="Masukan username "
+          onChange={(val) => onSearch(val.target.value)}
+        />
+        <Box>
+          {_.isEmpty(data) ? (
+            <ComponentGlobal_IsEmptyData text="Tidak ada pengguna lain" />
+          ) : (
+            <ScrollOnly
+              height="84vh"
+              renderLoading={() => (
+                <Center mt={"lg"}>
+                  <Loader color={"yellow"} />
+                </Center>
+              )}
+              data={data}
+              setData={setData}
+              moreData={async () => {
+                const loadData = await userSearch_getAllUser({
+                  page: activePage + 1,
+                  search: isSearch,
+                });
+                setActivePage((val) => val + 1);
+
+                return loadData;
+              }}
+            >
+              {(item) => <CardView data={item} />}
+            </ScrollOnly>
+          )}
+        </Box>
+      </Stack>
+      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}
+
+function CardView({ data }: { data: MODEL_USER }) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Stack
+        spacing={"xs"}
+        c="white"
+
+        py={"xs"}
+        onClick={() => {
+          setLoading(true);
+          router.push(RouterProfile.katalog + `${data?.Profile?.id}`);
+        }}
+      >
+        <Group position="apart">
+          <Group position="left">
+            <Avatar
+              sx={{
+                borderStyle: "solid",
+                borderWidth: "0.5px",
+              }}
+              radius={"xl"}
+              size={"md"}
+              src={
+                RouterProfile?.api_foto_profile + `${data?.Profile?.imagesId}`
+              }
+            />
+            <Stack spacing={0}>
+              <Text fw={"bold"} lineClamp={1}>
+                {data?.username}
+              </Text>
+              <Text fz={"sm"} fs={"italic"}>
+                +{data?.nomor}
+              </Text>
+            </Stack>
+          </Group>
+
+          <Group position="right">
+            <Center>
+              <ActionIcon variant="transparent">
+                {loading ? (
+                  <ComponentGlobal_UI_Loader />
+                ) : (
+                  <IconChevronRight color="white" />
+                )}
+              </ActionIcon>
+            </Center>
+          </Group>
+        </Group>
+      </Stack>
+    </>
+  );
+}
+
+let dataDummy = [
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 1",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+  {
+    id: "clx8pl7r90005su4mldioo0v1",
+    username: "amalia 2",
+    nomor: "628980185458",
+    active: true,
+    masterUserRoleId: "1",
+    Profile: {
+      id: "clx8ptp7w000esu4ma275qnc8",
+      name: "Amalia Dwi",
+      imagesId: "clx8ptp7m000bsu4mwzbfvd9w",
+    },
+  },
+];

src/app_modules/user_search/fun/get/get_all_user.ts

@@ -0,0 +1,58 @@
+"use server";
+
+import prisma from "@/app/lib/prisma";
+import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
+
+export async function userSearch_getAllUser({
+  page,
+  search,
+}: {
+  page: number;
+  search?: string;
+}) {
+  const userLoginId = await user_getOneUserId();
+  const takeData = 20;
+  const skipData = page * takeData - takeData;
+
+  const data = await prisma.user.findMany({
+    take: takeData,
+    skip: skipData,
+    orderBy: {
+      username: "asc",
+    },
+    where: {
+      active: true,
+      masterUserRoleId: "1",
+      username: {
+        contains: search,
+        mode: "insensitive",
+      },
+      NOT: {
+        Profile: null,
+      },
+      OR: [
+        {
+          NOT: {
+            id: userLoginId,
+          },
+        },
+      ],
+    },
+    select: {
+      id: true,
+      username: true,
+      nomor: true,
+      active: true,
+      masterUserRoleId: true,
+      Profile: {
+        select: {
+          id: true,
+          name: true,
+          imagesId: true,
+        },
+      },
+    },
+  });
+
+  return data;
+}

src/app_modules/user_search/fun/get/get_list_user.ts

@@ -1,59 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
-
-export async function UserSearch_getListUser({ name }: { name: string }) {
-  const userLoginId = await user_getOneUserId();
-
-  if (name === "") {
-    const data = await prisma.user.findMany({
-      where: {
-        masterUserRoleId: "1",
-        NOT: {
-          id: userLoginId,
-        },
-      },
-      select: {
-        id: true,
-        username: true,
-        nomor: true,
-        active: true,
-        masterUserRoleId: true,
-        Profile: {
-          select: {
-            id: true,
-            name: true,
-            imagesId: true,
-          },
-        },
-      },
-    });
-    return data;
-  }
-
-  const getDataCari = await prisma.user.findMany({
-    where: {
-      masterUserRoleId: "1",
-      Profile: {
-        name: {
-          contains: name,
-          mode: "insensitive",
-        },
-      },
-      NOT: {
-        id: userLoginId,
-      },
-    },
-    select: {
-      id: true,
-      username: true,
-      nomor: true,
-      active: true,
-      masterUserRoleId: true,
-      Profile: true,
-    },
-  });
-
-  return getDataCari;
-}

src/app_modules/user_search/fun/search/fun_search_by_name.ts

@@ -1,28 +0,0 @@
-"use server";
-
-import prisma from "@/app/lib/prisma";
-import { useSearchParams } from "next/navigation";
-import { NextRequest } from "next/server";
-
-export async function UserSearch_searchByName(name: string) {
-  const data = await prisma.user.findMany({
-    where: {
-      Profile: {
-        name: {
-          contains: name,
-          mode: "insensitive",
-        },
-      },
-    },
-    select: {
-      id: true,
-      username: true,
-      nomor: true,
-      active: true,
-      masterUserRoleId: true,
-      Profile: true,
-    },
-  });
-
-  return data;
-}

src/app_modules/user_search/index.ts

@@ -1,7 +1,3 @@
-import UserSearch_MainView from "./main";
-import LayoutUserSearch_MainView from "./main/layout";
+import UserSearch_MainView from "./view_user_seach";
 
-export {
-    UserSearch_MainView,
-    LayoutUserSearch_MainView,
-}
+export { UserSearch_MainView };

src/app_modules/user_search/main/index.tsx

@@ -1,131 +0,0 @@
-"use client";
-
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
-import { MODEL_USER } from "@/app_modules/home/model/interface";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Center,
-  Divider,
-  Grid,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
-import { IconChevronRight, IconSearch } from "@tabler/icons-react";
-import { useState } from "react";
-import { UserSearch_searchByName } from "../fun/search/fun_search_by_name";
-import { useRouter } from "next/navigation";
-import ComponentGlobal_MaintenanceInformation from "@/app_modules/component_global/maintenance_information";
-import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
-import { data } from "autoprefixer";
-import { UserSearch_getListUser } from "../fun/get/get_list_user";
-import _ from "lodash";
-import ComponentUserSearch_IsEmptyData from "../component/is_empty_data";
-
-export default function UserSearch_MainView({
-  listUser,
-}: {
-  listUser: MODEL_USER[];
-}) {
-  const router = useRouter();
-  const [data, setData] = useState(listUser);
-  const [loading, setLoading] = useState(false);
-
-  async function onSearch(name: string) {
-    await UserSearch_getListUser({ name: name }).then((res) =>
-      setData(res as any)
-    );
-  }
-
-  // return (
-  //   <>
-  //     <Center h={"50vh"}>
-  //      <ComponentGlobal_MaintenanceInformation/>
-  //     </Center>
-  //   </>
-  // );
-
-  if (loading) return <ComponentGlobal_V2_LoadingPage />;
-
-  return (
-    <>
-      <Box>
-        <Stack spacing={"md"}>
-          <TextInput
-            style={{ zIndex: 99 }}
-            pos={"sticky"}
-            top={"6vh"}
-            icon={<IconSearch size={20} />}
-            placeholder="Masukan nama pegguna"
-            onChange={(val) => onSearch(val.target.value)}
-          />
-          <Box>
-            {_.isEmpty(data) ? (
-              <ComponentUserSearch_IsEmptyData text="Tidak ada pengguna" />
-            ) : (
-              <Box>
-                {data?.map((e, i) =>
-                  e?.Profile === null ? (
-                    ""
-                  ) : (
-                    <Stack key={i} spacing={"xs"} mt={"xs"}>
-                      <Grid>
-                        <Grid.Col span={2}>
-                          <Center h={"100%"}>
-                            <Avatar
-                              sx={{
-                                borderStyle: "solid",
-                                borderWidth: "0.5px",
-                              }}
-                              radius={"xl"}
-                              size={"md"}
-                              src={
-                                RouterProfile?.api_foto_profile +
-                                `${e?.Profile?.imagesId}`
-                              }
-                            />
-                          </Center>
-                        </Grid.Col>
-                        <Grid.Col span={"auto"}>
-                          <Stack spacing={0}>
-                            <Text fw={"bold"} lineClamp={1}>
-                              {e?.Profile?.name}
-                            </Text>
-                            <Text fz={"sm"} fs={"italic"}>
-                              +{e?.nomor}
-                            </Text>
-                          </Stack>
-                        </Grid.Col>
-                        <Grid.Col span={2}>
-                          <Center h={"100%"}>
-                            <ActionIcon
-                              variant="transparent"
-                              onClick={() => {
-                                setLoading(true);
-                                router.push(
-                                  RouterProfile.katalog + `${e?.Profile?.id}`
-                                );
-                              }}
-                            >
-                              <IconChevronRight />
-                            </ActionIcon>
-                          </Center>
-                        </Grid.Col>
-                      </Grid>
-                      <Divider />
-                    </Stack>
-                  )
-                )}
-              </Box>
-            )}
-          </Box>
-        </Stack>
-      </Box>
-      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
-    </>
-  );
-}

src/app_modules/user_search/main/layout.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
-import ComponentGlobal_HeaderTamplate from "@/app_modules/component_global/header_tamplate";
-import { AppShell } from "@mantine/core";
-import React from "react";
-
-export default function LayoutUserSearch_MainView({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <>
-      <AppComponentGlobal_LayoutTamplate
-        header={<ComponentGlobal_HeaderTamplate title="Temukan Pengguna" />}
-      >
-        {children}
-      </AppComponentGlobal_LayoutTamplate>
-    </>
-  );
-}

src/app_modules/user_search/view_user_seach.tsx

@@ -0,0 +1,22 @@
+
+import { MODEL_USER } from "@/app_modules/home/model/interface";
+import LayoutGlobal_UI_HeaderTamplate from "../component_global/ui/ui_header_tamplate";
+import LayoutGlobal_UI_Tamplate from "../component_global/ui/ui_layout_tamplate";
+import { UserSearch_UiView } from "./component/ui_user_search";
+
+export default function UserSearch_MainView({
+  listUser,
+}: {
+  listUser: MODEL_USER[];
+}) {
+  return (
+    <>
+      <LayoutGlobal_UI_Tamplate
+        header={<LayoutGlobal_UI_HeaderTamplate title="Pencarian Pengguna" />}
+      >
+        <UserSearch_UiView listUser={listUser} />
+      </LayoutGlobal_UI_Tamplate>
+      {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
+    </>
+  );
+}