feat(backoffice): add modal delete gacha item

apps/backoffice/src/app/dashboard/_components/modal-delete-item.tsx

@@ -0,0 +1,60 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalDeleteItem {
+  isOpen: boolean;
+  onClose: () => void;
+  onDeleteItem: () => void;
+}
+
+const ModalDeleteItem = ({
+  isOpen,
+  onClose,
+  onDeleteItem,
+}: IModalDeleteItem) => {
+  return (
+    <Modal
+      className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
+      isOpen={isOpen}
+      onClose={onClose}
+      closeButtonClassName="hidden"
+    >
+      <Modal.Header className="gap-8">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete item?"
+          width={148}
+          className="self-center"
+        />
+        <div className="text-center">
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Delete Item
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus item ini?
+          </p>
+        </div>
+      </Modal.Header>
+      <Modal.Content className="flex gap-4">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="w-full"
+          onClick={() => onClose()}
+        >
+          Batal Hapus
+        </Button>
+        <Button
+          variant="danger"
+          size="lg"
+          className="w-full"
+          onClick={() => onDeleteItem()}
+        >
+          Hapus Item
+        </Button>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalDeleteItem;

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

@@ -6,10 +6,14 @@ import {
   UserSwitchOutlined,
 } from '@ant-design/icons';
 import { Button } from '@imphnen-frontend-service/ui/atoms';
-import { FC, ReactElement } from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
+import ModalDeleteItem from './_components/modal-delete-item';
 
 export const Components: FC = (): ReactElement => {
+  const [showModalDeleteItem, setShowModalDeleteItem] = useState(false);
+
   return (
+    <Fragment>
       <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
         {/* Dashboard Header */}
         <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
@@ -66,7 +70,9 @@ export const Components: FC = (): ReactElement => {
                   </div>
                   <div className="flex flex-col gap-1">
                     <h3 className="text-p1 font-semibold">1000</h3>
-                  <p className="text-label1 text-neutral-500">Inactive Users</p>
+                    <p className="text-label1 text-neutral-500">
+                      Inactive Users
+                    </p>
                   </div>
                 </div>
               </div>
@@ -113,6 +119,7 @@ export const Components: FC = (): ReactElement => {
                           variant="text"
                           size="sm"
                           className="text-[10px] text-red-500 p-0 font-normal hover:bg-transparent hover:text-red-700"
+                          onClick={() => setShowModalDeleteItem(true)}
                         >
                           Delete
                         </Button>
@@ -139,6 +146,16 @@ export const Components: FC = (): ReactElement => {
           />
         </div>
       </main>
+
+      {/* Modal Delete Item */}
+      <ModalDeleteItem
+        isOpen={showModalDeleteItem}
+        onClose={() => setShowModalDeleteItem(false)}
+        onDeleteItem={() => {
+          console.log('Item deleted');
+        }}
+      />
+    </Fragment>
   );
 };