#style: UI Katalog

Desc:
- Tampilan UI katalog selesai diubah
## No Issuee

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

@@ -1,25 +1,17 @@
 "use client";
 
-import { myConsole } from "@/app/fun/my_console";
-import { ApiHipmi } from "@/app/lib/api";
 import { Warna } from "@/app/lib/warna";
 import { Button, Loader, Select, Stack, TextInput } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { useAtom } from "jotai";
 import _ from "lodash";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import toast from "react-simple-toasts";
 
-import funEditProfile from "../fun/fun_edit_profile";
+import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
 import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
-import { MODEL_PROFILE } from "../model/interface";
-import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
-import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { validRegex } from "../../component/regular_expressions";
-import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
-import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
+import { Profile_funEditById } from "../fun/update/fun_edit_profile_by_id";
+import { MODEL_PROFILE } from "../model/interface";
 
 export default function EditProfile({ data }: { data: MODEL_PROFILE }) {
   const router = useRouter();

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

@@ -8,21 +8,18 @@ export async function Profile_getOneProfileAndUserById(profileId: string) {
       id: profileId,
     },
     select: {
-        userId: true,
-        User: true,
-        id: true,
-        name: true,
-        email: true,
-        alamat: true,
-        jenisKelamin: true,
-        imagesId: true,
-        imagesBackgroundId: true,
-        ImageProfile: true,
-        ImagesBackground: true
-        
-
-
-    }
+      userId: true,
+      User: true,
+      id: true,
+      name: true,
+      email: true,
+      alamat: true,
+      jenisKelamin: true,
+      imagesId: true,
+      imagesBackgroundId: true,
+      ImageProfile: true,
+      ImagesBackground: true,
+    },
   });
   // console.log(data)
   return data;

src/app_modules/katalog/profile/index.ts

@@ -2,18 +2,12 @@ import ProfileLayout from "./create/layout";
 import CreateProfile from "./create/view";
 import EditProfileLayout from "./edit/layout";
 import EditProfileView from "./edit/view";
+import ProfileView from "./main/view_profile";
 import UploadFotoProfile from "./upload/foto_profile";
-import UploadFotoProfileLayout from "./upload/foto_profile/layout"
-import ProfileView from "./main/view";
-import Profile_UpdateFotoBackground from "./upload/foto_background";
-import LayoutProfile_UpdateFotoBackground from "./upload/foto_background/layout";
+import UploadFotoProfileLayout from "./upload/foto_profile/layout";
 
 export {
-  ProfileLayout,
-  CreateProfile,
-  EditProfileView,
-  EditProfileLayout,
-  UploadFotoProfile,
-  UploadFotoProfileLayout,
-  ProfileView
+  CreateProfile, EditProfileLayout, EditProfileView, ProfileLayout, ProfileView, UploadFotoProfile,
+  UploadFotoProfileLayout
 };
+

src/app_modules/katalog/profile/main/view_profile.tsx

@@ -31,6 +31,7 @@ import { useState } from "react";
 import { MODEL_PROFILE_OLD } from "@/app_modules/home/model/user_profile";
 import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
 import { MODEL_PROFILE } from "../model/interface";
