feat: modal for update gacha roll item

- Sesuaikan modal untuk update gacha roll item
- Refactor custom hook untuk tambah dan update gacha roll item

apps/backoffice/src/app/gacha-roll/_components/modal-add-item.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Modal } from '@imphnen-frontend-service/ui/molecules';
 import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
-import { useAddItem, useConfirmAddItem } from '../_hook/use-add-item';
+import { useItem, useConfirmItem } from '../_hook/use-item';
 
 interface IModalAddItem {
   isOpen: boolean;
@@ -18,7 +18,6 @@ const ModalAddItem = ({
   onClose,
   currentStep,
   nextStep,
-  prevStep,
   resetStep,
   handleAddItem,
 }: IModalAddItem) => {
@@ -50,7 +49,7 @@ interface IStepOneProps {
 }
 
 const StepOne = ({ nextStep }: IStepOneProps) => {
-  const { form, onSubmit } = useAddItem(nextStep);
+  const { form, onSubmit } = useItem(nextStep);
 
   return (
     <>
@@ -115,7 +114,11 @@ interface IStepTwoProps {
 }
 
 const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => {
-  const { onConfirm, onCancel } = useConfirmAddItem(onClose, resetStep);
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleAddItem
+  );
 
   return (
     <>

apps/backoffice/src/app/gacha-roll/_components/modal-update-item.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { InputField, Modal } from '@imphnen-frontend-service/ui/molecules';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
-import { useState } from 'react';
+import { useConfirmItem, useItem } from '../_hook/use-item';
+import { ControlledInputField } from '@imphnen-frontend-service/ui/organisms';
 
 interface IModalUpdateItem {
   isOpen: boolean;
@@ -17,7 +18,6 @@ const ModalUpdateItem = ({
   onClose,
   currentStep,
   nextStep,
-  prevStep,
   resetStep,
   handleUpdateItem,
 }: IModalUpdateItem) => {
@@ -49,9 +49,13 @@ interface IStepOneProps {
 }
 
 const StepOne = ({ nextStep }: IStepOneProps) => {
-  const [itemName, setItemName] = useState('Hoodie IMPHNEN Official 2025');
+  const initialValues = {
-  const [quantity, setQuantity] = useState('10');
+    itemName: 'Hoodie IMPHNEN Official 2025',
-  const [chanceRate, setChanceRate] = useState('0.1');
+    quantity: 10,
+    chanceRate: 0.1,
+  };
+
+  const { form, onSubmit } = useItem(nextStep, initialValues);
 
   return (
     <>
@@ -60,32 +64,38 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
           Update Item Roll Gacha
         </h2>
       </Modal.Header>
-      <Modal.Content className="flex flex-col gap-8">
+      <Modal.Content>
+        <form onSubmit={onSubmit} className="flex flex-col gap-8">
           <div className="flex flex-col gap-4">
-          <InputField
+            <ControlledInputField
+              control={form.control}
               label="Pilih Item"
+              name="itemName"
               type="text"
               placeholder="Pilih item yang dimasukkan ke roll"
-            value={itemName}
-            onChange={(e) => setItemName(e.target.value)}
               size="lg"
               className="w-full"
             />
-          <InputField
+            <ControlledInputField
+              control={form.control}
               label="Quantity"
-            type="text"
+              name="quantity"
+              type="number"
+              min={1}
               placeholder="Masukkan Kuantitas Item"
-            value={quantity}
-            onChange={(e) => setQuantity(e.target.value)}
               size="lg"
               className="w-full"
             />
-          <InputField
+            <ControlledInputField
+              control={form.control}
               label="Chance Rate"
-            type="text"
+              name="chanceRate"
-            placeholder="Masukkan Chance Rate (0.1 - 1)"
+              type="number"
-            value={chanceRate}
+              value={0.1}
-            onChange={(e) => setChanceRate(e.target.value)}
+              min={0.1}
+              step={0.1}
+              max={1}
+              placeholder="Masukkan Chance Rate (0,1 - 1)"
               size="lg"
               className="w-full"
             />
@@ -99,6 +109,7 @@ const StepOne = ({ nextStep }: IStepOneProps) => {
           >
             Perbarui Item
           </Button>
+        </form>
       </Modal.Content>
     </>
   );
@@ -110,7 +121,14 @@ interface IStepTwoProps {
   resetStep: () => void;
 }
 
-const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => (
+const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => {
+  const { onConfirm, onCancel } = useConfirmItem(
+    onClose,
+    resetStep,
+    handleUpdateItem
+  );
+
+  return (
     <>
       <Modal.Header className="mb-0 text-center items-center">
         <h2 className="text-p1 font-semibold text-primary-500 mb-3">
@@ -126,10 +144,7 @@ const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => (
           variant="bordered"
           size="lg"
           className="w-full"
-        onClick={() => {
+          onClick={onCancel}
-          onClose();
-          resetStep();
-        }}
         >
           Batal
         </Button>
@@ -137,16 +152,13 @@ const StepTwo = ({ onClose, handleUpdateItem, resetStep }: IStepTwoProps) => (
           variant="primary"
           size="lg"
           className="w-full"
-        onClick={() => {
+          onClick={onConfirm}
-          handleUpdateItem && handleUpdateItem();
-          onClose();
-          resetStep();
-        }}
         >
           Update
         </Button>
       </Modal.Content>
     </>
-);
+  );
+};
 
 export default ModalUpdateItem;

apps/backoffice/src/app/gacha-roll/_hook/use-item.ts

@@ -5,10 +5,14 @@ import {
   TGachaRollItem
 } from '@imphnen-frontend-service/service';
 
-export const useAddItem = (nextStep: () => void) => {
+export const useItem = (
+  nextStep: () => void,
+  initialValues?: TGachaRollItem
+) => {
   const form = useForm<TGachaRollItem>({
     resolver: zodResolver(gachaRollItemSchema),
     mode: 'all',
+    defaultValues: initialValues,
   });
 
   const onSubmit = form.handleSubmit((data) => {
@@ -22,13 +26,13 @@ export const useAddItem = (nextStep: () => void) => {
   };
 };
 
-export const useConfirmAddItem = (
+export const useConfirmItem = (
   onClose: () => void,
   resetStep: () => void,
-  handleAddItem?: () => void,
+  actionFunction?: () => void,
 ) => {
   const onConfirm = () => {
-    handleAddItem?.();
+    actionFunction?.();
     onClose();
     resetStep();
   };