feat: integrate all backend APIs into frontend apps

- Fix API service paths to use /v1/iam/, /v1/dimentorin/, /v1/gacha/, /v1/hackathon/ prefixes
- Add roles, permissions, events, testimonials, sessions API services and hooks
- Rewrite gacha service with full CRUD + roll/claim endpoints
- Replace all mock data in backoffice pages with real API calls (accounts, roles, permissions, gacha-roll, dashboard, sessions, users-dimentorin, feedback-review, settings)
- Wire dimentorin mentoring list to useMentorList with search + pagination
- Wire dimentorin mentor detail page to useMentorById, pass real data to all sections
- Wire appointment modal to useBookSession with controlled schedule inputs
- Wire gacha app Spin Now to useExecuteGachaRoll, show credits and real items

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/backoffice/src/app/(protected)/roles/_components/modal-update-role.tsx

@@ -1,8 +1,11 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useConfirmItem } from '../_hook/use-item';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 
-interface IModalUpdatePermission {
+interface IModalUpdateRole {
   isOpen: boolean;
   onClose: () => void;
   handleUpdate?: () => Promise<boolean>;
@@ -10,17 +13,40 @@ interface IModalUpdatePermission {
   nextStep: () => void;
   prevStep: () => void;
   resetStep: () => void;
+  initialValues?: { name?: string };
+  onDataCapture?: (data: any) => void;
 }
 
-const ModalUpdatePermission = ({
+const ModalUpdateRole = ({
   isOpen,
   onClose,
   resetStep,
   handleUpdate,
-}: IModalUpdatePermission) => {
-  const { onConfirm } = useConfirmItem(onClose, resetStep, handleUpdate, {
-    success: 'Perubahan roles berhasil dilakukan',
-    error: 'Perubahan roles gagal dilakukan',
+  initialValues,
+  onDataCapture,
+}: IModalUpdateRole) => {
+  const form = useForm<{ name: string }>({
+    mode: 'all',
+    defaultValues: initialValues,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      form.reset(initialValues);
+    }
+  }, [isOpen, initialValues]);
+
+  const onSubmit = form.handleSubmit(async (data) => {
+    try {
+      onDataCapture?.(data);
+      if (handleUpdate) await handleUpdate();
+      toast.success('Perubahan roles berhasil dilakukan');
+      onClose();
+      resetStep();
+    } catch (error) {
+      console.log(error);
+      toast.error('Perubahan roles gagal dilakukan');
+    }
   });
 
   return (
@@ -36,76 +62,78 @@ const ModalUpdatePermission = ({
         </h2>
       </Modal.Header>
       <Modal.Content className="flex flex-col gap-8">
-        <div className="flex flex-col gap-4">
-          <InputField
-            label="Nama Role"
-            name="name"
-            type="text"
-            placeholder="Masukkan Nama Role"
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
+          <div className="flex flex-col gap-4">
+            <ControlledInputField
+              control={form.control}
+              label="Nama Role"
+              name="name"
+              type="text"
+              placeholder="Masukkan Nama Role"
+              size="lg"
+              className="w-full"
+            />
+          </div>
+
+          <div className="flex flex-col gap-4 items-start overflow-auto">
+            <span className="text-p3 font-medium text-neutral-800 sticky left-0">
+              Permissions
+            </span>
+            <div className="flex gap-x-6 overflow-x-scroll">
+              {['Gacha Items', 'Gacha Roll', 'Roll', 'Users', 'Gacha Claim'].map(
+                (title) => (
+                  <div
+                    key={title}
+                    className="flex flex-col gap-4 select-none text-label2 font-medium text-neutral-900 "
+                  >
+                    <span className="text-nowrap text-label1">{title}</span>
+                    <div className="flex gap-[8px] items-center">
+                      <input
+                        type="checkbox"
+                        id={`${title}-all`}
+                        className="rounded"
+                      />
+                      <label htmlFor={`${title}-all`} className="text-nowrap">
+                        Check All
+                      </label>
+                    </div>
+                    <hr className="border-blue-200" />
+                    <div className="flex flex-col items-start gap-4 mb-4">
+                      <div className="flex gap-[8px] items-center">
+                        <input type="checkbox" id={`${title}-read`} />
+                        <label htmlFor={`${title}-read`}>Read</label>
+                      </div>
+                      <div className="flex gap-[8px] items-center">
+                        <input type="checkbox" id={`${title}-create`} />
+                        <label htmlFor={`${title}-create`}>Create</label>
+                      </div>
+                      <div className="flex gap-[8px] items-center">
+                        <input type="checkbox" id={`${title}-update`} />
+                        <label htmlFor={`${title}-update`}>Update</label>
+                      </div>
+                      <div className="flex gap-[8px] items-center">
+                        <input type="checkbox" id={`${title}-delete`} />
+                        <label htmlFor={`${title}-delete`}>Delete</label>
+                      </div>
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+
+          <Button
+            variant="primary"
             size="lg"
             className="w-full"
-          />
-        </div>
-
-        <div className="flex flex-col gap-4 items-start overflow-auto">
-          <span className="text-p3 font-medium text-neutral-800 sticky left-0">
-            Permissions
-          </span>
-          <div className="flex gap-x-6 overflow-x-scroll">
-            {['Gacha Items', 'Gacha Roll', 'Roll', 'Users', 'Gacha Claim'].map(
-              (title) => (
-                <div
-                  key={title}
-                  className="flex flex-col gap-4 select-none text-label2 font-medium text-neutral-900 "
-                >
-                  <span className="text-nowrap text-label1">{title}</span>
-                  <div className="flex gap-[8px] items-center">
-                    <input
-                      type="checkbox"
-                      id={`${title}-all`}
-                      className="rounded"
-                    />
-                    <label htmlFor={`${title}-all`} className="text-nowrap">
-                      Check All
-                    </label>
-                  </div>
-                  <hr className="border-blue-200" />
-                  <div className="flex flex-col items-start gap-4 mb-4">
-                    <div className="flex gap-[8px] items-center">
-                      <input type="checkbox" id={`${title}-read`} />
-                      <label htmlFor={`${title}-read`}>Read</label>
-                    </div>
-                    <div className="flex gap-[8px] items-center">
-                      <input type="checkbox" id={`${title}-create`} />
-                      <label htmlFor={`${title}-create`}>Create</label>
-                    </div>
-                    <div className="flex gap-[8px] items-center">
-                      <input type="checkbox" id={`${title}-update`} />
-                      <label htmlFor={`${title}-update`}>Update</label>
-                    </div>
-                    <div className="flex gap-[8px] items-center">
-                      <input type="checkbox" id={`${title}-delete`} />
-                      <label htmlFor={`${title}-delete`}>Delete</label>
-                    </div>
-                  </div>
-                </div>
-              )
-            )}
-          </div>
-        </div>
-
-        <Button
-          variant="primary"
-          size="lg"
-          className="w-full"
-          type="submit"
-          onClick={onConfirm}
-        >
-          Update Role
-        </Button>
+            type="submit"
+          >
+            Update Role
+          </Button>
+        </form>
       </Modal.Content>
     </Modal>
   );
 };
 
-export default ModalUpdatePermission;
+export default ModalUpdateRole;