+import { AccentColor, MainColor } from "@/app_modules/component_global/color/color_pallet";
 
 export default function ProfileView({
   profile,
@@ -44,16 +45,14 @@ export default function ProfileView({
   const [loadingBG, setLoadingBG] = useState(false);
   const [loadingEdit, setLoadingEdit] = useState(false);
 
-  // const [data, setData] = useState(profile);
-  // useShallowEffect(() => {
-  //   funGetUserProfile(user.id ?? "").then(setProfile as any);
-  // }, []);
 
-  // if (!profile) return <></>;
   return (
     <>
       {/* <pre>{JSON.stringify(profile, null,2)}</pre> */}
-      <Paper px={"md"} py={"sm"} bg={"gray.1"} shadow="lg" withBorder>
+      <Paper px={"md"} py={"sm"} shadow="lg" style={{
+        backgroundColor: MainColor.darkblue,
+        border: `2px solid ${AccentColor.blue}`,
+      }}>
         {/* Background dan foto */}
 
         {/* Upload Background Profile */}

src/app_modules/katalog/profile/ui_profile.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  MainColor,
+  AccentColor,
+} from "@/app_modules/component_global/color/color_pallet";
+import {
+  Avatar,
+  Box,
+  Center,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { MODEL_PROFILE } from "./model/interface";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
+import {
+  IconBrandGmail,
+  IconGenderFemale,
+  IconGenderMale,
+  IconHome,
+  IconPhone,
+} from "@tabler/icons-react";
+
+export function Profile_UiView({
+  profile,
+  userLoginId,
+}: {
+  profile: MODEL_PROFILE;
+  userLoginId: string;
+}) {
+  const router = useRouter();
+  const [loadingPP, setLoadingPP] = useState(false);
+  const [loadingBG, setLoadingBG] = useState(false);
+  const [loadingEdit, setLoadingEdit] = useState(false);
+
+  const listInformation = [
+    {
+      icon: <IconPhone />,
+      value: profile?.User.nomor,
+    },
+    {
+      icon: <IconBrandGmail />,
+      value: profile?.email,
+    },
+    {
+      icon: <IconHome />,
+      value: profile?.alamat,
+    },
+    {
+      icon:
+        profile.jenisKelamin === "Laki-laki" ? (
+          <IconGenderMale />
+        ) : (
+          <IconGenderFemale />
+        ),
+      value: profile?.jenisKelamin,
+    },
+  ];
+
+  return (
+    <>
+      <Stack
+        spacing={0}
+        style={{
+          backgroundColor: AccentColor.darkblue,
+          border: `2px solid ${AccentColor.blue}`,
+          borderRadius: "10px ",
+          padding: "15px",
+          color: "white",
+        }}
+      >
+        <Box>
+          <Image
+            radius={"sm"}
+            height={200}
+            alt="Background"
+            src={
+              profile?.ImagesBackground.url
+                ? RouterProfile.api_url_background +
+                  `${profile?.ImagesBackground.url}`
+                : "/aset/no-image.png"
+            }
+          />
+          <Box
+            sx={{
+              position: "relative",
+              bottom: 60,
+              margin: "auto",
+              width: "100%",
+              marginBottom: -30,
+            }}
+          >
+            <Center>
+              <Avatar
+                bg={"gray.2"}
+                sx={{
+                  borderStyle: "solid",
+                  borderColor: "gray",
+                  borderWidth: "0.5px",
+                }}
+                src={
+                  profile?.ImageProfile?.url
+                    ? RouterProfile.api_url_foto +
+                      `${profile?.ImageProfile.url}`
+                    : "/aset/global/avatar.png"
+                }
+                size={100}
+                radius={"100%"}
+              />
+            </Center>
+            <Stack align="center" c={"white"} mt={"xs"} spacing={0}>
+              <Text fw={"bold"} lineClamp={1}>
+                {profile?.name}
+              </Text>
+              <Text fs={"italic"} fz={"sm"} lineClamp={1}>
+                @{profile?.User?.username}
+              </Text>
+            </Stack>
+          </Box>
+        </Box>
+
+        <Box>
+          <Stack spacing={"xs"}>
+            {listInformation.map((e, i) => (
+              <Group key={i}  align="flex-start">
+                <ThemeIcon
+                  style={{
+                    backgroundColor: "transparent",
+                  }}
+                >
+                  {e.icon}
+                </ThemeIcon>
+                <Box w={"85%"} >
+                  <Text fw={"bold"}>{e?.value}</Text>
+                </Box>
+              </Group>
+            ))}
+          </Stack>
+        </Box>
+        {/* <pre
+          style={{
+            color: "white",
+          }}
+        >
+          {JSON.stringify(profile, null, 2)}
+        </pre> */}
+      </Stack>
+    </>
+  );
+}