From ecec423d30ca3e1868e7c077351d2bf316c1c51e Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Mon, 31 Mar 2025 01:33:18 +0700
Subject: [PATCH] feat: slicing modal for backoffice dashboard page

---
 .../dashboard/_components/modal-add-item.tsx  | 119 ++++++++++++++++++
 .../_components/modal-delete-item.tsx         |   2 +-
 .../dashboard/_components/modal-edit-item.tsx | 118 +++++++++++++++++
 apps/backoffice/src/app/dashboard/page.tsx    |  30 ++++-
 4 files changed, 267 insertions(+), 2 deletions(-)
 create mode 100644 apps/backoffice/src/app/dashboard/_components/modal-add-item.tsx
 create mode 100644 apps/backoffice/src/app/dashboard/_components/modal-edit-item.tsx

diff --git a/apps/backoffice/src/app/dashboard/_components/modal-add-item.tsx b/apps/backoffice/src/app/dashboard/_components/modal-add-item.tsx
new file mode 100644
index 0000000..0a0a189
--- /dev/null
+++ b/apps/backoffice/src/app/dashboard/_components/modal-add-item.tsx
@@ -0,0 +1,119 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalAddItem {
+  isOpen: boolean;
+  onClose: () => void;
+  onAddItem: () => void;
+  currentStep?: number;
+}
+
+const ModalAddItem = ({
+  isOpen,
+  onClose,
+  onAddItem,
+  currentStep = 1,
+}: IModalAddItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && (
+        <StepOne
+          nextStep={() => {
+            console.log('Next step');
+          }}
+          onClose={onClose}
+        />
+      )}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          resetStep={() => {
+            console.log('Reset step');
+          }}
+        />
+      )}
+    </Modal>
+  );
+};
+
+// TODO: Functional stepper
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
+  <>
+    <Modal.Header>
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Tambah Item Gacha
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Lengkapi detail di bawah ini untuk menambahkan item gacha
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <InputForm
+          label="Nama Hadiah"
+          type="text"
+          placeholder="Masukkan Nama Hadiah"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Chance Rate"
+          type="text"
+          placeholder="Masukkan Chance Rate"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Foto Barang"
+          type="file"
+          placeholder=".jpg, .jpeg, atau .png"
+          size="lg"
+          className="w-full"
+        />
+      </div>
+
+      <Button variant="primary" size="lg" className="w-full">
+        Tambahkan Item
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+interface IStepTwoProps {
+  onClose: () => void;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, resetStep }: IStepTwoProps) => (
+  <>
+    <Modal.Header className="mb-0 text-center items-center">
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Tambah Item
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Apakah kamu yakin ingin
+        <br /> menambahkan item ini?
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex gap-4">
+      <Button variant="bordered" size="lg" className="w-full" onClick={onClose}>
+        Batal
+      </Button>
+      <Button variant="primary" size="lg" className="w-full">
+        Tambahkan
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+export default ModalAddItem;
diff --git a/apps/backoffice/src/app/dashboard/_components/modal-delete-item.tsx b/apps/backoffice/src/app/dashboard/_components/modal-delete-item.tsx
index 212da7b..fc7ce78 100644
--- a/apps/backoffice/src/app/dashboard/_components/modal-delete-item.tsx
+++ b/apps/backoffice/src/app/dashboard/_components/modal-delete-item.tsx
@@ -40,7 +40,7 @@ const ModalDeleteItem = ({
           variant="secondary"
           size="lg"
           className="w-full"
-          onClick={() => onClose()}
+          onClick={onClose}
         >
           Batal Hapus
         </Button>
diff --git a/apps/backoffice/src/app/dashboard/_components/modal-edit-item.tsx b/apps/backoffice/src/app/dashboard/_components/modal-edit-item.tsx
new file mode 100644
index 0000000..7dc82e2
--- /dev/null
+++ b/apps/backoffice/src/app/dashboard/_components/modal-edit-item.tsx
@@ -0,0 +1,118 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalEditItem {
+  isOpen: boolean;
+  onClose: () => void;
+  onEditItem: () => void;
+  currentStep?: number;
+}
+
+const ModalEditItem = ({
+  isOpen,
+  onClose,
+  onEditItem,
+  currentStep = 1,
+}: IModalEditItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      disableEscapeKeyDown={true}
+    >
+      {currentStep === 1 && (
+        <StepOne
+          nextStep={() => {
+            console.log('Next step');
+          }}
+          onClose={onClose}
+        />
+      )}
+      {currentStep === 2 && (
+        <StepTwo
+          onClose={onClose}
+          resetStep={() => {
+            console.log('Reset step');
+          }}
+        />
+      )}
+    </Modal>
+  );
+};
+
+interface IStepOneProps {
+  nextStep: () => void;
+  onClose: () => void;
+}
+
+const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
+  <>
+    <Modal.Header>
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Edit Item Gacha
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Silakan mengubah detail dari item yang diperlukan
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
+        <InputForm
+          label="Nama Hadiah"
+          type="text"
+          placeholder="Masukkan Nama Hadiah"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Chance Rate"
+          type="text"
+          placeholder="Masukkan Chance Rate"
+          size="lg"
+          className="w-full"
+        />
+        <InputForm
+          label="Foto Barang"
+          type="file"
+          placeholder=".jpg, .jpeg, atau .png"
+          size="lg"
+          className="w-full"
+        />
+      </div>
+
+      <Button variant="primary" size="lg" className="w-full">
+        Perbarui Item
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+interface IStepTwoProps {
+  onClose: () => void;
+  resetStep: () => void;
+}
+
+const StepTwo = ({ onClose, resetStep }: IStepTwoProps) => (
+  <>
+    <Modal.Header className="mb-0 text-center items-center">
+      <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+        Update Item
+      </h2>
+      <p className="text-p3 text-neutral-400">
+        Apakah kamu yakin dengan
+        <br /> perubahan yang dilakukan?
+      </p>
+    </Modal.Header>
+    <Modal.Content className="flex gap-4">
+      <Button variant="bordered" size="lg" className="w-full" onClick={onClose}>
+        Batal
+      </Button>
+      <Button variant="primary" size="lg" className="w-full">
+        Update
+      </Button>
+    </Modal.Content>
+  </>
+);
+
+export default ModalEditItem;
diff --git a/apps/backoffice/src/app/dashboard/page.tsx b/apps/backoffice/src/app/dashboard/page.tsx
index 8f89cda..a009bf4 100644
--- a/apps/backoffice/src/app/dashboard/page.tsx
+++ b/apps/backoffice/src/app/dashboard/page.tsx
@@ -7,9 +7,13 @@ import {
 } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
 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';
 
 export const Components: FC = (): ReactElement => {
+  const [showModalAddItem, setShowModalAddItem] = useState(false);
+  const [showModalEditItem, setShowModalEditItem] = useState(false);
   const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
 
   return (
@@ -84,7 +88,12 @@ export const Components: FC = (): ReactElement => {
                 <h2 className="text-p2 font-medium text-primary-500">
                   Gacha Items
                 </h2>
-                <Button variant="primary" size="sm" className="items-end gap-3">
+                <Button
+                  variant="primary"
+                  size="sm"
+                  className="items-end gap-3"
+                  onClick={() => setShowModalAddItem(true)}
+                >
                   <span>Tambah Item</span>
                   <PlusOutlined className="text-[16px]" />
                 </Button>
@@ -112,6 +121,7 @@ export const Components: FC = (): ReactElement => {
                           variant="text"
                           size="sm"
                           className="text-[10px] text-neutral-500 p-0 font-normal hover:bg-transparent hover:text-primary-500"
+                          onClick={() => setShowModalEditItem(true)}
                         >
                           Edit
                         </Button>
@@ -147,6 +157,24 @@ export const Components: FC = (): ReactElement => {
         </div>
       </main>
 
+      {/* Modal Add Item */}
+      <ModalAddItem
+        isOpen={showModalAddItem}
+        onClose={() => setShowModalAddItem(false)}
+        onAddItem={() => {
+          console.log('Item added');
+        }}
+      />
+
+      {/* Modal Add Item */}
+      <ModalEditItem
+        isOpen={showModalEditItem}
+        onClose={() => setShowModalEditItem(false)}
+        onEditItem={() => {
+          console.log('Item edited');
+        }}
+      />
+
       {/* Modal Delete Item */}
       <ModalDeleteItem
         isOpen={showModalDeleteItem}