feat: slicing modal for backoffice 'validasi transaksi' page

- Tambah fungsi untuk handle aksi ketika button pada modal ditekan

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

@@ -4,14 +4,14 @@ import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
 interface IModalAddItem {
   isOpen: boolean;
   onClose: () => void;
-  onAddItem: () => void;
+  handleAddItem: () => void;
   currentStep?: number;
 }
 
 const ModalAddItem = ({
   isOpen,
   onClose,
-  onAddItem,
+  handleAddItem,
   currentStep = 1,
 }: IModalAddItem) => {
   return (
@@ -32,6 +32,7 @@ const ModalAddItem = ({
       {currentStep === 2 && (
         <StepTwo
           onClose={onClose}
+          handleAddItem={handleAddItem}
           resetStep={() => {
             console.log('Reset step');
           }}
@@ -92,9 +93,10 @@ const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
 interface IStepTwoProps {
   onClose: () => void;
   resetStep: () => void;
+  handleAddItem?: () => void;
 }
 
-const StepTwo = ({ onClose, resetStep }: IStepTwoProps) => (
+const StepTwo = ({ onClose, handleAddItem, resetStep }: IStepTwoProps) => (
   <>
     <Modal.Header className="mb-0 text-center items-center">
       <h2 className="text-p1 font-semibold text-primary-500 mb-3">
@@ -106,10 +108,22 @@ const StepTwo = ({ onClose, resetStep }: IStepTwoProps) => (
       </p>
     </Modal.Header>
     <Modal.Content className="flex gap-4">
-      <Button variant="bordered" size="lg" className="w-full" onClick={onClose}>
+      <Button
+        variant="bordered"
+        size="lg"
+        className="w-full"
+        onClick={resetStep}
+      >
         Batal
       </Button>
-      <Button variant="primary" size="lg" className="w-full">
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          handleAddItem && handleAddItem();
+        }}
+      >
         Tambahkan
       </Button>
     </Modal.Content>

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

@@ -4,13 +4,13 @@ import { Modal } from '@imphnen-frontend-service/ui/molecules';
 interface IModalDeleteItem {
   isOpen: boolean;
   onClose: () => void;
-  onDeleteItem: () => void;
+  handleDeleteItem?: () => void;
 }
 
 const ModalDeleteItem = ({
   isOpen,
   onClose,
-  onDeleteItem,
+  handleDeleteItem,
 }: IModalDeleteItem) => {
   return (
     <Modal
@@ -48,7 +48,9 @@ const ModalDeleteItem = ({
           variant="danger"
           size="lg"
           className="w-full"
-          onClick={() => onDeleteItem()}
+          onClick={() => {
+            handleDeleteItem && handleDeleteItem();
+          }}
         >
           Hapus Item
         </Button>

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

@@ -4,14 +4,14 @@ import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
 interface IModalEditItem {
   isOpen: boolean;
   onClose: () => void;
-  onEditItem: () => void;
+  handleEditItem?: () => void;
   currentStep?: number;
 }
 
 const ModalEditItem = ({
   isOpen,
   onClose,
-  onEditItem,
+  handleEditItem,
   currentStep = 1,
 }: IModalEditItem) => {
   return (
@@ -81,7 +81,7 @@ const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
         />
       </div>
 
-      <Button variant="primary" size="lg" className="w-full">
+      <Button variant="primary" size="lg" className="w-full" onClick={nextStep}>
         Perbarui Item
       </Button>
     </Modal.Content>
@@ -90,10 +90,11 @@ const StepOne = ({ nextStep, onClose }: IStepOneProps) => (
 
 interface IStepTwoProps {
   onClose: () => void;
+  handleEditItem?: () => void;
   resetStep: () => void;
 }
 
-const StepTwo = ({ onClose, resetStep }: IStepTwoProps) => (
+const StepTwo = ({ onClose, handleEditItem, resetStep }: IStepTwoProps) => (
   <>
     <Modal.Header className="mb-0 text-center items-center">
       <h2 className="text-p1 font-semibold text-primary-500 mb-3">
@@ -105,10 +106,22 @@ const StepTwo = ({ onClose, resetStep }: IStepTwoProps) => (
       </p>
     </Modal.Header>
     <Modal.Content className="flex gap-4">
-      <Button variant="bordered" size="lg" className="w-full" onClick={onClose}>
+      <Button
+        variant="bordered"
+        size="lg"
+        className="w-full"
+        onClick={resetStep}
+      >
         Batal
       </Button>
-      <Button variant="primary" size="lg" className="w-full">
+      <Button
+        variant="primary"
+        size="lg"
+        className="w-full"
+        onClick={() => {
+          handleEditItem && handleEditItem();
+        }}
+      >
         Update
       </Button>
     </Modal.Content>

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

@@ -161,16 +161,16 @@ export const Components: FC = (): ReactElement => {
       <ModalAddItem
         isOpen={showModalAddItem}
         onClose={() => setShowModalAddItem(false)}
-        onAddItem={() => {
+        handleAddItem={() => {
           console.log('Item added');
         }}
       />
 
-      {/* Modal Add Item */}
+      {/* Modal Edit Item */}
       <ModalEditItem
         isOpen={showModalEditItem}
         onClose={() => setShowModalEditItem(false)}
-        onEditItem={() => {
+        handleEditItem={() => {
           console.log('Item edited');
         }}
       />
@@ -179,7 +179,7 @@ export const Components: FC = (): ReactElement => {
       <ModalDeleteItem
         isOpen={showModalDeleteItem}
         onClose={() => setShowModalDeleteItem(false)}
-        onDeleteItem={() => {
+        handleDeleteItem={() => {
           console.log('Item deleted');
         }}
       />

apps/backoffice/src/app/prizes/_components/modal-process-item.tsx

@@ -4,10 +4,14 @@ import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
 interface IModalProcessDelivery {
   isOpen: boolean;
   onClose: () => void;
-  onProcessDelivery?: () => void;
+  handleProcessDelivery?: () => void;
 }
 
-const ModalProcessDelivery = ({ isOpen, onClose }: IModalProcessDelivery) => {
+const ModalProcessDelivery = ({
+  isOpen,
+  onClose,
+  handleProcessDelivery,
+}: IModalProcessDelivery) => {
   return (
     <Modal
       className="min-w-[400px] bg-primary-50 rounded-lg p-[40px] flex flex-col gap-8 text-center"
@@ -33,6 +37,7 @@ const ModalProcessDelivery = ({ isOpen, onClose }: IModalProcessDelivery) => {
             value="Ahmad Wiyana"
             size="lg"
             className="w-full"
+            readOnly
           />
           <InputForm
             label="Item yang didapatkan"
@@ -41,6 +46,7 @@ const ModalProcessDelivery = ({ isOpen, onClose }: IModalProcessDelivery) => {
             value="Lanyard + ID Card"
             size="lg"
             className="w-full"
+            readOnly
           />
           <InputForm
             label="Alamat Pengiriman"
@@ -49,6 +55,7 @@ const ModalProcessDelivery = ({ isOpen, onClose }: IModalProcessDelivery) => {
             value="Jl. Pantai Cibaduyut Indah"
             size="lg"
             className="w-full"
+            readOnly
           />
           <InputForm
             label="Status"
@@ -57,10 +64,16 @@ const ModalProcessDelivery = ({ isOpen, onClose }: IModalProcessDelivery) => {
             value="Lanyard + ID Card"
             size="lg"
             className="w-full"
+            readOnly
           />
         </div>
 
-        <Button variant="primary" size="lg" className="w-full">
+        <Button
+          variant="primary"
+          size="lg"
+          className="w-full"
+          onClick={() => handleProcessDelivery && handleProcessDelivery()}
+        >
           Proses Pengiriman
         </Button>
       </Modal.Content>

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

@@ -155,6 +155,7 @@ export const Components: FC = (): ReactElement => {
           variant="primary"
           size="sm"
           onClick={(e) => {
+            e.stopPropagation();
             setShowModalProcessDelivery(true);
           }}
           className="flex items-center gap-2 w-full"
@@ -227,8 +228,8 @@ export const Components: FC = (): ReactElement => {
       <ModalProcessDelivery
         isOpen={showModalProcessDelivery}
         onClose={() => setShowModalProcessDelivery(false)}
-        onProcessDelivery={() => {
+        handleProcessDelivery={() => {
-          console.log('Item added');
+          console.log('Action ketika user menekan tombol Proses Pengiriman');
         }}
       />
     </Fragment>

apps/backoffice/src/app/transactions/_components/modal-validate.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { InputForm, Modal } from '@imphnen-frontend-service/ui/molecules';
+
+interface IModalValidate {
+  isOpen: boolean;
+  onClose: () => void;
+  handleValid?: () => void;
+  handleInvalid?: () => void;
+}
+
+const ModalValidate = ({
+  isOpen,
+  onClose,
+  handleValid,
+  handleInvalid,
+}: IModalValidate) => {
+  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}
+    >
+      <Modal.Header className="mb-0 text-center items-center">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Validasi Transaksi
+        </h2>
+      </Modal.Header>
+      <Modal.Content className="flex flex-col gap-8">
+        <InputForm
+          label="Nomor Transaksi"
+          type="text"
+          placeholder="Masukkan Nomor Transaksi"
+          value="2502133Y9AFVBO"
+          size="lg"
+          className="w-full"
+        />
+        <div className="flex gap-4">
+          <Button
+            variant="bordered"
+            size="lg"
+            className="w-full border-danger-500 text-danger-500 hover:border-danger-700 hover:text-danger-700"
+            onClick={() => handleInvalid && handleInvalid()}
+          >
+            Tidak Valid
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={() => handleValid && handleValid()}
+          >
+            Valid
+          </Button>
+        </div>
+      </Modal.Content>
+    </Modal>
+  );
+};
+
+export default ModalValidate;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FC, ReactElement, useState } from 'react';
+import { FC, Fragment, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
@@ -16,6 +16,7 @@ import {
   useReactTable,
   RowSelectionState,
 } from '@tanstack/react-table';
+import ModalValidate from './_components/modal-validate';
 
 type TransactionStatus = 'valid' | 'invalid' | 'unchecked';
 
@@ -38,6 +39,17 @@ const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
     : 'valid') as TransactionStatus,
 }));
 
+export const Components: FC = (): ReactElement => {
+  const [showModalValidate, setShowModalValidate] = useState(false);
+
+  const [pagination, setPagination] = React.useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 9,
+  });
+
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
+
   const columns: ColumnDef<Transaction>[] = [
     {
       id: 'select',
@@ -102,7 +114,7 @@ const columns: ColumnDef<Transaction>[] = [
           size="sm"
           onClick={(e) => {
             e.stopPropagation();
-          // handleUpdate(row.id);
+            setShowModalValidate(true);
           }}
           className="flex items-center gap-2 w-full"
         >
@@ -112,15 +124,6 @@ const columns: ColumnDef<Transaction>[] = [
     },
   ];
 
-export const Components: FC = (): ReactElement => {
-  const [pagination, setPagination] = React.useState<PaginationState>({
-    pageIndex: 0,
-    pageSize: 9,
-  });
-
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
-  const [showFilter, setShowFilter] = useState(false);
-
   const table = useReactTable({
     data: mockTransactions,
     columns,
@@ -138,6 +141,7 @@ export const Components: FC = (): ReactElement => {
   });
 
   return (
+    <Fragment>
       <main className="w-full px-[48px] py-[40px] flex flex-col gap-8">
         {/* Header */}
         <header className="bg-white py-4 px-8 rounded-lg shadow p-4">
@@ -180,6 +184,17 @@ export const Components: FC = (): ReactElement => {
           <DataTable data={mockTransactions} columns={columns} table={table} />
         </section>
       </main>
+      <ModalValidate
+        isOpen={showModalValidate}
+        onClose={() => setShowModalValidate(false)}
+        handleValid={() => {
+          console.log('Action ketika user klik Valid');
+        }}
+        handleInvalid={() => {
+          console.log('Action ketika user klik Tidak Valid');
+        }}
+      />
+    </Fragment>
   );
 };