fix: create custom hook and stepper to make multi-step modal functional

- Tambah custom hook 'use-query-state' dan implementasi stepper pada modal dengan tahapan lebih dari 1
- Hapus component ModalBackoffice karena sudah menggunakan component umum Modal

apps/backoffice/src/app/dashboard/page.tsx

@@ -10,12 +10,24 @@ import { FC, Fragment, ReactElement, useState } from 'react';
 import ModalAddItem from './_components/modal-add-item';
 import ModalEditItem from './_components/modal-edit-item';
 import ModalDeleteItem from './_components/modal-delete-item';
+import { useQueryState } from '../../hook/use-query-state';
 
 export const Components: FC = (): ReactElement => {
   const [showModalAddItem, setShowModalAddItem] = useState(false);
   const [showModalEditItem, setShowModalEditItem] = useState(false);
   const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
 
+  const {
+    step: currentStep,
+    nextStep,
+    prevStep,
+    resetStep,
+  } = useQueryState('step', {
+    defaultValue: 1,
+    maxValue: 2,
+    minValue: 1,
+  });
+
   return (
     <Fragment>
       <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
@@ -159,20 +171,28 @@ export const Components: FC = (): ReactElement => {
 
       {/* Modal Add Item */}
       <ModalAddItem
+        currentStep={currentStep}
         isOpen={showModalAddItem}
         onClose={() => setShowModalAddItem(false)}
         handleAddItem={() => {
           console.log('Item added');
         }}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
       />
 
       {/* Modal Edit Item */}
       <ModalEditItem
+        currentStep={currentStep}
         isOpen={showModalEditItem}
         onClose={() => setShowModalEditItem(false)}
         handleEditItem={() => {
           console.log('Item edited');
         }}
+        nextStep={nextStep}
+        prevStep={prevStep}
+        resetStep={resetStep}
       />
 
       {/* Modal Delete Item */}