src/app/dev/admin/app-information/sticker/create/page.tsx

@@ -0,0 +1,9 @@
+import AdminAppInformation_ViewCreateSticker from "@/app_modules/admin/app_info/view/view_create_sticker";
+
+export default function Page() {
+  return (
+    <>
+      <AdminAppInformation_ViewCreateSticker />
+    </>
+  );
+}

src/app/dev/admin/app-information/sticker/page.tsx

@@ -0,0 +1,9 @@
+import AdminAppInformation_ViewSticker from "@/app_modules/admin/app_info/view/view_stiker";
+
+export default function Page() {
+  return (
+    <>
+      <AdminAppInformation_ViewSticker />
+    </>
+  );
+}

src/app_modules/_global/lib/base_style_text_input.tsx

@@ -0,0 +1,15 @@
+import { Styles } from "@mantine/core";
+import { BaseSelectStylesNames } from "@mantine/core/lib/Select/types";
+import { MainColor } from "../color";
+
+export const baseStylesTextInput: Styles<
+  BaseSelectStylesNames,
+  Record<string, any>
+> = {
+  label: {
+    color: MainColor.white,
+  },
+  input: {
+    backgroundColor: MainColor.white,
+  },
+};

src/app_modules/admin/_admin_global/back_button.tsx

@@ -19,6 +19,7 @@ export default function Admin_ComponentBackButton({
       <Group>
         <Button
           c={AccentColor.white}
+          radius={7}
           leftIcon={
             isLoading ? (
               <Loader size={"xs"} color={"gray"} />

src/app_modules/admin/app_info/ui/ui_layout_admin_app.tsx

@@ -1,21 +1,19 @@
 "use client";
 
-import React from "react";
-import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
-import { Stack, Group, Button } from "@mantine/core";
 import { AccentColor } from "@/app_modules/_global/color";
+import { MainColor } from "@/app_modules/_global/color/color_pallet";
+import { RouterAdminAppInformation } from "@/lib/router_admin/router_app_information";
+import { Button, Group, Stack } from "@mantine/core";
+import { usePathname, useRouter } from "next/navigation";
+import React, { useState } from "react";
+import ComponentAdminGlobal_HeaderTamplate from "../../_admin_global/header_tamplate";
 import {
-  AdminColor,
-  MainColor,
-} from "@/app_modules/_global/color/color_pallet";
-import { useAtom } from "jotai";
-import { usePathname } from "next/navigation";
-import { gs_app_information_menu } from "../lib";
-import {
-  AdminAppInformation_ViewInfoBank,
-  AdminAppInformation_ViewKategoriPortofolio,
-} from "../view";
-import Link from "next/link";
+  IconBriefcase,
+  IconMoneybag,
+  IconMoodSmileFilled,
+  IconSticker,
+} from "@tabler/icons-react";
+import { useShallowEffect } from "@mantine/hooks";
 
 export default function AdminAppInformation_Layout({
   children,
@@ -23,14 +21,29 @@ export default function AdminAppInformation_Layout({
   children: React.ReactNode;
 }) {
   const pathname = usePathname();
+  const router = useRouter();
+  const [loadingPath, setLoadingPath] = useState<string | null>(null);
+
+  // Reset loading saat route berubah
+  useShallowEffect(() => {
+    setLoadingPath(null);
+  }, [pathname]);
+
   const listPage = [
     {
+      icon: <IconMoneybag />,
       name: "Informasi Bank",
-      path: "/dev/admin/app-information/info-bank",
+      path: RouterAdminAppInformation.infoBank,
     },
     {
+      icon: <IconBriefcase />,
       name: "Bidang Bisnis",
-      path: "/dev/admin/app-information/bidang-bisnis",
+      path: RouterAdminAppInformation.bidangBisnis,
+    },
+    {
+      icon: <IconMoodSmileFilled />,
+      name: "Stiker",
+      path: RouterAdminAppInformation.sticker,
     },
   ];
 
@@ -40,32 +53,55 @@ export default function AdminAppInformation_Layout({
     return false;
   };
 
+  const handleClick = async (path: string) => {
+    if (path === pathname) return; // kalau sudah di halaman itu, jangan reload
+    setLoadingPath(path);
+    router.push(path);
+  };
+
   return (
-    <>
-      <Stack h={"100%"}>
-        <ComponentAdminGlobal_HeaderTamplate name="App Information" />
+    <Stack h="100%">
+      <ComponentAdminGlobal_HeaderTamplate name="App Information" />
 
-        <Group>
-          {listPage.map((e, i) => (
-            <Button
-              key={i}
-              component={Link}
-              href={e.path}
-              radius={"xl"}
-              c={isActive(e.path) ? MainColor.black : MainColor.white}
-              color="yellow"
-              bg={isActive(e.path) ? AccentColor.yellow : AccentColor.blackgray}
-              style={{
-                transition: "all 0.5s",
-              }}
-            >
-              {e.name}
-            </Button>
-          ))}
+      <div
+        style={{
+          position: "sticky",
+          top: 0,
+          zIndex: 10,
+          padding: "0.5rem 0",
+          overflowX: "auto",
+          whiteSpace: "nowrap",
+        }}
+      >
+        <Group spacing="sm" style={{ flexWrap: "nowrap" }}>
+          {listPage.map((e, i) => {
+            const active = isActive(e.path);
+            const loading = loadingPath === e.path;
+
+            return (
+              <Button
+                key={i}
+                radius="xl"
+                leftIcon={e.icon}
+                c={active ? MainColor.black : MainColor.white}
+                color="yellow"
+                bg={active ? AccentColor.yellow : AccentColor.blackgray}
+                style={{
+                  transition: "all 0.5s",
+                  flexShrink: 0,
+                }}
+                loading={loading}
+                disabled={loading}
+                onClick={() => handleClick(e.path)}
+              >
+                {e.name}
+              </Button>
+            );
+          })}
         </Group>
+      </div>
 
-        {children}
-      </Stack>
-    </>
+      {children}
+    </Stack>
   );
 }

src/app_modules/admin/app_info/view/view_create_sticker.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import {
+  Box,
+  Button,
+  Chip,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  TextInput,
+} from "@mantine/core";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { Admin_V3_ComponentBreakpoint } from "../../_components_v3/comp_simple_grid_breakpoint";
+import { pathAssetImage } from "@/lib";
+import Admin_ComponentBackButton from "../../_admin_global/back_button";
+import { IconCheck, IconUpload } from "@tabler/icons-react";
+import {
+  AdminColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
+import { baseStylesTextInput } from "@/app_modules/_global/lib/base_style_text_input";
+import { useState } from "react";
+import Component_V3_Label_TextInput from "@/app_modules/_global/component/new/comp_V3_label_text_input";
+
+export default function AdminAppInformation_ViewCreateSticker() {
+  const [value, setValue] = useState(["senang"]);
+
+  const listEmotion = [
+    { value: "senang", label: "Senang" },
+    { value: "sedih", label: "Sedih" },
+    { value: "marah", label: "Marah" },
+    { value: "takut", label: "Takut" },
+    { value: "terkejut", label: "Terkejut" },
+    { value: "cinta", label: "Cinta" },
+    { value: "malas", label: "Malas" },
+    { value: "bangga", label: "Bangga" },
+    { value: "penasaran", label: "Penasaran" },
+    { value: "malu", label: "Malu" },
+    { value: "iri", label: "Iri" },
+    { value: "kesal", label: "Kesal" },
+    { value: "kaget", label: "Kaget" },
+    { value: "bingung", label: "Bingung" },
+    { value: "lega", label: "Lega" },
+  ];
+
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_TitlePage name="Tambah Stiker" />
+        <Admin_ComponentBackButton />
+
+        <Admin_V3_ComponentBreakpoint lg={2} md={2} sm={1}>
+          <Admin_ComponentBoxStyle>
+            <Stack>
+              <Stack align="center">
+                <Paper bg={MainColor.white} p="sm" radius="lg">
+                  <Image
+                    alt="Preview Stiker"
+                    src={pathAssetImage.dummy_image}
+                    w="100%"
+                    style={{ maxWidth: 300, objectFit: "contain" }}
+                    radius="md"
+                  />
+                </Paper>
+
+                <Button radius="xl" leftIcon={<IconUpload size={20} />}>
+                  Upload Stiker
+                </Button>
+              </Stack>
+
+              <Stack>
+                <TextInput
+                  required
+                  placeholder="Masukkan nama stiker"
+                  label="Nama Stiker"
+                  styles={{
+                    ...baseStylesTextInput,
+                    required: { color: MainColor.red },
+                  }}
+                />
+
+                <Stack>
+                  <Component_V3_Label_TextInput text="Pilih emosi stiker" />
+                  <Group style={{ display: "flex", flexWrap: "wrap" }}>
+                    <Chip.Group multiple value={value} onChange={setValue}>
+                      {listEmotion.map((e, i) => {
+                        return (
+                          <Chip key={i} value={e.value}>
+                            {e.label}
+                          </Chip>
+                        );
+                      })}
+                    </Chip.Group>
+                  </Group>
+                </Stack>
+
+                <Box
+                  mt={"xl"}
+                  style={{ display: "flex", justifyContent: "flex-end" }}
+                >
+                  <Button radius="xl" leftIcon={<IconCheck size={20} />}>
+                    Simpan
+                  </Button>
+                </Box>
+              </Stack>
+            </Stack>
+          </Admin_ComponentBoxStyle>
+        </Admin_V3_ComponentBreakpoint>
+      </Stack>
+    </>
+  );
+}

src/app_modules/admin/app_info/view/view_stiker.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { Button, Center, ScrollArea, Stack, Table, Text } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import { Admin_ComponentBoxStyle } from "../../_admin_global/_component/comp_admin_boxstyle";
+import { RouterAdminAppInformation } from "@/lib/router_admin/router_app_information";
+
+export default function AdminAppInformation_ViewSticker() {
+  const router = useRouter();
+  return (
+    <>
+      <Stack>
+        <ComponentAdminGlobal_TitlePage name="Stiker " />
+
+        <Button
+          w={120}
+          radius={"xl"}
+          leftIcon={<IconPlus size={20} />}
+          onClick={() => {
+            router.push(RouterAdminAppInformation.createSticker);
+          }}
+        >
+          Tambah
+        </Button>
+
+        <Admin_ComponentBoxStyle
+          style={{ height: "65dvh", overflow: "hidden" }}
+        >
+          <ScrollArea w={"100%"} h={"100%"} scrollbarSize={"md"}>
+            <Table
+              verticalSpacing={"md"}
+              horizontalSpacing={"md"}
+              p={"md"}
+              w={"100%"}
+            >
+              <thead>
+                <tr>
+                  <th>
+                    <Center c={AdminColor.white}>Aksi</Center>
+                  </th>
+                  <th>
+                    <Center c={AdminColor.white}>Status</Center>
+                  </th>
+                  <th>
+                    <Text c={AdminColor.white}>Kategori</Text>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>1</td>
+                  <td>Stiker 1</td>
+                  <td>
+                    <Button
+                      radius={"xl"}
+                      leftIcon={<IconPlus size={20} />}
+                      onClick={() => {}}
+                    >
+                      Tambah
+                    </Button>
+                  </td>
+                </tr>
+              </tbody>
+            </Table>
+          </ScrollArea>
+        </Admin_ComponentBoxStyle>
+      </Stack>
+    </>
+  );
+}

src/lib/path_asset_image.tsx

@@ -3,4 +3,5 @@ export const pathAssetImage = {
   avatar: "/aset/global/avatar.png",
   main_background: "/aset/global/main_background.png",
   new_loader: "/aset/global/loading.gif",
+  dummy_image: "/aset/global/dummy-image.jpg",  
 };

src/lib/router_admin/router_app_information.ts

@@ -3,4 +3,7 @@ export const RouterAdminAppInformation = {
   infoBank: "/dev/admin/app-information/info-bank",
   bidangBisnis: "/dev/admin/app-information/bidang-bisnis",
   createBidangBisnis: "/dev/admin/app-information/bidang-bisnis/create",
+  // Sticker
+  sticker: "/dev/admin/app-information/sticker",
+  createSticker: "/dev/admin/app-information/sticker/create",
 };