diff --git a/src/app/api/user/[id]/route.ts b/src/app/api/user/[id]/route.ts
index dc2ba9f..1151a0b 100644
--- a/src/app/api/user/[id]/route.ts
+++ b/src/app/api/user/[id]/route.ts
@@ -3,6 +3,8 @@ import { funGetUserByCookies } from "@/module/auth";
 import { createLogUser } from "@/module/user";
 import _ from "lodash";
 import { NextResponse } from "next/server";
+import path from "path";
+import fs from "fs";
 
 // GET ONE MEMBER / USER 
 export async function GET(request: Request, context: { params: { id: string } }) {
@@ -24,6 +26,7 @@ export async function GET(request: Request, context: { params: { id: string } })
                 phone: true,
                 email: true,
                 gender: true,
+                img: true,
                 idGroup: true,
                 isActive: true,
                 idPosition: true,
@@ -131,12 +134,27 @@ export async function PUT(request: Request, context: { params: { id: string } })
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
         }
         const { id } = context.params;
-        const data = await request.json();
+        console.log(id)
+        
+        const body = await request.formData()
+        const file = body.get("file") as File
+        const data = body.get("data")
+        const {
+            name,
+            email,
+            phone,
+            nik,
+            gender,
+            idGroup,
+            idPosition,
+            idUserRole
+        } = JSON.parse(data as string)
+        // const data = await request.json();
         const cek = await prisma.user.count({
             where: {
-                nik: data.nik,
-                email: data.email,
-                phone: data.phone,
+                nik: nik,
+                email: email,
+                phone: phone,
                 NOT: {
                     id: id
                 }
@@ -149,22 +167,46 @@ export async function PUT(request: Request, context: { params: { id: string } })
                     id: id
                 },
                 data: {
-                    nik: data.nik,
-                    name: data.name,
-                    phone: data.phone,
-                    email: data.email,
-                    gender: data.gender,
-                    idGroup: data.idGroup,
-                    idPosition: data.idPosition,
-                    idUserRole: data.idUserRole,
-                },
+                    nik: nik,
+                    name: name,
+                    phone: "62" + phone,
+                    email: email,
+                    gender: gender,
+                    idGroup: idGroup,
+                    idPosition: idPosition,
+                    idUserRole: idUserRole,
+                }, 
+                select: {
+                    img: true
+                }
             });
 
+            if (String(file) != "undefined" && String(file) != "null") {
+                fs.unlink(`./public/image/user/${updates.img}`, (err) => { })
+                const root = path.join(process.cwd(), "./public/image/user/");
+                const fExt = file.name.split(".").pop()
+                const fileName = id + '.' + fExt;
+                const filePath = path.join(root, fileName);
+    
+                // Konversi ArrayBuffer ke Buffer
+                const buffer = Buffer.from(await file.arrayBuffer());
+                fs.writeFileSync(filePath, buffer);
+
+                await prisma.user.update({
+                    where: {
+                        id: id
+                    },
+                    data: {
+                        img: fileName
+                    }
+                })
+            }
+
             // create log user
