Merge pull request #187 from bipproduction/join

Fix ukuran file

src/app/dev/map/create/[id]/page.tsx

@@ -4,7 +4,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   let portofolioId = params.id;
   return (
     <>
-      <Map_CreateNewPin  portofolioId={portofolioId}/>
+      <Map_CreateNewPin portofolioId={portofolioId} />
     </>
   );
 }

src/app/dev/profile/upload/foto/[id]/page.tsx

@@ -1,11 +1,13 @@
 import { UploadFotoProfile } from "@/app_modules/katalog/profile";
 import { Profile_getOneById } from "@/app_modules/katalog/profile/fun/get/get_one_profile";
 
-export default async function Page({params}: {params: {id: string}}) {
+export default async function Page({ params }: { params: { id: string } }) {
-    let profileId = params.id
+  let profileId = params.id;
-    const dataProfile = await Profile_getOneById(profileId)
+  const dataProfile = await Profile_getOneById(profileId);
 
-    return <>
+  return (
-    <UploadFotoProfile dataProfile={dataProfile as any}/>
+    <>
+      <UploadFotoProfile dataProfile={dataProfile as any} />
     </>
-}
+  );
+}

src/app_modules/_global/button/comp_button_upload_photo.tsx

@@ -4,6 +4,7 @@ import { Button, FileButton } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import { MainColor } from "../color";
 import { MAX_SIZE } from "../lib";
