From 19f71eb972462e6c8fbe29d8ec28ca157c9df237 Mon Sep 17 00:00:00 2001
From: Rama Priyanto <priyantorama12@gmail.com>
Date: Fri, 20 Feb 2026 17:17:22 +0700
Subject: [PATCH] fix:user edit

---
 components/form/form-master-user-edit.tsx | 480 ++++++++++++----------
 services/master-user.ts                   |   1 +
 2 files changed, 255 insertions(+), 226 deletions(-)

diff --git a/components/form/form-master-user-edit.tsx b/components/form/form-master-user-edit.tsx
index 66716bf..6f4b50a 100644
--- a/components/form/form-master-user-edit.tsx
+++ b/components/form/form-master-user-edit.tsx
@@ -202,86 +202,96 @@ export default function FormMasterUserEdit() {
         className="w-full lg:w-1/2 lg:ml-4"
       >
         <Card className="rounded-md p-5 flex flex-col gap-3">
-          <Controller
-            control={control}
-            name="fullname"
-            render={({ field: { onChange, value } }) => (
-              <Input
-                type="text"
-                id="title"
-                placeholder="Nama Lengkap..."
-                label="Nama Lengkap"
-                value={value}
-                onChange={onChange}
-                labelPlacement="outside"
-                className="w-full"
-                classNames={{
-                  inputWrapper: [
-                    "border-1 rounded-lg",
-                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
-                  ],
-                }}
-                variant="bordered"
-              />
+          <div className="flex flex-col gap-1">
+            <p className="text-sm">Nama Lengkap</p>
+            <Controller
+              control={control}
+              name="fullname"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  type="text"
+                  id="title"
+                  placeholder="Nama Lengkap..."
+                  label=""
+                  value={value}
+                  onChange={onChange}
+                  labelPlacement="outside"
+                  className="w-full"
+                  classNames={{
+                    input: "outline-none",
+                    inputWrapper: [
+                      "border-1 rounded-lg",
+                      "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                    ],
+                  }}
+                  variant="bordered"
+                />
+              )}
+            />
+            {errors.fullname?.message && (
+              <p className="text-red-400 text-sm">{errors.fullname?.message}</p>
             )}
-          />
-          {errors.fullname?.message && (
-            <p className="text-red-400 text-sm">{errors.fullname?.message}</p>
-          )}
-          <Controller
-            control={control}
-            name="username"
-            render={({ field: { onChange, value } }) => (
-              <Input
-                type="text"
-                id="username"
-                placeholder="Username..."
-                label="Username"
-                value={value}
-                onChange={onChange}
-                labelPlacement="outside"
-                className="w-full"
-                classNames={{
-                  inputWrapper: [
-                    "border-1 rounded-lg",
-                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
-                  ],
-                }}
-                variant="bordered"
-              />
-            )}
-          />
-          {errors.username?.message && (
-            <p className="text-red-400 text-sm">{errors.username?.message}</p>
-          )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <p className="text-sm">Username</p>
 
-          <Controller
-            control={control}
-            name="email"
-            render={({ field: { onChange, value } }) => (
-              <Input
-                type="email"
-                id="email"
-                placeholder="Email..."
-                label="Email"
-                value={value}
-                onChange={onChange}
-                labelPlacement="outside"
-                className="w-full"
-                classNames={{
-                  inputWrapper: [
-                    "border-1 rounded-lg",
-                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
-                  ],
-                }}
-                variant="bordered"
-              />
+            <Controller
+              control={control}
+              name="username"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  type="text"
+                  id="username"
+                  placeholder="Username..."
+                  label=""
+                  value={value}
+                  onChange={onChange}
+                  labelPlacement="outside"
+                  className="w-full"
+                  classNames={{
+                    inputWrapper: [
+                      "border-1 rounded-lg",
+                      "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                    ],
+                  }}
+                  variant="bordered"
+                />
+              )}
+            />
+            {errors.username?.message && (
+              <p className="text-red-400 text-sm">{errors.username?.message}</p>
             )}
-          />
-          {errors.email?.message && (
-            <p className="text-red-400 text-sm">{errors.email?.message}</p>
-          )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <p className="text-sm">Email</p>
 
+            <Controller
+              control={control}
+              name="email"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  type="email"
+                  id="email"
+                  placeholder="Email..."
+                  label=""
+                  value={value}
+                  onChange={onChange}
+                  labelPlacement="outside"
+                  className="w-full"
+                  classNames={{
+                    inputWrapper: [
+                      "border-1 rounded-lg",
+                      "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                    ],
+                  }}
+                  variant="bordered"
+                />
+              )}
+            />
+            {errors.email?.message && (
+              <p className="text-red-400 text-sm">{errors.email?.message}</p>
+            )}
+          </div>
           {/* <Controller
             control={control}
             name="identityType"
@@ -306,165 +316,183 @@ export default function FormMasterUserEdit() {
               {errors.identityType?.message}
             </p>
           )} */}
-          <Controller
-            control={control}
-            name="identityNumber"
-            render={({ field: { onChange, value } }) => (
-              <Input
-                type="number"
-                id="identityNumber"
-                placeholder="NRP..."
-                label="NRP"
-                value={value}
-                onChange={onChange}
-                labelPlacement="outside"
-                className="w-full"
-                classNames={{
-                  inputWrapper: [
-                    "border-1 rounded-lg",
-                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
-                  ],
-                }}
-                variant="bordered"
-              />
-            )}
-          />
-          {errors.identityNumber?.message && (
-            <p className="text-red-400 text-sm">
-              {errors.identityNumber?.message}
-            </p>
-          )}
+          <div className="flex flex-col gap-1">
+            <p className="text-sm">NRP</p>
 
-          <Controller
-            control={control}
-            name="address"
-            render={({ field: { onChange, value } }) => (
-              <Textarea
-                label="Alamat"
-                labelPlacement="outside"
-                placeholder="Alamat..."
-                variant="bordered"
-                value={value}
-                classNames={{
-                  inputWrapper: [
-                    "border-1 rounded-lg",
-                    "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
-                  ],
-                }}
-                onValueChange={onChange}
-              />
-            )}
-          />
-          {errors.address?.message && (
-            <p className="text-red-400 text-sm">{errors.address?.message}</p>
-          )}
-
-          <Controller
-            control={control}
-            name="genderType"
-            render={({ field: { onChange, value } }) => (
-              <RadioGroup
-                orientation="horizontal"
-                label="Gender"
-                value={value}
-                onValueChange={onChange}
-              >
-                <Radio value="Male">Laki-laki</Radio>
-                <Radio value="Female">Perempuan</Radio>
-              </RadioGroup>
-            )}
-          />
-          {errors.genderType?.message && (
-            <p className="text-red-400 text-sm">{errors.genderType?.message}</p>
-          )}
-
-          <Controller
-            control={control}
-            name="userLevelType"
-            render={({ field: { onChange, value } }) => (
-              <>
-                <p className="text-sm mt-3">Level Pengguna</p>
-                <ReactSelect
-                  className="basic-single text-black z-50"
-                  classNames={{
-                    control: (state: any) =>
-                      "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
-                  }}
-                  classNamePrefix="select"
+            <Controller
+              control={control}
+              name="identityNumber"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  type="number"
+                  id="identityNumber"
+                  placeholder="NRP..."
+                  label=""
                   value={value}
                   onChange={onChange}
-                  closeMenuOnSelect={false}
-                  components={animatedComponents}
-                  isClearable={true}
-                  isSearchable={true}
-                  isMulti={false}
-                  placeholder=""
-                  name="sub-module"
-                  options={parentList}
-                />
-              </>
-            )}
-          />
-          {errors.userLevelType?.message && (
-            <p className="text-red-400 text-sm">
-              {errors.userLevelType?.message}
-            </p>
-          )}
-          <Controller
-            control={control}
-            name="userRoleType"
-            render={({ field: { onChange, value } }) => (
-              <>
-                <p className="text-sm mt-3">Peran Pengguna</p>
-                <ReactSelect
-                  className="basic-single text-black z-49"
+                  labelPlacement="outside"
+                  className="w-full"
                   classNames={{
-                    control: (state: any) =>
-                      "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
+                    inputWrapper: [
+                      "border-1 rounded-lg",
+                      "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                    ],
                   }}
-                  classNamePrefix="select"
+                  variant="bordered"
+                />
+              )}
+            />
+            {errors.identityNumber?.message && (
+              <p className="text-red-400 text-sm">
+                {errors.identityNumber?.message}
+              </p>
+            )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <p className="text-sm">Alamat</p>
+
+            <Controller
+              control={control}
+              name="address"
+              render={({ field: { onChange, value } }) => (
+                <Textarea
+                  label=""
+                  labelPlacement="outside"
+                  placeholder="Alamat..."
+                  variant="bordered"
+                  value={value}
+                  classNames={{
+                    inputWrapper: [
+                      "border-1 rounded-lg",
+                      "dark:group-data-[focused=false]:bg-transparent !border-1 dark:!border-gray-400",
+                    ],
+                  }}
+                  onValueChange={onChange}
+                />
+              )}
+            />
+            {errors.address?.message && (
+              <p className="text-red-400 text-sm">{errors.address?.message}</p>
+            )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <p className="text-sm">Gender</p>
+
+            <Controller
+              control={control}
+              name="genderType"
+              render={({ field: { onChange, value } }) => (
+                <RadioGroup
+                  orientation="horizontal"
+                  label=""
+                  value={value}
+                  onValueChange={onChange}
+                >
+                  <Radio value="Male">Laki-laki</Radio>
+                  <Radio value="Female">Perempuan</Radio>
+                </RadioGroup>
+              )}
+            />
+            {errors.genderType?.message && (
+              <p className="text-red-400 text-sm">
+                {errors.genderType?.message}
+              </p>
+            )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <Controller
+              control={control}
+              name="userLevelType"
+              render={({ field: { onChange, value } }) => (
+                <>
+                  <p className="text-sm mt-3">Level Pengguna</p>
+                  <ReactSelect
+                    className="basic-single text-black z-50"
+                    classNames={{
+                      control: (state: any) =>
+                        "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
+                    }}
+                    classNamePrefix="select"
+                    value={value}
+                    onChange={onChange}
+                    closeMenuOnSelect={false}
+                    components={animatedComponents}
+                    isClearable={true}
+                    isSearchable={true}
+                    isMulti={false}
+                    placeholder=""
+                    name="sub-module"
+                    options={parentList}
+                  />
+                </>
+              )}
+            />
+            {errors.userLevelType?.message && (
+              <p className="text-red-400 text-sm">
+                {errors.userLevelType?.message}
+              </p>
+            )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <Controller
+              control={control}
+              name="userRoleType"
+              render={({ field: { onChange, value } }) => (
+                <>
+                  <p className="text-sm mt-3">Peran Pengguna</p>
+                  <ReactSelect
+                    className="basic-single text-black z-49"
+                    classNames={{
+                      control: (state: any) =>
+                        "!rounded-lg bg-white !border-1 !border-gray-200 dark:!border-stone-500",
+                    }}
+                    classNamePrefix="select"
+                    value={value}
+                    onChange={onChange}
+                    closeMenuOnSelect={false}
+                    components={animatedComponents}
+                    isClearable={true}
+                    isSearchable={true}
+                    isMulti={false}
+                    placeholder=""
+                    name="sub-module"
+                    options={listRole}
+                  />
+                </>
+              )}
+            />
+            {errors.userRoleType?.message && (
+              <p className="text-red-400 text-sm">
+                {errors.userRoleType?.message}
+              </p>
+            )}
+          </div>
+          <div className="flex flex-col gap-1">
+            <p className="text-sm">No. Handphone</p>
+
+            <Controller
+              control={control}
+              name="phoneNumber"
+              render={({ field: { onChange, value } }) => (
+                <Input
+                  type="number"
+                  id="identityNumber"
+                  placeholder="08*********"
+                  label=""
                   value={value}
                   onChange={onChange}
-                  closeMenuOnSelect={false}
-                  components={animatedComponents}
-                  isClearable={true}
-                  isSearchable={true}
-                  isMulti={false}
-                  placeholder=""
-                  name="sub-module"
-                  options={listRole}
+                  labelPlacement="outside"
+                  className="w-full z-0"
+                  variant="bordered"
                 />
-              </>
+              )}
+            />
+            {errors.phoneNumber?.message && (
+              <p className="text-red-400 text-sm">
+                {errors.phoneNumber?.message}
+              </p>
             )}
-          />
-          {errors.userRoleType?.message && (
-            <p className="text-red-400 text-sm">
-              {errors.userRoleType?.message}
-            </p>
-          )}
-          <Controller
-            control={control}
-            name="phoneNumber"
-            render={({ field: { onChange, value } }) => (
-              <Input
-                type="number"
-                id="identityNumber"
-                placeholder="08*********"
-                label="No. Handphone"
-                value={value}
-                onChange={onChange}
-                labelPlacement="outside"
-                className="w-full z-0"
-                variant="bordered"
-              />
-            )}
-          />
-          {errors.phoneNumber?.message && (
-            <p className="text-red-400 text-sm">
-              {errors.phoneNumber?.message}
-            </p>
-          )}
-
+          </div>
           <div className="flex justify-end gap-3">
             <Link href={`/admin/master-user`}>
               <Button color="danger" variant="ghost">
diff --git a/services/master-user.ts b/services/master-user.ts
index b61e42d..0425ae6 100644
--- a/services/master-user.ts
+++ b/services/master-user.ts
@@ -51,6 +51,7 @@ export async function setupEmail(data: any) {
 export async function getDetailMasterUsers(id: string) {
   const headers = {
     "content-type": "application/json",
+    Authorization: `Bearer ${token}`,
   };
   return await httpGet(`/users/detail/${id}`, headers);
 }