-            const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate data user', table: 'user', data: data.id })
+            const log = await createLogUser({ act: 'UPDATE', desc: 'User mengupdate data user', table: 'user', data: user.id })
 
             return Response.json(
-                { success: true, message: "Sukses Update User", updates },
+                { success: true, message: "Sukses Update User" },
                 { status: 200 }
             );
         } else {
diff --git a/src/app/api/user/route.ts b/src/app/api/user/route.ts
index 1d7f3b0..3faba9d 100644
--- a/src/app/api/user/route.ts
+++ b/src/app/api/user/route.ts
@@ -6,121 +6,122 @@ import { NextResponse } from "next/server";
 
 // GET ALL MEMBER / USER
 export async function GET(request: Request) {
-    try {
-        let fixGroup
-        const { searchParams } = new URL(request.url);
-        const name = searchParams.get('search')
-        const idGroup = searchParams.get("group");
-        const active = searchParams.get("active");
-        const user = await funGetUserByCookies()
-        if (user.id == undefined) {
-            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
-        }
-        if (idGroup == "null" || idGroup == undefined) {
-            fixGroup = user.idGroup
-          } else {
-            fixGroup = idGroup
-          }
-
-
-        const users = await prisma.user.findMany({
-            where: {
-                isActive: active == 'false' ? false : true,
-                idGroup: String(fixGroup),
-                name: {
-                    contains: (name == undefined || name == null) ? "" : name,
-                    mode: "insensitive",
-                }
-            },
-            select: {
-                id: true,
-                isActive: true,
-                nik: true,
-                name: true,
-                phone: true,
-                email: true,
-                gender: true,
-                Position: {
-                    select: {
-                        name: true,
-                    },
-                },
-                Group: {
-                    select: {
-                        name: true,
-                    },
-                },
-            },
-        });
-
-        const allData = users.map((v: any) => ({
-            ..._.omit(v, ["Group", "Position" ]),
-          group: v.Group.name,
-          position: v.Position.name
-        }))
-
-        return NextResponse.json({ success: true, message: "Berhasil member", data: allData, }, { status: 200 });
-    } catch (error) {
-        console.error(error);
-        return NextResponse.json({ success: false, message: "Gagal mendapatkan member, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+  try {
+    let fixGroup
+    const { searchParams } = new URL(request.url);
+    const name = searchParams.get('search')
+    const idGroup = searchParams.get("group");
+    const active = searchParams.get("active");
+    const user = await funGetUserByCookies()
+    if (user.id == undefined) {
+      return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
     }
+    if (idGroup == "null" || idGroup == undefined) {
+      fixGroup = user.idGroup
+    } else {
+      fixGroup = idGroup
+    }
+
+
+    const users = await prisma.user.findMany({
+      where: {
+        isActive: active == 'false' ? false : true,
+        idGroup: String(fixGroup),
+        name: {
+          contains: (name == undefined || name == null) ? "" : name,
+          mode: "insensitive",
+        }
+      },
+      select: {
+        id: true,
+        isActive: true,
+        nik: true,
+        name: true,
+        phone: true,
+        email: true,
+        gender: true,
+        img: true,
+        Position: {
+          select: {
+            name: true,
+          },
+        },
+        Group: {
+          select: {
+            name: true,
+          },
+        },
+      },
+    });
+
+    const allData = users.map((v: any) => ({
+      ..._.omit(v, ["Group", "Position"]),
+      group: v.Group.name,
+      position: v.Position.name
+    }))
+
+    return NextResponse.json({ success: true, message: "Berhasil member", data: allData, }, { status: 200 });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ success: false, message: "Gagal mendapatkan member, coba lagi nanti", reason: (error as Error).message, }, { status: 500 });
+  }
 }
 
 
 // CREATE MEMBER / USER
 export async function POST(request: Request) {
-    try {
+  try {
 
-        const user = await funGetUserByCookies()
-        if (user.id == undefined) {
-            return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
-        }
-        const data = await request.json();
-        const village = "desa1"
-    
-        const cek = await prisma.user.count({
-          where: {
-            nik: data.nik,
-            email: data.email,
-            phone: data.phone
-          },
-        });
-    
-        if (cek == 0) {
-          const users = await prisma.user.create({
-            data: {
-              nik: data.nik,
-              name: data.name,
-              phone: data.phone,
-              email: data.email,
-              gender: data.gender,
-              idGroup: data.idGroup,
-              idVillage: village,
-              idPosition: data.idPosition,
-              idUserRole: data.idUserRole,
-            },
-            select: {
-              id: true,
-              nik: true,
-              name: true,
-              phone: true,
-              email: true,
-              gender: true,
-            },
-          });
-    
-          // create log user
-          const log = await createLogUser({ act: 'CREATE', desc: 'User membuat data user baru', table: 'user', data: users.id })
-    
-          return Response.json({ success: true, message: 'Sukses membuat user' }, { status: 200 });
-        } else {
-          return Response.json({ success: false, message: "User sudah ada" }, { status: 400 });
-        }
-    
-    
-    
-      } catch (error) {
-        console.error(error);
-        return Response.json({ success: false, message: "Internal Server Error" }, { status: 500 });
-      }
+    const user = await funGetUserByCookies()
+    if (user.id == undefined) {
+      return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
+    }
+    const data = await request.json();
+    const village = "desa1"
+
+    const cek = await prisma.user.count({
+      where: {
+        nik: data.nik,
+        email: data.email,
+        phone: data.phone
+      },
+    });
+
+    if (cek == 0) {
+      const users = await prisma.user.create({
+        data: {
+          nik: data.nik,
+          name: data.name,
+          phone: data.phone,
+          email: data.email,
+          gender: data.gender,
+          idGroup: data.idGroup,
+          idVillage: village,
+          idPosition: data.idPosition,
+          idUserRole: data.idUserRole,
+        },
+        select: {
+          id: true,
+          nik: true,
+          name: true,
+          phone: true,
+          email: true,
+          gender: true,
+        },
+      });
+
+      // create log user
+      const log = await createLogUser({ act: 'CREATE', desc: 'User membuat data user baru', table: 'user', data: users.id })
+
+      return Response.json({ success: true, message: 'Sukses membuat user' }, { status: 200 });
+    } else {
+      return Response.json({ success: false, message: "User sudah ada" }, { status: 400 });
+    }
+
+
+
+  } catch (error) {
+    console.error(error);
+    return Response.json({ success: false, message: "Internal Server Error" }, { status: 500 });
+  }
 }
\ No newline at end of file
diff --git a/src/module/calender/ui/date_event_division.tsx b/src/module/calender/ui/date_event_division.tsx
index bf609b7..716721b 100644
--- a/src/module/calender/ui/date_event_division.tsx
+++ b/src/module/calender/ui/date_event_division.tsx
@@ -82,7 +82,7 @@ export default function DateEventDivision() {
     const muncul = isListTgl.includes(coba)
 
     return (
-      <Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline processing size={10} >
+      <Indicator color="red" offset={-3} disabled={!muncul} position='top-end' inline  size={6} >
         <div>{day}</div>
       </Indicator>
     );
diff --git a/src/module/user/member/lib/api_member.ts b/src/module/user/member/lib/api_member.ts
index 4bfdb59..461c735 100644
--- a/src/module/user/member/lib/api_member.ts
+++ b/src/module/user/member/lib/api_member.ts
@@ -52,13 +52,10 @@ export const funEditStatusMember = async (path: string, data: IStatusmember) =>
 }
 
 
-export const funEditMember = async (path: string, data: IEditDataMember) => {
+export const funEditMember = async (path: string, data: FormData) => {
     const response = await fetch(`/api/user/${path}`, {
         method: "PUT",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
+        body: data,
     });
     return await response.json().catch(() => null);
 }
diff --git a/src/module/user/member/lib/type_member.ts b/src/module/user/member/lib/type_member.ts
index 7119f24..3d3f2ba 100644
--- a/src/module/user/member/lib/type_member.ts
+++ b/src/module/user/member/lib/type_member.ts
@@ -1,53 +1,54 @@
 export interface IListMember {
-    id: string,
-    name: string,
-    nik: string,
-    email: string,
-    phone: string,
-    gender: string,
-    position: string,
-    group: string,
-    isActive: boolean
+   id: string,
+   name: string,
+   nik: string,
+   email: string,
+   phone: string,
+   gender: string,
+   position: string,
+   group: string,
+   img: string,
+   isActive: boolean
 }
 
-export interface IFormMember  {
-    nik: string;
-    name: string;
-    phone: string;
-    email: string;
-    gender: string;
-    idGroup: string;
-    idPosition: string;
-    idUserRole: string;
+export interface IFormMember {
+   nik: string;
+   name: string;
+   phone: string;
+   email: string;
+   gender: string;
+   idGroup: string;
+   idPosition: string;
+   idUserRole: string;
 }
 
 export interface IStatusmember {
-    isActive: boolean;
- }
+   isActive: boolean;
+}
 
 // EDIT MEMBER
-export interface IEditDataMember  {
-    id: string;
-    nik: string;
-    name: string;
-    phone: string;
-    email: string;
-    gender: string;
-    idGroup: string;
-    idPosition: string;
-    idUserRole: string;
- }
- 
- export interface IDataPositionMember {
-    id: string;
-    name: string;
- };
- 
- export interface IDataROleMember  {
-    id: string;
-    name: string;
- }
+export interface IEditDataMember {
+   id: string;
+   nik: string;
+   name: string;
+   phone: string;
+   email: string;
+   gender: string;
+   idGroup: string;
+   idPosition: string;
+   idUserRole: string;
+}
 
-export interface IMember{
+export interface IDataPositionMember {
+   id: string;
+   name: string;
+};
+
+export interface IDataROleMember {
+   id: string;
+   name: string;
+}
+
+export interface IMember {
    id: string
 }
\ No newline at end of file
diff --git a/src/module/user/member/ui/edit_member.tsx b/src/module/user/member/ui/edit_member.tsx
index 8fbe283..526d3ce 100644
--- a/src/module/user/member/ui/edit_member.tsx
+++ b/src/module/user/member/ui/edit_member.tsx
@@ -3,15 +3,17 @@ import { WARNA } from "@/module/_global";
 import LayoutModal from "@/module/_global/layout/layout_modal";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { funGetAllPosition } from "@/module/position/lib/api_position";
-import { Box, Button, Select, Stack, Text, TextInput } from "@mantine/core";
+import { Avatar, Box, Button, Indicator, Select, Stack, Text, TextInput } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
 import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
 import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
 import _ from "lodash";
+import { Dropzone } from "@mantine/dropzone";
+import { FaCamera } from "react-icons/fa6";
 
 
 export default function EditMember({ id }: { id: string }) {
@@ -20,6 +22,9 @@ export default function EditMember({ id }: { id: string }) {
    const [listGroup, setListGorup] = useState<IDataGroup[]>([])
    const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
    const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
+   const [imgForm, setImgForm] = useState<any>()
+   const openRef = useRef<() => void>(null)
+   const [img, setIMG] = useState<any | null>()
    const [touched, setTouched] = useState({
       nik: false,
       name: false,
@@ -61,6 +66,7 @@ export default function EditMember({ id }: { id: string }) {
          const res = await funGetOneMember(id)
          setData(res.data)
          getAllPosition(res.data?.idGroup)
+         setIMG(`/api/file/img?cat=user&file=${res.data.img}`)
       } catch (error) {
          console.error(error)
       }
@@ -110,17 +116,11 @@ export default function EditMember({ id }: { id: string }) {
             return
          }
          if (val) {
-            const res = await funEditMember(id, {
-               id: data.id,
-               nik: data.nik,
-               name: data.name,
-               phone: data.phone,
-               email: data.email,
-               gender: data.gender,
-               idGroup: data.idGroup,
-               idPosition: data.idPosition,
-               idUserRole: data.idUserRole
-            })
+            const fd = new FormData()
+            fd.append("file", imgForm)
+            fd.append("data", JSON.stringify(data))
+
+            const res = await funEditMember(id, fd)
 
             if (res.success) {
                toast.success(res.message)
@@ -144,12 +144,30 @@ export default function EditMember({ id }: { id: string }) {
             pt={30}
             px={20}
          >
-            <Box bg={WARNA.biruTua} py={30} px={50}
-               style={{
-                  borderRadius: 10,
-               }}>
-               <HiUser size={100} color={WARNA.bgWhite} />
-            </Box>
+            <Dropzone
+               openRef={openRef}
+               onDrop={async (files) => {
+                  if (!files || _.isEmpty(files))
+                     return toast.error('Tidak ada gambar yang dipilih')
+                  setImgForm(files[0])
+                  const buffer = URL.createObjectURL(new Blob([new Uint8Array(await files[0].arrayBuffer())]))
+                  setIMG(buffer)
+               }}
+               activateOnClick={false}
+               maxSize={1 * 1024 ** 2}
+               accept={['image/png', 'image/jpeg', 'image/heic']}
+               onReject={(files) => {
+                  return toast.error('File yang diizinkan: .png, .jpg, dan .heic  dengan ukuran maksimal 1 MB')
+               }}
+            >
+            </Dropzone>
+            <Indicator offset={20} withBorder inline color={WARNA.borderBiruMuda} position="bottom-end" label={<FaCamera size={20} />} size={40} onClick={() => openRef.current?.()}>
+               <Avatar
+                  size="150"
+                  radius={"100"}
+                  src={img}
+               />
+            </Indicator>
             <Select
                placeholder="Pilih Grup" label="Grup" w={"100%"} size="md" required withAsterisk radius={30}
                styles={{
@@ -311,7 +329,8 @@ export default function EditMember({ id }: { id: string }) {
                      borderColor: WARNA.biruTua,
                   },
                }}
-               placeholder="62xxx xxxx xxxx"
+               placeholder="8xxx xxxx xxxx"
+               leftSection={<Text>+62</Text>}
                onChange={(e) => {
                   setData({ ...data, phone: e.target.value })
                   setTouched({ ...touched, phone: false })
diff --git a/src/module/user/member/ui/navbar_detail_member.tsx b/src/module/user/member/ui/navbar_detail_member.tsx
index d990f2a..e11d00b 100644
--- a/src/module/user/member/ui/navbar_detail_member.tsx
+++ b/src/module/user/member/ui/navbar_detail_member.tsx
@@ -66,7 +66,7 @@ export default function NavbarDetailMember({ id }: IMember) {
                   gap="xs"
                >
                   <Center>
-                     <Avatar src={'https://i.pravatar.cc/1000?img=25'} alt="it's me" size="xl" />
+                     <Avatar src={`/api/file/img?cat=user&file=${dataOne?.img}`} alt="it's me" size="xl" />
                   </Center>
                   {loading ? 
                      <>
diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx
index 96d46e7..fe9cdee 100644
--- a/src/module/user/member/ui/tab_list_member.tsx
+++ b/src/module/user/member/ui/tab_list_member.tsx
@@ -1,6 +1,6 @@
 
 import { SkeletonSingle, WARNA } from "@/module/_global"
-import { Box, Group, ActionIcon, Text, TextInput, Divider } from "@mantine/core"
+import { Box, Group, ActionIcon, Text, TextInput, Divider, Avatar } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
@@ -9,6 +9,7 @@ import { IListMember } from "../lib/type_member"
 import { funGetAllmember } from "../lib/api_member"
 import { funGetAllGroup, IDataGroup } from "@/module/group"
 import toast from "react-hot-toast"
+import _ from "lodash"
 
 
 export default function TabListMember() {
@@ -107,12 +108,10 @@ export default function TabListMember() {
                                     padding: 10,
                                  }} >
                                     <Box>
-                                       <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
-                                          <HiMiniUser color={'white'} size={25} />
-                                       </ActionIcon>
+                                       <Avatar src={`/api/file/img?cat=user&file=${v.img}`} size={50} alt="image" />
                                     </Box>
                                     <Box>
-                                       <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                                       <Text fw={'bold'} c={WARNA.biruTua}>{_.startCase(v.name)}</Text>
                                        <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
                                     </Box>
                                  </Group>