+import { PemberitahuanMaksimalFile } from "../lib/max_size";
 import { ComponentGlobal_NotifikasiPeringatan } from "../notif_global";
 
 export function ComponentGlobal_ButtonUploadFileImage({
@@ -22,9 +23,7 @@ export function ComponentGlobal_ButtonUploadFileImage({
           );
 
           if (files.size > MAX_SIZE) {
-            ComponentGlobal_NotifikasiPeringatan(
+            ComponentGlobal_NotifikasiPeringatan(PemberitahuanMaksimalFile);
-              "Ukuran file terlalu besar. Maksimal 2 MB."
-            );
           } else {
             onSetFile(files);
             onSetImage(buffer);

src/app_modules/_global/component/comp_load_avatar.tsx

@@ -17,7 +17,7 @@ export function ComponentGlobal_LoaderAvatar({
 }) {
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
-  const url = APIs.GET({ fileId: fileId, size: imageSize });
+  const url = APIs.GET({ fileId: fileId, size: imageSize ? imageSize : "400" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/_global/component/comp_load_image.tsx

@@ -24,7 +24,7 @@ export function ComponentGlobal_LoadImage({
   const [isImage, setIsImage] = useState<boolean | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/_global/component/comp_load_image_custom.tsx

@@ -15,7 +15,7 @@ export function ComponentGlobal_LoadImageCustom({
   height: number;
 }) {
   const [isImage, setIsImage] = useState<boolean | null>(null);
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/_global/component/comp_load_image_landscape.tsx

@@ -16,7 +16,7 @@ export function ComponentGlobal_LoadImageLandscape({
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
   const [isLoading, setLoading] = useState(false);
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/_global/component/comp_not_user_load_image.tsx

@@ -22,7 +22,7 @@ export function ComponentGlobal_NotUserLoadImage({
   const [isImage, setIsImage] = useState<boolean | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId , size: "500" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/_global/lib/max_size.ts

@@ -1,2 +1,3 @@
-// Maksimal ukuran file dalam byte (2 MB)
+// Maksimal ukuran file dalam byte (3 MB)
-export const MAX_SIZE = 2 * 1024 * 1024; // 2 MB
+export const MAX_SIZE = 3 * 1024 * 1024; // 3 MB
+export const PemberitahuanMaksimalFile = "Ukuran file terlalu besar. Maksimal 3 MB.";

src/app_modules/_global/ui/ui_not_user_image_preview.tsx

@@ -23,7 +23,7 @@ export function UIGlobal_NotUserImagePreview({ fileId }: { fileId: string }) {
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/admin/_admin_global/_component/comp_admin_load_image.tsx

@@ -15,7 +15,7 @@ export function Admin_ComponentLoadImageLandscape({
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
   const [isLoading, setLoading] = useState(false);
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/admin/_admin_global/comp_preview_image_admin.tsx

@@ -13,7 +13,7 @@ export function Admin_ComponentPreviewImageAdmin({
 }) {
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
-  const url = APIs.GET({ fileId: fileId });
+  const url = APIs.GET({ fileId: fileId, size: "500" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/admin/map/ui/ui_map_view.tsx

@@ -88,8 +88,8 @@ export function UiAdminMap_MapBoxView({
                     }}
                     src={
                       e.pinId === null
-                        ? APIs.GET({ fileId: e.Portofolio.logoId })
+                        ? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
-                        : APIs.GET({ fileId: e.pinId })
+                        : APIs.GET({ fileId: e.pinId, size: "300" })
                     }
                   />
                 </Stack>

src/app_modules/crowd/main/view.tsx

@@ -32,7 +32,7 @@ export default function MainCrowd() {
           </AspectRatio> */}
           <Image
             alt="Logo"
-            src={"/aset/investasi/logo-crowd-panjang.png"}
+            src={"/aset/investasi/logo-crowd-panjang-new.png"}
             mah={"100%"}
             styles={{
               image: {

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

@@ -22,6 +22,9 @@ import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
 import { useState } from "react";
 import { Portofolio_ComponentButtonSelanjutnya } from "../component";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 
 export default function CreatePortofolio({
   bidangBisnis,
@@ -184,8 +187,16 @@ export default function CreatePortofolio({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  setImg(buffer);
+                  if (files.size > MAX_SIZE) {
-                  setFile(files);
+                    setImg(null);
+                    setFile(null);
+                    ComponentGlobal_NotifikasiPeringatan(
+                      PemberitahuanMaksimalFile
+                    );
+                  } else {
+                    setImg(buffer);
+                    setFile(files);
+                  }
                 } catch (error) {
                   console.log(error);
                 }

src/app_modules/katalog/portofolio/edit/logo/ui_edit_logo.tsx

@@ -11,6 +11,9 @@ import { IconCamera } from "@tabler/icons-react";
 import { useState } from "react";
 import { MODEL_PORTOFOLIO } from "../../model/interface";
 import { ComponentPortofolio_ButtonEditLogoBisnis } from "../../component";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
+import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/_global/notif_global";
 
 export default function Portofolio_EditLogoBisnis({
   dataPorto,
@@ -47,8 +50,15 @@ export default function Portofolio_EditLogoBisnis({
                     const buffer = URL.createObjectURL(
                       new Blob([new Uint8Array(await files.arrayBuffer())])
                     );
-                    setImg(buffer);
+
-                    setFile(files);
+                    if (files.size > MAX_SIZE) {
+                      ComponentGlobal_NotifikasiPeringatan(
+                        PemberitahuanMaksimalFile
+                      );
+                    } else {
+                      setImg(buffer);
+                      setFile(files);
+                    }
                   } catch (error) {
                     console.log(error);
                   }

src/app_modules/katalog/portofolio/ui/ui_detail_map.tsx

@@ -102,8 +102,8 @@ function MapView({
             <Avatar
               src={
                 data.pinId === null
-                  ? APIs.GET({ fileId: logoId })
+                  ? APIs.GET({ fileId: logoId , size: "300"})
-                  : APIs.GET({ fileId: data.pinId })
+                  : APIs.GET({ fileId: data.pinId, size: "300" })
               }
               alt="Logo"
               style={{

src/app_modules/katalog/portofolio/ui/ui_detail_map_new.tsx

@@ -96,8 +96,8 @@ export default function Portofolio_UiMapNew({ mapboxToken }: { mapboxToken: stri
                                  <Avatar
                                     src={
                                        dataPorto?.pinId === null
-                                          ? APIs.GET({ fileId: String(dataPorto?.logoId) })
+                                          ? APIs.GET({ fileId: String(dataPorto?.logoId), size: "300" })
-                                          : APIs.GET({ fileId: String(dataPorto?.pinId) })
+                                          : APIs.GET({ fileId: String(dataPorto?.pinId), size: "300" })
                                     }
                                     alt="Logo"
                                     style={{

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

@@ -26,6 +26,7 @@ import { IconAt, IconCamera, IconUpload } from "@tabler/icons-react";
 import { useState } from "react";
 import { gmailRegex } from "../../component/regular_expressions";
 import { Profile_ComponentCreateNewProfile } from "../_component";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
 
 export default function CreateProfile() {
   const [filePP, setFilePP] = useState<File | null>(null);
@@ -88,7 +89,7 @@ export default function CreateProfile() {
 
                     if (files.size > MAX_SIZE) {
                       ComponentGlobal_NotifikasiPeringatan(
-                        "Ukuran file terlalu besar. Maksimal 2 MB."
+                        PemberitahuanMaksimalFile
                       );
                     } else {
                       setImgPP(buffer);
@@ -150,7 +151,7 @@ export default function CreateProfile() {
 
                     if (files.size > MAX_SIZE) {
                       ComponentGlobal_NotifikasiPeringatan(
-                        "Ukuran file terlalu besar. Maksimal 2 MB."
+                        PemberitahuanMaksimalFile
                       );
                     } else {
                       setImgBG(buffer);

src/app_modules/map/_component/comp_load_image_map.tsx

@@ -17,7 +17,7 @@ export function ComponentMap_LoadImageMap({
   const router = useRouter();
   const [isImage, setIsImage] = useState<boolean | null>(null);
 
-  const url = APIs.GET({ fileId: fileId, size: size });
+  const url = APIs.GET({ fileId: fileId, size: size ? size : "400" });
 
   useShallowEffect(() => {
     onLoadImage();

src/app_modules/map/ui/ui_create_pin.tsx

@@ -16,7 +16,7 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
 } from "@mantine/core";
 import { IconCamera } from "@tabler/icons-react";
 import _ from "lodash";
@@ -29,6 +29,8 @@ import Map, {
 } from "react-map-gl";
 import { ComponentMap_ButtonSavePin } from "../_component";
 import { defaultLatLong, defaultMapZoom } from "../lib/default_lat_long";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
 
 export function UiMap_CreatePin({
   mapboxToken,
@@ -141,9 +143,12 @@ export function UiMap_CreatePin({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  if (files.size > 2000000) {
+
+                  if (files.size > MAX_SIZE) {
+                    setImg(null);
+                    setFile(null);
                     ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      PemberitahuanMaksimalFile,
                       3000
                     );
                   } else {

src/app_modules/map/ui/ui_custom_pin.tsx

@@ -27,6 +27,8 @@ import { defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
 import { APIs, DIRECTORY_ID } from "@/app/lib";
 import { funGlobal_UploadToStorage } from "@/app_modules/_global/fun";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
 
 export function UiMap_CustomPin({
   dataMap,
@@ -72,8 +74,8 @@ export function UiMap_CustomPin({
                 radius={"100%"}
                 src={
                   data.pinId === null
-                    ? APIs.GET({ fileId: data.Portofolio.logoId })
+                    ? APIs.GET({ fileId: data.Portofolio.logoId, size: "300" })
-                    : APIs.GET({ fileId: data.pinId })
+                    : APIs.GET({ fileId: data.pinId, size: "300" })
                 }
                 style={{
                   border: `2px solid ${AccentColor.skyblue}`,
@@ -90,9 +92,9 @@ export function UiMap_CustomPin({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  if (files.size > 2000000) {
+                  if (files.size > MAX_SIZE) {
                     ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      PemberitahuanMaksimalFile,
                       3000
                     );
                   } else {
@@ -155,8 +157,8 @@ export function UiMap_CustomPin({
                 imgPin
                   ? imgPin
                   : data.pinId === null
-                    ? APIs.GET({ fileId: data.Portofolio.logoId })
+                    ? APIs.GET({ fileId: data.Portofolio.logoId, size: "300" })
-                    : APIs.GET({ fileId: data.pinId })
+                    : APIs.GET({ fileId: data.pinId, size: "300" })
               }
               style={{
                 border: `2px solid ${AccentColor.softblue}`,

src/app_modules/map/ui/ui_edit_map.tsx

@@ -33,6 +33,8 @@ import Map, {
 import { ComponentMap_ButtonUpdateDataMap } from "../_component";
 import { defaultMapZoom } from "../lib/default_lat_long";
 import { MODEL_MAP } from "../lib/interface";
+import { MAX_SIZE } from "@/app_modules/_global/lib";
+import { PemberitahuanMaksimalFile } from "@/app_modules/_global/lib/max_size";
 
 export function UiMap_EditMap({
   mapboxToken,
@@ -85,8 +87,8 @@ export function UiMap_EditMap({
             <Avatar
               src={
                 data.pinId === null
-                  ? APIs.GET({ fileId: dataMap.Portofolio.logoId })
+                  ? APIs.GET({ fileId: dataMap.Portofolio.logoId, size: "400" })
-                  : APIs.GET({ fileId: data.pinId })
+                  : APIs.GET({ fileId: data.pinId, size: "400" })
               }
               alt="Logo"
               style={{
@@ -141,44 +143,6 @@ export function UiMap_EditMap({
             )}
           </ComponentGlobal_BoxUploadImage>
 
-          {/* {img ? (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
-                <Image
-                  radius={"sm"}
-                  alt="Photo"
-                  src={img ? img : "/aset/no-img.png"}
-                  maw={250}
-                />
-              </Paper>
-            </AspectRatio>
-          ) : (
-            <AspectRatio ratio={1 / 1} mah={300}>
-              <Paper
-                style={{
-                  border: `2px solid ${AccentColor.blue}`,
-                  backgroundColor: AccentColor.darkblue,
-                  padding: "10px",
-                  borderRadius: "10px",
-                }}
-              >
-                <Image
-                  radius={"sm"}
-                  alt="Photo"
-                  src={RouterMap.api_foto + data.imageId}
-                  maw={250}
-                />
-              </Paper>
-            </AspectRatio>
-          )} */}
-
           <Center>
             <FileButton
               onChange={async (files: any | null) => {
@@ -186,9 +150,9 @@ export function UiMap_EditMap({
                   const buffer = URL.createObjectURL(
                     new Blob([new Uint8Array(await files.arrayBuffer())])
                   );
-                  if (files.size > 2000000) {
+                  if (files.size > MAX_SIZE) {
                     ComponentGlobal_NotifikasiPeringatan(
-                      "Maaf, Ukuran file terlalu besar, maximum 2mb",
+                      PemberitahuanMaksimalFile,
                       3000
                     );
                   } else {

src/app_modules/map/ui/ui_map.tsx

@@ -91,8 +91,8 @@ export function UiMap_MapBoxView({
                     }}
                     src={
                       e.pinId === null
-                        ? APIs.GET({ fileId: e.Portofolio.logoId })
+                        ? APIs.GET({ fileId: e.Portofolio.logoId, size: "300" })
-                        : APIs.GET({ fileId: e.pinId })
+                        : APIs.GET({ fileId: e.pinId, size: "300" })
                     }
                   />
                 </Stack>
@@ -110,7 +110,7 @@ export function UiMap_MapBoxView({
         opened={openDrawer}
         close={() => setOpenDrawer(false)}
         mapId={mapId}
-        component={<ComponentMap_DetailData mapId={mapId}  />}
+        component={<ComponentMap_DetailData mapId={mapId} />}
       />
     </>
   );

src/app_modules/map/ui/ui_map_new.tsx

@@ -94,8 +94,8 @@ export function UiMap_MapBoxViewNew({ mapboxToken, }: { mapboxToken: string }) {
                                     }}
                                     src={
                                        e.pinId === null
-                                          ? APIs.GET({ fileId: e.logoId })
+                                          ? APIs.GET({ fileId: e.logoId, size: "300" })
-                                          : APIs.GET({ fileId: e.pinId })
+                                          : APIs.GET({ fileId: e.pinId, size: "300" })
                                     }
                                  />
                               </Stack>